Skip to content

Commit 0d094a1

Browse files
vinzvincivinzvinci
authored
Merge pull request #15 from Bryson69/main
Resolve #12
2 parents 794249f + aaf8e69 commit 0d094a1

File tree

5 files changed

+293
-8
lines changed

5 files changed

+293
-8
lines changed

‎assets/css/styles.css‎

Lines changed: 109 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -237,15 +237,15 @@ img {
237237
margin-bottom: 2.5rem;
238238
}
239239

240-
.button {
240+
.home__button {
241241
display: inline-block;
242242
background-color: var(--first-color-dark);
243243
color: var(--white-color);
244244
padding: 1.125rem 2rem;
245245
border-radius: .5rem;
246246
}
247247

248-
.button:hover {
248+
.home__button:hover {
249249
background-color: var(--first-color-darken);
250250
}
251251

@@ -302,6 +302,111 @@ img {
302302
}
303303

304304

305+
/* ===== TEAM ====== */
306+
307+
.team__container{
308+
position: relative;
309+
z-index: 1;
310+
display: flex;
311+
justify-content: center;
312+
align-items: center;
313+
flex-wrap: wrap;
314+
margin: 40px 0;
315+
/* width: 70%; */
316+
}
317+
318+
.team__card{
319+
position: relative;
320+
width: 300px;
321+
height: 400px;
322+
background: rgba(255, 255, 255, 0.05);
323+
margin: 20px;
324+
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
325+
border-radius: 15px;
326+
display: flex;
327+
justify-content: center;
328+
align-items: center;
329+
backdrop-filter: blur(10px);
330+
}
331+
332+
.team__content{
333+
position: relative;
334+
display: flex;
335+
justify-content: center;
336+
align-items: center;
337+
flex-direction: column;
338+
opacity: 0.5;
339+
transition: 0.5s;
340+
}
341+
342+
.team__card:hover .team__content{
343+
opacity: 1;
344+
transform: translateY(-20px);
345+
}
346+
347+
.team__img{
348+
position: relative;
349+
width: 150px;
350+
height: 150px;
351+
border-radius: 50%;
352+
overflow: hidden;
353+
border: 10px solid rgba(0, 0, 0, 0.25);
354+
}
355+
356+
.team__img > img{
357+
position: absolute;
358+
top: 0;
359+
left: 0;
360+
width: 100%;
361+
height: 100%;
362+
object-fit: cover;
363+
}
364+
365+
.team__text > h3{
366+
color: var(--text-color);
367+
text-transform: uppercase;
368+
letter-spacing: 2px;
369+
font-weight: 500;
370+
text-align: center;
371+
margin: 20px 0 10px;
372+
line-height: 1.1em;
373+
}
374+
375+
.team__text > span{
376+
font-size: 12px;
377+
font-weight: 300;
378+
text-transform: initial;
379+
}
380+
381+
.team__icon{
382+
position: absolute;
383+
bottom: 50px;
384+
display: flex;
385+
}
386+
387+
.team__icon > li{
388+
list-style: none;
389+
margin: 0 10px;
390+
transform: translateY(40px);
391+
transition: 0.5s;
392+
opacity: 0;
393+
transition-delay: calc(0.1s * var(--i));
394+
}
395+
396+
.team__card:hover .team__icon li{
397+
transform: translateY(0px);
398+
opacity: 1;
399+
400+
}
401+
402+
.team__icon li a{
403+
color: #11122b;
404+
font-size: 28px;
405+
}
406+
407+
.team__icon li a:hover{
408+
color: var(--first-color-darken);
409+
}
305410
/* ===== JOIN US====== */
306411
.join__container{
307412
display: flex;
@@ -336,8 +441,9 @@ li{
336441
.course__preview {
337442
background-color:var(--first-color);
338443
color: var(--white-color);
339-
padding: 100px;
444+
padding: 45px;
340445
max-width: 350px;
446+
font-size: 20px;
341447
}
342448

343449
.course__preview a {

‎assets/img/darran-shen-DWXeLvfCnHM-unsplash.jpg‎

892 KB
Loading

‎assets/img/sheikh-asif-bH52nI9lvQc-unsplash.jpg‎

1.5 MB
Loading

‎assets/img/tamara-schipchinskaya-wGwdl6HvuO0-unsplash.jpg‎

969 KB
Loading

‎index.html‎

Lines changed: 184 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<header class="l-header">
1919
<nav class="nav bd-grid">
2020
<div>
21-
<a href="#" class="nav__logo">Surpath Community</a>
21+
<a href="#" class="nav__logo">SurPath Community</a>
2222
</div>
2323

2424
<div class="nav__toggle" id="nav-toggle">
@@ -49,9 +49,9 @@
4949
</div>
5050

5151
<div class="home__data">
52-
<h1 class="home__title">Surpath<br> Community</h1>
52+
<h1 class="home__title">SurPath<br> Community</h1>
5353
<p class="home__description">Let's help discover the best more <br> open source projects.</p>
54-
<a href="#" class="button">Get Started</a>
54+
<a href="" class="home__button">Get Started</a>
5555
</div>
5656
</div>
5757
</section>
@@ -83,6 +83,185 @@ <h2 class="about__subtitle">SurPath Community</h2>
8383
</div>
8484
</section>
8585

86+
<!-- ====== TEAM =======-->
87+
<section class="team section bd-grid">
88+
<h2 class="section-title">Our Team</h2>
89+
<div class="team__container">
90+
<div class="team__card">
91+
<div class="team__content">
92+
<div class="team__img"><img src="./assets/img/darran-shen-DWXeLvfCnHM-unsplash.jpg" alt=""></div>
93+
<div class="team__text">
94+
<h3>someones name</h3><br><span>Moderator</span>
95+
</div>
96+
</div>
97+
98+
<ul class="team__icon">
99+
<li style="--i:1">
100+
<a href=""><i class='bx bxl-github'></i></a>
101+
</li>
102+
103+
<li style="--i:2">
104+
<a href=""><i class='bx bxl-linkedin-square' ></i></a>
105+
</li>
106+
107+
<li style="--i:3">
108+
<a href=""><i class='bx bxl-twitter' ></i></a>
109+
</li>
110+
111+
<li style="--i:4">
112+
<a href=""><i class='bx bxl-instagram' ></i></a>
113+
</li>
114+
</ul>
115+
116+
</div>
117+
118+
<div class="team__card">
119+
<div class="team__content">
120+
<div class="team__img"><img src="./assets/img/tamara-schipchinskaya-wGwdl6HvuO0-unsplash.jpg" alt=""></div>
121+
<div class="team__text">
122+
<h3>someones name</h3><br><span>Moderator</span>
123+
</div>
124+
</div>
125+
126+
<ul class="team__icon">
127+
<li style="--i:1">
128+
<a href=""><i class='bx bxl-github'></i></a>
129+
</li>
130+
131+
<li style="--i:2">
132+
<a href=""><i class='bx bxl-linkedin-square' ></i></a>
133+
</li>
134+
135+
<li style="--i:3">
136+
<a href=""><i class='bx bxl-twitter' ></i></a>
137+
</li>
138+
139+
<li style="--i:4">
140+
<a href=""><i class='bx bxl-instagram' ></i></a>
141+
</li>
142+
</ul>
143+
144+
</div>
145+
146+
<div class="team__card">
147+
<div class="team__content">
148+
<div class="team__img"><img src="./assets/img/sheikh-asif-bH52nI9lvQc-unsplash.jpg" alt=""></div>
149+
<div class="team__text">
150+
<h3>someones name</h3><br><span>Moderator</span>
151+
</div>
152+
</div>
153+
154+
<ul class="team__icon">
155+
<li style="--i:1">
156+
<a href=""><i class='bx bxl-github'></i></a>
157+
</li>
158+
159+
<li style="--i:2">
160+
<a href=""><i class='bx bxl-linkedin-square' ></i></a>
161+
</li>
162+
163+
<li style="--i:3">
164+
<a href=""><i class='bx bxl-twitter' ></i></a>
165+
</li>
166+
167+
<li style="--i:4">
168+
<a href=""><i class='bx bxl-instagram' ></i></a>
169+
</li>
170+
</ul>
171+
172+
</div>
173+
174+
<div class="team__card">
175+
<div class="team__content">
176+
<div class="team__img"><img src="./assets/img/sheikh-asif-bH52nI9lvQc-unsplash.jpg" alt=""></div>
177+
<div class="team__text">
178+
<h3>someones name</h3><br><span>Moderator</span>
179+
</div>
180+
</div>
181+
182+
<ul class="team__icon">
183+
<li style="--i:1">
184+
<a href=""><i class='bx bxl-github'></i></a>
185+
</li>
186+
187+
<li style="--i:2">
188+
<a href=""><i class='bx bxl-linkedin-square' ></i></a>
189+
</li>
190+
191+
<li style="--i:3">
192+
<a href=""><i class='bx bxl-twitter' ></i></a>
193+
</li>
194+
195+
<li style="--i:4">
196+
<a href=""><i class='bx bxl-instagram' ></i></a>
197+
</li>
198+
</ul>
199+
200+
</div>
201+
202+
<div class="team__card">
203+
<div class="team__content">
204+
<div class="team__img"><img src="./assets/img/tamara-schipchinskaya-wGwdl6HvuO0-unsplash.jpg" alt=""></div>
205+
<div class="team__text">
206+
<h3>someones name</h3><br><span>Moderator</span>
207+
</div>
208+
</div>
209+
210+
<ul class="team__icon">
211+
<li style="--i:1">
212+
<a href=""><i class='bx bxl-github'></i></a>
213+
</li>
214+
215+
<li style="--i:2">
216+
<a href=""><i class='bx bxl-linkedin-square' ></i></a>
217+
</li>
218+
219+
<li style="--i:3">
220+
<a href=""><i class='bx bxl-twitter' ></i></a>
221+
</li>
222+
223+
<li style="--i:4">
224+
<a href=""><i class='bx bxl-instagram' ></i></a>
225+
</li>
226+
</ul>
227+
228+
</div>
229+
230+
<div class="team__card">
231+
<div class="team__content">
232+
<div class="team__img"><img src="./assets/img/darran-shen-DWXeLvfCnHM-unsplash.jpg" alt=""></div>
233+
<div class="team__text">
234+
<h3>someones name</h3><br><span>Moderator</span>
235+
</div>
236+
</div>
237+
238+
<ul class="team__icon">
239+
<li style="--i:1">
240+
<a href=""><i class='bx bxl-github'></i></a>
241+
</li>
242+
243+
<li style="--i:2">
244+
<a href=""><i class='bx bxl-linkedin-square' ></i></a>
245+
</li>
246+
247+
<li style="--i:3">
248+
<a href=""><i class='bx bxl-twitter' ></i></a>
249+
</li>
250+
251+
<li style="--i:4">
252+
<a href=""><i class='bx bxl-instagram' ></i></a>
253+
</li>
254+
</ul>
255+
256+
</div>
257+
258+
259+
260+
261+
262+
</div>
263+
</section>
264+
86265

87266

88267
<!--===== JOIN US =====-->
@@ -93,8 +272,8 @@ <h2 class="section-title">Join Us</h2>
93272
<div class="join__content">
94273
<div class="course__preview">
95274

96-
<h2>Join Our Communityon Discorf </h2>
97-
<a href="https://discord.com/invite/RATJsSGM9d" class="button">Join Us</a>
275+
<h2>Join our GitHub Organization and Community server </h2>
276+
<!-- <a href="https://discord.com/invite/RATJsSGM9d" class="button">Discord</a> -->
98277
</div>
99278
<div class="course__info">
100279
<ul>

0 commit comments

Comments
 (0)