→ Sahin Miah
→ aboutContwnt

aboutContwnt

This bootstrap css example is contributed by Sahin Miah, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Hero

Author Sahin Miah

870

v.4.6

Fork Fullscreen

<section class="bg-light text-center py-5">
	<div class="container pb-5 pt-5">
		<div class="pb-5 pt-5 row">
			<div class="col-lg-9 col-xl-8 ms-auto me-auto pb-5 pt-5">
				<span>About Pages</span>
				<h1 class="display-3 fw-bold mb-3">Make Good Choices</h1>
				<p class="lead mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit tellus eu.
		</div>
	</div>
</section>

<section class="py-5">
	<div class="container">
		<div class="row gx-4 align-items-center justify-content-between">
			<div class="col-md-5 order-2 order-md-1">
				<div class="mt-5 mt-md-0">
					<span class="text-muted">Our Story</span>
					<h2 class="display-5 fw-bold">Sahin Miah</h2>
          <p class="fw-bold">Developer</p>
					<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
					<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p><a class="btn btn-primary mt-2" href="#">Learn more</a>
				</div>
			</div>
			<div class="col-md-5 order-1 order-md-2"><img class="img-fluid rounded-3" src="https://images.unsplash.com/photo-1623366302587-b38b1ddaefd9?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHlvdW5nJTIwbWFufGVufDB8fDB8fHww"></div>
		</div>
	</div>
</section>

<section class="py-5">
	<div class="container">
		
		<div class="row text-center mb-4">
			<div class="col-12 col-lg-10 col-xl-8 mx-auto text-center">
				<p class="text-muted mb-0 fw-light">Steps</p>
				<h2>Existing Clint</h2>
				<p class="lead mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum. Phasellus sagittis nisl vitae auctor sodales.</p>
			</div>
		</div>
		<div class="row justify-content-center">
			<div class="col-lg-9">
				<div class="row">
					
					<div class="col-lg-4">
						<div class="text-center position-relative">
							
							<div class="step-icon mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width:150px;height:150px">
								<svg class="bi bi-fingerprint text-secondary fs-1" height="40" viewbox="0 0 16 16" width="40" xmlns="http://www.w3.org/2000/svg">
								<path d="M8.06 6.5a.5.5 0 0 1 .5.5v.776a11.5 11.5 0 0 1-.552 3.519l-1.331 4.14a.5.5 0 0 1-.952-.305l1.33-4.141a10.5 10.5 0 0 0 .504-3.213V7a.5.5 0 0 1 .5-.5Z"></path>
								<path d="M6.06 7a2 2 0 1 1 4 0 .5.5 0 1 1-1 0 1 1 0 1 0-2 0v.332c0 .409-.022.816-.066 1.221A.5.5 0 0 1 6 8.447c.04-.37.06-.742.06-1.115V7Zm3.509 1a.5.5 0 0 1 .487.513 11.5 11.5 0 0 1-.587 3.339l-1.266 3.8a.5.5 0 0 1-.949-.317l1.267-3.8a10.5 10.5 0 0 0 .535-3.048A.5.5 0 0 1 9.569 8Zm-3.356 2.115a.5.5 0 0 1 .33.626L5.24 14.939a.5.5 0 1 1-.955-.296l1.303-4.199a.5.5 0 0 1 .625-.329Z"></path>
								<path d="M4.759 5.833A3.501 3.501 0 0 1 11.559 7a.5.5 0 0 1-1 0 2.5 2.5 0 0 0-4.857-.833.5.5 0 1 1-.943-.334Zm.3 1.67a.5.5 0 0 1 .449.546 10.72 10.72 0 0 1-.4 2.031l-1.222 4.072a.5.5 0 1 1-.958-.287L4.15 9.793a9.72 9.72 0 0 0 .363-1.842.5.5 0 0 1 .546-.449Zm6 .647a.5.5 0 0 1 .5.5c0 1.28-.213 2.552-.632 3.762l-1.09 3.145a.5.5 0 0 1-.944-.327l1.089-3.145c.382-1.105.578-2.266.578-3.435a.5.5 0 0 1 .5-.5Z"></path>
								<path d="M3.902 4.222a4.996 4.996 0 0 1 5.202-2.113.5.5 0 0 1-.208.979 3.996 3.996 0 0 0-4.163 1.69.5.5 0 0 1-.831-.556Zm6.72-.955a.5.5 0 0 1 .705-.052A4.99 4.99 0 0 1 13.059 7v1.5a.5.5 0 1 1-1 0V7a3.99 3.99 0 0 0-1.386-3.028.5.5 0 0 1-.051-.705ZM3.68 5.842a.5.5 0 0 1 .422.568c-.029.192-.044.39-.044.59 0 .71-.1 1.417-.298 2.1l-1.14 3.923a.5.5 0 1 1-.96-.279L2.8 8.821A6.531 6.531 0 0 0 3.058 7c0-.25.019-.496.054-.736a.5.5 0 0 1 .568-.422Zm8.882 3.66a.5.5 0 0 1 .456.54c-.084 1-.298 1.986-.64 2.934l-.744 2.068a.5.5 0 0 1-.941-.338l.745-2.07a10.51 10.51 0 0 0 .584-2.678.5.5 0 0 1 .54-.456Z"></path>
								<path d="M4.81 1.37A6.5 6.5 0 0 1 14.56 7a.5.5 0 1 1-1 0 5.5 5.5 0 0 0-8.25-4.765.5.5 0 0 1-.5-.865Zm-.89 1.257a.5.5 0 0 1 .04.706A5.478 5.478 0 0 0 2.56 7a.5.5 0 0 1-1 0c0-1.664.626-3.184 1.655-4.333a.5.5 0 0 1 .706-.04ZM1.915 8.02a.5.5 0 0 1 .346.616l-.779 2.767a.5.5 0 1 1-.962-.27l.778-2.767a.5.5 0 0 1 .617-.346Zm12.15.481a.5.5 0 0 1 .49.51c-.03 1.499-.161 3.025-.727 4.533l-.07.187a.5.5 0 0 1-.936-.351l.07-.187c.506-1.35.634-2.74.663-4.202a.5.5 0 0 1 .51-.49Z"></path></svg>
							</div>
							<h4 class="mt-3 fs-5">Google</h4>
							<p class="text-muted mt-4 fs-6 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit amet consectetur Lorem.</p>
							<div class="arrow-icon position-absolute d-none d-lg-block" style="top:50px; right:-25px">
								<svg class="bi bi-arrow-right" height="30" viewbox="0 0 16 16" width="30" xmlns="http://www.w3.org/2000/svg">
								<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill-rule="evenodd"></path></svg>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="text-center position-relative">
							
							<div class="step-icon mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width: 150px;height: 150px;">
								<svg class="bi bi-lightbulb text-secondary" height="40" viewbox="0 0 16 16" width="40" xmlns="http://www.w3.org/2000/svg">
								<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"></path></svg>
							</div>
							<h4 class="mt-3 fs-5">Amazon</h4>
							<p class="text-muted mt-4 fs-6 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit amet consectetur Lorem.</p>
							<div class="arrow-icon d-none d-lg-block position-absolute" style="top:50px; right:-25px">
								<svg class="bi bi-arrow-right" height="30" viewbox="0 0 16 16" width="30" xmlns="http://www.w3.org/2000/svg">
								<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill-rule="evenodd"></path></svg>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="text-center position-relative">
							
							<div class="step-icon mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width: 150px;height: 150px;">
								<svg class="bi bi-mic text-secondary" height="40" viewbox="0 0 16 16" width="40" xmlns="http://www.w3.org/2000/svg">
								<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"></path>
								<path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"></path></svg>
							</div>
							<h4 class="mt-3 fs-5">Daraz</h4>
							<p class="text-muted mt-4 fs-6 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit amet consectetur Lorem.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="skillsSection py-5 d-flex flex-column align-items-center justify-content-center gap-5">
  <h1>My Skills</h1>
  <div class="progress w-100" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar w-75"> HTML</div>
  </div>
  <div class="progress w-100" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar w-50"> CSS</div>
  </div>
  <div class="progress w-100" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar w-75"> js</div>
  </div>

