Skip to main content
Date :

Responsive Theme with Navbar

Responsive Theme and Navbar Responsive 

in HTML and CSS.

Add HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
       
        <div class="nav">
            <h2>Logo</h2>
            <ul class="nav2">
                <li>Store</li>
                <li>Gallery</li>
                <li>Account</li>
                <li>Career</li>
                <li>Blog</li>
                <button Class="signin">Sign In</button>
                <i class="ri-menu-3-fill"></i>
            </ul>

            </div>
       
        <div class="content">
            <div class="left">
                <h2>Learn from <span>Coolest</span> platform in India </h2>
               
                <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minima, optio consequuntur rerum ab eos natus asperiores neque nemo explicabo.</h5>
             
               

                <button class="exp">Explore Now</button>
            </div>
            <div class="right">
                <img src="122.gif">
               

            </div>
        </div>
       
        </div>
     
</body>
</html>

Add CSS

   
    * {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Gilroy';
}

html, body {
    height: 100%;
    width: 100%;

}

.main {
    height: 100%;
    width: 100%;
    position: relative;
}

.nav {
    height: 100px;
    width: 100%;
    background-color: azure;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    border-bottom: 2px solid #dadada;
    margin: 0;


}

.nav2 {
    display: flex;
    gap: 4vw;
    align-items:center;
     

}

.nav h2 {
    font-size: 6vw;
    font-weight: 700;
    color: red;
}

.nav li {
    font-size: 1.6vw;
    background-color: #3EC29A;
    padding: 5px 10px;
    border-radius: 3px;
    color: #fff;

}

.nav i{
    font-weight: 800;
    display:none;


}

.content {
    height: calc(100% - 100px);
    width: 100%;
    display: flex;
    height: 85.9%;
   
}

.left {
 height :100%;
 width :45%;



}

.right {
    height: 100%;
    width : 55%;

}

.left h2 {
    color: red;
    padding: 10px 10px;
    font-size: 4vw;
    font-weight: 700;
}
.left h2 span {
    color: #3EC29A;
    padding: 0;
    margin: 0;

   
}
   
button {

    background-color: #3EC29A;
    font-size: 1.5vw;
    padding: 1.1vw 2.1vw;
    justify-content: center;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-weight: 700;
    margin: 2vw 2.5vw;   


}

.left h5 {
    font-size: 2vw;
    padding: 15%;
    font-weight: 500;
    ;
     

}

.right img {
    width: 100%;
    height: 100%;
}

.exp {
    margin-left: 35%;
}

.signin {

    color: white;
    background-color: #FFCE00;
}

   


@media (max-width:600px) {

    .nav {
        height: 60px;
        padding: 0 6vw;
       
    }


    .nav h2 {
        font-size: 7vw;
    }

    .nav li {
        font-size: 4vw;
        display: none;
       
   
    }

    .nav i {
       
        font-size: 1.6em;
        display: block;
    }

    .content {

            height: calc(100% - 60px);
            flex-direction: column;
            width: 100%;
            height: 100%; 
           
        }
       
.left {
         height : 40%;
         width : 100%
                   
       
        }
       
.right {
            height: 60%;
            width : 100%;
   
        }
       
.left h5 {
            font-size: 4vw;
            width: 100%;
            padding: 15px 15px;
            font-weight: 50px;
            height: 30%;   
           
       
        }

button {
    margin-top: 10%;
    font-size: 4vw;

}
 
}

Comments

Post a Comment

Popular posts from this blog

Create a Header

Header Header My supercool header Create a Header Step 1) Add HTML: Example < div  class ="header" >    < h1 > Header < /h1 >    < p > My supercool header < /p > < /div Step 2) Add CSS: Style the header with a large padding, centered text, a specific background-color and a big sized text: Example .header  {   padding :  60px ;   text-align :  center ;   background :  #1abc9c ;   color :  white ;   font-size :  30px ; }
Post a Comment
Read more

View PC localhost on your mobile phone

Very Simple Method to see your localhost on your mobile phone.  Serve over your wifi via local IP This sounds complicated but its actually really easy. IMPORTANT: Make sure that your dev computer and your mobile device are connected to the same wifi network. Step 1: Serve to Localhost On your dev machine, serve your application in whatever way you usually do that serves it over a  localhost  address. Make sure to note what port number its being served on. In the image below, we’re noting  8080 . Once you are able to view your app locally on your computer via localhost, you can move to step 2. Step 2: Find your Local IP Address Open  System Preferences  >  Network . Select “Wifi” in the left pane if it isn’t already selected. Under “Status: Connected”, you should see “Wi-Fi is connected to <network name> and has the IP address < local IP address >.” Take note of that IP address! Note: It’s common for your Local IP Address to change automa...
Post a Comment
Read more

Code for Digital clock

Click here to see Digital Clock <!DOCTYPE html> <html> <head>   <title>Digital Clock</title> //Add following CSS    <style>     body {       font-family: sans-serif;     }     .clock {       position: absolute;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);       font-size: 60px;       color: black;     }   </style> </head>
Post a Comment
Read more