Web Page Design using CSS Flexbox with Code

Categories: CSS TutorialHTML TutorialUncategorizedWeb Designs

Web Page Design using CSS Flexbox with Code

Web design using css flexbox

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%;
    }

    

    
}

reecry