</section>
 
<section class="py-5 bg-light">
	<div class="container">
		
		<div class="row d-lg-flex d-none text-center">
			<div class="col p-3"><img alt="Logo" src="https://freefrontend.dev/assets/logo1.svg"></div>
			<div class="col p-3"><img alt="Logo" src="https://freefrontend.dev/assets/logo2.svg"></div>
			<div class="col p-3"><img alt="Logo" src="https://freefrontend.dev/assets/logo3.svg"></div>
			<div class="col p-3"><img alt="Logo" src="https://freefrontend.dev/assets/logo4.svg"></div>
			<div class="col p-3"><img alt="Logo" src="https://freefrontend.dev/assets/logo5.svg"></div>
		</div>
	</div>
</section>

More Examples

Home Page

Author:
Md. Hasibur Rahman

4 months ago

287

v.4.6
marquee track

Author:
Juan Antonio González Hernández

7 months ago

1.1k

v.4.6
slider

Author:
Ad Apon7

6 months ago

1k

v.5.3
Personal Biography section
destra immagine e sinistra testo

Author:
Anonymous

5 months ago

590

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

3 months ago

666

v.5.3
Personal Biography section

Author:
Ad Apon7

5 months ago

793

v.5.3
portfolio

Author:
Ad Apon7

6 months ago

431

v.4.6
Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

1 year ago

8k

v.5.3
Personal Biography section
idem

Author:
Anonymous

5 months ago

629

v.5.3
Clean hero section with image
tugas

Author:
Anonymous

1 year ago

1.8k

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

2 years ago

4.2k

v.4.6
portfolio page

Author:
Md. Hasibur Rahman

4 months ago

255

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent