foundations-landing-page/index.html at main · top-submissions/foundations-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
73
74
75
76
77
78
79
80
81
82
83
84
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Landing Page</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body class="flex-col">
        <header class="header flex-row">
            <div class="logo-container flex-row">
                <img src="" alt="" class="logo-img">
                <h3 class="logo-text">Header Logo</h3>
            </div>
            <nav>
                <ul class="links-container flex-row">
                    <li><a href="#main-section" rel="noopener noreferrer" class="secondary-text">header link 1</a></li>
                    <li><a href="#info-section" rel="noopener noreferrer" class="secondary-text">header link 2</a></li>
                    <li><a href="#quote-section" rel="noopener noreferrer" class="secondary-text">header link 3</a></li>
                </ul>
            </nav>
        </header>

        <main class="main flex-col">
            <section id="main-section" class="flex-row">
                <div class="main-content flex-col">
                    <h1 class="main-text">My Website</h1>
                    <p class="secondary-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, officiis perferendis! Itaque accusantium repellat asperiores nobis exercitationem, doloribus autem delectus praesentium sunt deserunt voluptatem aliquam. Inventore optio nobis assumenda odio.</p>
                    <button class="blue-bg secondary-text">Sign up</button>
                </div>
                <figure class="main-image flex-col">
                    <img src="" alt="">
                    <figcaption class="secondary-text">placeholder for an image</figcaption>
                </figure>
            </section>
            <section id="info-section" class="flex-col">
                <h2 class="header-text">Some random information</h2>
                <ul class="flex-row">
                    <li>
                        <figure>
                            <img src="" alt="">
                        </figure>
                        <figcaption>some subtext for an illustration 1</figcaption>
                    </li>
                    <li>
                        <figure>
                            <img src="" alt="">
                        </figure>
                        <figcaption>some subtext for an illustration 2</figcaption>
                    </li>
                    <li>
                        <figure>
                            <img src="" alt="">
                        </figure>
                        <figcaption>some subtext for an illustration 3</figcaption>
                    </li>
                    <li>
                        <figure>
                            <img src="" alt="">
                        </figure>
                        <figcaption>some subtext for an illustration 4</figcaption>
                    </li>
                </ul>
            </section>
            <section id="quote-section" class="white-bg flex-col">
                <blockquote class="quote-container flex-col">
                    <p class="quote-text">I'm a quote testimony. I'm a quote testimony. I'm a quote testimony. I'm a quote testimony. I'm a quote testimony. I'm a quote testimony. </p>
                    <cite class="quote-text">- Batman</cite>
                </blockquote>
            </section>
            <aside class="cta-banner blue-bg flex-row">
                <div class="cta-text flex-col">
                    <h4 class="secondary-text">Call to action! It's time!</h4>
                    <p class="secondary-text">Sign up here by clicking on the button to the right!</p>
                </div>
                <button class="secondary-text">Sign up</button>
            </aside>
        </main>

        <footer class="footer flex-row">
            <p class="secondary-text">Copyright © The Odin Project 2025</p>
        </footer>
    </body>
    </html>