Html 5 :
<!DOCTYPE html>
<html>
<head>
<title>Grid4</title>
<link rel="stylesheet" type="text/css" href="grid4.css">
</head>
<body>
<main>
<div class="header">
<li>Home</li>
<li>About US</li>
<li>Contact</li></div>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
<div class="box3">Box3</div>
<div class="slider">Slider</div>
<div class="body">Main Content</div>
<div class="footer">Footer</div>
</main>
</body>
</html>
CSS3 :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main{
width: 90%;
margin: 50px auto;
/*border:1px solid black;*/
display: grid; color: white;
grid-template-rows: 60px 120px 230px 50px;
grid-template-columns: repeat(3, 1fr) 160px;
grid-gap: 20px;
}
.header{
background-color: #ff0000;
grid-column: 1/-1;
text-align: center;
}
.header li{
list-style: none;
display: inline-block;
padding: 10px 10px;
margin-top: 5px;
text-transform: uppercase;
font-weight: lighter;
color: white;
}
.box1{
background-color: #0000ff;
}
.box2{
background-color: #00bfff;
}
.box3{
background-color: #00ff40;
}
.slider{
background-color: black;
grid-row: 2/4;
grid-column: 4/5;
}
.body{
background-color: #ffbf00;
grid-column: 1/4;
}
.footer{
background-color: #8000ff;
grid-column: 1/-1;
} 9/07/2020
Comments
Post a Comment