Howdy Folks welcome to this new tutorial. In this tutorial, you will learn how to apply your HTML5 & CSS3 knowledge by building an awesome responsive landing page for our "DONUTS" website. This landing page was inspired by the oreo.com landing page. So you will see a lot of similarities between them. Before jumping right in, take a look at the final product. Make sure that you spend a good amount of time seeing and analyzing the final product before building it.

https://codepen.io/thecodingpie/pen/NWxpVyL

Here is my final code on Github --> Donuts

Prerequisites

I assume that you had a decent understanding of HTML and CSS. And you should be aware of how flexbox in CSS works. This is important. Because we will be using flexbox a lot in this tutorial. Before moving on, if you are new to flexbox, then read this awesome article about css flexbox --> A Guide to flexbox by css-tricks.

I am going to use visual studio code as my text editor. You are free to use whatever code editor you like. And finally, make sure you have installed Live Server by Ritwick Dey in visual studio code. If you don't have Live Server installed, then:

  • Open visual studio code
  • Goto Extensions tab (Ctrl + Shift + X)
  • Search for "Live Server" by Ritwick Dey
  • Then Install it

Breaking Down the Design

Instead of building our landing page all at once, we are going to break it down into smaller parts and then focus on building each small part at a time. Let's break it first.

1. At the top, we have an <header> element:

header

2. Then a section with class="second-div", ie <section class="second-div">:

second-div

3. Then a <section class="third-div">:

third-div

4. Then a <section class="fourth-div">:

fourth-div

5. Finally a <footer>:

footer

If we put it all together, we will get our awesome landing page :) I hope you understood how it all fits together. Now let's start building one at a time...

Let's build it

This is my file structure:

folder structure

  • First, create a folder named "Donuts", you can call whatever you like. Then open that folder in visual studio code.
  • Create an "index.html" file directly inside "Donuts" folder.
  • Now create two folders as below, 
    • "css" --> inside this create a file called "styles.css".
    • "img" --> get all the images needed from this link and place them directly inside "img" folder --> img

At last, you should have a folder structure similar to above... Now our initial setup is done, let's create some initial code.

Open "index.html" and type:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Raleway:display=swap" rel="stylesheet">
  <title>Donuts</title>
</head>

<body>
  
</body>

</html>

That's our boilerplate code for index.html file.

  • In there, we have a <!DOCTYPE html> tag, which says it is the newer version of HTML(version 5).
  • Then we open our <html> tag and set lang="en".
  • Then our <head> tag.
  • Inside the <head> tag, we set our "charset" meta tag and set its value as "UTF-8", then set our "viewport" meta tag and give the width as "device-width" (width of whatever device the user is using) and the initial-scale as 100% or 1.0.
  • Then we linked our "styles.css" file (which is inside the "css" folder) to our current file.
  • Then we are linking "font-awesome" from a Content Delivery Network (basically another server). font awesome helps us to include so many icons inside our webpage. You can check this W3Schools link to learn more about font awesome.
  • Then we need a font called "Raleway". We are using it from Google Fonts. This is an awesome website from which you can use so many fonts in your website without downloading.
  • Then our <title> tag.
  • After closing our </head> tag, we then give our <body> tag.

Now open "styles.css" file inside the "css" folder and add some common styles:

* {
  margin: 0;
  padding: 0;
}

/* common styles */

body {
  max-width: 100vw;
  min-width: 100vw;
  overflow-x: hidden;
  font-family: 'Raleway', sans-serif;
  background-color: #F6F6F6;
}

.container {
  max-width: 80%;
  margin: 0 auto;
}

h1 {
  color: #fff;
  font-size: 2.9rem;
  font-weight: 900;
}

h2 {
  font-size: 2.4rem;
  margin-bottom: 15px;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

a {
  text-decoration: none;
  color: #111;
}

.btn {
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 25px;
  border: none;
  margin-bottom: 10px;
}

.btn:hover {
  background-color: #1B8BD9;
  color: #fff;
}

.dark-btn {
  color: #fff;
  background-color: #111;
  font-weight: bolder;
  width: 80%;
}

.dark-btn:hover {
  cursor: pointer;
}

.social-media-icon {
  width: 40px;
  height: 40px;
  padding: 0px;
  border-radius: 50%;
}

ul {
  list-style-type: none;
}

/* common styles end */
  •  First, we select everything using "*" and remove the default padding and margin applied by the browser.
  • Then select body tag and give a max-width: 100vw and min-width: 100vw. "vw" stands for view-width, ie the width of our screen. Then we set our font as "Raleway". Then give a background-color of #F6F6F6, a light grey color.
  • We have a <div class="container"> inside every outer tags like <header>, <section>. So we are selecting that "container" class by using "." (dot) character and set max-width: 80% of our screen. Then set margin: 0 auto which basically centers our <div>.

The rest is similar to the above. I hope you can understand it. Explaining everything needs much more space. I am aiming to keep this tutorial short. So follow along...

Now we have our basics set up, Its time to create the meat of our landing page :)

