Skip to content

Commit 846d235

Browse files
namangupta1399namangupta1399
committed
Added bootstrap css + update projects
1 parent 46f22b5 commit 846d235

File tree

4 files changed

+115
-74
lines changed

4 files changed

+115
-74
lines changed

‎index.html

Lines changed: 68 additions & 45 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"
@@ -102,57 +104,78 @@ <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>
112-
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>
124-
</div>
111+
<div class="projects">
112+
<div class="row g-5" id="githubprojects">
113+
<!-- GitHub Projects from scripts.js goes here -->
125114
</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>
137-
</div>
115+
<div class="text-center mt-3">
116+
<a href="#">View more</a>
138117
</div>
139-
</a>
118+
</div>
140119

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>
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>
149173
</div>
150174
</div>
151-
</a>
152-
</div> -->
153-
</section>
154-
<!-- JAVASCRIPT -->
155-
<script src="./src/assets/javascript/script.js"></script>
175+
</div> -->
176+
</section>
177+
<!-- JAVASCRIPT -->
178+
<script src="./src/assets/javascript/script.js"></script>
156179
</body>
157180

158181
</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
}

‎src/assets/css/styles.css

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ nav ul li a {
4949
}
5050

5151
nav ul li a:hover {
52+
color: inherit;
5253
border-radius: 2px;
5354
opacity: 1;
5455
}
@@ -76,7 +77,7 @@ nav ul li a:focus {
7677

7778
/* Hero Section*/
7879
#hero {
79-
height: 100vh;
80+
min-height: 100vh;
8081
}
8182

8283
.content {
@@ -225,13 +226,17 @@ nav ul li a:focus {
225226
}
226227

227228
/* Projects */
228-
#projects {
229-
height: 400px;
229+
230+
.projects .project-box{
231+
display: block;
232+
transition: all 0.4s ease-in-out;
233+
height: 100%;
230234
}
231235

232-
.projects {
233-
margin: 0 auto;
234-
max-width: 1200px;
236+
.projects .project-box:hover {
237+
transform: translateY(-10px);
238+
box-shadow: 2px 2px 5px rgba(9, 156, 176, 0.5);
239+
border-radius: 11px;
235240
}
236241

237242
.projects h2 {
@@ -241,37 +246,44 @@ nav ul li a:focus {
241246

242247
.project {
243248
height: 100%;
244-
padding: 40px;
245-
background: #fff url(../images/under-construction.jpg) no-repeat center center/cover;
249+
overflow: hidden;
250+
/* padding: 40px; */
251+
/* background: #fff url(../images/under-construction.jpg) no-repeat center center/cover;
246252
background-size: cover;
247-
background-position: left;
253+
background-position: center; */
248254
}
249255

250256
.project p {
251257
font-size: 16px;
252258
line-height: 1.6;
253259
}
254260

255-
.project div {
261+
.project-content {
262+
padding: .5rem 1rem;
263+
background-color: #212529;
264+
color: #fff;
265+
display: flex;
266+
flex-direction: column;
267+
height: 100%;
268+
}
269+
270+
.project-image {
271+
height: 200px;
272+
width: 100%;
273+
}
274+
275+
/* .project div {
256276
margin-top: 20px;
257277
display: flex;
258278
width: 100%;
259279
justify-content: flex-end;
260-
}
280+
} */
261281

262282
.project div span {
263283
margin: 0 5px;
264284
color: var(--secondaryBtn);
265285
}
266286

267-
#githubprojects {
268-
align-items: stretch;
269-
}
270-
271-
#githubprojects a {
272-
width: 33%;
273-
}
274-
275287
.flex-col-3 {
276288
width: 100%;
277289
height: auto;

‎src/assets/javascript/script.js

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -65,16 +65,21 @@ function createprojectcard(project, background) {
6565
project.description = project.description.replace(/:[^}]*:/, '');
6666

6767
// TODO: add Project Card
68-
69-
let projectcard = `<a href="${project.html_url}">
70-
<div class="item project" style="background-image: url(https://raw.githubusercontent.com/chryz-hub/chryz-hub.github.io/master/src/assets/images/projects/${background})">
71-
<h4 class="text-secondary">${project.name}</h4>
72-
<p>${project.description}</p>
73-
<div>
74-
<span class="fab fa-react"></span>
75-
<span class="fab fa-js"></span>
68+
let projectcard = `<div class="col-12 col-sm-6 col-lg-4">
69+
<a href="#" class="project-box">
70+
<div class="item project">
71+
<img src="./src/assets/images/projects/${background}" class="project-image" alt="">
72+
<div class="project-content">
73+
<h4 class="text-secondary">${project.name}</h4>
74+
<p>${project.description}</p>
75+
<div>
76+
<span class="fab fa-html5"></span>
77+
<span class="fab fa-css3-alt"></span>
78+
<span class="fab fa-js"></span>
79+
</div>
80+
</div>
7681
</div>
77-
</div>
78-
</a>`;
82+
</a>
83+
</div>`
7984
return projectcard;
8085
}

0 commit comments

Comments
 (0)