Helen
/
markup


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>

<body>
    <div class="wrapper d-flex flex-column" style="min-height: 100vh;">
        <header>
            <div class="container-fluid">
                <div class="row">
                    <div class="header__inner col-12 bg-warning py-4">
                        <nav class="navbar navbar-expand-lg navbar-light d-flex">
                            <a class="navbar-brand" href="#">
                                <img width="150" src="img/logo.png" alt="logo">
                            </a>
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                                <ul class="navbar-nav">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#">Item1</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Item2</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Item3</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Item4</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Item5</a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </header>

        <main class="d-flex flex-grow-1">
            <div class="container-fluid d-flex">
                <div class="row flex-grow-1">
                    <div class="col-12 order-1 py-4 col-md-12 order-md-0 col-lg-8 order-lg-1">
                        <div class="row d-flex justify-content-around">
                            <div class="px-0 text-center card mx-3 mb-5" style="width: 18rem;">
                                <div class="item d-flex flex-column" style="height: 100%;">
                                    <img src="img/card.png" class="card-img p-4" width="150" alt="card">
                                    <div class="card-body flex-grow-1">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">
                                            Some quick example text to build on the card title and makeup
                                            the bulk of the card's content.
                                        </p>
                                    </div>
                                    <div class="btn-block bg-light p-3 border-top">
                                        <a href="#" class="btn d-block btn-primary">
                                            Go
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="card px-0 text-center mx-3 mb-5" style="width: 18rem;">
                                <div class="item d-flex flex-column" style="height: 100%;">
                                    <img src="img/card.png" class="card-img p-4" alt="card">
                                    <div class="card-body flex-grow-1">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">
                                            Some quick example text to build on the card title and makeup
                                            the bulk of the card's content.
                                        </p>
                                    </div>
                                    <div class="btn-block bg-light p-3 border-top">
                                        <a href="#" class="btn d-block btn-primary">
                                            Go
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="card px-0 text-center mx-3 mb-5" style="width: 18rem;">
                                <div class="item d-flex flex-column" style="height: 100%;">
                                    <img src="img/card.png" class="card-img p-4" alt="card">
                                    <div class="card-body flex-grow-1">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">
                                            Some quick example text to build on the card title and makeup
                                            the bulk of the card's content.
                                            Some quick example text to build on the card title and makeup
                                            the bulk of the card's content.
                                        </p>
                                    </div>
                                    <div class="btn-block bg-light p-3 border-top">
                                        <a href="#" class="btn d-block btn-primary">
                                            Go
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="card px-0 text-center mx-3 mb-5" style="width: 18rem;">
                                <div class="item d-flex flex-column" style="height: 100%;">
                                    <img src="img/card.png" class="card-img p-4" alt="card">
                                    <div class="card-body flex-grow-1">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">
                                            Some quick example text to build on the card title and makeup
                                            the bulk of the card's content.
                                            Some quick example text to build on the card title and makeup
                                            the bulk of the card's content.
                                        </p>
                                    </div>
                                    <div class="btn-block bg-light p-3 border-top">
                                        <a href="#" class="btn d-block btn-primary">
                                            Go
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="card px-0 text-center mx-3 mb-5" style="width: 18rem;">
                                <div class="item d-flex flex-column" style="height: 100%;">
                                    <img src="img/card.png" class="card-img p-4" alt="card">
                                    <div class="card-body flex-grow-1">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">
                                            Some quick example text to build on the card title and makeup
                                            the bulk of the card's content.
                                        </p>
                                    </div>
                                    <div class="btn-block bg-light p-3 border-top">
                                        <a href="#" class="btn d-block btn-primary">
                                            Go
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="card px-0 text-center mx-3 mb-5" style="width: 18rem;">
                                <div class="item d-flex flex-column" style="height: 100%;">
                                    <img src="img/card.png" class="card-img p-4" alt="card">
                                    <div class="card-body flex-grow-1">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">
                                            Some quick example text to build on the card title and makeup
                                            the bulk of the card's content.
                                            Some quick example text to build on the card title and makeup
                                            the bulk of the card's content.
                                        </p>
                                    </div>
                                    <div class="btn-block bg-light p-3 border-top">
                                        <a href="#" class="btn d-block btn-primary">
                                            Go
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 order-0 py-4 bg-danger col-md-6 order-md-1 col-lg-2 order-lg-0">aside</div>
                    <div class="col-12 order-2 py-4 bg-info col-md-6 order-md-2 col-lg-2 order-lg-2">aside</div>
                </div>
            </div>
        </main>

        <footer class="bg-success text-center py-4">
            <div class="container-fluid">
                footer
            </div>
        </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
    </script>
</body>
</html>