adoption-website/index.html at main · jwjohnson93/adoption-website · 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
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Johnsons Adopt</title>
    <link rel="stylesheet" href="css/styles.css" />
    <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=Montserrat:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <script
      src="https://kit.fontawesome.com/a076d05399.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <!-- Navigation -->
    <header>
      <div class="container">
        <h1 class="logo">The Johnsons Adopt</h1>
        <nav>
          <ul>
            <li><a href="#about">About</a></li>
            <li>
              <a
                href="https://adopttogether.org/families/j+a-johnsons-adopt"
                target="_blank"
                >Donate</a
              >
            </li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- Hero Section - Family Image -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <div class="hero-image">
            <!-- Replace with your family image -->
            <img src="images/family-hero.jpg" alt="The Johnson Family" />
          </div>
        </div>
      </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about">
      <div class="container">
        <div class="about-content">
          <div class="about-text">
            <h2>Jeremy & Avery</h2>
            <p>
              Hi there! We are Jeremy and Avery Johnson and we are excited to
              share our adoption journey with you.
            </p>
            <p>
              We have now been married for ten years and the time truly has
              flown by! After struggling with infertility for many years, we
              decided God was calling us to begin our family through adoption.
              We have several family members who were adopted, including
              Jeremy's mom, and saw how beautiful that process can be.
            </p>
            <p>
              We adopted our son Ezra over five years ago and are now feeling
              the push again from God to continue growing our family through
              adoption!
            </p>
            <p>
              There's never a dull moment in our household! You will find us
              doing just about anything, from going to the park to travelling to
              Disney World. Just as much as we love being busy, we still know
              the perfect balance of just staying at home and playing with toys
              or watching movies together.
            </p>
            <p>
              We are so excited to grow our family again and even Ezra says he
              is ready for a baby too!
            </p>
            <p>
              Thank you for taking the time to visit our page and read more
              about us!
            </p>
          </div>
          <div class="about-image">
            <!-- Replace with another family image -->
            <img src="images/couple-image.jpg" alt="Jeremy and Avery Johnson" />
          </div>
        </div>
      </div>
    </section>

    <!-- Social Media Section -->
    <section id="fundraising" class="social">
      <div class="container">
        <h2>Follow us on Facebook!</h2>
        <div class="social-images">
          <!-- Replace with social media images -->
          <div class="social-image-box">
            <img src="images/social-1.jpg" alt="Family Moment" />
          </div>
          <div class="social-image-box">
            <img src="images/social-2.jpg" alt="Family Moment" />
          </div>
          <div class="social-image-box">
            <img src="images/social-3.jpg" alt="Family Moment" />
          </div>
          <div class="social-image-box">
            <img src="images/social-4.jpg" alt="Family Moment" />
          </div>
        </div>
        <div class="social-button">
          <a
            href="https://www.facebook.com/jeremyandaveryadopt"
            target="_blank"
            class="btn"
            >Jeremy & Avery Adopt</a
          >
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
      <div class="container">
        <div class="contact-content">
          <div class="contact-text centered">
            <h2 class="contact-heading nowrap">We would love to hear from you!</h2>
            <p>
              Interested in hearing more about our story? Contact us directly by email and we'll be happy to respond to your message.
            </p>
            <div class="contact-button">
              <a href="mailto:jeremyandavery@gmail.com" class="btn" target="_blank">Contact Us</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer>
      <div class="container">
        <p class="copyright">&copy; 2024 The Johnsons Adopt. All rights reserved.</p>
      </div>
    </footer>

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