HTML & CSS Project With Code

Project 1:

HTML Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>IT Computer Institute</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="container">

<div class="menu">

<h1 class="logo"> IT <span> Computer</span></h1>

<ul>

<li><a href="#"><i class="fa-solid fa-house"></i>Home </a> </li>

<li><a href="#"><i class="fa-regular fa-address-card"></i>About </a> </li>

<li><a href="#"><i class="fa-brands fa-servicestack"></i>Service </a> </li>

<li><a href="#"><i class="fa-solid fa-laptop-code"></i>Course <i class="fas fa-caret-down"></i> </a>

<div class="dropdown-menu">

<ul>

<li><a href="#">Basic </a> </li>

<li><a href="#">Diploma </a> </li>

<li><a href="#">Accounting </a> </li>

<li><a href="#">Web Design</a> </li>

</ul>

</div>

</li>

<li><a href="#"><i class="fa-solid fa-address-book"></i>Contact </a> </li>

<li><a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>Registration</a> </li>

<li><a href="#"><i class="fas fa-sign-in"></i>Log In</a> </li>

</ul>

</div>

<div class="mybody"></div>

<div class="footer"></div>

</div>

</body>

</html>

CSS Code :

margin: 0;

padding: 0;

box-sizing: border-box;

}

.mybody{

font-family: sans-serif;

}

.logo

{

color: white;

font-size: 25px;

}

.logo span{

color: red;

}

.menu{

background-color: black;

height: 50px;

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 5%;

}

.menu ul{

list-style: none;

display: flex;

}

.menu ul li{

padding: 5px 10px;

position: relative;

}

.menu ul li a{

color: white;

text-decoration: none;

font-size: 20px;

}

.menu ul li a:hover{

color: blueviolet;

}

.dropdown-menu{

display: none;

}

.menu ul li:hover .dropdown-menu{

display: block;

position: absolute;

left: 0px;

top: 100%;

background-color: black;

}

.dropdown-menu ul{

display: block;

margin: 10px;

}

.dropdown-menu ul li{

width: 100px;

padding: 5px;

}

.fas{

float: right;

margin-left: 10px;

padding-top: 3px;

}

.fa{

}

Download Code :

Project 2:

HTML Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>IT Computer Institute</title>

<link rel="stylesheet" type="text/css" href="style.css">

<link rel="icon" type="image/jpg" href="image/favicon.jpg">

</head>

<body>

<div id="fb-root"></div>

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0" nonce="hf8aGsth"></script>

<div class="container">

<div class="menu">

<h1 class="logo"> IT <span> Computer</span></h1>

<ul>

<li><a href="index.html"><i class="fa-solid fa-house"></i>Home </a> </li>

<li><a href="about.html"><i class="fa-regular fa-address-card"></i>About </a> </li>

<li><a href="service.html"><i class="fa-brands fa-servicestack"></i>Service </a> </li>

<li><a href="course.html"><i class="fa-solid fa-laptop-code"></i>Course <i class="fas fa-caret-down"></i> </a>

<div class="dropdown-menu">

<ul>

<li><a href="#">Basic </a> </li>

<li><a href="#">Diploma </a> </li>

<li><a href="#">Accounting </a> </li>

<li><a href="#">Web Design</a> </li>

</ul>

</div>

</li>

<li><a href="contact.html"><i class="fa-solid fa-address-book"></i>Contact </a> </li>

<li><a href="registration.html"><i class="fa fa-user-plus" aria-hidden="true"></i>Registration</a> </li>

<li><a href="login.html"><i class="fas fa-sign-in"></i>Log In</a> </li>

</ul>

</div>

<div class="mybody">

<div class="box1">

<div class="contact1">

<h3>Contact info</h3>

<p><i class="fa fa-map-marker"></i> 10901, ( Bhimsenchowk ), Tikapur, Kailali, Nepal</p>

<p><i class="fa fa-phone"></i> 091-561141</p>

<p><i class="fa fa-envelope"></i> <a href="mailto:sanjayit62@gmail.com">sanjayit62@gmail.com</a></p>

