Skip to content

Commit 479de91

Browse files
Bryson69Bryson69
committed
Add Indentation to all files
2 parents 94553b5 + 5978563 commit 479de91

File tree

7 files changed

+731
-452
lines changed

7 files changed

+731
-452
lines changed

‎README.md‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,6 @@ Pull requests are welcome. For major changes, please open an issue first to disc
99

1010
<br/>
1111

12-
### To Do
13-
- [ ] Wireframe
14-
- [ ] Design a website with HTML, CSS, Bootstrap 4, JavaScript
15-
- [ ] Add our logo
16-
- [ ] Introduction about our community
17-
- [ ] List of Surpath repository
18-
- [ ] Founder & Moderator section
19-
20-
Language: HTML, CSS, Bootstrap 4, JavaScript
21-
22-
<br/>
23-
2412
### Find us on
2513
<a href="https://web.facebook.com/surpath/"><img src="https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge&logo=facebook&logoColor=white&line-height=14px" width="12%"></a><br>
2614
<a href="https://www.youtube.com/channel/UCjA75ni_WO_AoyWsLxnnwjA"><img alt="Surpath YouTube" src="https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white" width="12%"></a><br>

‎assets/css/styles.css‎

Lines changed: 371 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,371 @@
1+
/*===== GOOGLE FONTS =====*/
2+
3+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
4+
5+
/*===== VARIABLES CSS =====*/
6+
7+
:root {
8+
--header-height: 3rem;
9+
/*===== Colors =====*/
10+
--first-color: #11122b;
11+
--first-color-dark: #cea135;
12+
--first-color-darken: #c08c14;
13+
--white-color: #FCF8F8;
14+
--dark-color: #2A3B47;
15+
--text-color: #697477;
16+
/*===== Font and typography =====*/
17+
--body-font: 'Poppins', sans-serif;
18+
--big-font-size: 6.25rem;
19+
--h2-font-size: 1.25rem;
20+
--normal-font-size: .938rem;
21+
--small-font-size: .813rem;
22+
/*===== z index =====*/
23+
--z-fixed: 100;
24+
}
25+
26+
@media screen and (min-width: 768px) {
27+
:root {
28+
--big-font-size: 5rem;
29+
--h2-font-size: 2rem;
30+
--normal-font-size: 1rem;
31+
--small-font-size: .875rem;
32+
}
33+
/*===== Margenes =====*/
34+
:root {
35+
--mb-1: .5rem;
36+
--mb-2: 1rem;
37+
--mb-3: 1.5rem;
38+
--mb-4: 2rem;
39+
}
40+
}
41+
42+
43+
/*===== BASE =====*/
44+
45+
*,
46+
::before,
47+
::after {
48+
box-sizing: border-box;
49+
}
50+
51+
html {
52+
scroll-behavior: smooth;
53+
}
54+
55+
body {
56+
margin: var(--header-height) 0 0 0;
57+
padding: 0;
58+
font-family: var(--body-font);
59+
font-size: var(--normal-font-size);
60+
font-weight: 500;
61+
}
62+
63+
h1,
64+
p,
65+
ul {
66+
margin: 0;
67+
}
68+
69+
ul {
70+
padding: 0;
71+
list-style: none;
72+
}
73+
74+
a {
75+
text-decoration: none;
76+
}
77+
78+
img {
79+
max-width: 100%;
80+
height: auto;
81+
}
82+
83+
84+
/*===== LAYOUT =====*/
85+
86+
.bd-grid {
87+
max-width: 1024px;
88+
display: grid;
89+
grid-template-columns: 100%;
90+
column-gap: 2rem;
91+
width: calc(100% - 2rem);
92+
margin-left: 1rem;
93+
margin-right: 1rem;
94+
}
95+
96+
.l-header {
97+
width: 100%;
98+
position: fixed;
99+
top: 0;
100+
left: 0;
101+
z-index: var(--z-fixed);
102+
background-color: var(--first-color);
103+
}
104+
105+
img {
106+
max-width: 100%;
107+
height: auto;
108+
display: block;
109+
}
110+
111+
112+
/*===== CLASS CSS ===== */
113+
114+
.section {
115+
padding: 3rem 0;
116+
}
117+
118+
.section-title {
119+
position: relative;
120+
font-size: var(--h2-font-size);
121+
color: var(--dark-color);
122+
margin: var(--mb-4) 0;
123+
text-align: center;
124+
}
125+
126+
.section-title::after {
127+
position: absolute;
128+
content: "";
129+
width: 80px;
130+
height: .18rem;
131+
left: 0;
132+
right: 0;
133+
margin: auto;
134+
top: 2rem;
135+
margin-top: 25px;
136+
background-color: var(--first-color);
137+
}
138+
139+
140+
/*===== NAV =====*/
141+
142+
.nav {
143+
height: var(--header-height);
144+
display: flex;
145+
justify-content: space-between;
146+
align-items: center;
147+
}
148+
149+
@media screen and (max-width: 768px) {
150+
.nav__menu {
151+
position: fixed;
152+
top: 0;
153+
right: -100%;
154+
width: 70%;
155+
height: 100%;
156+
padding: 3.5rem 1.5rem 0;
157+
background: rgba(255, 255, 255, .3);
158+
backdrop-filter: blur(10px);
159+
transition: .5s;
160+
}
161+
}
162+
163+
.nav__close {
164+
position: absolute;
165+
top: .75rem;
166+
right: 1rem;
167+
font-size: 1.5rem;
168+
cursor: pointer;
169+
}
170+
171+
.nav__item {
172+
margin-bottom: 2rem;
173+
}
174+
175+
.nav__close,
176+
.nav__link,
177+
.nav__logo,
178+
.nav__toggle {
179+
color: var(--white-color);
180+
}
181+
182+
.nav__link:hover {
183+
color: var(--first-color-dark);
184+
}
185+
186+
.nav__toggle {
187+
font-size: 1.5rem;
188+
cursor: pointer;
189+
}
190+
191+
192+
/*=== Show menu ===*/
193+
194+
.show {
195+
right: 0;
196+
}
197+
198+
199+
/*===== HOME =====*/
200+
201+
.home {
202+
background-color: var(--first-color);
203+
overflow: hidden;
204+
}
205+
206+
.home__container {
207+
height: calc(100vh - var(--header-height));
208+
grid-template-rows: repeat(2, max-content);
209+
row-gap: 1.5rem;
210+
}
211+
212+
.home__img {
213+
position: relative;
214+
padding-top: 1.5rem;
215+
justify-self: center;
216+
width: 302px;
217+
height: 233px;
218+
}
219+
220+
.home__img img {
221+
position: absolute;
222+
top: 0;
223+
left: 0;
224+
}
225+
226+
.home__data {
227+
color: var(--white-color);
228+
}
229+
230+
.home__title {
231+
font-size: var(--big-font-size);
232+
line-height: 1.3;
233+
margin-bottom: 1rem;
234+
}
235+
236+
.home__description {
237+
margin-bottom: 2.5rem;
238+
}
239+
240+
.home__button {
241+
display: inline-block;
242+
background-color: var(--first-color-dark);
243+
color: var(--white-color);
244+
padding: 1.125rem 2rem;
245+
border-radius: .5rem;
246+
}
247+
248+
.home__button:hover {
249+
background-color: var(--first-color-darken);
250+
}
251+
252+
253+
/* ===== ABOUT =====*/
254+
255+
.about__container {
256+
justify-items: center;
257+
row-gap: 2rem;
258+
text-align: center;
259+
}
260+
261+
.about__img {
262+
display: flex;
263+
justify-content: center;
264+
padding-top: 1rem;
265+
width: 120px;
266+
height: 120px;
267+
background-color: var(--first-color);
268+
border-radius: 20%;
269+
overflow: hidden;
270+
}
271+
272+
.about__img img {
273+
width: 100px;
274+
}
275+
276+
.about__subtitle {
277+
font-size: var(--h2-font-size);
278+
color: var(--first-color);
279+
margin-bottom: var(--mb-1);
280+
}
281+
282+
.about__text {
283+
margin-bottom: var(--mb-4);
284+
color: var(--first-color);
285+
}
286+
287+
.about__profession {
288+
display: block;
289+
margin-bottom: var(--mb-4);
290+
color: var(--first-color);
291+
}
292+
293+
.about__social-icon {
294+
color: var(--text-color);
295+
font-size: 1.4rem;
296+
margin: 0 var(--mb-1);
297+
}
298+
299+
.about__social-icon:hover {
300+
color: var(--first-color-dark);
301+
}
302+
303+
304+
/* ===== MEDIA QUERIES =====*/
305+
306+
@media screen and (min-width: 768px) {
307+
body {
308+
margin: 0;
309+
}
310+
.nav {
311+
height: calc(var(--header-height) + 1.5rem);
312+
}
313+
.nav__toggle,
314+
.nav__close {
315+
display: none;
316+
}
317+
.nav__list {
318+
display: flex;
319+
}
320+
.nav__item {
321+
margin-left: 3rem;
322+
margin-bottom: 0;
323+
}
324+
.home__container {
325+
height: 100vh;
326+
grid-template-columns: repeat(2, max-content);
327+
grid-template-rows: 1fr;
328+
row-gap: 0;
329+
align-items: center;
330+
justify-content: center;
331+
}
332+
.home__img {
333+
order: 1;
334+
width: 375px;
335+
height: 289px;
336+
}
337+
.home__img img {
338+
width: 375px;
339+
}
340+
.about__container {
341+
grid-template-columns: repeat(2, 1fr);
342+
align-items: center;
343+
text-align: initial;
344+
padding: 4rem 0;
345+
}
346+
.about__img {
347+
width: 340px;
348+
height: 340px
349+
}
350+
.about__img img {
351+
width: 320px;
352+
}
353+
}
354+
355+
@media screen and (min-width: 1024px) {
356+
.bd-grid {
357+
margin-left: auto;
358+
margin-right: auto;
359+
}
360+
.home__container {
361+
justify-content: initial;
362+
column-gap: 4.5rem;
363+
}
364+
.home__img {
365+
width: 604px;
366+
height: 466px;
367+
}
368+
.home__img img {
369+
width: 604px;
370+
}
371+
}

0 commit comments

Comments
 (0)