Building a Complete Responsive Modern Website with HTML and CSS

Hello and welcome! Are you looking to create a stunning, modern, and fully responsive website? You’re in the right place. In this article, we’ll walk through building a sleek website using just HTML and CSS. Whether you’re a beginner or looking to sharpen your web development skills, this guide will help you create a professional site that looks great on all devices.

Let’s dive in!

Introduction

Creating a responsive website means designing it so that it looks good on all screen sizes, from desktop monitors to tablets and smartphones. This ensures that all users have a positive experience, no matter what device they are using. We will be using HTML for the structure and CSS for the styling.

We’ll cover:

Setting up the basic structure with HTML
Styling the website with CSS
Making the website responsive

Ready to start? Let’s go!

HTML Code

First, let’s create the HTML structure. Here’s a basic template for our website:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SM Solutions</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <nav>
    <div class="container">
      <div class="navbar">
        <div class="logo"><span>SM</span> Solutions</div>
        <div class="nav-links">
          <a href="#why-us">Why Us</a>
          <a href="#services">Services</a>
          <a href="#">Blog</a>
          <a href="#">Contact</a>
          <a href="#" class="btn">Get Started</a>
        </div>
        <img class="menu" src="images/menu-line.png" alt="menu" />
      </div>
    </div>
  </nav>
  <section id="hero">
    <div class="container">
      <p>Your social success starts here: Elevate your brand with SM Solutions</p>
      <h1>Elevate Your Brand's Story with <span>SM</span> Solutions</h1>
      <a href="#" class="btn">Get Started</a>
    </div>
  </section>
  <section id="expertise">
    <div class="container">
      <div class="title">
        <h3>Our Expertise</h3>
        <p class="desc">We specialize in crafting tailored social media strategies that propel brands to the forefront of their industries</p>
      </div>
      <div class="expert-cards">
        <div class="expert-card">
          <h2>Market <br /> Research</h2>
          <div class="expert-img-cover">
            <img class="expert-image" src="images/research.jpg" alt="Market Research" />
          </div>
        </div>
        <div class="expert-card purple-card">
          <h2>Ads <br /> Production</h2>
          <div class="expert-img-cover">
            <img class="expert-image" src="images/ads.jpg" alt="Ads Production" />
          </div>
        </div>
        <div class="expert-card">
          <h2>Branding <br /> Strategies</h2>
          <div class="expert-img-cover">
            <img class="expert-image" src="images/brand.jpg" alt="Branding Strategies" />
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="why-us">
    <div class="container">
      <div class="why-us-grid">
        <div>
          <h3>Why Us</h3>
          <h2>Meet the Visionaries Behind Your <span>Digital Success</span> Story</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam accusamus reiciendis maxime, provident possimus explicabo quaerat totam, ducimus eum obcaecati magni sequi eligendi fuga illum?</p>
          <a href="#" class="btn">Read More</a>
        </div>
        <div class="why-us-img-cover">
          <img class="why-us-img" src="images/meeting.jpg" alt="Meeting" />
        </div>
      </div>
    </div>
  </section>
  <section id="progress">
    <div class="container">
      <div class="progress-items">
        <div class="progress-item">
          <h1>50+</h1>
          <p>Creative People</p>
        </div>
        <div class="progress-item">
          <h1>70+</h1>
          <p>Trusted Clients</p>
        </div>
        <div class="progress-item">
          <h1>5+</h1>
          <p>Years Experience</p>
        </div>
        <div class="progress-item">
          <h1>500+</h1>
          <p>Satisfied Clients</p>
        </div>
      </div>
    </div>
  </section>
  <section id="services">
    <div class="container">
      <h3 class="service-title">Services</h3>
      <h1 class="service-heading">Elevate Your Brand with Our <span>SM</span> Solutions</h1>
      <div class="service-items">
        <div class="service-item">
          <div class="number"><h3>01</h3></div>
          <div class="content">
            <div class="content-body">
              <h3>Strategic Planning</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam deserunt, alias dolor facere iste ducimus repellendus ad cum nostrum iusto.</p>
            </div>
            <a href="#" class="btn">Learn More</a>
          </div>
        </div>
        <div class="service-item">
          <div class="number"><h3>02</h3></div>
          <div class="content">
            <div class="content-body">
              <h3>Content Creation</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellendus perferendis quis modi, inventore cumque. Fugit blanditiis eligendi non sapiente.</p>
            </div>
            <a href="#" class="btn">Learn More</a>
          </div>
        </div>
        <div class="service-item">
          <div class="number"><h3>03</h3></div>
          <div class="content">
            <div class="content-body">
              <h3 class="purple">Community Management</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellendus perferendis quis modi, inventore cumque. Fugit blanditiis eligendi.</p>
            </div>
            <a href="#" class="btn">Learn More</a>
          </div>
        </div>
        <div class="service-item">
          <div class="number"><h3>04</h3></div>
          <div class="content">
            <div class="content-body">
              <h3>Advertising Campaigns</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellendus perferendis quis modi, inventore cumque. Fugit blanditiis eligendi non sapiente.</p>
            </div>
            <a href="#" class="btn">Learn More</a>
          </div>
        </div>
        <div class="service-item">
          <div class="number"><h3>05</h3></div>
          <div class="content">
            <div class="content-body">
              <h3>Social Commerce</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellendus perferendis quis modi, inventore cumque. Fugit blanditiis eligendi non sapiente.</p>
            </div>
            <a href="#" class="btn">Learn More</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer>
    <div class="container">
      <div class="footer-content">
        <p>&copy; All rights reserved for iMe Creative (Pvt) Ltd.</p>
        <p>Designed and developed by iMe Creative</p>
      </div>
    </div>
  </footer>
