gallery.html

<!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">
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="index.html">
    <link rel="stylesheet" href="packages.html">
    <link rel="stylesheet" href="contact.html">
    <!-- font awesome link -->
    <script src="https://kit.fontawesome.com/c59c349346.js" crossorigin="anonymous"></script>
    <title>MiaDi Photography</title>
</head>
<body>

    <!-- header -->
    <header class="parallax">
        <!-- nav bar -->
        <div class="nav-section">
            <div class="brand-and-navBtn">
                <span class="brand-name" id="cursive">
                    Mia Di Photography
                </span>
                <span class="navBtn flex">
                    <i class="fa fa-bars"></i>
                </span>
            </div>
            <nav class="top-nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="gallery.html" class="active">Gallery</a></li>
                    <li><a href="packages.html">Packages</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>

        <!-- large photo section -->
        <div class="about container">

            <div class="about-content">
                    <div class="about-img flex">
                        <img src="/images/logo.jpg" alt="img">
                    </div>
                        <h3 id="cursive">Ohio Photographer & Videographer</h3>
                        <blockquote>Weddings | Couples | Families | Maternity <br>
                        </blockquote>
                <div class="social-icons">
                    <ul>
                        <li>
                            <a href="https://www.instagram.com/mia.di.photography/"><i class="fab fa-instagram"></i></a>
                        </li>
                        <li>
                            <a href="https://www.facebook.com/miadiphotography/"><i class="fab fa-facebook"></i></a>
                        </li>
                </ul>
                </div>
            </div>

    </div>
        
    </header>
    <!-- end of header -->

    <!-- main -->

    <section class="genres">

        <div class="genres-container">

            <div class="genre-container">            
                <a href="couples-gallery.html">
                    <img class="genre" src="images/DD70C439-DEB3-459E-AA0A-8D1AEA8F1FD6.JPG" alt="">
                    <div class="shade"></div>
                    <div class="centered" id="cursive">Couples</div>
                </a>
            </div>

            <div class="genre-container">
                <a href="weddings-gallery.html">
                    <img class="genre" src="images/DFDE10DD-13FE-4184-932A-3CC1DD68BD23-0D5164D8-2EC0-4A58-A403-D685554676ED.JPG" alt="">
                    <div class="shade"></div>
                    <div class="centered" id="cursive">Weddings</div>
                </a>
            </div>

            <div class="genre-container">
                <a href="boudoir-gallery.html">
                    <img class="genre" src="images/1D36E8C0-C7A9-4D75-AF99-6C28AF5A68E6.JPG" alt="">
                    <div class="shade"></div>
                    <div class="centered" id="cursive">Boudoir</div>
                </a>
            </div>

            <div class="genre-container">
                <a href="maternity-gallery.html">
                    <img class="genre" src="images/DSC_1984.JPG" alt="">
                    <div class="shade"></div>
                    <div class="centered" id="cursive">Maternity/Family</div>
                </a>
            </div>

        </div>

    </section>

    <!-- end of main -->


    <!-- footer -->
    <footer class="footer">
        <div class="footer-container container">
            <div>
                <h2 id="cursive">Mia Di Photography <br>
                    <img class="footer-img" src="images//logo.jpg" alt="">
                </h2>
            </div>
            <div>
                <div class="contacts-foot">
                    <p>
                        LGBTQ-friendly | BIPOC Inclusive | All skin colors & body sizes are welcomed <br>
                        Mia Di Photography | Wedding + Couples + Family + Maternity <br>
                        Massillon, OH + Worldwide
                </p>
                </div>                
            </div>
        </div>
        <p>&copy;2021 Mia Di Photography | All Rights Reserved</p>
    </footer>
    <!-- end of footer -->


    
    <script src="app.js"></script>
</body>
</html>