1). Creating the <header>

If we take a look at our <header> part of our website, we can see there are three elements:

  • <div class="container">
  • <nav> --> a navigation bar
  • <h1> --> h1 with an intro

header details

Now the code for the <header>. Type this inside <body> tag of "index.html" file:

  <header>
    <div class="container">
      <nav>
        <div class="nav-left">
          <a href="/">
            <img src="img/logo.png" alt="logo" class="brand-icon">
          </a>
          <a href="#" class="btn donuts-btn">
            DONUTS.COM
            <i class="fas fa-chevron-down"></i>
          </a>
        </div>
        <ul class="nav-right">
          <li>
            <a href="#">
              <i class="btn social-media-icon fab fa-facebook-f"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn social-media-icon fab fa-youtube"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn social-media-icon fab fa-instagram"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn social-media-icon fab fa-twitter"></i>
            </a>
          </li>
        </ul>
      </nav>
      <h1>
        There's joy in a world <br>
        with a different flow <br>
        Let’s stay playful, DONUTS
      </h1>
    </div>
  </header>

Inside the <header> tag, there is a <div class="container">. Inside that container, there is a <nav> bar and a <h1>.

Inside <nav>, there are two elements.

  • <div class="nav-left">, which holds our logo and a link.
  • <ul class="nav-right">, which holds the social media icons.

Now apply the style for the <header>.

Open "styles.css" and add:

