Responsive Web Design with Flexbox: Simple Techniques - 01

0





























Hello Developers, We love using HTML to make websites look great and organized. Whether you're new and want to learn the basics or you're experienced and need some ideas, you've come to the right place. Creating a responsive website with HTML flexbox layout must look good. Using special HTML tags and an uncluttered design can make it easier to use and access. CSS helps to add style and makes the page look beautiful. Our Flexbox layout ensures that your website looks good on any device. You can change everything the way you like it. By carefully choosing colors, fonts and spacing, you can create a flexbox layout that grabs attention and makes your website stand out.

How to make Responsive Web Design with Flexbox Using HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <title>Responsive Flexbox Layout Using HTML & CSS</title> <meta name="description" content="Responsive layout Using HTML & CSSt. Made by learningrobo.com"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="layout,responsive,learningrobo.com,html & css projects,project,flexbox"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <meta charset="UTF-8"> <link rel="stylesheet" href="Styles.css"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="main"> <div class="mp1"> <h1>Header</h1> </div> <div class="mp2"> <div class="p2c1"> <h1>AD 1</h1> </div> <div class="p2c2"> <div class="p2c21"> <h1>Nav bar</h1> </div> <div class="p2c22"> <h1>Content</h1> </div> </div> <div class="p2c3"> <h1>AD 2</h1> </div> </div> <div class="mp3"> <h1>Footer</h1> </div> </div> <div class="credit">Made with <span>❤ </span>by<a href="https://www.learningrobo.com/"> learningrobo</a></div> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
/* DESKTOP VIEW */
body {
    margin: 0px;
}
.main {
    display: flex;
    flex-direction: column;
    background-color: rgb(73, 255, 197);
    width: calc(100%-2vh);
    height: 700px;
    gap: 1vh;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
}
.mp1 {
    height: 20vh;
}
.mp2 {
    display: flex;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    height: 200vh;
    gap: 1vh;
    /* flex-wrap: wrap; */
}
.p2c1 {
    display: flex;
    height: 99%;
    width: 15%;
    gap: 2vh;
}
.p2c2 {
    display: flex;
    height: 100%;
    width: 69%;
    gap: 1vh;
    flex-direction: column;
}
.p2c21 {
    display: flex;
    flex-direction: column;
    width: 99%;
    height: 30%;
    gap: 1vh;
}
.p2c22 {
    display: flex;
    flex-direction: column;
    width: 99%;
    height: 68%;
    gap: 1vh;
}
.p2c3 {
    display: flex;
    width: 15%;
    height: 99%;
    gap: 1vh;
}
.mp3 {
    display: flex;
    height: 30vh;
    gap: 1vh;
}
.mp1,.mp3,.p2c1,.p2c21,.p2c22,.p2c3{
    border: 4px solid rgb(0, 0, 0);
}
.mp1,.mp3,.p2c1,.p2c21,.p2c22,.p2c3{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* TABLET VIEW */
@media screen and (max-width:1024px) {
    .main {
        background-color: rgb(207, 156, 255);
    }
    .mp2 {
        flex-direction: row;
        display: flex;
    }
    .p2c21 {
        flex-direction: column;
        width: 98.5%;
        order: 2;
    }
    .p2c1 {
        width: 15%;
        height: 99%;
        order: 1;
    }
    .p2c22 {
        width: 98.5%;
        height: 99%;
        order: 3;
    }
    .p2c3 {
        flex-direction: row;
        width: 15%;
        height: 99%;
        order: 3;
    }
}

/* MOBILE VIEW */
@media screen and (max-width:600px) {
    .main {
        height: 670px;
        background-color: rgb(177, 209, 238);
    }
    .mp1 {
        width: 98%;
        height: 10vh;
    }

    .mp2 {
        flex-direction: column;
        display: flex;
    }

    .p2c2 {
        width: 98%;
    }

    .p2c21 {
        width: 100%;
        order: 1;
        height: 10vh;
    }

    .p2c1 {
        width: 98%;
        order: 2;
        height: 10vh;
    }

    .p2c22 {
        width: 100%;
        order: 3;
        height: 30vh;
    }

    .p2c3 {
        width: 98%;
        order: 4;
        height: 10vh;
    }

    .mp3 {
        width: 98%;
        height: 10vh;
    }
}
.credit a {
    text-decoration: none;
    color: #121212;
    font-weight: 800;
}
  
.credit {
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:#000;
    font-size:20px;
}
We hope you would like this Responsive Web Design with Flexbox Using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Responsive Web Design with Flexbox Using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome