Gallery.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">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet">
        <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css">
        <link rel = "stylesheet" href = "Index.css" type = "text/css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Social Icons-->
        <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css"> <!-- Font Awesome BOOTSTRAP-->
        <title>Gallery</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>

    <body>
        <nav class="navbar navbar-expand-sm bg-light navbar-light sticky-top">
            <div class="navbar-brand">Сайт за фотография</div>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link text-danger" href="index.html">За нас</a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-danger active" href="Gallery.html">Галерия</a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-danger" href="Profile Info.html">Редактирай</a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-danger" href="Contact.html">Контакти</a>
              </li>
            </ul>
          </nav>
        <div class="container">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
                <div class="col mt-3">
                    <img src="1.jpg" class="img-fluid" alt="image">
                </div>
                <div class="col mt-3">
                    <img src="2.jpg" class="img-fluid" alt="image">
                </div>
                <div class="col mt-3">
                    <img src="3.jpg" class="img-fluid" alt="image">
                </div>
                <div class="col mt-3">
                    <img src="4.jpg" class="img-fluid" alt="image">
                </div>
                <div class="col mt-3">
                    <img src="5.jpg" class="img-fluid" alt="image">
                </div>
                <div class="col mt-3">
                    <img src="6.jpg" class="img-fluid" alt="image">
                </div>
                <div class="col mt-3">
                    <img src="7.jpg" class="img-fluid" alt="image">
                </div>
                <div class="col mt-3">
                    <img src="8.jpg" class="img-fluid" alt="image">
                </div>
                <div class="col mt-3">
                    <img src="9.jpg" class="img-fluid" alt="image">
                </div>
            </div>
        </div>
        <footer class="bg-light text-center text-white">
            <!-- Grid container -->
            <div class="container p-4 pb-0">
              <!-- Section: Social media -->
              <section class="mb-4">
                <!-- Facebook -->
                <a
                  class="btn btn-primary btn-floating m-1"
                  style="background-color: #3b5998;"
                  href="https://www.facebook.com/aneta.nedelcheva.7"
                  role="button"
                  ><ion-icon name="logo-facebook"></ion-icon></i
                ></a>

                <!-- pinterest -->
                <a
                  class="btn btn-primary btn-floating m-1"
                  style="background-color: #55acee;"
                  href="http://www.pinterest.com"
                  role="button"
                  ><ion-icon name="logo-pinterest"></ion-icon></i
                ></a>


                <a
                  class="btn btn-primary btn-floating m-1"
                  style="background-color: #dd4b39;"
                  href="https://www.youtube.com/channel/UCQYNe9f7ZM9T293tb6pWgvA"
                  role="button"
                  ><ion-icon name="logo-youtube"></ion-icon></i
                ></a>

                <!-- Instagram -->
                <a
                  class="btn btn-primary btn-floating m-1"
                  style="background-color: #ac2bac;"
                  href="https://www.facebook.com/aneta.nedelcheva.7"
                  role="button"
                  ><ion-icon name="logo-instagram"></ion-icon></i
                ></a>

              </section>
              <!-- Section: Social media -->
            </div>
            <!-- Grid container -->

            <!-- Copyright -->
            <div class=" border border-danger rounded text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
              © 2021 Copyright:
              <a class="text-white" href="https://mdbootstrap.com/">Всички права запазени</a>
            </div>
            <!-- Copyright -->
          </footer>


        <!--javascript social icons footer-->
        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

        </div>
    </body>
</html>