<p><i class="fa fa-phone"></i> 9848696020(Viber/WhatsApp)</p>

</div>

<div class="page">

<div class="fb-page" data-href="https://www.facebook.com/profile.php?id=61552778259479" data-tabs="timeline" data-width="300" data-height="900" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/profile.php?id=61552778259479" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/profile.php?id=61552778259479">ITComputerTraining Center</a></blockquote></div>

</div>

<div class="footer">

<div class="copy1">

</div>

<div class="web1">

<p>Developed & maintained by <a href="https://www.sanjay9848696020.com.np/" target="_blank">Technician Sanjay </a></p>

</div>

</body>

</html>

CSS Code :

margin: 0;

padding: 0;

box-sizing: border-box;

}

.mybody{

font-family: sans-serif;

}

.logo

{

color: white;

font-size: 25px;

}

.logo span{

color: red;

}

.menu{

background-color: black;

height: 50px;

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 5%;

}

.menu ul{

list-style: none;

display: flex;

}

.menu ul li{

padding: 5px 10px;

position: relative;

}

.menu ul li a{

color: white;

text-decoration: none;

font-size: 20px;

}

.menu ul li a:hover{

color: blueviolet;

}

.dropdown-menu{

display: none;

}

.menu ul li:hover .dropdown-menu{

display: block;

position: absolute;

left: 0px;

top: 100%;

background-color: black;

}

.dropdown-menu ul{

display: block;

margin: 10px;

}

.dropdown-menu ul li{

width: 100px;

padding: 5px;

}

.fas{

float: right;

margin-left: 10px;

padding-top: 3px;

}

.box1{

height: 250px;

width: 100%;

margin-top: 600px;

padding: 10px;

position: absolute;

background-color: LightGray;

}

.contact1{

line-height: 2;

}

.page{

margin-left: 550px;

margin-top: -167px;

padding: 0;

position: absolute;

}

.footer{

background-color:SlateGray;

padding: 15px;

height: 50px;

width: 100%;

margin-top: 800px;

position: absolute;

}

.copy1 {

margin-left: 5px;

position: absolute;

font-family: sans-serif;

}

.web1{

margin-left: 600px;

position: absolute;

font-family: sans-serif;

}

Project 3

HTML CODE

<!DOCTYPE html>

<html>

<head>

<title>IT Computer Institute</title>

</head>

<body>

<h1 class="logo"> IT <span> Computer</span></h1>

<ul>

<li><a href="about.html"><i class="fa-regular fa-address-card"></i>About </a> </li>

<li><a href="service.html"><i class="fa-brands fa-servicestack"></i>Service </a> </li>

<li><a href="course.html"><i class="fa-solid fa-laptop-code"></i>Course <i class="fas fa-caret-down"></i> </a>

<ul>

<li><a href="#">Basic </a> </li>

<li><a href="#">Diploma </a> </li>

<li><a href="#">Accounting </a> </li>

<li><a href="#">Web Design</a> </li>

</ul>

</div>

</li>

<li><a href="contact.html"><i class="fa-solid fa-address-book"></i>Contact </a> </li>

<li><a href="registration.html"><i class="fa fa-user-plus" aria-hidden="true"></i>Registration</a> </li>

</ul>

</div>

<h1> Registration Form</h1>

<form>

<span>

</span>

</div>

</div>

</div>

</div>

<label> Female</label>

</div>

<option> Select Your Country</option>

<option> Nepal</option>

<option> China</option>

<option> India</option>

<option> Bhutan</option>

</select>

</div>

<label > I accept the terms and condition</label>

</div>

</form>

</div>

<h3>Contact info</h3>

<p><i class="fa fa-map-marker"></i> 10901, ( Bhimsenchowk ), Tikapur, Kailali, Nepal</p>

<p><i class="fa fa-envelope"></i> <a href="mailto:sanjayit62@gmail.com">sanjayit62@gmail.com</a></p>

<p><i class="fa fa-phone"></i> 9848696020(Viber/WhatsApp)</p>

</div>

