-
Notifications
You must be signed in to change notification settings - Fork 0
/
nodeBuds.html
174 lines (171 loc) · 8.33 KB
/
nodeBuds.html
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./style.css">
<link rel="icon" type="image/png" sizes="32x32" href="./img/company logo.png">
<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=Poppins:wght@400;600&display=swap" rel="stylesheet">
<title>nodeBuds</title>
</head>
<body>
<!--Section on navbar-->
<nav class="navbar navbar-expand-lg pt-3 shadow-sm p-3 mb-5 bg-body rounded">
<div class="container">
<a class="navbar-brand" href="index.html"><img src="./img/company logo.png" alt="Company logo"><span
class="text-dark px-1 fw-bold">CSUF</span></a>
<button class="navbar-toggler navbar-light" 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 fw-bold">
<li class="nav-item">
<a class="nav-link active text-dark" aria-current="page" target="_blank"
href="about.html">about</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="events.html" target="_blank">events</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="paths.html" target="_blank">paths</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="nodeBuds.html" target="_blank">node<span
class="bud-primary">Buds</span></a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-dark" target="_blank" href="connect.html">connect</a>
</li>
</ul>
</div>
</div>
</nav>
<!--section on what is nodeBuds-->
<main class="container text-center">
<div class="d-flex gap-3 mb-3 flex-wrap justify-content-center align-items-center">
<div class="">
<img src="./img/node buds.png" alt="nodeBuds" height="100" width="100">
</div>
<div class="align-self-lg-center">
<h2 class="fw-bold bud-primary">nodeBuds</h2>
</div>
</div>
<h2 class="text-center fw-bold pt-3 pb-3">
what is node<span class="bud-primary">Buds?</span>
</h2>
<p class="mb-5">
nodeBuds is a mentorship program that aims to help underclassmen adjust to <br>
university life, and to prepare them for the tech industry. We achieve this by having <br>
under and underclassmen form strong connections with each other, which allows them <br>
to exchange advice, skills, and more, all in order to start students off succesfully. <br>
</p>
</main>
<!--Section on why join and fall-->
<aside class="container">
<!---Section on why join-->
<div class="row nodeBuds mb-5 mt-5">
<div class="col-md-6 align-self-center">
<img src="./img/jacob + ___ 1.png" alt="jacob_meeting" class="img-fluid">
</div>
<div class="col-md-6 text-sm-center text-md-end text pt-3">
<h2 class="pb-2">why join node<span class="bud-primary fw-bold">Buds?</span></h2>
<p class="">node<span class="bud-primary fw-bold">Buds</span> was designed to provide <br>
underclassmen and transfer students <br>
assistance as they start their fresh <br>
journey through <span class="text-primary fw-bold">CSUF</span>, and through <br>
the tech industry. We provide the <br>
knowledge and resources that’ll help <br>
students start on the right foot.</p>
</div>
</div>
<!--Section on fall 2020-->
<div class="row mt-5 fall-2020">
<div class="col-md-6 text-sm-center text-md-start">
<h2 class="pb-3">testimonial - fall<span class="bud-primary"> 2020</span> </h2>
<p>“node<span class="bud-primary">Buds</span> is a great way to get <br>
ahold of how you can move forward <br>
in your computer science journey! If <br>
you feel lost, or don’t have much idea <br>
of what to do, node<span class="bud-primary">Buds</span> is a great <br>
way to learn and gain insight from a <br>
mentor who has more experience, <br>
and is further along than you are” <br>
by Johnson Tong</p>
</div>
<div class="col-md-6 align-self-center pt-3">
<img src="./img/Sam + Tong 1.png" alt="sam + Tong" class="img-fluid">
</div>
</div>
</aside>
<!--section on who are part of-->
<section class="container mt-5 text-center">
<div class="">
<h2 class="fw-bold">who are apart of node<span class="bud-primary fw-bold">Buds?</span></h2>
</div>
<div class="btn-group mt-2 p-3" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-dark dropdown-toggle rounded-pill"
data-bs-toggle="dropdown" aria-expanded="false">
2020-2021
</button>
<!-- <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul> -->
</div>
</div>
<div class="row text-center mt-3">
<div class="col-md-3">
<img src="./img/Taylor_noh.png" alt="Taylor_noh" class="img-fluid">
<h3>Taylor Noh</h3>
<p>Officer</p>
</div>
<div class="col-md-3">
<img src="./img/Aaron.png" alt="Aaron" class="img-fluid">
<h3>Aaron Lieberman</h3>
<p>Officer</p>
</div>
<div class="col-md-3">
<img src="./img/Eugene.png" alt="Eugene" class="img-fluid">
<h3>Eugene Lee</h3>
<p>Officer</p>
</div>
<div class="col-md-3">
<img src="./img/wilbert.png" alt="wilbert" class="img-fluid">
<h3>Wilbert Rodriguez</h3>
<p>Officer</p>
</div>
</div>
</section>
<!--section on "what are you waiting for"-->
<div class="container mt-5 text-center">
<div class="">
<h2 class="fw-bold">how can i get involved?</h2>
<p>Currently, applications are closed to join the program. Follow us on social media to know <br>
when they open up! Until then, we invite you to become a part of <br>
<span class="fw-bold">the largest tech community at</span> <span
class="text-primary fw-bold">CSUF</span></p>
<div class="pt-3 mb-3">
<button type="submit" class="btn btn-dark fw-bold">join us today!</button>
</div>
</div>
</div>
<!--section on footer-->
<footer class="bg-dark mt-5">
<div class="pt-5 pb-3">
<div class="text-center text-white">
<p class="fw-bold">© 2021 <img src="./img/company logo.png" alt="Company logo"><span
class="px-1 fw-bold">CSUF</span></p>
</div>
</div>
</footer>
<script src="js/bootstrap.min.js"></script>
</body>
</html>