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:
About us
We combine thoughtful design, clear strategy, and solid execution to build digital experiences that perform.
Focused on simplicity and scalability, we create work that grows with your business and delivers measurable results.
Learn More About Us1. Let’s start with a section element with the class about. Inside it, add a .container div with the image inside it.
<section class="about">
<div class="container">
<img src="about.jpg" alt="">
</div>
</section>Reset margins and padding, and set the font family on the body. Give the section some padding and set the image width to max-width: 100% so it doesn’t overflow on smaller screens.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.about {
padding: 3rem;
}
.about img {
max-width: 100%;
min-height: 60vh;
object-fit: cover;
}
@media screen and (max-width: 768px) {
img {
min-height: 40vh;
}
}Output:
2. Add the .about-us div after the image with the heading, two description paragraphs, and a “Learn More” link inside it.
<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>Give it a dark background, white text, and some padding. Add spacing below the heading and paragraphs to separate them out.
.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;
}Output:
About us
We combine thoughtful design, clear strategy, and solid execution to build digital experiences that perform.
Focused on simplicity and scalability, we create work that grows with your business and delivers measurable results.
Learn More About Us3. Style the button link. Setting the display to inline-block is needed because anchor tags are inline by default, which means padding and margin won’t apply correctly without it.
.about .about-us a.button {
display: inline-block;
margin-top: 2rem;
padding: 1rem 1.25rem;
text-decoration: none;
background-color: #fff;
color: #1F2933;
}Output:
About us
We combine thoughtful design, clear strategy, and solid execution to build digital experiences that perform.
Focused on simplicity and scalability, we create work that grows with your business and delivers measurable results.
Learn More About Us4. On tablet screens, constrain the container to 90% width and center it with margin-inline: auto so it doesn’t stretch edge to edge.
@media screen and (min-width: 768px) {
.about .container {
max-width: 90%;
margin-inline: auto;
}
}On desktop screens, this is where the overlay effect kicks in. First set the position on the .about section to relative so the content box can be placed relative to it. Then set the image width to 75% so it takes up most of the section.
@media screen and (min-width: 1024px) {
.about {
position: relative;
}
.about img {
max-width: 75%;
}
}Now use position: absolute on .about-us with left: 75% and top: 50% to place it at the right edge of the image, vertically centered. Then use transform: translate(-50%, -50%) to pull it back so it sits exactly centered at that intersection point, overlapping the image edge.
@media screen and (min-width: 1024px) {
.about .about-us {
width: 25vw;
position: absolute;
left: 75%;
top: 50%;
transform: translate(-50%, -50%);
}
}Output:
About us
We combine thoughtful design, clear strategy, and solid execution to build digital experiences that perform.
Focused on simplicity and scalability, we create work that grows with your business and delivers measurable results.
Learn More About UsFinal 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%;
min-height: 60vh;
object-fit: cover;
}
@media screen and (max-width: 768px) {
img {
min-height: 40vh;
}
}
.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: 25vw;
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.
