Skip to content

Commit 28cc17d

Browse files
NelshullaNelshulla
committed
feat: added style.css to CodeDifferently webpage
1 parent 2a30e9c commit 28cc17d

File tree

1 file changed

+291
-0
lines changed

1 file changed

+291
-0
lines changed

‎lesson_20/template/style.css

+291
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
html {
8+
font-size: 62.5%;
9+
}
10+
11+
body {
12+
font-size: 1.6rem;
13+
background-color: #f5f5f5;
14+
-webkit-font-smoothing: antialiased;
15+
}
16+
17+
.header {
18+
display: flex;
19+
position: sticky;
20+
top: 0;
21+
justify-content: space-between;
22+
align-items: center;
23+
padding: 3rem;
24+
background-color: white;
25+
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
26+
max-height: 13rem;
27+
z-index: 1000;
28+
}
29+
30+
.header-logo img {
31+
height: 7.5rem;
32+
}
33+
34+
.header-top-menu {
35+
display: flex;
36+
list-style: none;
37+
gap: 2rem;
38+
flex-direction: row;
39+
padding-left: 5rem;
40+
}
41+
42+
.header-top-menu a {
43+
text-decoration: none;
44+
color: black;
45+
font-family: Poppins;
46+
font-weight: bold;
47+
letter-spacing: 0.1rem;
48+
}
49+
50+
.header-top-menu a::after {
51+
content: "";
52+
position: relative;
53+
display: block;
54+
width: 0%;
55+
height: 2px;
56+
bottom: 0;
57+
left: 0;
58+
background-color: #f47d26;
59+
transform: scaleX(0);
60+
transition: transform 0.3s ease;
61+
transform-origin: top left;
62+
}
63+
64+
.header-top-menu a:hover::after {
65+
transform: scaleX(1);
66+
width: 100%;
67+
}
68+
69+
.header-cta {
70+
margin-left: auto;
71+
}
72+
73+
.sign-up-button {
74+
background-color: #f47d26;
75+
color: white;
76+
padding: 1rem 2rem;
77+
border-radius: 0.5rem;
78+
font-family: Poppins;
79+
font-weight: bold;
80+
letter-spacing: 0.1rem;
81+
text-decoration: none;
82+
}
83+
84+
.hero-section {
85+
position: relative;
86+
background-image: url("hero.jpg");
87+
background-size: cover;
88+
background-position: center top 90px;
89+
height: 71.5rem;
90+
display: flex;
91+
align-items: center;
92+
justify-content: center;
93+
overflow: hidden;
94+
background-attachment: fixed;
95+
}
96+
97+
.hero-overlay {
98+
position: absolute;
99+
width: 100%;
100+
height: 100%;
101+
background-color: rgba(0, 0, 0, 0.25);
102+
z-index: 1;
103+
}
104+
105+
.hero-content {
106+
position: relative;
107+
color: white;
108+
z-index: 3;
109+
font-family: Poppins;
110+
line-height: 1.2;
111+
padding-bottom: 6rem;
112+
}
113+
114+
.hero-title {
115+
font-size: 5.4rem;
116+
z-index: 3;
117+
font-family: Montserrat;
118+
padding-left: 20rem;
119+
letter-spacing: 0;
120+
}
121+
122+
.highlight {
123+
font-style: normal;
124+
position: relative;
125+
display: inline-block;
126+
}
127+
128+
.hero-title .highlight::after {
129+
content: " ";
130+
position: absolute;
131+
display: flex;
132+
width: 50%;
133+
height: 1.5rem;
134+
background-color: #f47d26;
135+
padding-left: 23.5rem;
136+
bottom: 0.5rem;
137+
z-index: -1;
138+
}
139+
140+
.hero-text {
141+
font-size: 2rem;
142+
margin-top: 2rem;
143+
z-index: 3;
144+
background: rgb(36, 62, 144);
145+
padding: 3rem 5rem 3rem 20rem;
146+
max-width: 90%;
147+
height: 12.5rem;
148+
}
149+
150+
.hero-text span {
151+
color: #f47d26;
152+
}
153+
154+
.programs-section {
155+
display: flex;
156+
flex-wrap: wrap;
157+
align-items: center;
158+
padding-bottom: 6rem;
159+
margin: 0 20rem;
160+
}
161+
162+
.programs-section h2 {
163+
font-family: Montserrat;
164+
font-size: 3.4rem;
165+
font-weight: bolder;
166+
padding-bottom: 8rem;
167+
padding-top: 20rem;
168+
}
169+
170+
.programs-section em::after {
171+
content: " ";
172+
position: absolute;
173+
display: flex;
174+
width: 50%;
175+
height: 1rem;
176+
background-color: #f47d26;
177+
padding-left: 8.9rem;
178+
bottom: 0.3rem;
179+
z-index: -1;
180+
}
181+
182+
.programs {
183+
display: flex;
184+
flex-wrap: wrap;
185+
justify-content: space-between;
186+
list-style: none;
187+
}
188+
189+
.program {
190+
width: 48%;
191+
margin-bottom: 2rem;
192+
}
193+
194+
.program h3 {
195+
font-family: Montserrat;
196+
font-size: 2.2rem;
197+
font-weight: bolder;
198+
}
199+
200+
.program p {
201+
font-family: Poppins;
202+
font-size: 1.8rem;
203+
padding-top: 3rem;
204+
}
205+
206+
.footer {
207+
height: 15rem;
208+
font-family: Poppins;
209+
font-size: 1.4rem;
210+
display: flex;
211+
justify-content: center;
212+
align-items: center;
213+
box-shadow: inset 0 20px 20px rgba(0, 0, 0, 0.1);
214+
}
215+
216+
@media (min-width: 1440px) {
217+
.hero-content {
218+
/* Blue-box */
219+
margin-right: 50rem;
220+
}
221+
222+
.hero-text {
223+
padding: 3rem 5em 3rem 5rem;
224+
}
225+
}
226+
227+
@media (max-width: 1080px) {
228+
.hero-content {
229+
margin-right: 0;
230+
}
231+
232+
.hero-title {
233+
padding-left: 0;
234+
text-align: center;
235+
margin: 0 auto;
236+
font-size: 3.78rem;
237+
width: 80%;
238+
}
239+
240+
.hero-section {
241+
background-size: contain;
242+
height: 45rem;
243+
}
244+
245+
.hero-title .highlight::after {
246+
padding-left: 16.3rem;
247+
height: 1rem;
248+
}
249+
250+
.hero-text {
251+
max-width: 100%;
252+
text-align: left;
253+
padding: 2rem 4rem 2rem 0rem;
254+
}
255+
256+
.programs-section h2 {
257+
font-size: 2.7rem;
258+
padding: 4rem 0rem 2rem 0rem;
259+
}
260+
261+
.programs-section {
262+
margin: 0 8rem;
263+
}
264+
265+
.programs {
266+
flex-direction: column;
267+
}
268+
269+
.program h3 {
270+
font-size: 1.76rem;
271+
font-weight: 400;
272+
}
273+
274+
.program {
275+
width: 100%;
276+
}
277+
278+
.programs-section em::after {
279+
padding-left: 6.9rem;
280+
}
281+
}
282+
283+
@media (max-width: 675px) {
284+
.header-top-menu {
285+
display: none;
286+
}
287+
}
288+
289+
@media (max-width: 480px) {
290+
291+
}

0 commit comments

Comments
 (0)