hello everyone I hope that you are ready for a new project.
i am back with a full new project, we will make a full web site using HTML and CSS, the website that we will make is a blog, it will contain an article section, article's page, an about us page and a contact us page.
today we will only make the header of our website, it will be responsive and we will add some effect.
so let's start.
before i show you the full source code let me tell you that we will need 2 lines of code that we need to add inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
the first line will allow us to make out website responsive and the second line will allow us to use jquery library because we will need it
VIDEO TUTORIAL
now let me show you the source code of this part
HTML part
<!DOCTYPE HTML>
<html>
<head>
<title>Doctor Code Blog</title>
<link rel="stylesheet" href="style/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
<img src="img_ressource/logodc.png">
</header>
<nav>
<div class="menu">
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="responcive_menu">
<img class="btn" src="img_ressource/btn.png">
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</body>
<script type="text/javascript" src="script/responsive_menu.js"></script>
</html>
CSS part
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
background-color: #F4F8FB;
}
header{
position: relative;
background: url('../img_ressource/redacteur-web-auto-entrepreneur-relation-entreprises.jpg');
background-position: center;
background-size: cover;
}
header img{
position: relative;
left: 50%;
transform: translateX(-50%);
}
nav{
position: relative;
background-color: #212121;
border-bottom: 2px solid #F65757;
}
nav .menu{
margin: 0;
position: relative;
padding: 15px;
}
nav .menu ul{
text-align: center;
}
nav .menu ul li{
display: inline-block;
margin-right: 50px;
}
nav ul li a{
text-transform: uppercase;
text-decoration: none;
color: #fafafa;
font-size: 1.2rem;
transition: .4s;
}
nav ul li a:hover{
color: #F65757;
}
/* i will make the responsive menu invisible */
nav .responcive_menu{
display: none;
padding: 15px;
}
nav .responcive_menu img{
width: 40px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
nav .responcive_menu ul{
text-align: center;
width: 100%;
padding: 15px 0;
}
nav .responcive_menu ul li{
margin: 15px 0;
}
@media screen and (max-width : 620px){
nav .menu{
display: none;
}
nav .responcive_menu{
display: block;
}
nav .responcive_menu ul{
display: none;
}
}
JavaScript part
$(document).ready(function(){
$('.btn').on('click', function(){
$('.responcive_menu ul').slideToggle(400);
})
});
i hope that you loved this tutorial, we will add every day the next part of the tutorial just wait for us.
check the second part : Create a blog template using HTML and CSS : the article section
Create a blog template using HTML and CSS : the Header
Reviewed by Medics
on
April 30, 2019
Rating:
Reviewed by Medics
on
April 30, 2019
Rating:
No comments: