I am begginer web developer, for moment i am using just HTML and CSS, after i control good these, i will try JavaScript, so, lets go: I have a problem.. I am working at websites, i create some for myself. I am working on my laptop in VSCode, after i make my site, i go to stylizing him and after i make this after my pleasure, when i minimize google, it doesnt keep his resolution. this is full screen on google chrome. And this is google chrome minimized. What could i do for websites keep his style as i put him in full screen?
I POST ALL SOURCE CODE, I DONT EXPECT ANYTHING! HTML+CSS
<!--HTML SOURCE--!>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title> </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
</head>
<header>
<div class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="/PROJECT PAGE/proiecte.html">Proiecte</a></li>
<li><a href="/STAFF PAGE/staff.html">Staff</a></li>
<li><a href="/CONTACT PAGE/contact.html">Contact</a></li>
</ul>
<img class="background" src="casey-horner-O0R5XZfKUGQ-unsplash.jpg">
</div>
</header>
<body>
<h1 class="titlu"> Titlu </h1>
<div>
<img class="h" src="Other-html-5-icon.png">
<img class="c" src="CSS.png">
</div>
<div class="cards">
<img class="x" src="pngegg.png">
<img class="y" src="pngegg.png">
<img class="z" src="pngegg.png">
</div>
<div class="faicon">
<i class="fa fa-line-chart" aria-hidden="true"></i>
</div>
<div class="textfaicon">
<h1> Economisire </h1>
<p><b>Economisesti timp si mai ales,<br>
economisesti bani! Cat astepti sa<br>
cauti o echipa care sa iti poata <br>
crea site-ul dorit, noi iti suntem<br>
aproape. Cerem foarte putin pentru<br>
serviciile pe care le oferim!</b>
</p>
</div>
</body>
</html>
/* CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
body{
margin: 0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
}
* {
box-sizing:
border-box;
}
.background {
position: absolute;
width: 100%;
height: 120%;
padding-left: 0%;
padding-bottom: 10%;
-webkit-filter: brightness(50%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.titlu{
position: relative;
color: white;
padding-left: 45%;
padding-top: 15%;
font-size: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(31, 37, 77);
opacity: 100%;
letter-spacing: 2px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: block;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #0c3a55;
}
.h{
position: relative;
height: 300px;
width: 300px;
bottom: -270px;
margin-bottom: 10%;
padding: 0%;
left: 8%;
}
.c{
position: relative;
height: 300px;
width: 220px;
bottom: -100px;
margin-bottom: 0%;
padding: 0%;
left: 50%;
}
.x{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.y{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.z{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.cards{
position: relative;
bottom: -150px;
left: 13%;
padding: 0%;
margin: 0%;
width: 200;
}
.faicon{
position: relative;
text-align: center;
right: 2%;
bottom: 290px;
font-size: 40px;
}
.textfaicon{
text-align: center;
position:relative;
color:#0c3a55;
font-size: 10px;
bottom: 280px;
right: 2%;
letter-spacing: 2px;
}
Aucun commentaire:
Enregistrer un commentaire