devclubhackathon/hackathon3.html at main · sohamdhande/devclubhackathon · 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Avengers: Endgame - Marvel Studios</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="hackathon3.css">

</head>
<body>

    <header class="header">
        <div class="hero-content">
            <div class="marvel-logo">Marvel Studios</div>
            <h1 class="main-title">Avengers: Endgame</h1>
            <p class="subtitle">The epic conclusion to the Infinity Saga</p>
            <button class="stream-button">
                <span>Stream on Disney+</span>
            </button>
        </div>
    </header>


    <div class="content-wrapper">

        <section class="section">
            <h2 class="section-title">Official Trailer</h2>
            <div class="video-container">
                <div class="video-wrapper">
                    <iframe width="700" height="394" src="https://www.youtube.com/embed/hA6hldpSTF8?si=tYFTVJX1WASsMY6l" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                </div>
            </div>
        </section>


        <section class="section">
            <h2 class="section-title">The Epic Story</h2>
            <div class="story-grid">
                <div class="story-text">
                    <p>Avengers: Endgame is a 2019 American superhero film based on the Marvel Comics superhero team the Avengers. Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures, it is the direct sequel to 2018's Avengers: Infinity War and the 22nd film in the Marvel Cinematic Universe (MCU).</p>

                    <p>In Avengers: Endgame, the surviving members of the Avengers and their allies work to reverse the damage caused by Thanos in Infinity War. The film explores themes of loss, sacrifice, and the consequences of wielding great power.</p>

                    <p>Avengers: Endgame is a fitting conclusion to the Infinity Saga, bringing together numerous storylines and character arcs from previous MCU films. It is a must-watch for fans of the franchise and a testament to the power of teamwork and heroism.</p>
                </div>
                <div class="poster-container">
                    <img class="movie-poster" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXef9DJnZiq5az0UnjkmvkQufOQ5MFnF7HATYRUXN913swRuH1" alt="Avengers: Endgame Poster">
                </div>
            </div>
        </section>


        <section class="stats-section">
            <h2 class="section-title">Record Breaking Success</h2>
            <div class="stats-grid">
                <div class="stat-item">
                    <span class="stat-number">$2.8B</span>
                    <span class="stat-label">Box Office Worldwide</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number">22</span>
                    <span class="stat-label">MCU Films Culminated</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number">3h 1m</span>
                    <span class="stat-label">Epic Runtime</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number">181</span>
                    <span class="stat-label">Minutes of Pure Action</span>
                </div>
            </div>
        </section>


        <section class="section media-section">
            <h2 class="section-title">Epic Moments</h2>
            <div class="gif-container">
                <img class="media-gif" src="https://i.giphy.com/LOFT5Jd31ON1b5kLtP.webp" alt="Avengers Endgame Action Scene" width="480">
            </div>
            <div class="quote-text">
                The grave course of events set in motion by Thanos that wiped out half the universe and fractured the Avengers ranks compels the remaining Avengers to take one final stand in Marvel Studios' grand conclusion to twenty-two films, "Avengers: Endgame."
            </div>
        </section>
    </div>


    <footer class="footer">
        <p>&copy; 2024 Marvel Studios. All rights reserved. | The ultimate superhero experience.</p>
    </footer>
</body>
</html>