Skip to main content

Responsive Design with HTML and CSS SPYDEVCODE

 In the world of web development, creating responsive designs is essential to ensure a seamless user experience across various devices. In this tutorial, we'll explore a sample HTML and CSS code for building a responsive webpage. codePen Link


Responsive Website Design Templete
Responsive Website Design


The HTML Structure


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Responsive Design</title>
</head>
<body>
    <section class="container">
        <div class="main-container">

            <nav class="navbar">
                <div class="navbar-container container">
                    <input type="checkbox" name="" id="">
                    <div class="hamburger-lines">
                        <span class="line line1"></span>
                        <span class="line line2"></span>
                        <span class="line line3"></span>
                    </div>
                    <ul class="menu-items">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Category</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Testimonial</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <h1 class="logo">Navbar</h1>
                </div>
            </nav>

            <div class="main">
            <div class="main-text">
          <h4>Lorem ipsum dolor sit amet!</h4>
         <h1>Build Earn<ion-icon name="flash"></ion-icon> Automate</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
At consequuntur, quidem amet rem sapiente in. Officia beatae quia vel
atque sunt iure placeat, culpa modi! Necessitatibus eaque doloribus laudantium
labore?</p>
    <div class="btns">
    <a href="https://codepen.io/amkamble/pen/yLZvwov" class="btn">
    Get Code <ion-icon name="code-slash"></ion-icon></a>
    <a href="#" class="btn">Explore <ion-icon name="arrow-forward"></ion-icon></a>
                </div>
            </div>
        </div>

        </div>
    </section>
   
    <span class="circle-1"></span>
    <span class="circle-2"></span>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js">
</script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js">
</script>
   
</body>
</html>

The HTML structure includes sections for the navigation bar, main content, and circular elements for a visually appealing design.

Styling with CSS

        CodePen Link Click The Given Code Pen Link To live Demo

  @import url('https://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght@500&family=Gluten:wght@500&family=Merienda:wght@700&family=Poppins&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(109.6deg, rgb(17, 19, 23)
11.2%, rgb(11, 18, 24) 51.2%, rgb(6, 18, 24) 98.6%);
}

a{
    text-decoration: none;
    color: #fff;
}
li{
    list-style: none;
}
.container{
    width: 100%;
    height: 100vh;
    position: relative;
    display: block;
}
.main-container{
    width: 100%;
    color: #fff;
    position: relative;
}

.navbar input[type="checkbox"],
.navbar .hamburger-lines{
    display: none;
}

.container{
    max-width: 1200px;
    width: 100%;
    position: fixed;
    top: 0;
    margin: auto;
}

.navbar{
    width: 100%;
    color: #fff;
    opacity: 0.85;
    z-index: 100;
}

.navbar-container{
    display: flex;
    justify-content: space-between;
    height: 50px;
    margin-top: 10px;
    align-items: center;
}

.menu-items{
    order: 2;
    display: flex;
}
.logo{
    order: 1;
    font-size: 2.3rem;
}

.menu-items li{
    list-style: none;
    margin-left: 1.5rem;
    font-size: 1.2rem;
}

.navbar a{
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}

.navbar a:hover{
    color:  rgb(19, 119, 220) ;
}


