How to create a Responsive Website with Sticky Navbar - CodeAndMan

-

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

Popular posts from this blog

Codes Post - Code And Man

-
Movie Post Code <div class="post-movie-details">      <div class="hide-this-on-index">   <div class="movie-details-insidepost">     <div class="moviethumbnail">       <!--MOVIE POSTER-->  <img alt="Mastaney" src="https://image.tmdb.org/t/p/w300/8vrlTSiMcNlnCQn6oNcgbbKbSn3.jpg" />             </div>     <div class="moviestoryline">       Mastaney is a 2023 Indian Punjabi-language historical action drama film. It stars Tarsem Jassar and Gurpreet Ghuggi with Simi Chahal and Karamjit Anmol in supporting roles. Set in 1739, Nader Shah's undefeated army was attacked by Sikh rebellions. Nader demands to arrest them but it doesn't work out. Five ordinary men are hired to play Sikh rebels but over time they learn what Sikhs are.     </div>   </div>        <div class="movietechdetails"...
Continue Reading

Welcome to the World of Blogging || blogging complete course

-
Image
Welcome to the world of blogging. In this course you will be learning everything you need to become a professional money making blogger. so be in this course. The whole video content will be uploaded on BlogyTube YouTube Channel. Today we will be talking about:- What is Blogging Types of Blogs Difference between blog and website Some Examples of present day bloggers What is Blogging In Blogging a person writes articles and publish them online to earn money. Blogging is a very good way to earn money for students. Let me explain you the types of Blogs: Personal Blogs:- In personal blogs people write about themselves. The motive of Blogs is not earning money. Group Blogs:- In Group blogging there are two or three or more people which write on a single blog about a single or multiple niches. Micro Niche Blogs:- The Micro niche blogs are a very deep topics of a single category. these blogs can also be single or double page.  Corporate Blog :- These kinds of blogs are made by corporate ...
Continue Reading

Step by step guide to coding a game in Python

-
  How to Code a Simple Game in Python Python is a powerful and versatile programming language that can be used for a wide range of applications, including game development. In this tutorial, we will be creating a simple game using the Pygame library in Python. Pygame is a set of Python modules designed for writing video games. It provides functionality for creating 2D graphics, handling events, and playing sounds and music. By the end of this tutorial, you will have a basic understanding of how to create a game using Pygame and Python. Setting up the Development Environment Before we can start coding our game, we must set up our development environment. To do this, we will need to install Python and the Pygame library. If you already have Python installed on your machine, you can install Pygame by running the following command in your terminal: pip install pygame If you don't have Python installed, you can download the latest version from the official Python website. Once you have ...
Continue Reading