Skip to content

Commit f63126d

Browse files
namangupta1399namangupta1399
authored
Merge pull request #255 from namangupta1399/bootstrap
Added bootstrap
2 parents 291afe2 + 8f77b30 commit f63126d

File tree

5 files changed

+314
-73
lines changed

5 files changed

+314
-73
lines changed

‎index.html

Lines changed: 199 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737
<title>Chryz-hub Community</title>
3838

3939
<!-- STYLES -->
40+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
41+
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
4042
<link rel="stylesheet" href="./src/assets/css/global.css" />
4143
<link rel="stylesheet" href="./src/assets/css/styles.css" />
4244
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
@@ -60,7 +62,7 @@ <h1 class="logo"><a href="#home"><img src="./src/assets/images/chryz-hub-transpa
6062
<li><a href="./index.html">Community</a></li>
6163
<li><a href="#projects">Projects</a></li>
6264
<li><a href="./index.html">Blog</a></li>
63-
<li><a href="./index.html">Moderators</a></li>
65+
<li><a href="#moderators">Moderators</a></li>
6466
</ul>
6567
</nav>
6668

@@ -102,57 +104,210 @@ <h2 class="text-primary">Our Vision</h2>
102104
</header>
103105
<main>
104106

105-
<!-- Projects -->
106-
<section id="projects" class="projects">
107-
<h2>Projects</h2>
107+
<!-- Projects -->
108+
<section id="projects" class="container mb-5">
109+
<h2 class="text-center fw-bold mb-4 my-4">Projects</h2>
108110

109-
<div class="flex-items" id="githubprojects">
110-
<!-- GitHub Projects from scripts.js goes here -->
111-
</div>
111+
<div class="projects">
112+
<div class="row g-5" id="githubprojects">
113+
<!-- GitHub Projects from scripts.js goes here -->
114+
</div>
115+
<div class="text-center mt-3">
116+
<a href="#">View more</a>
117+
</div>
118+
</div>
112119

