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:
When work gets tiring, a little entertainment can really refresh the mood, and that’s why people love Virtual games for office. They’re easy to access, don’t take much time, and help break stress without disturbing work. A few minutes of gameplay can boost energy, improve focus, and even make boring days feel lighter and more enjoyable for everyone.
ReplyDeleteMSME Certificate is an official recognition issued to micro, small, and medium businesses after successful Udyam registration. It confirms the enterprise’s classification based on investment and turnover. This certificate helps businesses gain access to government support, including easier bank finance, subsidy schemes, and protection against delayed payments. The certificate is issued digitally and remains valid for a lifetime, provided business details are updated when required. Holding an MSME Certificate improves business credibility and supports steady growth in a competitive market.
ReplyDeleteNGO Experts offer excellent support for Society Registration. Their team makes the whole process simple, clear, and hassle-free. I really appreciate how they guide clients step-by-step and ensure all documents are prepared correctly. Their professional approach builds confidence and trust. If you are planning to register a society smoothly and legally, NGO Experts is a dependable partner to work with.
ReplyDelete