<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap header snipp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.icon-svg.icon-svg-sm {
width: 2.2rem;
height: 2.2rem;
}
.lineal-stroke {
fill: #36496d;
}
.text-primary .lineal-fill {
fill: #e3a6b6;
}
</style>
</head>
<body
<section class="py-5 bg-light">
<div class="container py-5">
<div class="row gy-lg-5 align-items-center">
<div class="col-md-8 col-lg-5 d-flex position-relative mx-auto">
<div><img src="https://source.unsplash.com/sh3LSNbyj7k/400x400" class="rounded-pill" alt="" /></div>
<div class="card shadow-lg position-absolute" style="bottom: 10%; right: 2%;">
<div class="card-body py-4 px-5">
<div class="d-flex flex-row align-items-center">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 409.6" class="svg-inject icon-svg icon-svg-sm text-primary mx-auto me-3"><path class="lineal-stroke" d="M204.8 409.6C91.9 409.6 0 317.7 0 204.8c0-49.9 18.2-98.1 51.2-135.5 4.4-5 12-5.5 17-1.1s5.5 12 1.1 17c-29.1 33-45.2 75.5-45.2 119.5 0 99.6 81.1 180.7 180.7 180.7s180.7-81.1 180.7-180.7S304.4 24.1 204.8 24.1c-27.3-.1-54.2 6.1-78.7 18-6 2.9-13.2.4-16.1-5.6-2.9-6-.4-13.2 5.6-16.1C143.4 6.9 173.9-.1 204.8 0c112.9 0 204.8 91.9 204.8 204.8s-91.9 204.8-204.8 204.8z"></path><path class="lineal-fill" d="M349.4 204.8c0 79.8-64.7 144.6-144.6 144.6S60.2 284.6 60.2 204.8 125 60.2 204.8 60.2 349.4 125 349.4 204.8z"></path><path class="lineal-stroke" d="M204.8 361.4c-86.4 0-156.6-70.2-156.6-156.6S118.4 48.2 204.8 48.2s156.6 70.2 156.6 156.6-70.2 156.6-156.6 156.6zm0-289.1c-73.1 0-132.5 59.4-132.5 132.5s59.4 132.5 132.5 132.5 132.5-59.5 132.5-132.5S277.9 72.3 204.8 72.3z"></path><path class="lineal-stroke" d="M200.9 246.7c-8.8 0-17.2-3.5-23.5-9.7L145 204.5c-4.7-4.7-4.7-12.3 0-17s12.3-4.7 17 0l32.5 32.5c3.6 3.5 9.3 3.5 12.8 0l49.8-49.9c4.7-4.7 12.3-4.7 17 0s4.7 12.3 0 17L224.4 237c-6.2 6.2-14.7 9.7-23.5 9.7z"></path></svg>
</div>
<div>
<h3 class="fw-bold mb-0 text-danger">250+</h3>
<p class="fs-6 fw-semibold text-body-tertiary mb-0">Projects Done</p>
</div>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-lg-6 offset-lg-1 col-xxl-6 text-center text-lg-start">
<h1 class="display-4 mb-4 fw-bold pt-5 pt-lg-0">I'm User Interface Designer & Developer.</h1>
<p class="lead pb-5 fs-4">Hello! I'm Julia, a freelance user interface designer & developer based in London. I’m very passionate about the work that I do.</p>
<div class="d-flex justify-content-center justify-content-lg-start">
<span><a href="#" class="btn btn-primary rounded-pill me-2 px-5 py-3 fw-semibold">See My Works</a></span>
<span><a href="#" class="btn btn-outline-primary rounded-pill px-5 py-3 fw-semibold">Contact Me</a></span>
</div>
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</body>
</html>
