HTML/Index.html at master · sujith712/HTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="/styles.css" />
        <title>Mario Club</title>
    </head>
    <body>
        <header>
            <h1>Mario Club</h1>
        </header>
        <section class = "banner">
            <img src="img/banner.png" alt="Mario Club Welcome Banner">
            <div class="welcome">
                <h2>Welcome to <br> <span>MarioClub</span></h2>
            </div>
        </section>
        <nav class="main-nav">
            <ul>
                <li><a href="/join.html" class="join">Join the Club</a></li>
                <li><a href="/news.html">Latest News</a></li>
                <li><a href="/games.html">New Games</a></li>
                <li> <a href="/contact.html">Contact</a></li>
            </ul>
        </nav>
        <main>
            <article>
                <h2>Its me, Mario</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi magni fugiat vero nemo, est ducimus quas ipsum harum et sit nihil odit repellendus distinctio assumenda deleniti tempora, maxime dolor iste. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio laborum tempore deserunt esse ipsa similique neque ex maxime. Perferendis tempora quae cupiditate? Culpa porro commodi, sapiente reprehenderit illum vero aut? Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, placeat hic ipsum reprehenderit, error fugiat dicta beatae aperiam unde perferendis deserunt cupiditate veritatis commodi aspernatur nulla suscipit odio sunt debitis.</p>

            </article>
            <ul class="images">
                <li><img src="img/thumb-1.png" alt="mario image thumb-1"></li>
                <li><img src="img/thumb-2.png" alt="mario image thumb-2"></li>
            </ul>
        </main>
        <section class="join">
            <h2>Join Today!</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque soluta adipisci voluptate in, quis voluptates animi. Adipisci quos vero quo dignissimos eos at, saepe vitae doloribus, impedit voluptates architecto non.</p>
            <form>
                <input type="email" name="email" placeholder="Type email & hit entert" required>
            </form>
        </section>
        <footer>
            <p class="copyright">Copyright ©2023 MarioClub</p>
        </footer>
    </body>
</html>