Lesson6-elephant

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Elephant</title>

    <!-- import Bootstrap https://getbootstrap.com/docs/5.1/getting-started/introduction/ -->
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <style>
        .bg-green {
            background-color: green;
        }

        .bg-gray {
            background-color: lightgrey;
        }
    </style>

</head>

<body>

    <!-- Header -->
<div class="container-fluid">
    <div class="row bg-green">

        <div class="col-sm-2">
            <img src="https://logos-world.net/wp-content/uploads/2021/03/San-Diego-Zoo-Logo.png" alt="logo" height="100px">
        </div>

        <div class="col-sm-10">
            <h1>ZOO</h1>
            <h2>Located in London</h2>

        </div>

    </div>
</div>

    <!-- Navigation -->
    <div class="container-fluid bg-gray p-3">

        <ul class="nav justify-content-center">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="/lesson-06/index.html#main">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/lesson-06/index.html#animals">Animals</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/lesson-06/index.html#contact">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">Workshops</a>
            </li>
          </ul>

    </div>

    <!-- Carrousel -->
    <div class="container-fluid p-0">

        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">

              <div class="carousel-item active">
                <img src="https://www.worldanimalprotection.us/sites/default/files/styles/1200x630/public/media/GettyImages-952125280_3.jpg?h=202254e8&itok=7K5VbazI"
                        class="d-block w-100" alt="elephant">
              </div>

              <div class="carousel-item">
                <img src="https://gdb.voanews.com/8018d022-59d5-4b71-b92d-0b6987c67279_cx0_cy7_cw0_w1200_r1.jpg"
                        class="d-block w-100" alt="rhino">
              </div>

              <div class="carousel-item">
                <img src="https://animalrescueprofessionals.org/wp-content/uploads/2019/11/lion-africa-feature.jpg"
                        class="d-block w-100" alt="lion">
              </div>

            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>

    </div>

    <!-- Main -->
    <div id="main">

        <div class="container bg-gray pt-5 pb-5">
            <h1>Elephant</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex, praesentium quibusdam impedit voluptatum aspernatur non illo officia unde in provident ipsum asperiores vel eaque! Natus omnis cupiditate ut voluptate quos repellendus voluptatum perspiciatis minima quibusdam optio debitis voluptatem, ipsum commodi, voluptatibus reiciendis sint atque neque, ea magnam quia molestiae quis? Porro, iure voluptatem repudiandae itaque a sunt ex, fugit quas praesentium nesciunt excepturi esse, quisquam totam distinctio maxime. Laudantium, suscipit eligendi fugiat inventore voluptatibus laboriosam voluptatum reiciendis necessitatibus possimus quos explicabo? Asperiores, dolores eum fugit beatae eaque facilis laudantium velit excepturi accusantium, numquam nulla enim optio at soluta necessitatibus!</p>
        </div>

    </div>


    <!-- Contact -->
    <div class="container">
        <div class="row bg-green">

            <div class="col-md pt-3 pb-3">
                <h3>Address</h3>
                <address>
                    Zoo<br>
                    1st Street<br>
                    London<br>

                    Tel: +44 0123 456789
                    Email: zoo@email.com
                </address>
            </div>


            <div class="col-md pt-3 pb-3">
                <h3>Follow Us</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, est!</p>
            </div>

            <div class="col-md pt-3 pb-3">
                <h3>About Workshops</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, totam.</p>
            </div>
        </div>
    </div>


    <!-- Footer -->
    <div class="container-fluid d-flex justify-content-center bg-gray pt-1 pb-1">
        <p> 2022 &copy; ZOO. All rights reserved.</p>

    </div>


</body>

</html>