CSS Flexbox Tutorial Create Responsive Website

In this article, we are going to create a responsive website using CSS Flexbox concept.

CSS Flexbox: 

Flexbox is a new concept in CSS (cascading style sheet) with the help of flexbox we can create a responsive web layout very easily with less code and a minimum amount of time. so flexbox is very popular nowadays bootstrap front end framework used flexbox for has a grid system. In this article, we are going to create a responsive website using CSS flexbox concept.


If you don't have the basics knowledge of CSS flexbox then watch the below video, In that video, you will learn the basics of CSS flexbox
flexbox tutorial

Source Code:

index.html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flexbox website</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  
    <header id="header">
    <div class="container">
    <div class="header-container">
    <div class="header-text">
    <h1>We are creative let's join us</h1>
    <p>Delivering professional services worldwide since 2004. Fantastic background and outstanding expertise.</p>
    <div class="btn-section">
    <a href="#" class="btn btn-info">Start now &rarr;</a>
    </div>
    <!-- Close btn-section -->
    </div>
    <!-- Close header-text -->
    </div>
    <!-- Close header-container -->
    </div>
    <!-- Close container -->

    <div class="mobile">
        <img src="assets/images/mobile.png" alt="">
    </div>
    <!-- Close mobile -->
    <div id="logo">
     <span>PAGGE</span>
    </div>
    <!-- Close logo -->

    </header>
    <!-- Close header -->

    <section id="services">
    <div class="container">
    <div class="heading">
     <h2>Services</h2>
    </div>
    <!-- Close heading -->

    <div class="row">
    <div class="col-4 textCenter">
    <div class="servicesImg">
     <img src="assets/images/service-01.jpg" alt="">
    </div>
    <!-- Close servicesImg -->
    <div class="servicesHeading">
        <h3>Branding & identiy</h3>
    </div>
    <!-- Clsoe servicesHeading -->
    <div class="serivesInfo">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem rerum dignissimos nulla consequatur obcaecati facere
    </div>
    </div>
    <!-- Close col-4 -->

    <div class="col-4 textCenter">
        <div class="servicesImg">
         <img src="assets/images/service-02.jpg" alt="">
        </div>
        <!-- Close servicesImg -->
        <div class="servicesHeading">
            <h3>Product Design</h3>
        </div>
        <!-- Clsoe servicesHeading -->
        <div class="serivesInfo">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem rerum dignissimos nulla consequatur obcaecati facere
        </div>
        </div>
        <!-- Close col-4 -->

        <div class="col-4 textCenter">
            <div class="servicesImg">
             <img src="assets/images/service-03.jpg" alt="">
            </div>
            <!-- Close servicesImg -->
            <div class="servicesHeading">
                <h3>Web development</h3>
            </div>
            <!-- Clsoe servicesHeading -->
            <div class="serivesInfo">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem rerum dignissimos nulla consequatur obcaecati facere
            </div>
            </div>
            <!-- Close col-4 -->
    </div>
    <!-- Close row -->

    </div>
    <!-- Close container -->
    </section>
    <!--  Close services -->


    <section id="work">
    <div class="container">
     <div class="headingWhite">
     <h2>Our work</h2>
     </div>
     <!-- Close headingWhite -->

     <div class="textCenter">
         <p class="workP">Have a look at the most recent and beloved works of mine. Those products and services are a real success now.</p>
     </div>
     <!-- Close textCenter -->

      <div class="row centerContent">
      <div class="col-work">
      <img src="assets/images/service-01.jpg" alt="">
      </div>
      <!-- Close work -->

      <div class="col-work">
        <img src="assets/images/service-02.jpg" alt="">
        </div>
        <!-- Close work -->

        <div class="col-work">
            <img src="assets/images/service-03.jpg" alt="">
            </div>
            <!-- Close work -->

            <div class="col-work">
      <img src="assets/images/work1.jpg" alt="">
      </div>
      <!-- Close work -->

      <div class="col-work">
        <img src="assets/images/work2.jpg" alt="">
        </div>
        <!-- Close work -->

        <div class="col-work">
            <img src="assets/images/work3.jpg" alt="">
            </div>
            <!-- Close work -->

      </div>
      <!-- Close row -->

      <div class="textCenter mt-30">
      <a href="#" class="btn btn-default">All work in one bunddle</a>
      </div>
      <!-- Close textCenter -->

    </div>
    <!-- Close container -->
    </section>
    <!-- Close work -->

    <section id="testimonial">
    <div class="container">
     <div class="heading">
         <h2>Testimonial</h2>
     </div>
     <!-- Close heading -->
     <div class="row">
     <div class="col-4 textCenter">
     <div class="comment">
         <p><span>"</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad fuga eius saepe facere dolorem exercitationem veritatis</p>
     </div>
     <!-- Close comment -->
     <div class="customerName">
         <h3>Shakil khan</h3>
     </div>
     <!-- Close customerName -->
     <div class="customerImg">
    <img src="assets/images/customer1.jpg" alt="">
     </div>
     <!-- Close customerImg -->
     </div>
     <!-- Close col-4 -->

     <div class="col-4 textCenter">
        <div class="comment">
            <p><span>"</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad fuga eius saepe facere dolorem exercitationem veritatis</p>
        </div>
        <!-- Close comment -->
        <div class="customerName">
            <h3>Fakhar Zaman</h3>
        </div>
        <!-- Close customerName -->
        <div class="customerImg">
       <img src="assets/images/customer2.jpg" alt="">
        </div>
        <!-- Close customerImg -->
        </div>
        <!-- Close col-4 -->

        <div class="col-4 textCenter">
            <div class="comment">
                <p><span>"</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad fuga eius saepe facere dolorem exercitationem veritatis</p>
            </div>
            <!-- Close comment -->
            <div class="customerName">
                <h3>Rahul</h3>
            </div>
            <!-- Close customerName -->
            <div class="customerImg">
           <img src="assets/images/customer3.jpg" alt="">
            </div>
            <!-- Close customerImg -->
            </div>
            <!-- Close col-4 -->

     </div>
     <!-- Close row -->
    </div>
    <!-- Close container -->
    </section>
    <!-- Close testimonial -->
    
