flexbox-landing-page/index.html at main · chriskovski/flexbox-landing-page · 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 charset="UTF-8">
    <title>TOP Landing Page</title>
    <link rel="stylesheet" href="style.css">
</head>
    <body>
        <header>
            <div class="header">
                <img src="images/avengers-logo.png" alt="Avengers Logo" style="height:70px;width:70px;margin:10px;margin-left:0px;">
                <div class="links"><ul>
                    <li><a href="#">The Team</a></li>
                    <li><a href="#">The Friends</a></li>
                    <li><a href="#">The Enemies</a></li>
                </ul> </div>
        </header>
        <main>
            <div class="hero">
                <div class="hero-text">
                    <h1>AVENGERS ASSEMBLE!</h1>
                    <p>This website is a Landing-Page themed after the OG Avengers.</p>
                    <button class="signup">Great!</button>
                </div>
                <img src="images/avengers-hero.jpeg" alt="Avengers Assembled" style="height:218px;width:400px;">
            </div>
            <div class="content">
                <h2>Quick look on some of the members.</h2>
                <div class="information">
                    <div class="infos"><img src="images/cap.jpeg" alt="Captain America"><p class="info-text">Captain America (alias Steve Rodgers) is the first official member.</p></div>
                    <div class="infos"><img src="images/hulk.jpeg" alt="The Hulk"><p class="info-text">The (Incredible) Hulk is Bruce Banner in his human form. Don't get him angry..</p></div>
                    <div class="infos"><img src="images/iron-man.jpeg" alt="Iron Man"><p class="info-text">Iron Man is considered as the leader of the Avengers (maybe with Captain America). His persona is Tony Stark.</p></div>
                    <div class="infos"><img src="images/black-widow.jpeg" alt="Black Widow"><p class="info-text">Natasha Romanoff is considered as the "Black Widow". Former russian double-agent.</p></div>
                </div>
                <div class="quote">
                    <p id="quote"><em>There will never be a wiser king than you. Or a better father. I have much to learn. I know that now. One day, perhaps, I will make you proud.</em></p>
                    <p id="thor"><strong>-Thor, God of Thunder</strong></p>
                </div>
                <div class="action">
                    <div class="alltext"><h3>There is so much to see in the MCU!</h3>
                    <p id="action-text">But you have to find your own way through that, young Padawan!</p></div>
                    <button class="amen">Amen!</button>
                </div>
            </div>
        </main>
        <footer>Copyright &copy; The Odin Project 2021</footer>
    </body>
</html>