Pages

Friday, January 18, 2019

Drop down menu source code

Preview

Codes



<!doctype html>
<html>
<style>
*{
margin:0px;
padding:0px;
font-family:helvetica; 
}
.menu{
background:#333;
overflow:hidden; 
}
.menu a{
color:white; 
padding:14px 16px; 
float:left; 
text-decoration:none;  
font-size:20px;  
}
.dropdown{
float:left; 
overflow:hidden; 
}
.button{
background:#333;
color:white;
font-size:20px; 
padding:14px 16px ; 
border:none; 
}
.menu a:hover, .button:hover{
background:#dfdfdf; 
color:black;  
}
.drop-content{ 
display:none; 
position:absolute; 
background:#dfdfdf;
min-width:160px; 
box-shadow:0px 8px 16px 0px #333; 
z-index:1 ; 
}
.drop-content a{
color:black; 
float:none; 
display:block; 
text-decoration:none; 
padding:10px 10px; 
}
.drop-content a:hover{
background:#afafaf; 
}
.dropdown:hover .drop-content{
display:block; 
}
</style>
<body>
<div class="menu">
<a href="#">Home</a>
<a href="#">Item 1</a>
<a href="#">item 2</a>
<a href="#">item 3</a>
<div class="dropdown">
<button class="button">Drop</button>
<div class="drop-content">
<a href="#">drop item 1</a>
<a href="#">drop item 2</a>
<a href="#">drop item 3</a>
<a href="#">drop item 4</a>
<a href="#">drop item 5</a>
</div>
</div>
<a href="#" style="float:right;">item 3</a>
</div>
</body>
</html>
Posted by at 2 comments:
Labels: , ,

Article sharing web page/template


Preview




Codes


<!doctype html>
<html>
<head>
<style>
*{
margin:0px;
padding:0px;
font-family:helvetica;
}
p, a, h1, h2, h3{
margin:10px 0px;
}
.container{
box-shadow:2px 5px 20px #333;
width:80%;
margin:2% auto;
border-radius:10px;
overflow:auto;
background:white;
}
.header{
padding:4% 0%;
background: #32512d;
color:white;
}
.menu{
overflow:hidden;
background:#21381e;
}
.menu a{
display:inline-block ;
color:white;
text-decoration:none;
padding:2% 2% ;
margin:0px;
}
.menu a:hover{
background:#dfdfdf;
color:black;
}
.content{
overflow:auto;
}
.left-col{
width:28% ;
padding:1%;
}
.left-col a{
display:block ;
}
.left-col, .right-col{
overflow:auto;
float:left;
}
.right-col{
width:67% ;
padding:1%;
border-left:1px solid #dfdfdf;
}
.footer{
background: #32512d;
color:white;
padding:1%;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 align="center">Computer Master</h1>
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">item 1</a>
<a href="#">contact us</a>
<a href="#">about us</a>
<a href="#" style="float:right">Log out</a>
</div>
<div class="content">
<div class="left-col">
<h2 align="center">More Posts</h2>
<a href="#"> This is post 1, click and you will see post 1 content</a>
<a href="#"> This is post 1, click and you will see post</a>
<a href="#"> This is post 1, click and you will see post</a>
<a href="#"> This is post 1, click and you will see post</a>
</div>
<div class="right-col">
<h2 align="center">Title of the post</h2>
<h3>Subtitle 1</h3>
<p> This is just a simple web page in which
    you can share your personal daily life articles
This is just a simple web page in which
    you can share your personal daily life articles
This is just a simple web page in which
    you can share your personal daily life articles
This is just a simple web page in which
    you can share your personal daily life articles

</p>

<h3>Subtitle 2</h3>
<p> This is just a simple web page in which
    you can share your personal daily life articles
This is just a simple web page in which
    you can share your personal daily life articles
This is just a simple web page in which
    you can share your personal daily life articles
This is just a simple web page in which
    you can share your personal daily life articles

</p>

<!-- end of right-col-->
</div>
<!-- end of content -->
</div>
<div class="footer">
<p align="center">Powered By Computer Master</p>
</div>
<!-- end of container -->
  </div>
</body>
</html>
Posted by at No comments:
Labels: , ,

Wednesday, January 9, 2019

Making of professional navigation/menu in a website HTML/CSS


menu.html


 <!doctype html>
<html>

 <style>
*{
   margin:0px;
   padding:0px;
   font-family:helvetica;
}
.menu{
   background:#333; 
   overflow:hidden;
}
.menu a{
   color:white;
   text-decoration:none;
   float:left;
   padding:14px 16px;
   font-size:20px;
}
.menu a:hover{
   background:#dfdfdf;
   color:#333;
}
.menu .active{
   background:#4CAF50;
}
</style>
<body>
   <div class="menu">
     <a href="#">Home</a>
     <a href="#" class="active">item 1</a>
     <a href="#">item 2</a>
     <a href="#">contact us</a>
     <a href="#">about us</a>
   </div>
</body>
</html>
Posted by at 1 comment:

Hover dropdown list in html/css

<!doctype html>
<html>
<style>
*{
margin:0px;
padding:0px;
}
.dropdown{
position:relative;
display:inline-block;
}
.button{
padding:10px 40px;
font-size:20px;
}
.drop-content{
display:none ;
position:absolute;
z-index:1;
width:120px;
}
.drop-content a{
display:block;
background:#dfdfdf;
padding:10px;
color:black;
text-decoration:none;
font-size:20px;
margin-top:2px;
}
.dropdown:hover .drop-content{
display:block;
}
</style>
<body>
<center>
<div class="dropdown">
<button class="button">Drop</button>
<!-- this menu will appear if we hover on the button -->
<div class="drop-content">
<a href="#">Item 1</a>
<a href="#">Item 1</a>
<a href="#">Item 1</a>
<a href="#">Item 1</a>
</div>
</div>
</center>
</body>
</html>
Posted by at 1 comment:
Subscribe to: Posts (Atom)