Skip to content

Commit 29cf6a5

Browse files
onuratonurat
committed
Update style.css
1 parent ac7b4a5 commit 29cf6a5

File tree

1 file changed

+343
-7
lines changed

1 file changed

+343
-7
lines changed

‎css/style.css‎

Lines changed: 343 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,354 @@
11

2-
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
2+
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
3+
:root {
4+
--grey-dark: #363434;
5+
--grey: #adadad;
6+
--grey-light: #f7f7f7;
7+
--orange: #f05a28;
8+
--orange-light: #f7bfa3;
9+
--white: #fff;
10+
}
11+
12+
*{
13+
box-sizing: border-box;
14+
padding: 0;
15+
margin: 0;
16+
}
317

418
body {
519
font-family: 'Roboto', sans-serif;
620
-webkit-font-smoothing: antialiased;
21+
font-weight: 500;
22+
}
23+
24+
header {
25+
display: flex;
26+
justify-content: space-between;
27+
align-items: center;
28+
padding: 2rem 5rem;
29+
background-color: var(--grey-light);
30+
border-bottom: 1px solid var(--grey);
31+
}
32+
33+
.logo{
34+
display: block;
35+
min-width: 2rem;
36+
min-height: 2rem;
37+
}
38+
39+
/* navigation */
40+
41+
.nav-list {
42+
display: flex;
43+
justify-content: center;
44+
align-items: center;
45+
flex-wrap: wrap;
46+
list-style: none;
47+
position: relative;
48+
49+
}
50+
51+
.nav-items {
52+
display: flex;
53+
padding: 0 1.5rem;
54+
55+
}
56+
57+
.nav-links {
58+
color: var(--grey);
59+
text-decoration: none;
60+
display: inline-block;
61+
text-align: center;
62+
position: relative;
63+
}
64+
65+
.nav-links:hover {
66+
color: var(--orange);
67+
}
68+
69+
.nav-items:first-child > a {
70+
color: var(--grey-dark);
71+
}
72+
73+
.nav-items:first-child > a:hover{
74+
color: var(--orange);
75+
}
76+
/* hamburger menu */
77+
.menu {
78+
display: flex;
79+
}
80+
81+
.open-menu {
82+
position: absolute;
83+
cursor: pointer;
84+
display: none;
85+
}
86+
87+
.open-menu {
88+
top: 50%;
89+
right: 20px;
90+
transform: translateY(-50%);
91+
}
92+
93+
94+
#check {
95+
display: none;
96+
}
97+
98+
99+
/* main */
100+
101+
main {
102+
display: flex;
103+
flex-direction: column;
104+
105+
}
106+
107+
/* First section */
108+
109+
.hero {
110+
background-image: url(/img/first-background.jpg);
111+
background-size: cover;
112+
background-repeat: no-repeat;
113+
background-position: center;
114+
padding: 12rem 0;
115+
color: var(--white);
116+
display: flex;
117+
flex-direction: column;
118+
align-items: center;
119+
justify-content: center;
120+
gap: 2rem;
121+
margin: 0;
122+
}
123+
124+
.hero h1 {
125+
font-weight: 200;
126+
font-size: 35px;
127+
text-align: center;
128+
}
129+
130+
.hero p {
131+
margin-top: -2rem;
132+
margin-bottom: 2rem;
133+
font-weight: 50;
134+
font-size: 20px;
7135
}
8-
.navbar {
136+
137+
.hero a {
138+
background-color: var(--orange);
139+
border: none;
140+
padding: .8rem 1rem;
141+
border-radius: 5px;
142+
text-decoration: none;
143+
color: var(--white);
144+
}
145+
.hero a:hover {
146+
background-color: var(--grey-dark);
147+
}
148+
149+
150+
/* Second section */
151+
section {
9152
display: flex;
10-
justify-content: flex-end;
11-
margin-right: 10px;
153+
flex-direction: column;
154+
align-items: center;
155+
margin-top: 4rem;
156+
margin-bottom: 2rem;
157+
}
158+
159+
section h2 {
160+
font-weight: 200;
161+
font-size: 35px;
12162
}
13163

164+
article {
165+
display: flex;
166+
justify-content: space-around;
167+
flex-wrap: wrap;
168+
169+
170+
}
171+
172+
article p {
173+
font-weight: 200;
174+
font-size: 20px;
175+
176+
}
177+
178+
article img {
179+
width: 120px;
180+
height: 120px;
181+
}
182+
183+
.context {
184+
margin: 3rem;
185+
display: flex;
186+
flex-direction: column;
187+
align-items: center;
188+
gap: 1.5rem;
189+
190+
}
191+
192+
/* third section */
193+
.hero-two {
194+
display: grid;
195+
grid-template-rows: auto;
196+
grid-template-columns: 1.5fr 2fr;
197+
198+
199+
}
200+
201+
.hero-img {
202+
background-color: #363434;
203+
height: 100%;
204+
background-image: url(/level-2/homepage-feature.png);
205+
background-repeat: no-repeat;
206+
background-size: cover;
207+
208+
}
209+
210+
.hero-text {
211+
display: flex;
212+
flex-direction: column;
213+
align-items: center;
214+
gap: 2rem;
215+
padding: 8rem;
216+
background-color: var(--orange-light);
217+
color: var(--grey-dark);
218+
font-weight: 400;
219+
font-size: 24px;
220+
text-align: center;
221+
222+
}
223+
224+
.hero-text p {
225+
font-style: italic;
226+
}
227+
228+
.hero-text p span {
229+
color: var(--orange);
230+
}
231+
232+
.hero-text a {
233+
background-color: var(--orange);
234+
border: none;
235+
padding: .8rem 1rem;
236+
border-radius: 5px;
237+
text-decoration: none;
238+
color: var(--white);
239+
font-size: 12px;
240+
}
241+
.hero-text a:hover {
242+
background-color: var(--grey-dark);
243+
}
244+
245+
246+
/* footer */
247+
footer {
248+
display: flex;
249+
flex-direction: column;
250+
align-items: center;
251+
justify-content: center;
252+
border-top: 1px solid var(--grey);
253+
margin: 0 6rem;
254+
padding: 2rem 0;
255+
gap: 1rem;
256+
}
257+
258+
footer ul {
259+
display: flex;
260+
justify-content: center;
261+
align-items: center;
262+
list-style: none;
263+
}
264+
footer ul li a {
265+
display: block;
266+
border: 1px solid var(--grey);
267+
padding: 1rem;
268+
border-radius: 50%;
269+
margin: 10px;
270+
}
271+
272+
footer ul li a img{
273+
max-width: 1rem;
274+
max-height: 1rem;
275+
}
276+
277+
footer h3 {
278+
font-weight: 400;
279+
}
280+
281+
footer p {
282+
font-weight: 200;
283+
color: var(--grey);
284+
}
285+
286+
/* tablet size */
287+
@media screen and (max-width: 890px) {
288+
.menu {
289+
display: flex;
290+
flex-direction: column;
291+
align-items: center;
292+
justify-content: center;
293+
width: 200px;
294+
height: 70vh;
295+
position: fixed;
296+
background-color: var(--grey-light);
297+
opacity: .9;
298+
top: -800px;
299+
gap: 10px;
300+
z-index: 1;
301+
transition: all 0.3s ease-in-out;
302+
border-radius: 5px;
303+
}
304+
.open-menu {
305+
display: inline-block;
306+
z-index: 4;
307+
transition: all .4s ease;
308+
}
309+
310+
#check:checked ~ .open-menu {
311+
transform: rotate(-90deg);
312+
}
313+
314+
#check:checked ~ .menu {top: 0;}
315+
.hero-two {
316+
display: grid;
317+
grid-template-rows: 1fr 1fr;
318+
grid-template-columns: 1fr;
319+
320+
321+
}
322+
323+
section h2 {
324+
text-align: center;
325+
}
326+
327+
}
328+
329+
/* mobile size */
330+
@media screen and (max-width: 489px) {
331+
332+
333+
334+
.menu {
335+
display: flex;
336+
flex-direction: column;
337+
align-items: center;
338+
justify-content: center;
339+
width: 200px;
340+
height: 70vh;
341+
position: fixed;
342+
background-color: var(--grey-light);
343+
top: -800px;
344+
right: 20px;
345+
gap: 10px;
346+
z-index: 1;
347+
transition: all 0.3s ease-in-out;
348+
}
349+
350+
351+
}
14352

15353
/**
16354
* Add your custom styles below
@@ -20,6 +358,4 @@ body {
20358
* for example: General styles, Navigation styles, Hero styles, Footer etc.
21359
*
22360
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
23-
*/
24-
25-
361+
*/

0 commit comments

Comments
 (0)