HTML-CSS based basic template

      No Comments on HTML-CSS based basic template

This HTML-CSS based basic template is built in HTML and CSS. It uses basic styling techniques. This will be helpful in learning, how to built websites. It uses CSS float framework.

Code:

<html>
<head>
<style>
header
{
 background-color:blue;

 }
body
{
padding:0px;
margin:0px;
}
.hello a
{
color:white;
margin:2px 15px;
text-decoration:none;
}
.hello li
{
 float:right;
 display:inline;
 list-style-type:none;
}
.hello
{
margin-right:5%;
}
.form2
{
  text-align:center;
padding:20px;
  }
.form1 input
{
  width:50%;
  height:35px;
  border-radius:2px;
  border:solid 2px black;
  background-color:lightgray;
  margin:20px 0px 0px 0px;
}
img
{
 display:inline;
 float:left;
 margin:2px 2% 10px 2%;
 
}
.button1
{
 border:solid 2px yellow;
 height:33px;
 width:80px;
 border-radius:2px;
 background-color:yellow;
 color:blue;
 margin-left:0px;
}
nav{
background-color:yellow;;
padding:5px;
}
.navigation li
{
list-style-type:none;
display:inline;
margin:0px 80px;
}
.navigation a
{
text-decoration:none;
color:black;
font-size:15px;
text-transform:uppercase;
font-weight:bold;

}
.navigation a:hover
{
color:red;
text-decoration:underline;

}
.lapi
{
 margin:5px 20px;
 border:solid 1px black;
 width:200px;
 background-color:#f2f2f2;
}
.lapi1 li
{
list-style-type:none;
padding:10px;
}
.lapi a
{
text-decoration:none;
font-size:20px;
font-weight:bold;
color:black;
}
.lapi a:hover
{
 color:red;
 font-size:22px;
}

footer
{
background-color:#404040;
padding:40px 10px 50px 10px;
}

footer p
{
 color:white;
 font-size:18px;
 margin:0px 50px;
 float:left;

}
footer a
{
 text-decoration:none;
 font-size:18px;
 color:yellow;
 
}
footer li
{
 list-style-type:none;
 margin:5px 0px;
}
footer ul
{
 margin:0px 100px;
 display:block;
 float:left;
 width:300px;
}

footer input
{
height:35px;
width:250px;
border:solid 3px yellow;
border-radius:10px;
}
footer h4
{
 color:white;
 font-size:18px;
 text-transform:uppercase;
 margin:5px 0px;
}
</style>
</head>
<body>
<header>

<ul class="hello">
<li><a href="http://www.scanfcode.com">Login</a></li>
<li><a href="http://www.scanfcode.com">Sign up</a></li>
</ul>
<br>
<div class="form2">

<img src="scanfcode.png" height="60" width="60" alt="HTML-CSS based basic template">
<form class="form1">
<input type="text" placeholder="search">
<button type="submit" class="button1">Search</button>
</form>
</div>
</header>
<nav>
<ul class="navigation">
<li><a href=http://www.scanfcode.com">C++</a></li>
<li><a href=http://www.scanfcode.com">Java</a></li>
<li><a href=http://www.scanfcode.com">android</a></li>
<li><a href=http://www.scanfcode.com">php</a></li>
<li><a href=http://www.scanfcode.com">.net</a></li>
<li><a href=http://www.scanfcode.com">css</a></li>
</ul>

</nav>
<div class="lapi">
<ul class="lapi1">
<li><a href=http://www.scanfcode.com">C++</a></li>
<li><a href=http://www.scanfcode.com">Java</a></li>
<li><a href=http://www.scanfcode.com">android</a></li>
<li><a href=http://www.scanfcode.com">php</a></li>
<li><a href=http://www.scanfcode.com">.net</a></li>
<li><a href=http://www.scanfcode.com">css</a></li>
</ul>
</div>

<footer>
<p>First webpage using html and css.<br>Welcome to scanfcode.</p>
<ul>
<h4>Quick links</h4>
<li><a href=http://www.scanfcode.com">About us</a></li>
<li><a href=http://www.scanfcode.com">Contact us</a></li>
<li><a href=http://www.scanfcode.com"> Privacy Policy</a></li>
<li><a href=http://www.scanfcode.com">Sitemap</a></li>
</ul>
<form>
<h4>Give Feedback</h4>
<input type="text" placeholder="Send feedback"/>
<br><br>
<button type="submit" class="button1">Submit</button>
</form>
</footer>
</body>
</html>

Try it yourself

View Page

HTML-CSS based basic template

Leave a Reply

Your email address will not be published. Required fields are marked *