<div class="fb-page" data-href="https://www.facebook.com/profile.php?id=61552778259479" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/profile.php?id=61552778259479" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/profile.php?id=61552778259479">ITComputerTraining Center</a></blockquote></div>

</div>

</div>

<p>Developed & maintained by <a href="https://www.sanjay9848696020.com.np/" target="_blank">Technician Sanjay </a></p>

</div>

</body>

</html>

CSS CODE

margin: 0;

padding: 0;

box-sizing: border-box;

}

.mybody{

font-family: sans-serif;

}

.logo

{

color: white;

font-size: 25px;

}

.logo span{

color: red;

}

.menu{

background-color: black;

height: 50px;

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 5%;

}

.menu ul{

list-style: none;

display: flex;

}

.menu ul li{

padding: 5px 10px;

position: relative;

}

.menu ul li a{

color: white;

text-decoration: none;

font-size: 20px;

}

.menu ul li a:hover{

color: blueviolet;

}

.dropdown-menu{

display: none;

}

.menu ul li:hover .dropdown-menu{

display: block;

position: absolute;

left: 0px;

top: 100%;

background-color: black;

}

.dropdown-menu ul{

display: block;

margin: 10px;

}

.dropdown-menu ul li{

width: 100px;

padding: 5px;

}

.fas{

float: right;

margin-left: 10px;

padding-top: 3px;

}

.box1{

height: 250px;

width: 100%;

margin-top: 600px;

padding: 10px;

position: absolute;

background-color: LightGray;

}

.contact1{

line-height: 2;

}

.page{

margin-left: 674px;

margin-top: -155px;

padding: 7px;

position: absolute;

}

.footer{

background-color:SlateGray;

padding: 15px;

height: 50px;

width: 100%;

margin-top: 800px;

position: absolute;

}

.copy1 {

margin-left: 5px;

position: absolute;

font-family: sans-serif;

}

.web1{

margin-left: 600px;

position: absolute;

font-family: sans-serif;

}

.container1{

background-color: white;

width: 500px;

padding: 25px;

margin: 50px auto 0;

border-top: 5px solid blue;

box-shadow: 0 0 5px rgba(0, 0, 0, 1.0);

}

.container1 h1{

font-size: 24px;

line-height: 24px;

padding-bottom: 30px;

text-align: center;

}

.input-name{

width: 90%;

position: relative;

margin: 20px auto;

}

.lock{

padding: 8px 11px;

}

.name{

width: 45%;

padding: 8px 0 8px 40px;

}

.input-name span{

margin-left: 35px;

}

.text-name{

width: 100%;

padding: 8px 0 8px 40px;

}

.input-name i{

position: absolute;

font-size: 18px;

color:blue;

border-right: 1px solid #cccccc;

}

.email{

padding: 8px;

}

.text-name, .name{

border: 1px solid #cccccc;

outline: none;

}

.text-name:hover, .name:hover{

background-color: #fafafa;

}

.text-name:focus, .name:focus{

border: 1px solid blue;

}

.radio-button{

margin-left: 0px;

}

.country{

display: inline-block;

width: 100%;

height: 35px;

padding: 0px 15px;

cursor: pointer;

border: 1px solid #cccccc;

color: #7b7b7b;

border-radius: 0;

background: white;

appearance: none;

-webkit-appearance: none;

-moz-appearance: none;

}

.country::ms-expand{

display: none;

}

.country:hover, .country:focus{

color: blue;

background: #fafafa;

border-color: blue;

outline: none;

}

/*if border not showing then*/

/* For comment Press Ctrl+/ */

.arrow{

position: absolute;

top: calc(50%);

right: 15px;

width: 0;

height: 0;

pointer-events: none;

border-width: 8px 5px 0 5px;

border-style: solid;

border-color: blue transparent transparent transparent;

}

.button{

background-color: blue;

color: white;

height: 35px;

width: 100%;

margin-bottom: 25px;

line-height: 35px;

border: none;

outline: none;

font-size: 18px;

cursor: pointer;

}

.button:hover{

background: green;

}

/*For Responsive Website*/

@media (max-width: 480px)

