Accessible-semantic

by Darcy Paterson

HTML

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!DOCTYPE html>
<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/bootstrap@5.1.3/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>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a 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,...

CSS

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;
        }