How to create a Responsive Website with Sticky Navbar - CodeAndMan
Hi guys How are you all today in this post I am going to give you the source code of this video called "How to create a Responsive Website with Sticky Navbar by CodeAndMan" The source code and the video is given below:
Here's all the free source code written in the video:
HTML free source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website Design - CodeAndMan</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="nav">
<div class="left" id="left">
<h1>CODEANDMAN</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
<button id="toggle">More</button>
<div class="right" id="right">
<div class="btn" id="btn">
<button>Follow Us</button>
<button>Visit Blog</button>
</div>
</div>
</nav>
<section class="header_section">
<div class="left_part">
<h1>CODEANDMAN</h1>
<p>THe CodeAndman is the orgranization for making money online without any chance of doning programinng
dididi Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, pariatur!</p>
</div>
<div class="right_part">
<img src="Images/Code and Man.jpg" alt="Banner_img">
</div>
</section>
<section class="contact">
<h1>Contact Us</h1>
<form>
<input type="text" name="name" placeholder="Enter Your Name">
<input type="email" name="email" placeholder="Enter Your Email">
<textarea name="massage" cols="30" placeholder="Enter Something about You" rows="10"></textarea>
<button>submit</button>
</form>
</section>
<section class="services">
<h1>Our Services</h1>
<div class="cards">
<div class="card">
<h1>Lorem</h1>
<p>Lorem is a very good boyLorem is a very good boyLorem is a very good boy</p>
</div>
<div class="card">
<h1>Lorem</h1>
<p>Lorem is a very good boyLorem is a very good boyLorem is a very good boy</p>
</div>
<div class="card">
<h1>Lorem</h1>
<p>Lorem is a very good boyLorem is a very good boyLorem is a very good boy</p>
</div>
</div>
</section>
<section class="portf">
<!-- ADD an image here -->
<img src="Images/Code and Man.jpg" alt="myPic">
<!-- add heading here -->
<h1>Gautam Sharma</h1>
<!-- Add a paragraph here -->
<p>Blogger||Copywriter||Web Developer||Programmer</p>
</section>
<footer>
<p>created with ❤ by gautam Sharma</p>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS free source code:
/* CSS Reset */
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family:cursive;
overflow-x:hidden;
}
::placeholder{
color:#000;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
/* Styling of the navbar */
nav{
display:flex;
align-items:center;
background: #729;
width:100%;
height: 10vh;
position:fixed;
top:0;
cursor: pointer;
}
nav .left{
width:80%;
display: flex;
}
nav .left ul{
display: flex;
align-items:center;
justify-content: space-around;
width:70%;
}
nav .left h1{
width:30%;
}
nav .right{
width:20%;
}
button{
padding:9px;
border:2px solid rgb(255, 192, 192);
border-radius: 10px;
background:none;
font-family: cursive;
outline:none;
color:white;
cursor:pointer;
}
.btn button{
padding:9px;
border:2px solid rgb(255, 192, 192);
border-radius: 10px;
background:none;
font-family: cursive;
outline:none;
color:white;
cursor:pointer;
}
.btn button:hover{
background:white;
color:black;
font-family:Arial, Helvetica, sans-serif;
border-radius:0px;
border:none;
}
/* Styling of the Header Section */
.header_section{
display:flex;
align-items:center;
justify-content:space-between;
height:90vh;
width:100vw;
background-image:linear-gradient(30deg,#858 ,#477);
}
.left_part{
width:50%;
}
#toggle{
display:none;
}
.left_part p{
text-align:justify;
}
.left_part h1{
text-align:center;
}
.right_part{
width:30%;
}
.right_part img{
float:right;
width:100%;
border-radius:50%;
}
/* Styling of the contact US Section */
.contact {
height:70vh;
width:100vw;
display:grid;
place-items:center;
background-image:linear-gradient(30deg,#838, #698);
}
.contact h1{
text-align:center;
width:100%;
}
.contact input{
width:100%;
background:none;
border:none;
outline:none;
border-bottom:2px solid purple;
margin:6px 0px;
}
.contact textarea{
width:100%;
border:2px solid purple;
background:none;
outline:none;
}
/* Styling of our services section */
.services{
width:100vw;
height:100vh;
background-image:linear-gradient(30deg,#373, #975);
}
.services>h1{
width:100vw;
text-align:center;
}
.cards{
display:flex;
align-items:center;
justify-content:space-around;
height:80%;
}
.card{
border:3px solid black;
width:30%;
height:90%;
display:grid;
place-items:center;
}
.card h1{
width:100%;
text-align:center;
}
/* Styling of portfolio section */
.portf{
width:100vw;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
.portf img{
width:10%;
border-radius:50%;
}
/* styling of the footer */
footer{
width:100%;
text-align:center;
background:black;
}
footer p{
color:white;
text-transform:uppercase;
}
/* Making the website responsive */
@media(max-width:844px){
nav{
height:15vh;
}
nav .left h1{
display: none;
}
nav .left ul{
width:100vw;
}
#toggle{
display:inline;
}
.left{
display: flex;
width: 100vw;
}
.left h1{
width:100%;
display: block;
text-align: center;
}
form > button {
width : 100vw;
text-align: center;
}
.left ul{
width:100%;
display: block;
}
.btn{
display:none;
visibility: visible;
}
.portf p{
width:100%;
text-align: center;
}
}
@media (max-width:440px){
nav .left ul li a {
font-size: 75%;
}
}
Javascript free source code:
var toggle = document.getElementById('toggle');
var nav = document.getElementById('nav');
var left = document.getElementById('left');
var right = document.getElementById('right');
var btn = document.getElementById('btn');
toggle.addEventListener('click',()=>{
if(btn.style.display === 'none'){
btn.style.display = 'flex';
btn.style.width = '100vw';
left.style.display = "none";
right.style.width="100vw";
toggle.innerText ="back to normal"
}
else{
right.style.width = '0px';
btn.style.display = 'none';
left.style.display = 'flex';
left.style.width = '100vw';
toggle.innerText = "More"
}
})
I hope that you liked this source code.
Thank You guys for watching this video and accessing this source code.
Comments
Post a Comment