{

.container1

{

width: 100%;

border: 1px solid darkred;

padding: 5px;

}

.input-name{

margin-bottom: -10px;

}

.name{

width: 100%;

padding: 8px 0 8px 40px;

margin-bottom: 10px;

}

.input-name span{

padding: 0px;

margin: 0;

}

.form-container{

width: 2px solid;

}

Project 4

HTML CODE

<!DOCTYPE html>

<html>

<head>

<title>IT Computer Institute</title>

</head>

<body>

<h1 class="logo"> IT <span> Computer</span></h1>

<ul>

<li><a href="about.html"><i class="fa-regular fa-address-card"></i>About </a> </li>

<li><a href="service.html"><i class="fa-brands fa-servicestack"></i>Service </a> </li>

<li><a href="course.html"><i class="fa-solid fa-laptop-code"></i>Course <i class="fas fa-caret-down"></i> </a>

<ul>

<li><a href="#">Basic </a> </li>

<li><a href="#">Diploma </a> </li>

<li><a href="#">Accounting </a> </li>

<li><a href="#">Web Design</a> </li>

</ul>

</div>

</li>

<li><a href="contact.html"><i class="fa-solid fa-address-book"></i>Contact </a> </li>

<li><a href="registration.html"><i class="fa fa-user-plus" aria-hidden="true"></i>Registration</a> </li>

</ul>

</div>

<h1> Login</h1>

<label>Username</label>

</div>

<label>Password</label>

</div>

<div class="pass"> Forget Password?</div>

For New User? <a href="registration.html">Signup</a>

</div>

<h3>Contact info</h3>

<p><i class="fa fa-map-marker"></i> 10901, ( Bhimsenchowk ), Tikapur, Kailali, Nepal</p>

<p><i class="fa fa-envelope"></i> <a href="mailto:sanjayit62@gmail.com">sanjayit62@gmail.com</a></p>

<p><i class="fa fa-phone"></i> 9848696020(Viber/WhatsApp)</p>

</div>

</div>

</div>

<p>Developed & maintained by <a href="https://www.sanjay9848696020.com.np/" target="_blank">Technician Sanjay </a></p>

</div>

</body>

</html>

CSS CODE

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mybody{
font-family: sans-serif;
}

.logo
{
color: white;
font-size: 25px;
}

.logo span{
color: red;
}

.menu{
background-color: black;
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%;
}

.menu ul{
list-style: none;
display: flex;
}

.menu ul li{
padding: 5px 10px;
position: relative;

}

.menu ul li a{
color: white;
text-decoration: none;
font-size: 20px;
}

.menu ul li a:hover{
color: blueviolet;
}

.dropdown-menu{
display: none;
}

.menu ul li:hover .dropdown-menu{
display: block;
position: absolute;
left: 0px;
top: 100%;
background-color: black;

}

.dropdown-menu ul{
display: block;
margin: 10px;

}

.dropdown-menu ul li{
width: 100px;
padding: 5px;
}

.fas{
float: right;
margin-left: 10px;
padding-top: 3px;
}

.box1{
height: 250px;
width: 100%;
margin-top: 600px;
padding: 10px;
position: absolute;
background-color: LightGray;

}

.contact1{
line-height: 2;
}

.page{
margin-left: 674px;
margin-top: -155px;
padding: 7px;
position: absolute;
}

.footer{
background-color:SlateGray;
padding: 15px;
height: 50px;
width: 100%;
margin-top: 800px;
position: absolute;
}

.copy1 {
margin-left: 5px;
position: absolute;
font-family: sans-serif;
}

.web1{
margin-left: 600px;
position: absolute;
font-family: sans-serif;
}

.container1{
background-color: white;
width: 500px;
padding: 25px;
margin: 50px auto 0;
border-top: 5px solid blue;
box-shadow: 0 0 5px rgba(0, 0, 0, 1.0);
}

.container1 h1{
font-size: 24px;
line-height: 24px;
padding-bottom: 30px;
text-align: center;
}

.input-name{
width: 90%;
position: relative;
margin: 20px auto;
}

.lock{
padding: 8px 11px;
}

.name{
width: 45%;
padding: 8px 0 8px 40px;
}

.input-name span{
margin-left: 35px;

}

.text-name{
width: 100%;
padding: 8px 0 8px 40px;

}

.input-name i{
position: absolute;
font-size: 18px;
color:blue;
border-right: 1px solid #cccccc;
}

.email{
padding: 8px;
}

.text-name, .name{
border: 1px solid #cccccc;
outline: none;
}

.text-name:hover, .name:hover{
background-color: #fafafa;
}

.text-name:focus, .name:focus{
border: 1px solid blue;
}

.radio-button{
margin-left: 0px;
}

.country{
display: inline-block;
width: 100%;
height: 35px;
padding: 0px 15px;
cursor: pointer;
border: 1px solid #cccccc;
color: #7b7b7b;
border-radius: 0;
background: white;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.country::ms-expand{
display: none;
}

.country:hover, .country:focus{
color: blue;
background: #fafafa;
border-color: blue;
outline: none;
}
/*if border not showing then*/
/* For comment Press Ctrl+/ */
.arrow{
position: absolute;
top: calc(50%);
right: 15px;
width: 0;
height: 0;
pointer-events: none;
border-width: 8px 5px 0 5px;
border-style: solid;
border-color: blue transparent transparent transparent;
}

.button{
background-color: blue;
color: white;
height: 35px;
width: 100%;
margin-bottom: 25px;
line-height: 35px;
border: none;
outline: none;
font-size: 18px;
cursor: pointer;

}

.button:hover{
background: green;
}

/*For Responsive Website*/

@media (max-width: 480px)
{
.container1
{
width: 100%;
border: 1px solid darkred;
padding: 5px;
}
.input-name{
margin-bottom: -10px;
}
.name{
width: 100%;
padding: 8px 0 8px 40px;
margin-bottom: 10px;
}

.input-name span{
padding: 0px;
margin: 0;
}
.form-container{
width: 2px solid;
}
}

.login{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: white;
border-radius: 10px;
}

.login h1{
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}

.login form{
padding: 0 40px;
box-sizing: border-box;
}

form .txt-field{
position: relative;
border-bottom:2px solid #adadad;
}

.txt-field input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}

.txt-field label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}

