Skip to main content

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.

Labels:

Comments

Post a Comment

Popular posts from this blog

Arrays and conversion in Javascript || javascript complete course || #7 (sourcecode)

hey guys how are you all today in this post I am going to give you the source code of my video called arrays and  conversion in JavaScript so let's begin:- // ARRAYS in javascript console . log (" This is arrays in js ") var arr1 = [ 32 , 34 , 23 , 23 , 234 ," this ", {     name:" Gautam ",     class : " 8th ",     rollno: 6 } ] console . log ( arr1 ) console . log ( arr1 [ 5 ]) console . log ( arr1 .length) console . log ( arr1 . concat (' main ')); console . log ( arr1 ); // // ---------------------------------------------------- // CONVERSION IN JAVASCRIPT // Converting in to strings var num1 = 45 ; console . log ( num1 ); var str1 = String ( num1 ); console . log ( str1 ); console . log ( typeof str1 ); console . log ( typeof num1 ); var number1 = 33453434 ; console . log ( number1 , typeof number1 ); var string1 = number1 . toString (); console . log ( string1 , typeof string1 ); // ----------------------------...
Post a Comment
Continue Reading

types of operators in javascript || javascript course || codeandman (sourcecode)

hey guys how are you all today in this post I am going to give you the source code of my video called types of operators in javascript. so let's begin : here's the complete source code and the video:- // ------------------------------------------------------------------------------------ // COMPARISON OPERATORS IN JAVASCRIPT console . log (" COMPARISON OPERATORS IN JAVASCRIPT ") console . log ( 32 == 32 ) // checking if 32 is equal to 32 console . log ( 32 != 32 ) // checking if 32 is not equal to 32 console . log ( 32 >= 31 ) // checking if 32 is greater or equal to 31 console . log ( 32 < 33 ) console . log ( 32 > 30 ) console . log ( 32 <= 09 ) // ASSIGNMENT OPERATORS console . log (" --------------------------------------- ") console . log (" Assignment operators in javascript ") var d = 34 ; var e = 3 ; var a = 10 ; console . log ( d ) console . log ( d += 1 ) console . log ( d -= 3 ) console . log ( e *= 2 ) console . log...
Post a Comment
Continue Reading

The Professional HTML Cheatsheet For beginners in 2024 for free

The Professional HTML Cheatsheet For beginners in 2024 for free Hello guys,  You will be glad to know that I am going to start a cheatsheet series for you all. In this series I am going to give you cheat sheets of all the programming languages. If you want to get all of these cheat sheets for free then you can follow this blog and visit my youtube channel if you like the video content. This is the link to my youtube channel :- https://www.youtube.com/channel/UCmbrOCauavTcwIJeXYo4pjQ This is the link to my instagram :- https://instagram.com/gautam9465580 Father of all the links (Link to all of my social media platforms) :- https://code-and-man.blogspot.com/p/my-link-tree.html Now got all the information which I want to give you before the post so now let’s get started with the post:- In today’s post I am going to give you the first cheatsheet which is of HTML so let’s begin:- Boilerplate of HTML The Boilerplate code is the common code which is used in almost all of the web pages c...
Post a Comment
Continue Reading