Landing-Page/index.html at main · obayreaps/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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Kevin's Landing Page</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div class="header-section">
            <div class="top-layer">
                <img src="img/header-logo.webp" alt="Header logo" id="header-logo">
                <div class="links"><a href="#">About</a></div>
                <div class="links"><a href="#">Career</a></div>
                <div class="links"><a href="#">Resources</a></div>
            </div>
            <div class="header-lower">
                <div class="header-container1">
                    <div class="website-name">Avalanche</div>
                    <div class="website-description">It isn't just a name—it's a bond.
                        We're a group of friends who came together through shared experiences,
                        laughter, and an unbreakable sense of camaraderie. Like an avalanche,
                        we gain strength and momentum by supporting each other, overcoming challenges,
                        and celebrating life’s moments, big and small.
                    </div>
                    <button type="button">Sign up</button>
                </div>
                <img src="img/group-hike-logo.jpg" alt="Placeholder for image" class="group-hike-photo">
            </div>
        </div>

        <div class="main-section">
            <div class="main-title">Expeditions</div>
            <div class="subsection">
                <div class="cards">
                    <img src="img/mountains-1.jpg" alt="image-1" id="main-image">
                    <div class="item-description">Majestic peaks rise over lush, green valleys.</div>
                </div>
                <div class="cards">
                    <img src="img/mountains-2.jpg" alt="image-2" id="main-image">
                    <div class="item-description">Serene lake mirrors mountains under pastel skies.</div>
                </div>
                <div class="cards">
                    <img src="img/mountains-3.avif" alt="image-3" id="main-image">
                    <div class="item-description">Snowy peaks shine amidst untouched wilderness.</div>
                </div>
                <div class="cards">
                    <img src="img/mountains-4.avif" alt="image-4" id="main-image">
                    <div class="item-description">Crystal lake reflects forests and towering mountains.</div>
                </div>
            </div>
        </div>

        <div class="quote-section">
            <div class="quote">"Every mountain climbed reveals the
                strength within, ending in peace and tranquility."</div>
            <div class="quotee">-quincy thai</div>
        </div>
        <div class="signup-section">
            <div class="signup-container">
                <div class="signup1">
                    <div id="signup-big">Call to action! It's time! </div>
                    <div id="signup-small">Sign up for our product by clicking that button right over there!</div>
                </div>
                <button class="button">Sign up</button>
            </div>
        </div>
        <div class="footer">
            <div>Copyright @ Avalanche 2025</div>
        </div>
    </body>
</html>