</body>
</html>

CSS Code

Next, let’s style our HTML with CSS. Here’s the complete CSS for our website:

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  color: white;
  scroll-behavior: smooth;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
}

a {
  text-decoration: none;
  display: inline-block;
}

.btn {
  border: 2px solid #b9e901;
  padding: 8px 16px;
  border-radius: 8px;
  text-transform: uppercase;
  white-space:

 nowrap;
}

.btn:hover {
  background-color: #b9e901;
  color: #111;
}

h1 {
  font-family: "Oswald", sans-serif;
  font-size: 80px;
}

h2 {
  font-family: "Oswald", sans-serif;
  font-size: 44px;
}

h3 {
  font-family: "Oswald", sans-serif;
  font-size: 32px;
}

nav {
  background-color: #2e2e2e;
  padding-block: 24px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: "Oswald", sans-serif;
  font-size: 24px;
}

.logo span {
  font-family: "Oswald", sans-serif;
  color: #6121ea;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a:hover {
  text-decoration: underline #b9e901;
  text-underline-offset: 5px;
}

.menu {
  display: none;
}

#hero {
  background-color: #111;
  padding-block: 120px;
  text-align: center;
}

#hero h1 {
  max-width: 900px;
  margin: 24px auto 48px;
}

#hero h1 span {
  color: #6121ea;
  font-family: "Oswald", sans-serif;
}

#expertise {
  background-color: #2e2e2e;
  padding-block: 96px;
}

#expertise .title {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

#expertise .desc {
  max-width: 500px;
}

.expert-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}

.expert-card {
  background-color: #111;
  padding: 16px;
  border-radius: 8px;
}

.expert-card.purple-card {
  background-color: #6121ea;
}

.expert-card:hover {
  box-shadow: 0 0 8px #b9e901;
}

.expert-img-cover {
  position: relative;
  height: 250px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 16px;
}

.expert-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#why-us {
  background-color: #111;
  padding-block: 96px;
}

.why-us-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

#why-us span {
  color: #6121ea;
  font-family: "Oswald", sans-serif;
}

#why-us p {
  margin-block: 24px;
}

.why-us-img-cover {
  position: relative;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
}

.why-us-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#progress {
  background-color: #6121ea;
  padding-block: 20px;
}

.progress-items {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.progress-item {
  text-align: center;
}

#services {
  background-color: #2e2e2e;
  padding-block: 96px;
}

.service-title, .service-heading {
  text-align: center;
}

.service-heading {
  max-width: 800px;
  margin: 0 auto;
}

.service-heading span {
  color: #6121ea;
  font-family: "Oswald", sans-serif;
}

.service-item {
  padding-block: 24px;
  border-bottom: 2px solid #111;
  display: flex;
  align-items: center;
  gap: 24px;
}

.service-item:last-child {
  border-bottom: none;
}

.service-item .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.service-item .content .content-body {
  max-width: 800px;
}

.service-item .content .content-body p {
  margin-top: 8px;
}

footer {
  background-color: #111;
  padding-block: 24px;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media screen and (max-width: 1440px) {
  .container {
    max-width: 1040px;
  }
}

@media screen and (max-width: 1040px) {
  .container {
    max-width: 768px;
  }
  h1 {
    font-size: 60px;
  }
  #expertise .title {
    display: block;
  }
  #expertise .desc {
    max-width: 100%;
    margin-top: 8px;
  }
  .expert-cards {
    grid-template-columns: 1fr;
  }
  .why-us-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }
}

@media screen and (max-width: 768px) {
  .container {
    max-width: 576px;
  }
  h1 {
    font-size: 45px;
  }
  .nav-links {
    display: none;
  }
  .menu {
    display: block;
  }
  .progress-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
  }
  .service-item .content {
    display: block;
  }
  .service-item .content .content-body {
    margin-bottom: 24px;
  }
  .number {
    display: none;
  }
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

Explanation

HTML Structure:

Nav Section: Contains the logo and navigation links.
Hero Section: The main headline and a call-to-action button.
Expertise Section: Highlights the core services.
Why Us Section: Provides a brief about why users should choose your services.
Progress Section: Displays key statistics.
Services Section: Details about the services offered.
Footer: Contact and credit information.

CSS Styling:

General Styles: Includes font imports and base styles for text and layout.
Button Styles: Styling for the call-to-action buttons.
Responsive Layouts: Adjustments for various screen sizes to ensure the website is responsive.

Conclusion

Congratulations! You’ve created a fully responsive modern website using HTML and CSS. This guide covers the basics of structuring and styling your site to ensure it looks great on any device.

For more detailed code and resources, visit the complete source code on GitHub. Happy coding!

By following this guide, you not only build a beautiful and responsive website but also improve your web development skills. Keep experimenting, learning, and most importantly, have fun creating your online presence!