Web Page Design using CSS Flexbox with Code

May 2, 2020

Learn how this design is created

Learn how to make this design using css flexbox, its very easy to create this one if you know basics of css flexbox.

This video can be followed by any beginner or intermediate, code is available. If you don’t know CSS flexbox please check this tutorial – Click Here

For Learning more design Check out HTML and CSS Playlist on YouTube – Click Here

HTML Code :

<!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="./index.css">
     <title>Design</title>
</head>
<body>

     <!-- creatingsection one -->

     <div class="background-image">

          <!-- navbar -->

               <nav>
                    <div class="navbar-title">
                         <h1>Arun Machines</h1>
                    </div>

                    <div class="navbar-menus">
                         <li>Home</li>
                         <li>Products</li>
                         <li>Contact Us</li>
                    </div>
               </nav>

          <!-- creating content for section one -->

          <div class="section-one-content">
               <h1>Best Farming products</h1>
       <br/> 
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, aspernatur, deserunt, laudantium quae recusandae in repellendus quidem consectetur soluta tempora dolores atque? Quod maxime consequuntur voluptate et necessitatibus, perspiciatis iure?</p>
       <br/>  
               <button class="btn-product">View Products</button>
          </div>

     </div>

<!-- creating section two -->

     <div class="section-two-container">

          <div class="product-card-container">

               <!-- product card -->

               <div class="product-card">
                    <div class="product-image-container">
                         <img src="./images/pic1.png" alt="" class="product-image">
                    </div>
                    <div class="product-content-container">
                         <h1>Multi Crop Harvester</h1>
<br/>
                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquid quidem, totam natus delectus excepturi dolore laboriosam veniam, molestias aut autem rerum esse, laborum tenetur architecto odit quasi suscipit alias?</p>
                    </div>
<br/>
                    <div class="product-link-container">
                         <a href="">View Product</a>
                    </div>
               </div>

               <!-- end of product card -->

                              <!-- product card -->

                              <div class="product-card">
                                   <div class="product-image-container">
                                        <img src="./images/pic1.png" alt="" class="product-image">
                                   </div>
                                   <div class="product-content-container">
                                        <h1>Multi Crop Harvester</h1>
               <br/>
                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquid quidem, totam natus delectus excepturi dolore laboriosam veniam, molestias aut autem rerum esse, laborum tenetur architecto odit quasi suscipit alias?</p>
                                   </div>
               <br/>
                                   <div class="product-link-container">
                                        <a href="">View Product</a>
                                   </div>
                              </div>
               
                              <!-- end of product card -->


                                             <!-- product card -->

               <div class="product-card">
                    <div class="product-image-container">
                         <img src="./images/pic1.png" alt="" class="product-image">
                    </div>
                    <div class="product-content-container">
                         <h1>Multi Crop Harvester</h1>
<br/>
                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquid quidem, totam natus delectus excepturi dolore laboriosam veniam, molestias aut autem rerum esse, laborum tenetur architecto odit quasi suscipit alias?</p>
                    </div>
<br/>
                    <div class="product-link-container">
                         <a href="">View Product</a>
                    </div>
               </div>

               <!-- end of product card -->

          </div>

     </div>


<!-- creating section third -->

     <div class="section-third-container">
          <div class="section-third-main-text">
               <h1>Have any query, <br/> Please contact Us</h1>
          </div>

          <div class="section-third-main-form">
               <form action="" class="form-container">

                    <input type="text" class="input-field" placeholder="Name">


                    <br/> <br/>

                    <input type="email" class="input-field" placeholder="Email">

                    <br/> <br/>

                    <textarea class="message-field" placeholder="Message"></textarea>

                    <br/> <br/>

                    <button class="btn-submit">Send</button>

               </form>
          </div>
     </div>

</body>
</html>

CSS Code :

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* background image css */

.background-image{
    background: url("./images/backgroundimage.jpg");
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}

/* navbar css */

nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2em;
}

.navbar-menus{
    display: flex;
}

li{
    list-style: none;
    padding-left: 2em;
}

/* section one content css */

.section-one-content{
    margin-top: 40vh;
    margin-left: 10vh;
    width: 35em;
}

.section-one-content &gt; h1 {
    font-size: 3em;
    color: white;
}

.section-one-content &gt; p {
    font-size: 1.2em;
    color: white;
}

.btn-product{
    padding: 1em 4em;
    font-size: 1.2em;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

/* product card css */

.product-card{
    width: 18em;
    background-color: lightgray;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    padding: 2em 1em;
    margin-bottom: 2em;
}

.product-image{
    width: 60%;
}

.product-image-container{
    text-align: center;
}

.product-content-container &gt;  h1{
    font-size: 1.3em;
}

.product-content-container &gt; p{
    font-size: 1em;
}

.product-link-container{
    text-align: center;
}

.product-link-container &gt; a{
    color: royalblue;
}

.product-card-container{
    display: flex;
    justify-content: space-evenly;
    height: 100vh;
    align-items: center;
    flex-wrap: wrap;
}


/* section third css */

.section-third-container{
    display: flex;
    justify-content: space-evenly;
    background-color: #D8D8D8;
    height: 100vh;
    align-items: center;
    flex-wrap: wrap;
}

.section-third-main-text &gt; h1{
    font-size: 3em;
}

.input-field{
    width: 20em;
    padding: 1em;
    font-size: .9em;
    border: none;
    outline: none;
    border-left-color: #333333;
    border-left-width: 2px;
    border-left-style: solid;
}

.message-field{
    width: 24.6em;
    padding: 1em;
    font-size: .9em;
    border: none;
    outline: none;
    border-left-color: #333333;
    border-left-width: 2px;
    border-left-style: solid;
    resize: none;
    height: 10em;
}

.btn-submit{
    width: 20em;
    padding: 1em;
    font-size: .9em;
    border: none;
    outline: none;
    background-color: #333333;
    text-align: center;
    color: white;
}


@media only screen and (max-width: 700px){
    .section-one-content{
        margin-top: 40vh;
        margin-left: 0px;
        padding: 1em;
        width: 100%;
    }

    .product-card-container{
        display: flex;
        justify-content: space-evenly;
        height: 100%;
        align-items: center;
        flex-wrap: wrap;
    }

    .input-field, .message-field{
        width: 100%;
    }

    .section-third-main-form{
        width: 90%;
    }

    

    
}

Web Page Design using CSS Flexbox with Code

HTML Code :

CSS Code :

More To Explore

Insta360 – Videos keep exporting backwards | Wrong side render in insta360

Make Animated progress step bar using Figma

How to Hide All Grids in Figma

How to Create Responsive Tool tip in figma

Pixel Grid not visible in figma | How to Turn on figma Pixel Grid

Fix External Monitor Lag on Mac OS Ventura

Keep In Touch