113-
<!-- Not needed if we go to api call in the js -->
114-
<!-- <div class="flex-items">
115-
<a href="#">
116-
<div class="item project">
117-
<h4 class="text-secondary">Chryz-Hub Website</h4>
118-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis quos consequatur atque perferendis
119-
sapiente consectetur iusto tempora temporibus, sequi maxime.</p>
120-
<div>
121-
<span class="fab fa-html5"></span>
122-
<span class="fab fa-css3-alt"></span>
123-
<span class="fab fa-js"></span>
120+
<!-- Not needed if we go to api call in the js -->
121+
<!-- <div class="projects">
122+
<div class="row g-5">
123+
<div class="col-12 col-sm-6 col-lg-4">
124+
<a href="#" class="project-box">
125+
<div class="item project">
126+
<img src="./src/assets/images/projects/community-website.jpg" class="project-image" alt="">
127+
<div class="project-content">
128+
<h4 class="text-secondary">Chryz-Hub Website</h4>
129+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis quos consequatur atque perferendis
130+
sapiente consectetur iusto tempora temporibus, sequi maxime.</p>
131+
<div>
132+
<span class="fab fa-html5"></span>
133+
<span class="fab fa-css3-alt"></span>
134+
<span class="fab fa-js"></span>
135+
</div>
136+
</div>
137+
</div>
138+
</a>
139+
</div>
140+
<div class="col-12 col-sm-6 col-lg-4">
141+
<a href="#" class="project-box">
142+
<div class="item project">
143+
<img src="./src/assets/images/projects/js-projects.PNG" class="project-image" alt="">
144+
<div class="project-content">
145+
<h4 class="text-secondary">Chryz-Hub Website</h4>
146+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis quos consequatur atque perferendis
147+
sapiente consectetur iusto tempora temporibus, sequi maxime.</p>
148+
<div>
149+
<span class="fab fa-html5"></span>
150+
<span class="fab fa-css3-alt"></span>
151+
<span class="fab fa-js"></span>
152+
</div>
153+
</div>
154+
</div>
155+
</a>
156+
</div>
157+
<div class="col-12 col-sm-6 col-lg-4">
158+
<a href="#" class="project-box">
159+
<div class="item project">
160+
<img src="./src/assets/images/projects/py-projects.PNG" class="project-image" alt="">
161+
<div class="project-content">
162+
<h4 class="text-secondary">Chryz-Hub Website</h4>
163+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis quos consequatur atque perferendis
164+
sapiente consectetur iusto tempora temporibus, sequi maxime.</p>
165+
<div>
166+
<span class="fab fa-html5"></span>
167+
<span class="fab fa-css3-alt"></span>
168+
<span class="fab fa-js"></span>
169+
</div>
170+
</div>
171+
</div>
172+
</a>
124173
</div>
125174
</div>
126-
</a>
127-
128-
<a href="#">
129-
<div class="item project">
130-
<h4 class="text-secondary">Project X</h4>
131-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa corrupti, officia labore quibusdam
132-
adipisci! Ducimus perspiciatis corrupti dolore accusamus?</p>
133-
<div>
134-
<span class="fab fa-python"></span>
135-
<span class="fab fa-bootstrap"></span>
136-
<span class="fab fa-js"></span>
175+
</div> -->
176+
</section>
177+
178+
<section id="video-section" class="py-5 my-5">
179+
<div class="container">
180+
<div class="row">
181+
<div class="col-12 col-lg-6">
182+
<iframe src="https://www.youtube.com/embed/91x7KJ1lMHw" id="channel-video" title="YouTube video player"
183+
frameborder="0"
184+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
185+
allowfullscreen></iframe>
186+
</div>
187+
<div class="col-12 col-lg-6">
188+
<p>
189+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium, animi. Eligendi facere voluptatum
190+
aliquam cumque in fugiat officiis asperiores culpa voluptates eaque. Dolorum animi doloribus, sequi,
191+
voluptas obcaecati vel impedit iste beatae reiciendis dolorem a. Debitis dignissimos iure natus, libero
192+
vel tempore. Possimus provident soluta dolorum explicabo voluptates ipsa molestiae, debitis minus! Eaque,
193+
impedit beatae, laboriosam rerum voluptatum amet nemo perspiciatis distinctio numquam sit incidunt labore
194+
rem dolor soluta molestias voluptatibus recusandae, doloremque aliquam porro nesciunt. Quam voluptatum
195+
veritatis tempore dolor impedit ratione eos quibusdam odio asperiores error deserunt qui modi eligendi
196+
dolores, placeat atque facere molestias deleniti, praesentium iure.
197+
</p>
137198
</div>
138199
</div>
139-
</a>
140-
141-
<a href="#">
142-
<div class="item project">
143-
<h4 class="text-secondary">Project Y</h4>
144-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa corrupti, officia labore quibusdam
145-
adipisci! Ducimus perspiciatis corrupti dolore accusamus?</p>
146-
<div>
147-
<span class="fab fa-react"></span>
148-
<span class="fab fa-js"></span>
200+
</div>
201+
</section>
202+
203+
<section id="moderators" class="py-4 mt-5">
204+
<div class="container">
205+
<h2 class="text-center fw-bold my-5 heading">Our Moderators</h2>
206+
<div class="row g-5">
207+
<div class="col-12 col-lg-6">
208+
<div class="moderator">
209+
<img src="./src/assets/images/moderator-sample.jpg" alt="moderator image" class="moderator-img">
210+
<div class="moderator_details">
211+
<h5 class="fw-bold moderator_name">Olanrewaju Alaba</h5>
212+
<p class="mb-0">Open-Source Enthusiast</p>
213+
<ul class="moderator_content">
214+
<li>Developer</li>
215+
<li>Technical writer/blogger</li>
216+
<li>Aspiring Data scientist</li>
217+
</ul>
218+
<div class="social-profiles">
219+
<a href="#" class="github-profile">
220+
<i class="fab fa-github"></i>
221+
</a>
222+
<a href="#" class="website-link">
223+
<i class="fas fa-link"></i>
224+
</a>
225+
</div>
226+
</div>
227+
</div>
228+
</div>
229+
<div class="col-12 col-lg-6">
230+
<div class="moderator">
231+
<img src="./src/assets/images/moderator-sample.jpg" alt="moderator image" class="moderator-img">
232+
<div class="moderator_details">
233+
<h5 class="fw-bold moderator_name">Olanrewaju Alaba</h5>
234+
<p class="mb-0">Open-Source Enthusiast</p>
235+
<ul class="moderator_content">
236+
<li>Developer</li>
237+
<li>Technical writer/blogger</li>
238+
<li>Aspiring Data scientist</li>
239+
</ul>
240+
<div class="social-profiles">
241+
<a href="#" class="github-profile">
242+
<i class="fab fa-github"></i>
243+
</a>
244+
<a href="#" class="website-link">
245+
<i class="fas fa-link"></i>
246+
</a>
247+
</div>
248+
</div>
249+
</div>
149250
</div>
251+
<div class="col-12 col-lg-6">
252+
<div class="moderator">
253+
<img src="./src/assets/images/moderator-sample.jpg" alt="moderator image" class="moderator-img">
254+
<div class="moderator_details">
255+
<h5 class="fw-bold moderator_name">Olanrewaju Alaba</h5>
256+
<p class="mb-0">Open-Source Enthusiast</p>
257+
<ul class="moderator_content">
258+
<li>Developer</li>
259+
<li>Technical writer/blogger</li>
260+
<li>Aspiring Data scientist</li>
261+
</ul>
262+
<div class="social-profiles">
263+
<a href="#" class="github-profile">
264+
<i class="fab fa-github"></i>
265+
</a>
266+
<a href="#" class="website-link">
267+
<i class="fas fa-link"></i>
268+
</a>
269+
</div>
270+
</div>
271+
</div>
272+
</div>
273+
<div class="col-12 col-lg-6">
274+
<div class="moderator">
275+
<img src="./src/assets/images/moderator-sample.jpg" alt="moderator image" class="moderator-img">
276+
<div class="moderator_details">
277+
<h5 class="fw-bold moderator_name">Olanrewaju Alaba</h5>
278+
<p class="mb-0">Open-Source Enthusiast</p>
279+
<ul class="moderator_content">
280+
<li>Developer</li>
281+
<li>Technical writer/blogger</li>
282+
<li>Aspiring Data scientist</li>
283+
</ul>
284+
<div class="social-profiles">
285+
<a href="#" class="github-profile">
286+
<i class="fab fa-github"></i>
287+
</a>
288+
<a href="#" class="website-link">
289+
<i class="fas fa-link"></i>
290+
</a>
291+
</div>
292+
</div>
293+
</div>
294+
</div>
295+
</div>
296+
<div class="text-center my-4">
297+
<a href="#" class="text-white">View more</a>
150298
</div>
151-
</a>
152-
</div> -->
153-
</section>
154-
<!-- JAVASCRIPT -->
155-
<script src="./src/assets/javascript/script.js"></script>
299+
</div>
300+
</section>
301+
302+
<footer class="footer">
303+
<div class="container">
304+
<h4 class="copyright-text text-center py-5">
305+
Copyright &copy; Chyrz-hub
306+
</h4>
307+
</div>
308+
</footer>
309+
<!-- JAVASCRIPT -->
310+
<script src="./src/assets/javascript/script.js"></script>
156311
</body>
157312

158313
</html>

‎src/assets/css/global.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ textarea:focus {
9999
}
100100

101101
.text-primary {
102+
color: inherit !important;
102103
font-size: 1.3rem;
103104
padding-bottom: 8px;
104105
}

0 commit comments

Comments
 (0)