TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Ahoj, potřeboval bych pomoci s css kodem, nevim za prvé a moc nechápu, proč autor dal např. id="boxes", pak třídu .container a pak třídu box. To je jedna věc, jaký to má význam, když boxes mají šířku 100%, .container:width 80% a trida class=box by mela mit take sirku pres celou stranku, tedy 100% ,ale takhle ma jen 80%.
Prikladam kod: jedna se o html<!-- boxes -->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
*{
box-sizing:border-box;
}
body {font-family: Arial, Arial, Helvetica, sans-serif;
font-size:16px;
line-height:1.5;
margin:0;
padding:0;
}
.container{
margin:0 auto;
width:80%;
}
.container h3{color:azure;
font-size:22px;
text-align:center;
}
header{background-color: darkgrey;
color: floralwhite;
min-height:100px;
padding-top:30px;
border-bottom:3px solid brown;
margin-bottom:0px;
}
header a {text-decoration:none;
text-transform:uppercase;
font-size:16px;
color:white;
}
ul {margin: 0;
padding:0;
}
header li {float:left;
display:inline;
padding:0 20px 0 20px;
}
header .branding {float:left;
}
header .branding h1 {margin-top:5px;
}
header nav {float:right;
margin-top:30px;
}
header .highlight, header .current a{
color:brown;
font-weight:bold;
}
header a:hover { color:brown;
font-weight:bold;
}
#showcase {margin:0px;
min-height: 400px;
background-image: linear-gradient(90deg,black, brown);
padding:0px;
margin-bottom:0px;
border-bottom:3px solid brown;
}
#showcase h1{font-size:55px;
color:white;
margin-top:0px;
margin-bottom:0px;
padding-top:130px;
text-align:center;
}
#showcase p {margin-top:5px;
font-size:19px;
color:white;
text-align:center;
}
#newsletter {marging-top:0px;
padding:15px;
color: black;
background-color:white;
min-height:110px;
}
#newsletter h1{float:left;
color:black;
}
#newsletter form {float:right;
margin-top:15px;
}
#newsletter input[type="email"]{
padding:14px;
height:25px;
}
.button1{height:38px;
background:black;
border:none;
color:white;
}
#boxes{
text-align: center;
}
#boxes .box { float:left;
width:
background-color: darkgrey;
}
.box h3 {color:azure;
}
.box img { width:110px;
padding-top:10px;
}
footer { clear:both;
background-color:black;
color:brown;
text-align:center;
height: 110px;
padding-top: 15px;
}
</style>
</head>
<body>
<!-- header -->
<header>
<div class="container">
<div class="branding">
<h1><span class="highlight">Label</span> Web Design</h1>
</div>
<nav>
<ul>
<li class="current"><a rel="nofollow" href="home.html">Home</a></li>
<li><a rel="nofollow" href="about.html">About</a></li>
<li><a rel="nofollow" href="services.html">Services</a></li>
</ul>
</nav>
</div>
</header>
<!-- showcase -->
<section id="showcase">
<div class="container">
<h1>Sample of H1 </h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<h3>Where does it come from? </h3>
</div>
</section>
<!-- e-mail -->
<section id="newsletter">
<div class="container">
<h1>Subscribe our e-mail:</h1>
<form>
<input type="email" placeholder="Enter valid e-mail.." />
<button class="button1" type="submit" value="Submit">Subscribe</button>
</form>
</div>
</section>
<!-- boxes -->
<section id="boxes">
<div class="container">
<div class="box">
<img src="square.jpg" alt="create img folder and paste your .jpg .png,change img name" />
<h3>Article one</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
</div>
<div class="box">
<img src="square.jpg" alt="create img folder and paste your .jpg .png ,change img name" />
<h3>Article two</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
</div>
<div class="box">
<img src="square.jpg" alt="create img folder and paste your .jpg .png ,change img name" />
<h3>Article three</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
</div>
</div>
</section>
<!-- footer -->
<footer>
<p>Label Web desing, copyright @, 2019</p>
</footer>
</body>
</html>
Nahlásit jako SPAM
IP: 212.4.155.–
Návštěvník
Zjistit počet nových příspěvků