.main{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    text-align: center;
}
.main-text{
    width: 70%;
    margin-top: 5%;
}
.main-text h4{
    font-size: 15px;
    padding: auto;
    color: skyblue;
    margin-top: 10px;
}
.main-text h1{
    color: #fff;
    margin-top: 10px;
    font-size: 3rem;
    font-weight: bolder;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
 h1 [name="flash"]{
    font-size: 2.3rem;
    color: rgb(14, 156, 188);
    text-align: center;
    margin-top: 10px;
}

.main-text p{
    padding: 10px;
    margin-top: 5px;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    line-height: 1.5rem;
    text-align: center;

}

.main-text .btns{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding-top: 20px;
    margin-top: 10px;
}
.main-text .btns .btn{
   border: 2px solid rgb(107, 41, 194);
    padding: 10px 40px;
    margin: 15px;
    border-radius: 20px;
    transition: 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

[name="code-slash"] ,[name="arrow-forward"]{
    margin: 0 5px;
    font-size: 1rem;
}
.btn:nth-child(1){
    background-color:rgb(107, 41, 194);
}
.btns a:hover{
    background-color:rgb(107, 41, 194);
}



 .circle-1{
    position: absolute;
    display: flex;
    height: 300px;
    width: 300px;
    left: 0%;
    top: 50%;
    border-radius: 50%;
    filter: blur(70px);
    background: linear-gradient(180.8deg, rgb(234, 8, 211) 6.9%,
    rgb(73, 6, 70) 73.2%);
    z-index: -999;
}

.circle-1::after {
    content:"";
    position: absolute;
    height: 90%;
    width: 90%;
    left: 10%;
    top:30%;
    border-radius: 50%;
    background: linear-gradient(180.8deg, rgb(19, 119, 220) 6.9%,
    rgb(73, 6, 70) 73.2%);
  }

  .circle-2{
    position: absolute;
    display: flex;
    height: 300px;
    width: 300px;
    right: 0;
    border-radius: 50%;
    filter: blur(80px);
    background: linear-gradient(180.8deg, rgb(27, 10, 139) 6.9%,
    rgb(73, 6, 70) 73.2%);
    z-index: -999;
}

.circle-2::after {
    content:"";
    position: absolute;
    height: 90%;
    width: 90%;
    right: -20%;
    top: -120px;
    border-radius: 50%;
    background: linear-gradient(180.8deg, rgb(139, 10, 36) 6.9%,
    rgb(73, 6, 70) 73.2%);
  }


 
@media (max-width: 920px){
    .navbar-container input[type="checkbox"]:checked ~ .logo{
        display: none;
   
    }
   
    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines{
        display: block;
       
    }

    .navbar-container{
        display: block;
        position: relative;
        height: 64px;
        margin-top: 5px;
    }

    .navbar-container input[type="checkbox"]{
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .navbar-container .hamburger-lines{
        display: block;
        height: 20px;
        width: 25px;
        position: absolute;
        top: 20px;
        left: 40px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .navbar-container .hamburger-lines .line{
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: white;
    }
   
    .navbar-container .hamburger-lines .line1{
        transform-origin: 0% 0%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2{
        transition: transform 0.2s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3{
        transform-origin: 0% 100%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar .menu-items{
        padding-top: 100px;
        background: transparent;
        height: 100vh;
        max-width: 300px;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: 00px;
        padding-left: 40px;
        transition: transform 0.5s ease-in-out;
       background-color: rgba(0,0,0,0.5);
       
    }

    .navbar .menu-items li{
        margin-bottom: 1.8rem;
        font-size: 1.7rem;
        font-weight: 500;
    }

    .logo{
        position: absolute;
        top: 10px;
        right: 15px;
        margin-right: 50px;
        font-size: 1.5rem;
    }

   
}

@media (max-width: 768px){
    .navbar{
        opacity: 0.95;
    }

    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines{
        display: block;
       
    }

    .navbar-container{
        display: block;
        position: relative;
        height: 64px;
        margin-top: 5px;
    }

    .navbar-container input[type="checkbox"]{
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .navbar-container .hamburger-lines{
        display: block;
        height: 28px;
        width: 35px;
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .navbar-container .hamburger-lines .line{
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: white;
    }
   
    .navbar-container .hamburger-lines .line1{
        transform-origin: 0% 0%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2{
        transition: transform 0.2s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3{
        transform-origin: 0% 100%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar .menu-items{
        padding-top: 100px;
        background: transparent;
        height: 100vh;
        max-width: 300px;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: -40px;
        padding-left: 40px;
        transition: transform 0.5s ease-in-out;
       background-color: rgba(0,0,0,0.5);
       
    }

    .navbar .menu-items li{
        margin-bottom: 1.8rem;
        font-size: 1.1rem;
        font-weight: 500;
    }

    .logo{
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.5rem;
    }

    .navbar-container input[type="checkbox"]:checked ~ .menu-items{
        transform: translateX(0);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
        transform: rotate(45deg);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
        transform: scaleY(0);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
        transform: rotate(-45deg);
    }


    .main-text{
        margin-top: 20%;
    }

    .main-text h4{
        font-size: 15px;
        padding: auto;
       
    }
    .main-text h1{
        color: #fff;
        font-size: 1.4rem;
        padding-bottom:10px;
    }
     h1 [name="flash"]{
        font-size: 1.7rem;
        color: rgb(14, 156, 188);
        text-align: center;
        margin-top: 5px;
    }
   
    .main-text p{
        padding: 0 10px;
        margin-top: 5px;
        font-size: 0.8rem;
    }
   
    .main-text .btns .btn{
        padding: 7px 25px;
        margin: 5px;
    }
   
    [name="code-slash"] ,[name="arrow-forward"]{
        margin: 0 5px;
        font-size: 0.9rem;
    }

}

@media (max-width: 500px){
    .navbar-container input[type="checkbox"]:checked ~ .logo{
        display: none;
    }
   
    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines{
        display: block;
       
    }

    .navbar-container{
        display: block;
        position: relative;
        height: 64px;
        margin-top: 5px;
    }

    .navbar-container input[type="checkbox"]{
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .navbar-container .hamburger-lines{
        display: block;
        height: 20px;
        width: 25px;
        position: absolute;
        top: 20px;
        left: 40px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .navbar-container .hamburger-lines .line{
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: white;
    }
   
    .navbar-container .hamburger-lines .line1{
        transform-origin: 0% 0%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2{
        transition: transform 0.2s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3{
        transform-origin: 0% 100%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar .menu-items{
        padding-top: 100px;
        background: transparent;
        height: 100vh;
        max-width: 300px;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: 00px;
        padding-left: 40px;
        transition: transform 0.5s ease-in-out;
       background-color: rgba(0,0,0,0.5);
       
    }

    .navbar .menu-items li{
        margin-bottom: 1.8rem;
        font-size: 1.1rem;
        font-weight: 500;
    }

    .logo{
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.5rem;
        margin-right: 50px;
    }

   
}

The accompanying CSS code provides styling for the entire webpage, from the body to the navigation bar, main content, and responsive design adjustments for different screen sizes.

Key Features

  1. Navigation Bar: The navigation bar includes a hamburger menu for a clean and responsive design. The menu items are styled with a smooth hover effect.

  2. Main Content: The main content section features a bold heading, subheading, and a call-to-action button. The use of Ionicons adds visually appealing icons to the buttons.

  3. Circular Elements: The webpage includes circular elements with gradient colors, enhancing the overall visual appeal. The use of the ::after pseudo-element adds depth to the circles.

  4. Responsive Design: The CSS includes media queries for responsiveness. The navigation bar transforms into a mobile-friendly version on smaller screens, providing a better user experience.

Conclusion

Building a responsive webpage is crucial for reaching users on different devices. This HTML and CSS template serves as a foundation for creating visually appealing and user-friendly designs. Feel free to customize and expand upon this code for your specific projects.



Labels:

Comments

Post a Comment

If you have any Suggestions For Me .Plese let me know

Popular posts from this blog

10 + Mind-Blowing CSS Animation Examples (Free Code + Demos)

                                   10 + CSS Animations With Source Code  Welcome to our collection of CSS animations! In this curated collection, we have gathered a variety of free HTML and CSS animation code examples from reputable sources such as Code Pen, GitHub, and other valuable resources. With our November 2022 update, we are excited to present 18 new items that showcase the latest trends and techniques in web design. Whether you are a web developer seeking inspiration or a designer looking for ready-to-use animation snippets, this collection has something for everyone. Explore the power of CSS animations and enhance your website with captivating visual effects. 1. Snow Globe The coziest example we could find, this snow globe animation, adds an ambiance to your page that you won’t get with a still image. Notice how the snow animates only within the confines of the “glass...
Post a Comment
Read more

Creating a Stunning 3D Carousel with HTML, CSS, and JavaScript

Creating a Stunning 3D Carousel with HTML, CSS,  and JavaScript In this blog post, we'll walk you through the process of building a mesmerizing 3D carousel using a combination of HTML, CSS, and JavaScript. Carousels are a popular element on websites, often used to showcase featured content or images in an engaging way. This particular carousel goes a step further, incorporating a 3D effect that adds depth and a sense of interactivity to your web page. Our tutorial will guide you through the step-by-step creation of this 3D carousel. We'll explain how to set up the HTML structure, apply the necessary CSS styles to achieve the 3D effect, and even provide a JavaScript template for handling user interactions (though this example keeps it simple). Whether you're a web development novice or an experienced coder looking for a creative project, you'll find this tutorial accessible and engaging. By the end of the blog post, you'll have a stunning 3D carousel that you can cus...
Post a Comment
Read more

Responsive CSS Cards -Free Code + Demo

                   Responsive CSS Cards -Free Code + Demo                             All code 100% Free code and open source             How to create Responsive Cards Using HTML and CSS Here is the Example With Live Demo + Source Code            Output Sample Image                    CSS Card with Hover Effects Code Pen See the Pen Responsive Card With Hover Effects by Amol Kamble ( @amkamble ) on CodePen . Live / Source-Code <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title >Responsive Card Design HTML and C...
Post a Comment
Read more