How to design webpage using HTML And CSS
<!DOCTYPE html>
<head>
<title>Java Basics</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header,.footer {
background-color: yellow;
padding: 10px;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: LightGreen;
padding: 10px;
}
.topnav a {
float: right;
display: block;
color: red;
padding: 10px 10px;
}
.topnav a:hover {
background-color: yellow;
color: blue;
}
.column.left,.column.right {
text-align: left;
float: left;
width: 20%;
padding: 70px;
background-color: HotPink;
}
.column.middle {
text-align: center;
float: left;
width: 60%;
padding: 70px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h2>Header</h2>
</div>
<div class="topnav">
<a href="#">Home</a>
<a href="#">AboutUs</a>
<a href="#">ContactUs</a>
</div>
<div class="row">
<div class="column left">
<h2>Left</h2>
<p>Please Subscribe The Java Basics Channel And Press The Bell Icon for latest updates.</p>
<p>Please Subscribe The Java Basics Channel And Press The Bell Icon for latest updates.</p>
</div>
<div class="column middle">
<h2>Body</h2>
</div>
<div class="column right">
<h2>Right</h2>
<p>Please Subscribe The Java Basics Channel And Press The Bell Icon for latest updates.</p>
<p>Please Subscribe The Java Basics Channel And Press The Bell Icon for latest updates.</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
<head>
<title>Java Basics</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header,.footer {
background-color: yellow;
padding: 10px;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: LightGreen;
padding: 10px;
}
.topnav a {
float: right;
display: block;
color: red;
padding: 10px 10px;
}
.topnav a:hover {
background-color: yellow;
color: blue;
}
.column.left,.column.right {
text-align: left;
float: left;
width: 20%;
padding: 70px;
background-color: HotPink;
}
.column.middle {
text-align: center;
float: left;
width: 60%;
padding: 70px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h2>Header</h2>
</div>
<div class="topnav">
<a href="#">Home</a>
<a href="#">AboutUs</a>
<a href="#">ContactUs</a>
</div>
<div class="row">
<div class="column left">
<h2>Left</h2>
<p>Please Subscribe The Java Basics Channel And Press The Bell Icon for latest updates.</p>
<p>Please Subscribe The Java Basics Channel And Press The Bell Icon for latest updates.</p>
</div>
<div class="column middle">
<h2>Body</h2>
</div>
<div class="column right">
<h2>Right</h2>
<p>Please Subscribe The Java Basics Channel And Press The Bell Icon for latest updates.</p>
<p>Please Subscribe The Java Basics Channel And Press The Bell Icon for latest updates.</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
Comments
Post a Comment