<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="brand">
            <div class="container">
                <img src="logo.png" alt="logo">
            </div>
        </div>
        <div class="navbar">
            <div class="container">
                <nav>
                    <ul class="links">
                        <li>
                            <a href="">BIKES</a>
                        </li>
                        <li>
                            <a href="">RIDE ALPHA</a>
                        </li>
                        <li>
                            <a href="">EQUIPMENT</a>
                        </li>
                        <li>
                            <a href="">COMPONENTS</a>
                        </li>
                    </ul>
                    <ul class="community">
                        <li>
                            <a href="">BLOG</a>
                        </li>
                        <li>
                            <a href="">COMMUNITY</a>
                        </li>
                    </ul>
                </nav>
            </div> 
        </div>               
    </header>
    <main>
        <section class="hero">
            <img src="MetaV42.jpg" alt="">
        </section>
        <section class="bikes">
            <div class="container">
                <article class="bike-grid">
                    <div class="bike">
                        <div class="img">
                            <img src="Kids.jpg">
                        </div>
                        <h4>KIDS</h4>
                    </div>
                    <div class="bike">
                        <div class="img">
                            <img src="XC hardtail.jpg">
                        </div>
                        <h4>XC HARDTAIL</h4>
                    </div>
                    <div class="bike">
                        <div class="img">
                            <img src="XC full suspension.jpg">
                        </div>
                        <h4>XC FULL SUSPENSTION</h4>
                    </div>
                    <div class="bike">
                        <div class="img">
                            <img src="Street.jpg">
                        </div>
                        <h4>STREET</h4>
                    </div>
                    <div class="bike">
                        <div class="img">
                            <img src="Downhill.jpg">
                        </div>
                        <h4>DOWNHILL</h4>
                    </div>
                    <div class="bike">
                        <div class="img">
                            <img src="Enduro hardtail.jpg">
                        </div>
                        <h4>ENDURO HARDTAIL</h4>
                    </div>
                    <div class="bike">
                        <div class="img">
                            <img src="Enduro full suspension.jpg">
                        </div>
                        <h4>ENDURO FULL SUSPENSION</h4>
                    </div>
                    <div class="bike">
                        <div class="img">
                            <img src="City.jpg">
                        </div>
                        <h4>CITY</h4>
                    </div>
                </article>
            </div>
        </section>
        <section class="infomation">
            <div class="container">
                <article class="info">
                    <div class="video">
                        <img src="video-placeholder.png">
                    </div>
                </article>
                <article class="paragrafs">
                    <div class="paragraf">
                        <h4>NEW BIKES IN THE SHOP</h4>
                        <p>We've added some new bikes to the shop. Come check them out right now. They are pretty cool, trust us!!!</p>
                        <p>10% off for the first 100 customers.</p>
                    </div>
                    <div class="paragraf">
                        <h4>MCCORNFLAKES WINS WORLD CHAMPIONSHIP</h4>
                        <p>We are proud to announce that the amazing Max McCornflakes has won the World Championship in downhill on our world-renowed bikes. We salute you McCornfalkes.</p>
                    </div>
                    <div class="paragraf">
                        <h4>BANKRUPTCY</h4>
                        <p>Today we are happy to announce that our enemy- the evil masterminds - kildemoes has gone backrupt. We had a good fight and wish their employees the best for the future.</p>
                    </div>
                </article>
            </div>
        </section>
    </main>
    <footer>
        <div class="container">
            <div class="grid">
                <div class="item">
                    <h4 class="yellow">FOLLOW US</h4>
                    <p>YouTube</p>
                    <p>Instagram</p>
                    <p>Facebook</p>
                </div>
                <div class="item">
                    <h4 class="yellow">INFOMATION</h4>
                    <p>Tutorials</p>
                    <p>Technical Manuals</p>
                    <p>Legal</p>
                    <p>Garante</p>
                </div>
                <div class="item">
                    <h4 class="yellow">COMMERCIAL</h4>
                    <p>Employee Discounts</p>
                    <p>Distributers</p>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>