projectbettertomorrow/index.html at main · brianschroeder/projectbettertomorrow · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Better Tomorrow</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Navigation Menu -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="#home" class="nav-link">home</a>
            <a href="#mission" class="nav-link">mission</a>
            <a href="#about" class="nav-link">about</a>
        </div>
    </nav>

    <!-- First Section: Logo Only -->
    <section id="home" class="hero-section">
        <div class="logo-container">
            <img id="logo" class="logo" src="logo.png" alt="Project Better Tomorrow Logo">
        </div>
    </section>

    <!-- Second Section: Title and Mission -->
    <section id="mission" class="mission-section">
        <div class="content-container">
            <h1 class="title">PROJECT BETTER TOMORROW</h1>
            <p class="mission-statement">helping you grow through new habits and mindsets to become the healthiest, happiest version of yourself — building a better tomorrow, together.</p>
        </div>
    </section>

    <!-- Third Section: Founder Introduction -->
    <section id="about" class="founder-section">
        <div class="content-container">
            <img src="brian.png" alt="Brian Schroeder" class="founder-photo">
            <h2 class="founder-name">Brian Schroeder</h2>
            <p class="founder-title">Founder</p>
            <blockquote class="founder-quote">
                <p>"Positively impacting even one person, would be a success for our mission!"</p>
            </blockquote>
        </div>
    </section>

    <script src="script.js"></script>
</body>
</html>