<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accessibility</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<header class="bg-light">
<nav class="navbar navbar-dark bg-light">
<ul class="nav">
<li class="nav-iten"><a class="nav-link" href="#">Home</a></li>
<li class="nav-iten"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-iten"><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
</header>
<aside class="col-1 border border-primary border-top-0 border-bottom-0 border-start-0">
<p>Here is the sidebar</p>
</aside>
<main class="col-11">
<h1>Here is the main content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget semper nulla. Praesent odio
dui, elementum non vehicula id, dignissim quis arcu. Fusce arcu turpis, varius sed nisi ac, cursus
gravida purus. Proin a nibh ut enim tincidunt mollis. Suspendisse ornare ac ante a lacinia. Aliquam
sollicitudin euismod sem a egestas. Aliquam pellentesque eleifend tortor. Nullam suscipit ac augue
et vulputate. Donec ut dolor egestas quam interdum pellentesque. Nunc eros nibh, luctus ultricies
lobortis sit amet, lobortis id ante.</p>
<section>
<h2>Meet Our Team</h2>
<ul>
<li>
<figure>
<img src="" alt="John Smith">
<figcaption>John Smith</figcaption>
</figure>
<button type="button" class="btn btn-primary" aria-label="Opens modal to view profile">View Profile</button>
</li>
<li>
<figure>
<img src="" alt="Bob Smith">
<figcaption>Bob Smith</figcaption>
</figure>
<button type="button" class="btn btn-primary" aria-label="Opens modal to view profile">View Profile</button>
</li>
<li>
<figure>
<img src="" alt="Harry Smith">
<figcaption>Harry Smith</figcaption>
</figure>
<button type="button" class="btn btn-primary" aria-label="Opens modal to view profile">View
Profile</button>
</li>
</ul>
</section>
</main>
<footer class="bg-light">
<p>Here is the footer</p>
</footer>
</div>
</div>
</body>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</html>
figure {
position: relative;
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
background-color: cadetblue;
padding: 1rem;
}
img {
display: block;
width: 150px;
height: 220px;
background-color: lightcoral;
}
ul li {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}