</body>
</html>

style.css


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

:root {

    --websiteColor: #2465cb;
    --headerColor: #edf0f2;
    --whiteColor: #fff;
    --blackColor: #000;

}

body {
    font-family: sans-serif;
}

#header {
    width: 100%;
    height: 100vh;
    background: var(--headerColor);
    position: relative;
}

.container {
    padding: 0 50px;
}

.header-container {
    display: flex;
    width: 400px;
    height: 100vh;
    align-items: center;
}

.header-text h1 {
    font-size: 60px;
    font-weight: bolder;
    line-height: 65px;
}

.header-text p {
    margin: 20px 0;
    color: #666;
}

.btn {
    display: inline-block;
    color: #fff;
    text-decoration: none;
}

.btn-info {
    padding: 10px 15px;
    color: var(--websiteColor);
    border: 1px solid var(--websiteColor);
}

.mobile {
    position: absolute;
    right: 100px;
    bottom: 10px;
}

#logo {
    position: absolute;
    top: 25px;
    left: 55px;
}

#logo span {
    font-size: 25px;
    font-weight: bolder;
    color: var(--websiteColor);
}

#services {
    padding: 60px 0;
}

.heading {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

.heading h2 {
    display: inline-block;
    border-bottom: 1px solid var(--websiteColor);
    color: var(--websiteColor);
    padding-bottom: 10px;
}

.headingWhite {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

.headingWhite h2 {
    display: inline-block;
    border-bottom: 1px solid var(--whiteColor);
    color: var(--whiteColor);
    padding-bottom: 10px;
}

.row {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.col-4 {
    width: 33.333333%;
    padding: 10px;
}

.textCenter {
    text-align: center;
}

.servicesImg {
    width: 160px;
    height: 160px;
    overflow: hidden;
    margin: 0 auto;
}

.servicesImg img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.servicesHeading {
    margin: 15px 0;
}


#work {
    padding: 60px 0;
    background: var(--websiteColor);
}

.workP {
    font-size: 18px;
    margin: 20px auto;
    width: 450px;
    color: var(--whiteColor);

}

.col-work {
    width: 360px;
    height: 270px;
    overflow: hidden;
}

.col-work img {
    width: 100%;
    height: 100%;
    transition: all .5s;
}

.col-work:hover.col-work img {
    transform: scale(1.3);
}

.mt-30 {
    margin-top: 30px;
}

.btn-default {
    border: 1px solid var(--whiteColor);
    color: var(--whiteColor);
    padding: 12px 20px;
}

.centerContent {
    justify-content: center;
}

#testimonial {
    padding: 60px 0;
    background: #fafafa;
}

.comment {
    margin: 15px;
}

.customerName {
    margin-bottom: 15px;
}

.customerName h3 {
    font-weight: normal;
    font-size: 18px;
}

.customerImg {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.customerImg img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.comment p span {
    font-size: 40px;

}

/* media query */
@media(max-width: 756px){
    .header-container {
        width: 100%;
    }

    .mobile {
        display: none;
    }

    .row {
        flex-direction: column;
        justify-content: center;
    }

    .col-4 {
        width: 100%;
    }

    .workP {
        width: 100%;
    }
    
    .col-work {
        margin: 0 auto;
    }



}

Download the full source code: 

To download the full source simply you have to click on the below download button.

COMMENTS

Name

ajax,2,HTML & CSS,19,JavaScript,1,PHP,11,
ltr
item
webtipstricks: CSS Flexbox Tutorial Create Responsive Website
CSS Flexbox Tutorial Create Responsive Website
In this article, we are going to create a responsive website using CSS Flexbox concept.
https://i.ytimg.com/vi/KKrpDO1FbMA/hqdefault.jpg
https://i.ytimg.com/vi/KKrpDO1FbMA/default.jpg
webtipstricks
https://www.webtipstricks.com/2019/07/flexbox-create-responsive-website.html
https://www.webtipstricks.com/
https://www.webtipstricks.com/
https://www.webtipstricks.com/2019/07/flexbox-create-responsive-website.html
true
4027471107773963481
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy