-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
201 lines (195 loc) · 12 KB
/
index.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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!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="style.css">
<title>Code Climbers</title>
</head>
<body>
<!-- Header -->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero"><h1>Code<span>Climbers</span></h1></a>
</div>
<div class="nav-list">
<div class="hamburger"><div class="bar"></div></div>
<ul>
<li><a href="#hero" data-after="Home">Home</a></li>
<li><a href="#services" data-after="Service">Services</a></li>
<li><a href="#projects" data-after="Testimony">Testimonies</a></li>
<li><a href="#about" data-after="About">About</a></li>
<li><a href="#contact" data-after="Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- End Header -->
<!-- Hero Section-->
<section id="hero">
<div class="hero container">
<div>
<h1>Welcome, <span></span></h1>
<h1>We Are <span></span></h1>
<h1>CodeClimbers <span></span></h1>
<a href="#" type="button" onClick="parent.open('https://forms.gle/gRWZowHUoAkXqFwD9')" class="cta" >2025 Youth Sign-up Form</a>
</div>
</div>
</section>
<!-- End Hero Section-->
<!-- Service Section-->
<section id="services">
<div class="services container">
<div class="service-top">
<h1 class="section-title">Mission <span>Statement</span></h1>
<h2>Our organization's mission is to bridge the gap in technological knowledge in the Sacramento, Natomas area by empowering two generations.</h2>
<p>We acknowledge the lack of computer science exposure in the natomas area amongst middle schoolers. Consequently, we hope to offer hands-on computer science experiences and mentorship opportunities which they may not receive at school. Additionally, we also offer seniors the resources and aid they need to develop technology literacy and stay connected with their community in this time of technological boom. Teachings in Spanish and Cantonese are available if needed.</p>
</div>
<div class="service-bottom">
<div class="service-item">
<div class="icon"><img src="img/school icon.png">
</div>
<h2>Youth Service</h2>
<p>Over the summer, we provide middle schoolers in the natomas area an opportunity to dip their feet into the computer science field. We have created a curriculum that is designed to be engaging and fun, covering topics such as the basic principles of computer science and web development with HTML and CSS. Our courses are fully free and held at the North Natomas Library. We hope to inspire students to pursure computer science through our in-depth introductory program.</p>
</div>
<div class="service-item">
<div class="icon"><img src="img/school icon.png">
</div>
<h2>Senior Service</h2>
<p>Throughout the year, we provide a valuable service to seniors in the Sacramento area by offering free visits to senor apartments, homes, and retirement locations. Our personalized technological support provides assistance on how to use computers, google functions, cellphones, and other technology with confidence. Our goal is to ensure seniors to be comfortable with the skills needed to stay connected with their family and friends, access important daily information, and participate in the digital world. </p>
</div>
</div>
</div>
</section>
<!-- End Service Section-->
<!-- Project Section-->
<section id="projects">
<div class="projects container">
<div class="projects-header">
<h1 class="section-title">Partners/<span>Testimonies</span></h1>
</div>
<div class="all-projects">
<div class="project-item">
<div class="project-info">
<h1>Partners</h1>
<h2>NP3 - Natomas Pacific Pathways Prep Highschool</h2>
</div>
<div class="project-img">
<img src="./img/np3log.png" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Testimony</h1>
<h2>Kellen Thompson - Highschool Social Science Teacher</h2>
<p>Anthony and Justin were both incredibly reliable students as members of my AP U.S. History class. In addition to being top of the class academically, they were also key contributors in making the class the close-knit community it was. NP3 is lucky to have them!</p>
</div>
<div class="project-img">
<img src="./img/Kellen Thompson.jpg" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Testimony</h1>
<h2>Mohammad Imran - Highschool Student</h2>
<p>CodeClimbers helped me learn to code at a young age. Their knowledgeable instructors and supportive community ignited my passion for programming. Thanks to them, I gained a solid foundation and the confidence to pursue a career in software development. I highly recommend CodeClimbers to anyone looking to learn coding effectively.</p>
</div>
<div class="project-img">
<img src="./img/Moh.jpg" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Testimony</h1>
<h2>Nathan Gonsalves - Highschool Student</h2>
<p>Justin and Anthony demonstrate evident maturity in and out of the classroom as evidenced by their dedication to all academic ventures and generous acts to those who require assistance in the computer science field. This project is absolutely consistent with what I know them to be: generous, high achieving, intelligent individuals who are an inspiration to their peers and proud representatives of their cultural communities.</p>
</div>
<div class="project-img">
<img src="./img/Nathan Bedford image.jpeg" alt="img">
</div>
</div>
</div>
</div>
</section>
<!-- End Project Section-->
<!-- About Section-->
<section id="about">
<div class="about container">
<div class="col-left">
<div class="about-img">
<img src="./img/Justin and Anthony.jpg" alt="img">
</div>
</div>
<div class="col-right">
<h1 class="section-title">About <span>us</span></h1>
<h2>Front End Developers</h2>
<p>CodeClimbers was founded by two passionate high school students, Anthony Do (left) and Justin Gutierrez (right), both from NP3 High. They enjoy sharing their personal knowledge and skills, all which they have accumulated throughout their personal experiences, to help everyone thrive in the digital age. They find joy in their service when they can motivate and help others to achieve their goals. We understand technolgy may seem intimidating, and we strive to relieve frustrations through our programs.</p>
<p>With past experience in teaching and computer science, Anthony believes that computer science is a critical skill that should be accessible to everyone, regardless of their age or background. He began this program with Justin after realizing the need for more computer science education in nearby schools. He finds it rewarding to see others excel and develop their skills over time. He finds it a priveledge to be able to give back and help others in his community stay engaged and active. Aside from computer science, Anthony enjoys practicing and competing in Taekwondo and Tricking.</p>
<p>Justin is an aspiring computer science student in high school who is passionate about teaching and making computer science more accessible to students in the Sacramento area. He believes in the transformative power of education and sees teaching as an opportunity to share his enthusiasm and knowledge. Justin finds joy in witnessing students develop problem-solving skills and critical thinking through computer science education. Outside of teaching, he enjoys outdoor activities like running and hiking, spending time with family and friends, pursuing family traditions like horse-riding and staying updated with the latest technology advancements. Teaching allows Justin to make a positive impact while nurturing his own personal growth and interests.</p>
<a href="https://www.linkedin.com/in/anthonydo6/" class="cta">More info: LinkedIn</a>
</div>
</div>
</section>
<!-- End About Section-->
<!-- Contact Section-->
<section id="contact">
<div class="contact container">
<div><h1 class="section-title">Contact <span>Info</span></h1></div>
<div class="contact-items">
<div class="contact-item">
<div class="icon"><img src="img/email icon.png"/></div>
<div class="contact-info">
<h1>Email</h1>
<h2>[email protected]</h2>
</div>
</div>
<div class="contact-item">
<div class="icon"><img src="img/email icon.png"/></div>
<div class="contact-info">
<h1>Alt Email</h1>
<h2>[email protected]</h2>
<h2>[email protected]</h2>
</div>
</div>
<div class="contact-item">
<div class="icon"><img src="img/Socials icon.png"/></div>
<div class="contact-info">
<h1>Social Media</h1>
<h2>@anthony.ddo</h2>
<h2>@guccithefarmer</h2>
<h2>@sxmnn.c</h2>
</div>
</div>
</div>
</div>
</section>
<!-- End Contact Section-->
<!-- Footer -->
<section id="footer">
<div class="footer container">
<div class="brand"><h1>Code<span>Climbers</span></h1></div>
<h2>Here to help you accomplish your goals in computers and technology!</h2>
<div class="social-icon">
<div class="social-item">
<a href="#"><img src="img/Code icon.png"></a>
</div>
<div class="social-item">
<a href="#"><img src="img/code bug.png"></a>
</div>
<div class="social-item">
<a href="#"><img src="img/Code Fork.png"></a>
</div>
<div class="social-item">
<a href="#"><img src="img/Variable.png"></a>
</div>
</div>
<p>Copyright © 2023 CodeClimbers. All rights reserved</p>
</div>
</section>
<!-- End Footer -->
<script src="./app.js"></script>
</body>
</html>