Responsive HTML CSS About Us Section

Responsive About Us section built with HTML and CSS, featuring a modern split layout with image and content overlay. Designed for clarity and visual balance, with clean typography, a call-to-action button, and a mobile-friendly structure. Suitable for business websites, agency pages, and landing sections, with easy customization and optimized layout for all screen sizes.

Final output:

Final Output Code for Responsive HTML CSS About Us Section:

HTML

<section class="about">
    <div class="container">
        <img src="about.jpg" alt="">
        <div class="about-us">
            <h2>About us</h2>
            <p>We combine thoughtful design, clear strategy, and solid execution to build digital experiences that
                perform.
            </p>
            <p> Focused on simplicity and scalability, we create work that grows with your business and delivers
                measurable results.</p>

            <a class="button" href="#">Learn More About Us</a>
        </div>
    </div>
</section>

CSS

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

body {
  font-family: Arial, Helvetica, sans-serif;
}

@media screen and (min-width: 768px) {
  .about .container {
    max-width: 90%;
    margin-inline: auto;
  }
}

.about {
  padding: 3rem;
  position: relative;
}

.about img {
  max-width: 100%;
}

.about .about-us {
  padding: 2rem;
  background-color: #1F2933;
  color: #fff;
}

.about .about-us h2 {
  padding-bottom: 2rem;
}

.about .about-us p {
  padding-bottom: 1rem;
  line-height: 1.3rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.about .about-us a.button {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  background-color: #fff;
  color: #1F2933;
}

@media screen and (min-width: 1024px) {
  .about img {
    max-width: 75%;
  }

  .about .about-us {
    width: 25%;
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.