Responsive Website Design code
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<title>web design</title>
</head>
<body>
<div class="header">
<h1>WebSites layout</h1>
<p>Resize the browser window to see the responsive effect</p>
</div>
<div class="topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About-us</a></li>
</ul>
</div>
<div class="row">
<div class="col-side">
<h1>Side</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="col-mid">
<h1>Main Content</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis</p>
</div>
<div class="col-side">
<h1>Side</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>
<div class="footer">Copyright not websites</div>
</body>
</html>
CSS STYLESHEET CODE
*{
box-sizing: border-box;
}
body{
margin:0px;
}
.header{
background-color: #f1f1f1;
padding:20px;
text-align: center;
}
.topnav{
overflow: hidden;
background-color: black;
}
.topnav li{
float: left;
}
.topnav a{
display: block;
padding:14px 16px;
color: #f2f2f2;
text-align: center;
text-decoration: none;
}
.row::after{
display: table;
clear: both;
content:"" ;
}
.col{
float: left;
padding:10px ;
}
.col-side{
width:25%;
}
.col-mid{
width: 50%;
}
No comments:
Post a Comment