Responsive Web Design with Flexbox: Simple Techniques - 02

0





























Hello Developers, We're enthusiastic about using HTML to craft visually appealing and organized web designs. Whether you're a beginner looking to grasp the basics or an experienced developer seeking inspiration, you've come to the right place. Creating an attractive HTML Flexbox layout for a responsive website is essential. By utilizing semantic HTML tags and a well-structured design, we can enhance usability and accessibility. CSS plays a crucial role in adding style to enhance the overall appearance. Our responsive HTML Flexbox layout ensures optimal display across various devices. You have the flexibility to customize and adjust the layout according to your preferences and needs. By carefully choosing colors, fonts, and spacing, you can create an engaging Flexbox layout that captures visitors' attention and makes your website unique.

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 html5> <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,layout"/> <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="Style.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="mp"> <div class="p1"> <h2>Header</h2> </div> <div class="p2"> <div class="p2c1"> <h2>Nav</h2> </div> <div class="p2c2"> <div class="p2c2g1"> <h2>Content</h2> </div> </div> </div> <div class="p3"> <div class="p3c1"> <h2>Footer</h2> </div> </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. 


*{
    box-sizing: border-box;
}
body{
    margin: 0px;
}
.mp{
    display: flex;
    flex-wrap: wrap;
    width: calc(100vw-10px);
    height: 100vh;
    background-color: rgb(123, 117, 117);
    padding: 10px;
    gap:10px;
}
.p1{
    display: flex;
    width: 100%;
    height: 19%;
    align-items: center;
    justify-content: center;
    background-color: rgb(232, 52, 125);
    border-color: black;
    border-style: solid;
    border-width: 3px;
}
.p2{
    display: flex;
    width: 100%;
    height: 60%;
    gap:10px;
}
.p3{
    display: flex;
    width: 100%;
    height: 19%;
    align-items: center;
    justify-content: center;
    background-color: rgb(18, 169, 154);
    border-color: black;
    border-style: solid;
    border-width: 3px; 
    
}
.p2c1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 100%;
    background-color: rgb(35, 236, 240);
    border-color: black;
    border-style: solid;
    border-width: 3px;
}
.p2c2{
    display: flex;
    flex-wrap: wrap;
    width: 70%;
    height: 100%;
    gap:5px;
}
.p2c2g1{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgb(230, 172, 132);
    border-color: black;
    border-style: solid;
    border-width: 3px;
}
@media screen and (max-width:1024px) {
    .p2{
        flex-direction: column;
    }
  
    .p2 div{
        width: 100%;
    }
    .p1,.p2{
        height: calc(20%-10px);
    }
}
@media screen and (max-width:630px) {
    .p2{
        flex-direction: column;
    }
    .p2 div{
        width: 100%;
    }
    .mp{
        height: 180vh;
    }
}
.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