forked from YouthHandinHand/yhih-html
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
155 lines (141 loc) · 8.1 KB
/
index.html
File metadata and controls
155 lines (141 loc) · 8.1 KB
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
155
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true" />
<title>Youth Hand in Hand</title>
<link rel="icon" type="image/x-icon" href="img/YHIH_Logo.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<style>
#hero {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("img/craterlake.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: calc(100vh - 112px);
}
#navbar {
background-color: black;
}
.navbar-toggler {
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark pt-0 py-0">
<div class="container">
<a class="navbar-brand mb-0 py-3 px-3 pt-4 text-center bg-light" href="index.html">
<h3 class="font-weight-bold text-black"><img src="img/YHIH_Logo.png" class="img-fluid float-left align-middle"
width="64em" alt="Logo"> Youth Hand in Hand</h3>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item me-1">
<a class="nav-link" aria-current="page" href="index.html">HOME</a>
</li>
<li class="nav-item me-1">
<a class="nav-link" href="classes.html">CLASSES</a>
</li>
<li class="nav-item me-1">
<a class="nav-link" href="tutoring.html">TUTORING</a>
</li>
<li class="nav-item me-1">
<a class="nav-link" href="contact.html">CONTACT</a>
</li>
<li class="nav-item me-1">
<a class="nav-link" href="about.html">ABOUT US</a>
</li>
<li class="nav-item me-1">
<a class="nav-link" href="donate.html">DONATE</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="hero">
<div class="container col-xxl-8 px-4 py-5">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6">
<img class="d-block mx-lg-auto img-fluid mh-100" src="img/placeholder.jpg" alt="">
</div>
<div class="col-lg-6">
<h1 class="display-4 fw-bold lh-1 text-light">Create opportunities through learning</h1>
<p class="lead text-white-50">Sign up now for free virtual classes and tutoring, provided by high schoolers in
the Clark County area of Washington</p>
<a class="btn btn-primary btn-lg px-4 me-md-2 fw-bold" href="classes.html">Seasonal classes</a>
<a class="btn btn-outline-light btn-lg px-4 my-2" href="contact.html">Interested in teaching?</a>
</div>
</div>
</div>
</div>
<div class="container px-4 my-4">
<div class="container py-vh-4">
<div class="row justify-content-between d-flex align-items-stretch py-vh-2">
<div class="col-12 col-lg-5">
<img class="img-fluid mh-100" src="img/placeholder.jpg" alt="">
</div>
<div class="col-12 col-lg-5 my-auto">
<h2 class="h2">Why Youth Hand in Hand?</h2>
<p>Youth Hand in Hand is a nonprofit organization committed to giving all students an equal opportunity to
learn and succeed, both inside and outside school. We believe that we can lessen this gap through free
online classes, with people to guide them along every step of the way.
<br>
All of our profits will go to aiding the youths of today, providing them with more educational
opportunities!
</p>
</div>
</div>
</div>
</div>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="facebook" viewBox="0 0 16 16">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z">
</path>
</symbol>
<symbol id="instagram" viewBox="0 0 16 16">
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z">
</path>
</symbol>
<symbol id="twitter" viewBox="0 0 16 16">
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z">
</path>
</symbol>
</svg>
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<span class="mb-3 mb-md-0 text-muted">Questions? Email us at
<a href="mailto:youthhandinhand@gmail.com" class="link-fancy">youthhandinhand@gmail.com</a>.
<br>
Youth Hand in Hand is a registered nonprofit organization.</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24">
<use xlink:href="#twitter"></use>
</svg></a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24">
<use xlink:href="#instagram"></use>
</svg></a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24">
<use xlink:href="#facebook"></use>
</svg></a></li>
</ul>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>
</html>