Skip to content

Commit 5978563

Browse files
Bryson69Bryson69
authored
Merge branch 'main' into main
2 parents bce8663 + 70547cb commit 5978563

File tree

6 files changed

+530
-13
lines changed

6 files changed

+530
-13
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: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
/*===== GOOGLE FONTS =====*/
2+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
3+
/*===== VARIABLES CSS =====*/
4+
:root{
5+
--header-height: 3rem;
6+
7+
/*===== Colors =====*/
8+
--first-color: #11122b;
9+
--first-color-dark: #cea135;
10+
--first-color-darken: #c08c14;
11+
--white-color: #FCF8F8;
12+
13+
/*===== Font and typography =====*/
14+
--body-font: 'Poppins', sans-serif;
15+
--big-font-size: 2.5rem;
16+
--normal-font-size: .938rem;
17+
18+
/*===== z index =====*/
19+
--z-fixed: 100;
20+
}
21+
22+
@media screen and (min-width: 768px){
23+
:root{
24+
--big-font-size: 5rem;
25+
--normal-font-size: 1rem;
26+
}
27+
}
28+
29+
/*===== BASE =====*/
30+
*,::before,::after{
31+
box-sizing: border-box;
32+
}
33+
34+
body{
35+
margin: var(--header-height) 0 0 0;
36+
padding: 0;
37+
font-family: var(--body-font);
38+
font-size: var(--normal-font-size);
39+
font-weight: 500;
40+
}
41+
42+
h1,p,ul{
43+
margin: 0;
44+
}
45+
46+
ul{
47+
padding: 0;
48+
list-style: none;
49+
}
50+
51+
a{
52+
text-decoration: none;
53+
}
54+
55+
img{
56+
max-width: 100%;
57+
height: auto;
58+
}
59+
60+
/*===== LAYOUT =====*/
61+
.bd-grid{
62+
max-width: 1024px;
63+
display: grid;
64+
grid-template-columns: 100%;
65+
column-gap: 2rem;
66+
width: calc(100% - 2rem);
67+
margin-left: 1rem;
68+
margin-right: 1rem;
69+
}
70+
71+
.l-header{
72+
width: 100%;
73+
position: fixed;
74+
top: 0;
75+
left: 0;
76+
z-index: var(--z-fixed);
77+
background-color: var(--first-color);
78+
}
79+
80+
/*===== NAV =====*/
81+
.nav{
82+
height: var(--header-height);
83+
display: flex;
84+
justify-content: space-between;
85+
align-items: center;
86+
}
87+
88+
@media screen and (max-width: 768px){
89+
.nav__menu{
90+
position: fixed;
91+
top: 0;
92+
right: -100%;
93+
width: 70%;
94+
height: 100%;
95+
padding: 3.5rem 1.5rem 0;
96+
background: rgba(255,255,255,.3);
97+
backdrop-filter: blur(10px);
98+
transition: .5s;
99+
}
100+
}
101+
102+
.nav__close{
103+
position: absolute;
104+
top: .75rem;
105+
right: 1rem;
106+
font-size: 1.5rem;
107+
cursor: pointer;
108+
}
109+
110+
.nav__item{
111+
margin-bottom: 2rem;
112+
}
113+
114+
.nav__close, .nav__link, .nav__logo, .nav__toggle{
115+
color: var(--white-color);
116+
}
117+
118+
.nav__link:hover{
119+
color: var(--first-color-dark);
120+
}
121+
122+
.nav__toggle{
123+
font-size: 1.5rem;
124+
cursor: pointer;
125+
}
126+
127+
/*=== Show menu ===*/
128+
.show{
129+
right: 0;
130+
}
131+
132+
/*===== HOME =====*/
133+
.home{
134+
background-color: var(--first-color);
135+
overflow: hidden;
136+
}
137+
138+
.home__container{
139+
height: calc(100vh - var(--header-height));
140+
grid-template-rows: repeat(2, max-content);
141+
row-gap: 1.5rem;
142+
}
143+
144+
.home__img{
145+
position: relative;
146+
padding-top: 1.5rem;
147+
justify-self: center;
148+
width: 302px;
149+
height: 233px;
150+
}
151+
152+
.home__img img{
153+
position: absolute;
154+
top: 0;
155+
left: 0;
156+
}
157+
158+
.home__data{
159+
color: var(--white-color);
160+
}
161+
162+
.home__title{
163+
font-size: var(--big-font-size);
164+
line-height: 1.3;
165+
margin-bottom: 1rem;
166+
}
167+
168+
.home__description{
169+
margin-bottom: 2.5rem;
170+
}
171+
172+
.home__button{
173+
display: inline-block;
174+
background-color: var(--first-color-dark);
175+
color: var(--white-color);
176+
padding: 1.125rem 2rem;
177+
border-radius: .5rem;
178+
}
179+
180+
.home__button:hover{
181+
background-color: var(--first-color-darken);
182+
}
183+
184+
/* ===== MEDIA QUERIES =====*/
185+
@media screen and (min-width: 768px){
186+
body{
187+
margin: 0;
188+
}
189+
190+
.nav{
191+
height: calc(var(--header-height) + 1.5rem);
192+
}
193+
194+
.nav__toggle, .nav__close{
195+
display: none;
196+
}
197+
198+
.nav__list{
199+
display: flex;
200+
}
201+
202+
.nav__item{
203+
margin-left: 3rem;
204+
margin-bottom: 0;
205+
}
206+
207+
.home__container{
208+
height: 100vh;
209+
grid-template-columns: repeat(2, max-content);
210+
grid-template-rows: 1fr;
211+
row-gap: 0;
212+
align-items: center;
213+
justify-content: center;
214+
}
215+
216+
.home__img{
217+
order: 1;
218+
width: 375px;
219+
height: 289px;
220+
}
221+
222+
.home__img img{
223+
width: 375px;
224+
}
225+
}
226+
227+
@media screen and (min-width: 1024px){
228+
.bd-grid{
229+
margin-left: auto;
230+
margin-right: auto;
231+
}
232+
233+
.home__container{
234+
justify-content: initial;
235+
column-gap: 4.5rem;
236+
}
237+
238+
.home__img{
239+
width: 604px;
240+
height: 466px;
241+
}
242+
243+
.home__img img{
244+
width: 604px;
245+
}
246+
}
247+
248+
249+

0 commit comments

Comments
 (0)