Responsive Web Page - Full Example 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">
<script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>Html Form</title>
</head>
<body style="font-family: Verdana, Geneva, Tahoma, sans-serif;color: #aaaa;">
<div style="background-color:#e5e5e5e5;padding:15px;text-align: center;">
<h2>Hello World</h2>
</div>
<div style="overflow:auto;">
<div class="meun">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
<div class="main">
<h2>Lorem ipsum </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat</p>
</div>
<div class="right">
<h2>About-us</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
</div>
<div style="background-color:#e5e5e5e5;padding:10px;margin-top:7px;text-align: center;">Web design Channels</div>
</body>
</html>
CSS STYLESHEET CODE
*{
box-sizing: border-box;
}
.meun{
float: left;
width:20%;
text-align: center;
}
.meun a{
background-color: #e5e5e5e5;
display: block;
width:100%;
color: #000;
padding:8px;
margin-top:7px;
}
.main{
float: left;
width:60%;
padding:0 20px;
}
.right{
float:left;
background-color:#e5e5e5e5;
width:20% ;
padding:15px;
margin-top:7px;
text-align: center;
}
No comments:
Post a Comment