devclubhackathon/marvel-redesign.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Ultimate Universe Leaves a Lasting Mark on the Main Marvel Universe with Origin Boxes | Marvel</title>
    <link rel="stylesheet" href="marvel-professional.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>

    <nav class="top-nav">
        <div class="nav-container">
            <div class="nav-left">
                <a href="#" class="marvel-logo-link">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Marvel_Logo.svg/500px-Marvel_Logo.svg.png" alt="Marvel" class="marvel-logo">
                </a>
                <div class="nav-links">
                    <a href="#" class="nav-link">NEWS</a>
                    <a href="#" class="nav-link">COMICS</a>
                    <a href="#" class="nav-link">CHARACTERS</a>
                    <a href="#" class="nav-link">MOVIES</a>
                    <a href="#" class="nav-link">TV SHOWS</a>
                    <a href="#" class="nav-link">GAMES</a>
                    <a href="#" class="nav-link">VIDEOS</a>
                    <a href="#" class="nav-link">MORE</a>
                </div>
            </div>
            <div class="nav-right">
                <button class="search-btn">🔍</button>
                <button class="account-btn">👤</button>
            </div>
        </div>
    </nav>


    <main class="main-content">
        <div class="content-container">

            <div class="breadcrumb">
                <span class="category-tag">COMICS</span>
            </div>


            <header class="article-header">
                <h1 class="article-title">The Ultimate Universe Leaves a Lasting Mark on the Main Marvel Universe with Origin Boxes</h1>
                <p class="article-subtitle">Origin Boxes, devices that grant the power of the universe's most legendary super heroes, make their way to the main Marvel Universe next month in 'Ultimate Spider-Man: Incursion' #5, ushering in new heroes and storylines throughout 2026.</p>

                <div class="article-meta">
                    <span class="author">BY MARVEL</span>

                </div>
            </header>


            <div class="featured-image-container">
                <img src="https://cdn.marvel.com/content/1x/ultsmincursion2025004_yu_spoiler.jpg" alt="Ultimate Spider-Man: Incursion #5" class="featured-image">
                <div class="image-credit">
                    <p><strong>ULTIMATE SPIDER-MAN: INCURSION #5</strong></p>
                    <p>Written by DENIZ CAMP & CODY ZIGLAR</p>
                    <p>Art by JONAS SCHARF</p>
                    <p>Cover by SARA PICHELLI</p>
                    <p>2026 Ultimate Spoiler Variant Cover by LEINIL FRANCIS YU</p>
                    <p>On Sale 10/22</p>
                </div>
            </div>


            <article class="article-content">
                <p>The groundbreaking Ultimate Universe continues to expand its influence on the Marvel Comics landscape, introducing revolutionary Origin Boxes that will reshape the superhero narrative across multiple timelines and dimensions.</p>

                <p>These mysterious devices hold the power to grant ordinary individuals the abilities of legendary heroes, creating unprecedented opportunities for new storylines and character development throughout the Marvel Universe.</p>

                <p>Containing the catalysts collected by the Maker to rob characters of their destinies, each ORIGIN BOX holds all that's needed to grant familiar power sets to whoever opens it—from the mighty abilities of legendary super heroes to the deadly skills of the world's fiercest supervillains! Who will get their hands on these powers, and what abilities will they gain? Find out as ORIGIN BOXES pop up in your favorite titles, starting with "MILES MORALES: SPIDER-MAN #39", also on sale October 22. Scattered across the Marvel Universe throughout 2026, each ORIGIN BOX lays the groundwork for exciting storylines and sees the rise of all-new heroes and villains!</p>


                <div class="secondary-image-container">
                    <img src="https://cdn.marvel.com/content/1x/mmsm2022039_originboxes.jpg" alt="Miles Morales: Spider-Man #39 Origin Boxes" class="secondary-image">
                    <div class="image-credit">
                        <p><strong>MILES MORALES: SPIDER-MAN #39</strong></p>
                        <p>The Origin Boxes make their debut in the Marvel Universe</p>
                    </div>
                </div>

                <p>As Miles Morales navigates this new reality in Ultimate Spider-Man: Incursion #5, readers can expect thrilling adventures that bridge the gap between universes and set the stage for exciting developments in 2026.</p>
            </article>


            <section class="related-section">
                <h3>RELATED</h3>
                <div class="related-grid">
                    <div class="related-item">
                        <img src="https://cdn.marvel.com/content/1x/ultimate_spider-man_2024_1_variant.jpg" alt="Ultimate Spider-Man" class="related-image">
                        <h4>Ultimate Spider-Man: Discover All Preview Ultimate Battle for Fate of New Universe</h4>
                    </div>
                    <div class="related-item">
                        <img src="https://cdn.marvel.com/content/1x/ultimate_universe_spoilers.jpg" alt="Ultimate Universe" class="related-image">
                        <h4>Ultimate Endgame Two-Parters Final High Out of a With What Happen Onto Ultimate Epic</h4>
                    </div>
                    <div class="related-item">
                        <img src="https://cdn.marvel.com/content/1x/spider_man_related.jpg" alt="Spider-Man" class="related-image">
                        <h4>September T's New Total Collect The Red Incursion</h4>
                    </div>
                    <div class="related-item">
                        <img src="https://cdn.marvel.com/content/1x/ultimate_comics.jpg" alt="Ultimate Comics" class="related-image">
                        <h4>September T's New Marvel Connect The Full</h4>
                    </div>
                </div>
            </section>
        </div>
    </main>


    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Marvel_Logo.svg/500px-Marvel_Logo.svg.png" alt="Marvel" class="footer-marvel-logo">
            </div>
            <div class="footer-links">
                <div class="footer-column">
                    <h4>ABOUT</h4>
                    <a href="#">Marvel</a>
                    <a href="#">Help/FAQs</a>
                    <a href="#">Careers</a>
                    <a href="#">Internships</a>
                </div>
                <div class="footer-column">
                    <h4>ADVERTISING</h4>
                    <a href="#">Disney+</a>
                    <a href="#">Marvel HQ</a>
                    <a href="#">Redeem Digital Comics</a>
                </div>
            </div>
            <div class="footer-social">
                <h4>FOLLOW MARVEL</h4>
                <div class="social-links">
                    <a href="#">📘</a>
                    <a href="#">🐦</a>
                    <a href="#">📸</a>
                    <a href="#">📺</a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 Marvel</p>
        </div>
    </footer>
</body>
</html>