index2.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">
    <title>Responsive Webpage</title>
    <link rel="stylesheet" href="stylee2.css">


    <style>
     
    </style>
</head>
<body>
    <div class="nav-bar">
        <div class="logo">Snapshot</div>
        <input type="checkbox" name="nav-icons" id="nav-icons">

        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      
        <label for='nav-icons'>
            <div class="nav-icons__wrapper">
            <span class="nav-icon"></span>
            <span class="nav-icon"></span>
            <span class="nav-icon"></span>
            </label>
        </div>
        
    </div>

    <!-- Hero section -->

    <div class="hero-section">
        <div class="hero-content-heading">
            <h3>Let's take a snapshot</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero beatae quod molestias voluptas nam <br> facere numquam quos pariatur repellendus excepturi!</p>
        </div>
        <div class="hero-content-btn">
            <a href="#">Learn More</a>
        </div>
    </div>

    <!-- sub-hero section -->
    <div class="hero-background">
        <div class="background">
            <h4>Background</h4>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus sint ab rerum obcaecati totam neque quam corrupti dolores? Ipsam tempora consequatur quaerat. Voluptates accusamus molestiae nulla sapiente explicabo tempore possimus?</p>
        </div>
        <div class="hero-background-pos"></div>
    </div>
    <div class="snapshot-team">
        <h2>Snapshot Team</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, nesciunt!</p>
    </div>
    <div class="snapshot-box">
        <div class="snapshot-box-content">
            <div class="box1">
                    <div class="circle"></div>
                    <h5>Linda, Manager</h5>
            </div>
            <div class="box1">
                <div class="circle"></div>
                <h5>Linda, Manager</h5>
            </div>
            <div class="box3">
                <div class="circle"></div>
                <h5>Linda, Manager</h5>
            </div>
        </div>
    </div>

    <!-- Gallery section -->
    <div class="gallery-section">
        <div class="gallery-content">
            <h4>Gallery</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, sapiente. Nullae rem!</p>
        </div>
        <div class="gallery-img">
            <div>
                <div class="img">
                    <img src="https://image.freepik.com/free-vector/shining-circle-purple-lighting-isolated-dark-background_1441-2396.jpg" alt="">
                </div>
                <div class="img">
                    <img src="https://image.freepik.com/free-vector/shining-circle-purple-lighting-isolated-dark-background_1441-2396.jpg" alt="">
                </div>
            </div>
            <div>
                <div class="img">
                    <img src="https://image.freepik.com/free-vector/shining-circle-purple-lighting-isolated-dark-background_1441-2396.jpg" alt="">
                </div>
                <div class="img">
                    <img src="https://image.freepik.com/free-vector/shining-circle-purple-lighting-isolated-dark-background_1441-2396.jpg" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- Footer section -->
    <div class="footer">
        <div class="footer-content">
            <h4>Send a message</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, sapiente. Nuleos rem!</p>
        </div>
        <div class="footer-input">
            <input type="text" placeholder="Name"> 
            <input type="email" placeholder="Email">
        </div>
        <div class="footer-textarea">
            <textarea placeholder="Message"></textarea>
        </div>
        <div class="footer-btn">
            <a href="#">Send Message</a>
        </div>
        <h6>Copyright &copy; 2021 Zuri Training.</h6>
    </div>
</body>
</html>