index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./resources/css/reset.css">
    <link rel="stylesheet" type="text/css" href="./resources/css/style.css">
        
                <title>Secret Agent Supply Inc.</title>
</head>
<body>
    
<!--Logo-->   
    <div class="logo">
        <div class="container">
            <img src="./resources/images/logo.png" alt="Binoculors">
            <span>Secret Agent Supply Inc.</span>
        </div>
    </div>

<!--main-->    
    <div class="main">
        <div class="container">
            <div class="story">
                <h4>New Arrival</h4>
                <h1>SPORT BIKES and MOTORCYCLES</h1>
            </div> 
        </div>
    </div>

<!--Nav-->   
    <nav>
        <ul class="container">
            <li>Eyeware</li>
            <li>Apparel</li>
            <li>Gadgets</li>
            <li>Vehicles</li>
            <li>Classes</li>
            <li>Contact</li>
        </ul>
        <ul class="mobile-nav container">
            <li>Menu</li>
        </ul>
    </nav>

<!--products-->    
    <div class="container">
        <div class="products">
            <div class="product">
                <div class="product-image">
                    <img src="./resources/images/pen.png" alt="pen">
                </div>
                <span class="text">Exploding Pen</span>
            </div>
            <div class="product">    
                <div class="product-image">
                    <img src="./resources/images/watch.png" alt="Watch">
                </div>
                <span class="text">Cellular Watch</span>
            </div>
            <div class="product">
                <div class="product-image">
                    <img src="./resources/images/glasses.png" alt="Glasses">
                </div>
                <span class="text">Thermal Glasses</span>
            </div>
        </div>
    </div>

<!--Info-->    
    <div class="container">
        <div class="info">
            <div class="info-box">
                <span class="location">Locations</span>
                <span>-47.346436, 84.32354</span>
            </div>
            <div class="info-box">
                <span class="hour">Hours</span>
                <span>0800 - 1800</span>
            </div>
        </div>
    </div>

<!--Footer-->   
    <footer class="footer">
            <p class="container">&copy; Secret Agent Supply</p>
            <p>
                <a href="http://jigsaw.w3.org/css-validator/check/referer">
                    <img style="border:0;width:88px;height:31px"
                        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
                        alt="Valid CSS!" />
                    </a>
                </p>
                        
        </div>
    </footer>

    





















































   






























































