hmmm because there are already two posts and the main thing is forgotten, namely the header. yes … headers are usually filled with web themes or web titles. After two posts discussing simple web structures using html and how to make a body look, it turns out that something has been forgotten hehe
We add tags
after tag
so later this header will be above the article content and widget content that we created earlier.
Well … after we implement the code, the structure is like the code above. we can insert css code in the tag section that we want to change, in the code in the header section I add some css scripts such as background, padding and color, background.
If we open the code in a browser it will display something like this:
Well.. it looks pretty good, yes, it’s blue hehe. Creating a web display is easy and difficult, it’s easy to say it’s hard hehe. The soul of art must be involved in making it because the display is the first thing that web visitors see.
But making a web display is not necessarily just a display, there are still many things, namely the logic part … hehe
In the next post I will invite you to discuss about the footer so that it has a complete title, header, body and footer
Old quote
” Never too late to learn “
The article above is my initial article about a tutorial on how to make a simple header, now I will add some html and css code for all of my friends because I think the display above is very simple. Here is the header display that we will discuss
 |
| simple header display no code |
HTML
Dashboard Has No Code
Dashboard Has No Code
CSS
body {
margins: 15px;
}
ul {
list-style-type: none;
margins: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
.active {
background-color: #FF0B7B;
}
li label {
color: white;
}
.form-login {
float: right;
margin-top: 10px;
margin-right: 10px;
}
forms {
margin-left: 45px;
}
h2 {
margin-left: 45px;
}
img {
width: 100%;
height: 250px;
border-radius: 10px;
}
//— dropdown —-//
li a {
}
.dropbutton {
background-color: black;
color: white;
padding: 16px;
font-size: 16px;
borders: none;
cursors: pointers;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0.7;
}
.dropdown-content a {
color: black;
padding: 16px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #d8d8d8}
.dropdown:hover .dropdown-content {
display: block;
margin-top: 0px;
}
.dropdown:hover .dropbtn {
background-color: #f9f9f9;
}
// The overlay code
.image-overlay {
position: relative;
overflow: hidden;
text-align: center;
width: 20%;
line-height: 120px;
height: 120px;
background: #103B51;
border-radius: 10px;
box-shadow: 0 5px 1px #f9f9f9;
cursor: pointer;
}
.image-overlay:hover .overlay{
opacity: 0.5;
}
.overlay{
position: absolute;
border-radius: 10px;
opacity: 0;
background: #f9f9f9;
@include transition(opacity .5s ease-in-out);
}
.box {
font-size: 20px;
font-weight: 200;
color: black;
padding: 0;
width: 1246px;
height: 225px;
text-align: center;
margin-left: 0px;
}
.image-overlay img {
width: 100%;
height: 250px;
border-radius: 10px;
}
Place the css code in between and don’t forget to provide the code. For more details, friends, you can check some articles, click on the menu about design, later there are several articles that discuss how to make the latest simple web design from me.
Thank you
