Practice HTML commands with CSS try
them with various values, make your
basic own Webpage
Practice HTML commands with CSS:-
<!DOCTYPE html>
<html>
<head>
<title>GIST</title>
<style>
.head1 {
font-size:40px;
color:#009900;
font-weight:bold;
}
.head2 {
font-size:17px;
margin-left:10px;
margin-bottom:15px;
}
body {
margin: 0 auto;
background-position:center;
background-size: contain;
}
.menu {
position: sticky;
top: 0;
background-color: #009900;
padding:10px 0px 10px 0px;
color:white;
margin: 0 auto;
overflow: hidden;
}
.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.menu-log {
right: auto;
float: right;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.body_sec {
margin-left:20px;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<div class="head1">Global Institute of Science &
Technology</div>
<div class="head2">Approved By AICTE & Affiliated To
WBSCTVESD (Formerly known as WBSCTE ) </div>
</header>
<!-- Menu Navigation Bar -->
<div class="menu">
<a href="#home">HOME</a>
<a href="#about">ABOUT</a>
<a href="#contact">CONTACT</a>
<div class="menu-log">
<a href="#login">LOGIN</a>
</div>
</div>
<!-- Body section -->
<div class = "body_sec">
<section id="Content">
<h3>About</h3>
<p>To impart value based education embedded with
interdisciplinary knowledge, holistic human values and professional
ethics among the young aspirants of society for becoming techno
crafts to meet the challenges across the globe.
</p>
<ul>
<li><a href="#">Lights up a dream when there
is intimidating darkness.</a></li>
<li><a href="#">Paves the path when the Star
is lost.</a></li>
<li><a href="#">Emerges as VICTORS amidst
threatening wilderness.</a></li>
</ul>
</section>
</div>
<!-- Footer Section -->
<footer>Footer Section</footer>
</body>
</html>
Output of the above HTML and CSS Code:-
