-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
227 lines (213 loc) · 11 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
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CD Tech - Working Together</title>
<!-- Font Awesome -->
<script
src="https://kit.fontawesome.com/15a6eaf0f9.js"
crossorigin="anonymous"
></script>
<!-- Javascript Link -->
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="icon" type="image/svg+xml" href="resources/images/logo-stacked.svg" />
<!-- favicon displays as browser tab art -->
</head>
<body>
<!-- Main Page Wrapper -->
<div class="mainPageWrapper">
<!-- Sidebar Wrapper -->
<div class="sidebarWrapper">
<div class="sidebar">
<div class="logo-container">
<img class=" stacked-logo" src="./resources/images/logo-stacked.svg" alt="logo" />
<img class=" horizontal-logo" src="./resources/images/logo-horizontal.svg" alt="logo" />
</div>
<div class="socials">
<ul class="socials-list">
<a href="https://www.linkedin.com/company/cd-tech-chattanooga" target="_blank"><li>
<i class="fa-brands fa-linkedin-in"></i>
</li></a>
<a href="https://discord.gg/wgjua5SGJP" target="_blank"><li>
<i class="fa-brands fa-discord"></i>
</li></a>
<a href="https://www.meetup.com/find/?slug=chadevs&eventId=296589782&keywords=CD%20Tech%20Thursdays&source=EVENTS" target="_blank"><li class="meetup-icon">
<i class="fa-brands fa-meetup"></i>
</li></a>
</ul>
</div>
<div class="copyright" view="desktop"><p>Copyright © CD Tech 2023</p></div>
<div class="attribution" view="desktop">
<a href="https://www.flaticon.com/free-animated-icons" title="animated icons">Icons by Freepik</a>
</div>
</div>
</div>
<!-- Main Content Wrapper -->
<main class="mainContentWrapper">
<div class="content">
<!-- Content Sections Start Here -->
<!-- Hero Section -->
<section class="hero">
<div class="heroContent">
<h1>Coming Together to Break Into Technology</h1>
<p>Welcome to our vibrant community of determined Chattanoogans with non-traditional backgrounds, all sharing the common aspiration to break into the dynamic world of technology as developers.
</p>
<!-- pop-up dialog box, containing a form -->
<!-- <dialog id="learnMore">
<div class="tenor-gif-embed" data-postid="13843355" data-share-method="host" data-aspect-ratio="1.29032" data-width="100%"><a href="https://tenor.com/view/nope-not-a-chance-no-gif-13843355">Nope Not A Chance GIF</a>from <a href="https://tenor.com/search/nope-gifs">Nope GIFs</a></div>
<div>
<button id="cancel" type="reset">Ah ah ah, you didn't say the magic word</button>
</div>
</dialog>
<button id="cdBtn" class="cdBtn">Learn More</button> -->
</div>
</section>
<!-- Core Values Section -->
<section class="values">
<div class="values-container">
<h2 class="values-title">Our Core <span class="values-script">Values</span></h2>
<!-- Start values grid -->
<div class="values-grid">
<div class="values-img">
<img class="group-img" src="resources/images/group-pic.jpg" alt="group picture"/>
</div>
<!-- Value 1 -->
<div class="value value-1">
<div class="value-icon">
<img class="animated-icon" src="resources/images/teamwork.gif" alt="animated icon"/>
</div>
<h3 class="value-heading">
Collaboration + Teamwork
</h3>
<p class="value-description">
By working together and leveraging everyone's strengths, we amplify our impact and create innovative solutions that address the unique needs of non-profits and aspiring developers.
</p>
</div>
<!-- Value 2 -->
<div class="value value-2">
<div class="value-icon">
<img class="animated-icon" src="resources/images/idea.gif" alt="lightbulb"/>
</div>
<h3 class="value-heading">Inclusivity</h3>
<p class="value-description">
We welcome diverse perspectives, recognizing that a variety of perspectives, backgrounds, and experiences drive creativity and lead to well-rounded solutions.
</p>
</div>
<!-- Value 3 -->
<div class="value value-3">
<div class="value-icon">
<img class="animated-icon" src="resources/images/handshake.gif" alt="animated handshake"/>
</div>
<h3 class="value-heading">Mentorship</h3>
<p class="value-description">
We believe in the power of mentorship and "paying it forward". We encourage experienced individuals to serve as mentors, providing guidance and support to those who are new to the field.
</p>
</div>
<!-- Value 4 -->
<div class="value value-4">
<div class="value-icon">
<img class="animated-icon" src="resources/images/diploma.gif" alt="animated diploma"/>
</div>
<h3 class="value-heading">Professional Development</h3>
<p class="value-description">
We emulate industry standards and workflows, facilitating professional development that fosters confidence and growth in everyday processes.
</p>
</div>
<!-- Value 5 -->
<div class="value value-5">
<div class="value-icon">
<img class="animated-icon" src="resources/images/data-analysis.gif" alt="mountain top"/>
</div>
<h3 class="value-heading">Community-centric</h3>
<p class="value-description">
We value our community, offering a space for like-minded invididuals to come together to learn and grow.
</p>
</div>
</div>
</div>
</section>
<!-- End of Values Section -->
<!-- Card Component Section -->
<section class="cards">
<div class="cards-container">
<!-- Card One -->
<article class="card">
<div class="card-top">
<img src="resources/images/card-img-1.jpg" alt="two people looking at code on laptop" />
</div>
<div class="card-bottom">
<h2>Gain Experience</h2>
<p class="card-content">
Now more than ever, it's hard to gain experience in the Tech Industry without already having some. Our team comes together to build, collaborate, and gain valuable industry-level experience to add to portfolios.
</p>
<a class="link-card" href="https://github.com/CD-Squared-Tech" target="_blank"><button class="btn-card">Learn More</button></a>
</div>
</article>
<!-- Card Two -->
<article class="card">
<div class="card-top">
<img src="resources/images/card-img-2.jpg" alt="two people looking at code on a laptop" />
</div>
<div class="card-bottom">
<h2>Build Community</h2>
<p class="card-content">
We meet twice a month to bridge the gap between those looking to enter the Tech Industry from non-traditional backgrounds and the already-established community members willing to mentor.
</p>
<a class="link-card" href="https://www.meetup.com/chadevs/" target="_blank"><button class="btn-card">Learn More</button></a>
</div>
</article>
</div>
</section>
<!-- End of Card Section -->
<!-- Split Section -->
<section class="cd-split-section flex-reverse">
<img src="resources/images/meeting-1.jpg" alt=""/>
<div class="cd-split-text">
<h1>Together, We Support, Learn, and Grow</h1>
<p>Together, we embark on an exciting journey, each line of code we write and every challenge we overcome bringing us closer to realizing our dreams in the tech industry. With our collective passion, unwavering dedication, and a supportive network, we're forging our path in this ever-evolving field, ready to make a lasting impact and shape the future of technology.</p>
</div>
</section>
<!-- Contact Form Section -->
<section class="contact">
<div class="form">
<h1>Contact Us</h1>
<form>
<ul>
<li>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
</li>
<li>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br>
</li>
<li>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
</li>
<li>
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea><br>
</li>
<li>
<button type="submit" class="btn-contact">Submit</button>
</li>
</ul>
</form>
</div>
<!-- Footer copyright for mobile view-->
<section class="mobile-copyright">
<div class="copyright" view="mobile"><p>Copyright ©CD Techies</p></div>
</section>
</div>
</main>
</div>
<!-- Javascript Link -->
<!-- NOTE: Commenting out the script to fix 'Uncaught TypeError'... -->
<!-- ...until script it being used. -->
<!-- <script type="text/javascript" async src="https://tenor.com/embed.js"></script> -->
<script type="text/javascript" src="index.js"></script>
</body>
</html>