Click here to watch the tutorial on youtube.
index.html File
<!DOCTYPE html>
<html>
<head>
<title>Our home page</title>
<style>
*{margin:0px; padding:0px; }
body, html{height:100%; color:black;line-height:1.8 ;}
#menu{position:fixed; top: 0px; background:#526687 ; width:100%; padding:5px; overflow:auto;}
#menu ul li{list-style-type:none; float:left; padding:5px;color: white; font-size:20px; }
#menu ul li:hover{background:#efefef; }
#menu ul li a:hover{color:black;}
#menu ul li a{color:white; text-decoration:none; }
.home-top{background-image: url("image.jpg"); height:100% ;
background-position: center ;
background-repeat: no-repeat;
background-size: cover ;
}
.inputfield{widht:100%; height:45px; font-size:20px; padding:0px 5px;
border-radius:5px; }
.button{border:none; border-radius:3px; background:#526687 ;color:white; width:70px; height:40px;}
.button:hover{background:#efefef; color:black; }
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#home-top">Home</a></li>
<li><a href="#about us">About us</a></li>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#Contact us">Contact us</a></li>
</ul>
<a href="#" style="float:right;padding:5px; margin-right:10px; color:white;">Login</a>
</div>
<div class="home-top" id="home-top">
<h2 style="color:white; margin-top:50px; padding-top:20px; font-family:bold;text-align:center"> Computer Master </h2>
<p style="padding:20px ; text-align:center; color:white;">
Welcome to our website Welcome to our website Welcome to our website Welcome to our website</p>
</div>
<div id="about us" style="height:500px; width:100%; overflow:auto; ">
<div id="container" style="width:80%; margin:0px auto;"><h2 style="text-align:center; border-bottom:2px solid black; ">About us</h2>
<p style="padding:20px; text-align:center">
The website is produced by the team of computer master
The website is produced by the team of computer master
The website is produced by the team of computer master
The website is produced by the team of computer master
The website is produced by the team of computer master
The website is produced by the team of computer master
The website is produced by the team of computer master
</p>
<hr><br><br>
<p>
<img src="cm.png" style="width:150px; float:left; margin-right:20px; " />
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
</p>
</div>
</div>
<div id="introduction" style="height:500px; border:1px solid #efefef;">
<div id="container" style=" width:80%; margin:0px auto;">
<h2 style="text-align:center; border-bottom:2px solid black; ">Introduction</h2>
<p style="padding:20px; text-align:center">
Our website is going to produce alot of tutorials about web development as well as dekstop application
in java c++ and many other programming languages.
</p>
<br><br>
</div>
</div>
<div id="Contact us" style="height:500px; ">
<div id="container" style=" width:80%; margin:0px auto;">
<h2 style="text-align:center; border-bottom:2px solid black; ">Contact us</h2>
<p> We'd love to take your feedback and if you have any problem contact us using the form
given below fill in all the required field.</p>
<form method="post">
Name :<br>
<input type="text" placeholder="Insert your name" class="inputfield" /><br><br>
User Name:<br>
<input type="text" placeholder="Insert your user Name" class="inputfield"/><br><br>
<input type="password" placeholder="password" class="inputfield" /><br><br>
<input type="submit" class="button" value="Submit" />
</form>
</div>
</div>
<div id="footer" style="height:100px; background:#426677">
<p align="center"><button onclick=location.href="#home-top" style="margin:10px; width:90px; height:40px; border:none; "> To top</button></p>
<p style="text-align:center;color:white; font-family:bold; font-size:17px; "> Powered by computer master </p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Our home page</title>
<style>
*{margin:0px; padding:0px; }
body, html{height:100%; color:black;line-height:1.8 ;}
#menu{position:fixed; top: 0px; background:#526687 ; width:100%; padding:5px; overflow:auto;}
#menu ul li{list-style-type:none; float:left; padding:5px;color: white; font-size:20px; }
#menu ul li:hover{background:#efefef; }
#menu ul li a:hover{color:black;}
#menu ul li a{color:white; text-decoration:none; }
.home-top{background-image: url("image.jpg"); height:100% ;
background-position: center ;
background-repeat: no-repeat;
background-size: cover ;
}
.inputfield{widht:100%; height:45px; font-size:20px; padding:0px 5px;
border-radius:5px; }
.button{border:none; border-radius:3px; background:#526687 ;color:white; width:70px; height:40px;}
.button:hover{background:#efefef; color:black; }
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#home-top">Home</a></li>
<li><a href="#about us">About us</a></li>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#Contact us">Contact us</a></li>
</ul>
<a href="#" style="float:right;padding:5px; margin-right:10px; color:white;">Login</a>
</div>
<div class="home-top" id="home-top">
<h2 style="color:white; margin-top:50px; padding-top:20px; font-family:bold;text-align:center"> Computer Master </h2>
<p style="padding:20px ; text-align:center; color:white;">
Welcome to our website Welcome to our website Welcome to our website Welcome to our website</p>
</div>
<div id="about us" style="height:500px; width:100%; overflow:auto; ">
<div id="container" style="width:80%; margin:0px auto;"><h2 style="text-align:center; border-bottom:2px solid black; ">About us</h2>
<p style="padding:20px; text-align:center">
The website is produced by the team of computer master
The website is produced by the team of computer master
The website is produced by the team of computer master
The website is produced by the team of computer master
The website is produced by the team of computer master
The website is produced by the team of computer master
The website is produced by the team of computer master
</p>
<hr><br><br>
<p>
<img src="cm.png" style="width:150px; float:left; margin-right:20px; " />
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
This is computer master profile
</p>
</div>
</div>
<div id="introduction" style="height:500px; border:1px solid #efefef;">
<div id="container" style=" width:80%; margin:0px auto;">
<h2 style="text-align:center; border-bottom:2px solid black; ">Introduction</h2>
<p style="padding:20px; text-align:center">
Our website is going to produce alot of tutorials about web development as well as dekstop application
in java c++ and many other programming languages.
</p>
<br><br>
</div>
</div>
<div id="Contact us" style="height:500px; ">
<div id="container" style=" width:80%; margin:0px auto;">
<h2 style="text-align:center; border-bottom:2px solid black; ">Contact us</h2>
<p> We'd love to take your feedback and if you have any problem contact us using the form
given below fill in all the required field.</p>
<form method="post">
Name :<br>
<input type="text" placeholder="Insert your name" class="inputfield" /><br><br>
User Name:<br>
<input type="text" placeholder="Insert your user Name" class="inputfield"/><br><br>
<input type="password" placeholder="password" class="inputfield" /><br><br>
<input type="submit" class="button" value="Submit" />
</form>
</div>
</div>
<div id="footer" style="height:100px; background:#426677">
<p align="center"><button onclick=location.href="#home-top" style="margin:10px; width:90px; height:40px; border:none; "> To top</button></p>
<p style="text-align:center;color:white; font-family:bold; font-size:17px; "> Powered by computer master </p>
</div>
</body>
</html>
No comments:
Post a Comment