Building Beautiful Websites with HTML Flexbox

0





























Hello Developers, We're all about using HTML to make websites look awesome and organized. Whether you're just starting out and want to learn the basics or you're a pro looking for inspiration, you're in the right spot. Making a website that adjusts to different screen sizes using HTML Flexbox layout is key. Using specific HTML tags and keeping things neat and tidy can make your site easier for people to use and access. CSS helps make it look nice by adding style. Our Flexbox layout ensures your site looks good on any device. You can tweak things to match your preferences by choosing colors, fonts, and spacing carefully, making your site stand out.

How to make Beautiful Websites in FlexBox with 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> <div class="con"> <div class="p1"> <h2>Header</h2> </div> <div class="p2"> <div class="p2c1"> <h2>Sidebar</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 class="credit"> Made with <span>❤ </span>by<a href="https://www.learningrobo.com/"> learningrobo</a> </div> </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;
}
.con{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100vw-10px);
    height: 100vh;
    background-color:white;
    padding: 10px;
    gap:10px;
}
.p1{
    display: flex;
    width: 100%;
    height: 19%;
    align-items: center;
    justify-content: center;
    background-color:green;
}
.p2{
    display: flex;
    width: 100%;
    height: 60%;
    gap:10px;
}
.p3{
    display: flex;
    width: 100%;
    height: 19%;
    align-items: center;
    justify-content: center;
    background-color: green;    
}
.p2c1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 100%;
    background-color:green;
}
.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(0, 100, 5);
}


@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%;
    }
    .con{
        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 Flexbox Layout Using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Flexbox Layout 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