.txt-field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 20;
background: 2691d9;
}

.txt-field input:focus ~ label,
.txt-field input:valid ~ label
{
top: 8px;
color: #2691d9;
}

.pass{
margin: 10px 0 20px 5px;
color: #a6a6a6;
}

.pass:hover{
text-decoration: underline;
cursor: pointer;
}

input[type="submit"]{
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
border-radius: 20px;
font-size: 18px;
color: #e9f4fb;
font-weight: 700px;
cursor: pointer;
outline: none;
}

input[type="submit"]:hover{
border-color: #2691d9;
transition: .5s;
}

.signup-link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}

.signup-link a{
color: #2691d9;
text-decoration: none;
}

.signup-link a:hover{
text-decoration: underline;

}

Responsive Nav Bar

HTML CODE:

<!DOCTYPE html>
<html lang="en-US" oncontextmenu="return false">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IT Computer</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fa-solid fa-bars"></i>
</label>
<label class="logo"> IT Computer</label>

<ul>
<li> <a class="active" href="#">Home </a></li>
<li> <a href="#">About</a></li>
<li> <a href="#">Services </a></li>
<li> <a href="#">Contact </a></li>
<li> <a href="#">Course</a></li>
</ul>
</nav>
</body>
</html>

CSS CODE:

*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
}
nav{
background: #0082e6;
height: 80px;
width: 100%;

}

label.logo{
color: white;
font-weight: bold;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
}
nav ul{
float: right;
margin-right: 20px;
}

nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}

nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;

}

a.active,a:hover{
background: #1b9bff;
}

.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}

#check{
display: none;
}

@media (max-width: 952px) {
lebel.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}

@media (max-width: 858px) {
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #0082e6;

}
#check:checked ~ ul{
left: 0;

}

}

HTML & CSS Project With Code