/* header */
header {
  background-image: url('../img/banner.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 90vh;
}

header .container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

nav {
  padding: 30px 0px;
  position: fixed;
  display: flex;
  top: 0;
  left: 10%;
  z-index: 999;
  width: 80%;
}

nav div {
  flex-grow: 1;
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav-right i {
  border: 2px solid #1B8BD9;
  margin-right: 7px;
  font-size: 1.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-icon {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

/* header-part ends */
  • Here, we are adding the background image to <header> through css.
  • Then we are selecting the "container" div and applying display: flex. It makes every content inside it to spread horizontally. Again I assume that you already had a good understanding of css flexbox.
  • Then in the <nav>, we are giving a position: fixed, which sticks the navbar at top:0 and pushes it from left: 10%. Give a higher z-index, so that it stays on top of everything.

The rest is self-explanatory. If you got some trouble, please comment below...

Our <header> part is done, lets view it inside browser:

  • Select "index.html", then right-click
  • Scroll down and select "Open with Live Server"

Now you can see our web page inside the browser. Now let's create the "second-div"...

2). Creating the "second-div" section

second-div details

Now the HTML code. Type this inside "index.html" below the </header>  and inside the <body>:

 <section class="second-div">
    <div class="container">
      <div class="sd-left">
        <h2>Open up a world <br> of DONUTS.</h2>
        <p>Here's a donuts collection worth checking out. <br>
            Find playfulness and joy in these unique gifts <br> from our one stop shop for all things DONUTS.</p>
          <button class="btn dark-btn">
            SHOP NOW
          </button>
      </div>
      <div class="sd-right">
        <img src="img/package.jpg" alt="donut package">
      </div>
    </div>
  </section>

Here there is a <section> with a class="second-div". Inside that, we have a div with a class="container". Inside that there are two elements:

  • <div class="sd-left"> . Inside "sd-left", we have an <h2>, <p> and a <button> with a class="btn dark-btn"
  • <div class="sd-right">. Here, inside "sd-right", we have an <img>.

Now head to "styles.css", then type the following:

/* second section */
.second-div {
  background-image: url('../img/confetti.png');
  background-position: center;
  background-repeat: repeat-x;
  background-attachment: fixed;
}

.second-div .container {
  display: flex;
}

.sd-left {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.sd-right {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.sd-right img {
  width: 80%;
  z-index: -10;
}

/* second section ends */

Inside the "second-div", if you take a closer look, you can see a decoration png image given as overlay. That's what we are applying using this css style (first line above).

Then inside .sd-right img, we are selecting the <img> and pushes it backward by giving z-index: -10, so that our decoration image stays above all other things...

The rest is self-explanatory. Now the "third-div" section.

3). Creating the "third-div" section

third div detailsHere, inside <div class="container">, we have two <div>. One with a class="td-left" (td --> third div). Second with a class="td-right". And each div has an <img> and dark <button>

Copy the code below in "index.html":

<section class="third-div">
    <div class="container">
      <div class="td-left">
        <img src="img/milk-donut.jpg" alt="milk donut">
        <button class="btn dark-btn">
          LEARN MORE
        </button>
      </div>
      <div class="td-right">
        <img src="img/chocolate.jpg" alt="donuts chocolate">
        <button class="btn dark-btn">LEARN MORE</button>
      </div>
    </div>
  </section>

Copy the css below in "styles.css":

/* third section */
.third-div .container {
  display: flex;
  text-align: center;
}

.third-div div {
  padding: 20px;
}

.third-div img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  margin-bottom: 20px;
}

/* third div ends */

Here, in the css, object-fit: cover means, cover the div with the <img>, basically fill the entire<div> with the <img>, that's it. The rest of the css is self-explanatory.

4). Creating the "fourth-div" section

In our fourth <section>, we have "container". Inside the "container", we had two <div>:

  • <div class="fd-left">
  • <div class="fd-right">

In "fd-left", we had two polaroid photo like <img>. We had an <img> on back and an <img> on top of that. And also, it has an <h3> and <small> tag.

In the "fd-right", we had an <h2>,  <p> and a <button class="btn dark-btn">.

fourth div details

In "index.html":

<section class="fourth-div">
    <div class="container">
      <div class="fd-left">
        <div class="polaroid-back">
          <img src="img/feature-bg.jpg" alt="feature-bg">
        </div>
        <div class="polaroid-front">
          <img src="img/feature.jpg" alt="feature">
          <h3>Easy DONUTS Pyramid</h3>
          <small>1 hr 30 min, Make 3 doz.</small>
        </div>
      </div>
      <div class="fd-right">
        <h2>Dress up dessert with DONUTS.</h2>
        <p>Bite 'em, dunk 'em, or just plain eat them! There are so many ways to enjoy DONUTS.</p>
        <button class="btn dark-btn">
          VIEW RECIPIES
        </button>
      </div>
    </div>
  </section>

In "styles.css":

/* fourth div */
.fourth-div .container {
  display: flex;
}

.fourth-div img {
  width: 100%;
}

.fd-left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
}

.fd-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
}


.polaroid-back {
  background-color: #fff;
  padding: 10px;
  transform: rotate(7deg);
  max-width: 300px;
  position: absolute;
}

.polaroid-front {
  background-color: #fff;
  padding: 10px;
  transform: rotate(-7deg);
  max-width: 300px;
  position: relative ;
  top: 0;
  text-align: center;
}

/* fourth div ends */

Here, in .polaroid-back, we rotated the <img> by applying transform: rotate(7deg)  and set position: absolute.

Then in .polaroid-front, apply transform: rotate(-7deg) and set position: relative

You can easily grab the rest...

5). Final part, the <footer>

In our <footer>, again we had <div class="container">. Inside that, we had 3 <div>:

  • <div class="footer-top">
  • <div class="footer-middle">
  • <div class="footer-bottom">

Inside "footer-top", we had an <a class="logo">, which holds our logo. Then an <ul class="social-media-icons"> holding social media icons. Each icon has an extra class called "dark-btn", which makes it dark.

In the "footer-middle", we had an <h4> and <ul> holding some links.

And inside the "footer-bottom", we had a simple copyright text.

footer details

That's it, here is the code for the "index.html":

<footer>
    <div class="container">
      <div class="footer-top">
        <a href="/" class="logo">DONUTS</a>
        <ul class="social-media-icons">
          <li>
            <a href="#">
              <i class="btn dark-btn social-media-icon fab fa-facebook-f"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn dark-btn social-media-icon fab fa-youtube"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn dark-btn social-media-icon fab fa-instagram"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn dark-btn social-media-icon fab fa-twitter"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="footer-middle">
          <h4>MAY WE HELP YOU?</h4>
          <ul>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">FAQs</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Use</a></li>
          </ul>
      </div>  
      <div class="footer-bottom">
        &copy; DONUTS International 2020
      </div>
    </div>
  </footer>

