Skip to content

Commit aec5dfd

Browse files
huffyyyhuffyyy
authored
membuat style.css
1 parent 0c0d2c4 commit aec5dfd

File tree

1 file changed

+282
-0
lines changed

1 file changed

+282
-0
lines changed

‎CSS-Grid/8-Landing-Page/style.css

+282
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
img {
7+
width: 100%;
8+
}
9+
10+
body {
11+
background-color: #fbfbfb;
12+
font-size: 18px;
13+
font-family: 'Inter', Arial, Helvetica, sans-serif;
14+
margin: 50px;
15+
}
16+
/* Container */
17+
18+
.container {
19+
display: grid;
20+
gap: 10px;
21+
}
22+
23+
24+
/* Header */
25+
.header {
26+
display: grid;
27+
grid-template-areas:
28+
'hero hero feature-1'
29+
'hero hero feature-2';
30+
31+
}
32+
33+
.hero {
34+
grid-area: hero;
35+
min-height: 300px;
36+
background-image: url(img/hero.png);
37+
background-size: cover;
38+
background-position: center;
39+
padding: 50px;
40+
border-radius: 12px 0 0 12px;
41+
}
42+
43+
.hero .sub-heading {
44+
font-size: 30px;
45+
color: white;
46+
}
47+
48+
.hero .heading {
49+
display: none;
50+
color: black;
51+
}
52+
53+
.features {
54+
background-color: black;
55+
display: grid;
56+
text-align: center;
57+
cursor: pointer;
58+
padding: 10px;
59+
place-content: center;
60+
color: rgb(255, 255, 255);
61+
/* justify-content: start;
62+
align-content: center; */
63+
}
64+
65+
.feature-1 {
66+
border-radius: 0 12px 0 0;
67+
grid-area: feature-1;
68+
background-image: url(img/image1.png);
69+
background-size: cover;
70+
}
71+
72+
.feature-2 {
73+
border-radius: 0 0 12px 0;
74+
grid-area: feature-2;
75+
background-image: url(img/image2.png);
76+
background-size: cover;
77+
}
78+
79+
/* Navigations */
80+
81+
.menu {
82+
order: -1;
83+
display: grid;
84+
grid-template-columns: 1fr 2fr;
85+
align-items: center;
86+
}
87+
88+
.menu .brand {
89+
font-size: 1.8em;
90+
color: #000000;
91+
font-weight: bold;
92+
box-shadow: -1px 0px 156px -41px rgba(0,0,0,0.41);
93+
94+
}
95+
96+
.menu ul {
97+
list-style: none;
98+
display: grid;
99+
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
100+
gap: 20px;
101+
}
102+
103+
.menu a {
104+
border-radius: 6px;
105+
box-shadow: -1px 0px 156px -41px rgba(0,0,0,0.41);
106+
display: block;
107+
background-color: #333;
108+
color: white;
109+
text-align: center;
110+
padding: 5px;
111+
}
112+
113+
/* Hamburger Menu */
114+
.menu-toggle {
115+
display: none;
116+
flex-direction: column;
117+
height: 20px;
118+
justify-content: space-between;
119+
position: relative;
120+
z-index: 9;
121+
}
122+
123+
.menu-toggle input {
124+
position: absolute;
125+
width: 40px;
126+
height: 28px;
127+
left: -5px;
128+
top: -3px;
129+
opacity: 0;
130+
cursor: pointer;
131+
z-index: 2;
132+
}
133+
134+
.menu-toggle span {
135+
display: block;
136+
width: 28px;
137+
height: 3px;
138+
background-color: #000000;
139+
border-radius: 3px;
140+
transition: all 0.5s;
141+
}
142+
143+
/* hamburger Menu Animation */
144+
.menu-toggle span:nth-child(2) {
145+
transform-origin: 0 0;
146+
}
147+
148+
.menu-toggle span:nth-child(4) {
149+
transform-origin: 0 100%;
150+
}
151+
152+
.menu-toggle input:checked~span:nth-child(2) {
153+
background-color: white;
154+
transform: rotate(45deg); translate: (-1px, -1px);
155+
}
156+
.menu-toggle input:checked~span:nth-child(4) {
157+
background-color: white;
158+
transform: rotate(-45deg); translate: (-1px, 0);
159+
}
160+
161+
.menu-toggle input:checked~span:nth-child(3) {
162+
opacity: 0;
163+
transform: scale(0);
164+
}
165+
166+
/* Services */
167+
168+
.services {
169+
display: grid;
170+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
171+
gap: 20px;
172+
}
173+
174+
.service {
175+
padding: 15px;
176+
text-align: center;
177+
background-color: #ffffff;
178+
border-radius: 8px;
179+
box-shadow: -1px 0px 156px -41px rgba(0,0,0,0.41);
180+
}
181+
182+
.service p {
183+
font-weight: bold;
184+
letter-spacing: 0px;
185+
font-size: 12px;
186+
}
187+
188+
/* Gallery */
189+
.gallery {
190+
display: grid;
191+
grid-template-columns: repeat(auto-fit, minmax(200px, 250px));
192+
gap: 25px;
193+
}
194+
195+
.gallery img {
196+
border-radius: 12px;
197+
box-shadow: -1px 0px 156px -41px rgba(0,0,0,0.41);
198+
}
199+
200+
.gallery h2 {
201+
/* grid-column-start: 1;
202+
grid-column-end: -1; */
203+
grid-column: 1 / -1;
204+
text-align: center;
205+
margin-bottom: 20px;
206+
box-shadow: -1px 0px 156px -41px rgba(0,0,0,0.41);
207+
208+
}
209+
/* Responsive Breakpoint */
210+
@media (max-width: 1024px) {
211+
.menu {
212+
order: inherit;
213+
grid-template-columns: 1fr;
214+
}
215+
.menu .brand {
216+
display: none;
217+
}
218+
219+
.hero .heading {
220+
display: block;
221+
color: rgb(255, 255, 255);
222+
padding: 5px;
223+
}
224+
225+
.hero {
226+
display: flex;
227+
flex-direction: column;
228+
align-items: start;
229+
justify-items: center;
230+
}
231+
}
232+
233+
@media (max-width: 768px) {
234+
.menu {
235+
order: -1;
236+
justify-items: end;
237+
}
238+
.menu-toggle {
239+
display: flex;
240+
}
241+
.menu ul {
242+
display: flex;
243+
position: absolute;
244+
right: 0;
245+
top: 0;
246+
width: 100%;
247+
flex-direction: column;
248+
align-items: center;
249+
height: 100vh;
250+
justify-content: space-evenly;
251+
z-index: 1;
252+
background-color: rgba(0, 0, 0, 0.428);
253+
transform: translateY(-100%);
254+
transition: all 1s;
255+
opacity: 0;
256+
}
257+
258+
nav ul.slide {
259+
opacity: 1;
260+
transform: translateY(0);
261+
}
262+
}
263+
@media (max-width: 600px) {
264+
.header {
265+
grid-template-areas:
266+
'hero'
267+
'feature-1'
268+
'feature-2';
269+
}
270+
271+
.hero {
272+
border-radius: 12px 12px 0 0;
273+
}
274+
275+
.feature-1 {
276+
border-radius: 0;
277+
}
278+
279+
.feature-2 {
280+
border-radius: 0 0 12px 12px;
281+
}
282+
}

0 commit comments

Comments
 (0)