Inside "styles.css":

/* footer */
footer .container {
  display: flex;
  flex-direction: column;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0px;
  border-bottom: 2px solid #fff;
}

.footer-top .logo {
  font-family: cursive;
  font-size: 1.5rem;
}

.footer-top .social-media-icons {
  display: flex;
}

.footer-top i {
  border: 2px solid #1B8BD9;
  margin-right: 7px;
  font-size: 1.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-middle {
  padding: 30px 0px;
  border-bottom: 2px solid #fff;
}

.footer-middle ul{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.footer-bottom {
  text-align: center;
  padding: 30px 0px;
  border-bottom: 2px solid #fff;
  font-size: 1.5rem;
}

/* footer ends */

Now our landing page is done. But it is not that much responsive. To make it responsive, I am going to add some media queries. I am only adding two breakpoints, for making it less complex. The breakpoints are at 992px and 596px.

Inside the "styles.css", at the very bottom:

@media(max-width: 992px) {
  .second-div .container {
    flex-direction: column;
    align-items: center;
  }

  .sd-right img {
    width: 100%;
  }

  .third-div .container {
    flex-direction: column;
  }
  
  .fourth-div .container {
    flex-direction: column;
  }
}

@media(max-width: 596px) {
  .donuts-btn {
    display: none;
  }
}

Here, in the second style, it is saying that up to 596px screen size, those styles will be in effect.

Then for the screen size between 992px and 596px apply the styles inside its brackets. 

The styles are applied to the .second-div's  .container, .third-div's and .fourth-div's .container and the <img> inside the .sd-right and for the .donuts-btn

Now our landing page became responsive too... You can add so many breakpoints as you like. 

The final code for "index.html":

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Raleway:display=swap" rel="stylesheet">
  <title>Donuts</title>
</head>

<body>
  <header>
    <div class="container">
      <nav>
        <div class="nav-left">
          <a href="/">
            <img src="img/logo.png" alt="logo" class="brand-icon">
          </a>
          <a href="#" class="btn donuts-btn">
            DONUTS.COM
            <i class="fas fa-chevron-down"></i>
          </a>
        </div>
        <ul class="nav-right">
          <li>
            <a href="#">
              <i class="btn social-media-icon fab fa-facebook-f"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn social-media-icon fab fa-youtube"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn social-media-icon fab fa-instagram"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn social-media-icon fab fa-twitter"></i>
            </a>
          </li>
        </ul>
      </nav>
      <h1>
        There's joy in a world <br>
        with a different flow <br>
        Let’s stay playful, DONUTS
      </h1>
    </div>
  </header>

  <section class="second-div">
    <div class="container">
      <div class="sd-left">
        <h2>Open up a world <br> of DONUTS.</h2>
          <p>Here's a donuts collection worth checking out. <br>
            Find playfulness and joy in these unique gifts <br> from our one stop shop for all things DONUTS.</p>
          <button class="btn dark-btn">
            SHOP NOW
          </button>
      </div>
      <div class="sd-right">
        <img src="img/package.jpg" alt="donut package">
      </div>
    </div>
  </section>

  <section class="third-div">
    <div class="container">
      <div class="td-left">
        <img src="img/milk-donut.jpg" alt="milk donut">
        <button class="btn dark-btn">
          LEARN MORE
        </button>
      </div>
      <div class="td-right">
        <img src="img/chocolate.jpg" alt="donuts chocolate">
        <button class="btn dark-btn">LEARN MORE</button>
      </div>
    </div>
  </section>

  <section class="fourth-div">
    <div class="container">
      <div class="fd-left">
        <div class="polaroid-back">
          <img src="img/feature-bg.jpg" alt="feature-bg">
        </div>
        <div class="polaroid-front">
          <img src="img/feature.jpg" alt="feature">
          <h3>Easy DONUTS Pyramid</h3>
          <small>1 hr 30 min, Make 3 doz.</small>
        </div>
      </div>
      <div class="fd-right">
        <h2>Dress up dessert with DONUTS.</h2>
        <p>Bite 'em, dunk 'em, or just plain eat them! There are so many ways to enjoy DONUTS.</p>
        <button class="btn dark-btn">
          VIEW RECIPIES
        </button>
      </div>
    </div>
  </section>

  <footer>
    <div class="container">
      <div class="footer-top">
        <a href="/" class="logo">DONUTS</a>
        <ul class="social-media-icons">
          <li>
            <a href="#">
              <i class="btn dark-btn social-media-icon fab fa-facebook-f"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn dark-btn social-media-icon fab fa-youtube"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn dark-btn social-media-icon fab fa-instagram"></i>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="btn dark-btn social-media-icon fab fa-twitter"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="footer-middle">
          <h4>MAY WE HELP YOU?</h4>
          <ul>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">FAQs</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Use</a></li>
          </ul>
      </div>  
      <div class="footer-bottom">
        &copy; DONUTS International 2020
      </div>
    </div>
  </footer>
  
</body>

</html>

And the final code for "styles.css":

* {
  margin: 0;
  padding: 0;
}

/* common styles */

body {
  max-width: 100vw;
  min-width: 100vw;
  overflow-x: hidden;
  font-family: 'Raleway', sans-serif;
  background-color: #F6F6F6;
}

.container {
  max-width: 80%;
  margin: 0 auto;
}

h1 {
  color: #fff;
  font-size: 2.9rem;
  font-weight: 900;
}

h2 {
  font-size: 2.4rem;
  margin-bottom: 15px;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

a {
  text-decoration: none;
  color: #111;
}

.btn {
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 25px;
  border: none;
  margin-bottom: 10px;
}

.btn:hover {
  background-color: #1B8BD9;
  color: #fff;
}

.dark-btn {
  color: #fff;
  background-color: #111;
  font-weight: bolder;
  width: 80%;
}

.dark-btn:hover {
  cursor: pointer;
}

.social-media-icon {
  width: 40px;
  height: 40px;
  padding: 0px;
  border-radius: 50%;
}

ul {
  list-style-type: none;
}

/* common styles end */

/* header */
header {
  background-image: url('../img/banner.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 90vh;
}

header .container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

nav {
  padding: 30px 0px;
  position: fixed;
  display: flex;
  top: 0;
  left: 10%;
  z-index: 999;
  width: 80%;
}

nav div {
  flex-grow: 1;
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav-right i {
  border: 2px solid #1B8BD9;
  margin-right: 7px;
  font-size: 1.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-icon {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

/* header-part ends */

/* second section */
.second-div {
  background-image: url('../img/confetti.png');
  background-position: center;
  background-repeat: repeat-x;
  background-attachment: fixed;
}

.second-div .container {
  display: flex;
}

.sd-left {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.sd-right {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.sd-right img {
  width: 80%;
  z-index: -10;
}

/* second section ends */

/* third section */
.third-div .container {
  display: flex;
  text-align: center;
}

.third-div div {
  padding: 20px;
}

.third-div img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  margin-bottom: 20px;
}

/* third div ends */

/* fourth div */
.fourth-div .container {
  display: flex;
}

.fourth-div img {
  width: 100%;
}

.fd-left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
}

.fd-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
}


.polaroid-back {
  background-color: #fff;
  padding: 10px;
  transform: rotate(7deg);
  max-width: 300px;
  position: absolute;
}

.polaroid-front {
  background-color: #fff;
  padding: 10px;
  transform: rotate(-7deg);
  max-width: 300px;
  position: relative ;
  top: 0;
  text-align: center;
}

/* fourth div ends */

/* footer */
footer .container {
  display: flex;
  flex-direction: column;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0px;
  border-bottom: 2px solid #fff;
}

.footer-top .logo {
  font-family: cursive;
  font-size: 1.5rem;
}

.footer-top .social-media-icons {
  display: flex;
}

.footer-top i {
  border: 2px solid #1B8BD9;
  margin-right: 7px;
  font-size: 1.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-middle {
  padding: 30px 0px;
  border-bottom: 2px solid #fff;
}

.footer-middle ul{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.footer-bottom {
  text-align: center;
  padding: 30px 0px;
  border-bottom: 2px solid #fff;
  font-size: 1.5rem;
}

/* footer ends */

@media(max-width: 992px) {
  .second-div .container {
    flex-direction: column;
    align-items: center;
  }

  .sd-right img {
    width: 100%;
  }

  .third-div .container {
    flex-direction: column;
  }
  
  .fourth-div .container {
    flex-direction: column;
  }
}

@media(max-width: 596px) {
  .donuts-btn {
    display: none;
  }
}

Conclusion

I hope you enjoyed this tutorial. If you had any doubts, please comment them below. Thank you :)