Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

Commit 16f0633

Browse files
HadikaMalikHadikaMalik
committed
added cakes-co css into main
1 parent 3ee85be commit 16f0633

1 file changed

Lines changed: 343 additions & 0 deletions

File tree

‎Cakes-Co/style.css‎

Lines changed: 343 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,344 @@
11
/* Add your styling here */
2+
3+
/* Font family
4+
font-family: 'Cookie', cursive;
5+
font-family: 'Crimson Text', serif;
6+
*/
7+
8+
:root{
9+
--lightpink: #e3c2cd;
10+
--pink: #c85ea8;
11+
--blue: #72acd4;
12+
--darkblue: #442a7d;
13+
--lightgrey: #dcd9d4;
14+
--darkgrey:#bcbec3;
15+
}
16+
17+
body{
18+
background-color: var(--lightpink);
19+
margin: 2px 8px;
20+
}
21+
22+
h1{
23+
font-family: 'Cookie', cursive;
24+
font-size: 80px;
25+
font-weight: lighter;
26+
color: var(--darkblue);
27+
text-shadow: 2px 2px 0px var(--pink), 0 0 10px var(--blue);
28+
}
29+
30+
p{
31+
font-family: 'Crimson Text', serif;
32+
font-size: 25px;
33+
letter-spacing: 1px;
34+
}
35+
36+
header{
37+
background-color: var(--lightgrey);
38+
}
39+
40+
.logo{
41+
display: flex;
42+
text-wrap: nowrap;
43+
}
44+
45+
.header-logo{
46+
height: 8rem;
47+
border: none;
48+
margin: 40px 0px 0px 0px;
49+
}
50+
51+
.title{
52+
margin-left: 2px;
53+
}
54+
55+
.slogan{
56+
text-align: right;
57+
text-wrap: wrap;
58+
padding: 5px 10px;
59+
font-weight: bold;
60+
color: var(--darkblue);
61+
margin-top: 230px;
62+
}
63+
64+
.hamburger{
65+
margin: 20px;
66+
float:right;
67+
cursor: pointer;
68+
}
69+
70+
.hamburger span{
71+
height: 5px;
72+
width: 40px;
73+
background: black;
74+
display: block;
75+
margin-bottom: 7px;
76+
position: relative;
77+
transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, opacity 0.3s ease-in-out;
78+
}
79+
80+
.trigger{
81+
display: none;
82+
}
83+
84+
.trigger:checked ~ nav{
85+
right: 0;
86+
}
87+
88+
.trigger:checked ~ .hamburger span:first-child{
89+
transform: rotate(45deg);
90+
top: 12px;
91+
}
92+
93+
.trigger:checked ~ .hamburger span:last-child{
94+
transform: rotate(-45deg);
95+
top: -12px;
96+
}
97+
98+
.trigger:checked ~ .hamburger span:nth-child(2){
99+
opacity: 0;
100+
}
101+
102+
nav{
103+
display: flex;
104+
justify-content: right;
105+
align-items: center;
106+
text-align: center;
107+
position: absolute;
108+
left: -200vw;
109+
}
110+
111+
.navigation-list{
112+
display: flex;
113+
flex-direction: column;
114+
margin-top: -70px;
115+
}
116+
117+
.navigation-item{
118+
padding: 5px;
119+
list-style: none;
120+
text-transform: uppercase;
121+
background-color: var(--blue);
122+
margin: 5px 10px;
123+
}
124+
125+
.navigation-link{
126+
text-decoration: none;
127+
font-family: 'Crimson Text', serif;
128+
font-size: 30px;
129+
font-weight: bold;
130+
text-shadow: 0px 0px 10px var(--pink);
131+
color: var(--darkblue);
132+
border-radius: 5px;
133+
background-color: var(--blue);
134+
}
135+
136+
.navigation-link:hover{
137+
font-size: 50px;
138+
text-shadow: 0px 0px 10px var(--pink);
139+
color: var(--darkblue);
140+
}
141+
142+
.footer{
143+
margin-top: 40px;
144+
background-color: var(--lightgrey);
145+
}
146+
147+
.footer p {
148+
font-size: 20px;
149+
text-wrap: nowrap;
150+
}
151+
152+
.Join{
153+
font-weight: 400;
154+
display: flex;
155+
justify-content: center;
156+
}
157+
158+
.copyright{
159+
color: var(--darkgrey);
160+
display: flex;
161+
justify-content: center;
162+
}
163+
164+
.footer-img{
165+
display: flex;
166+
padding: 10px;
167+
width: 20px;
168+
height: 20px;
169+
border: solid 1px black;
170+
border-radius: 50%;
171+
margin: 5px;
172+
}
173+
174+
.footer-content{
175+
padding: 20px;
176+
}
177+
178+
.icon{
179+
display: flex;
180+
align-items: center;
181+
}
182+
183+
.icon-text{
184+
padding-left: 20px;
185+
text-shadow: 0 0 10px var(--blue);
186+
}
187+
188+
.heading{
189+
margin: 0;
190+
}
191+
192+
.hero{
193+
display: grid;
194+
grid-template-columns: repeat(auto-fit, 1fr);
195+
grid-template-rows: auto;
196+
justify-content: center;
197+
align-items: center;
198+
grid-template-areas:
199+
"ht ht"
200+
"at at";
201+
}
202+
203+
.hero-text{
204+
grid-area: ht;
205+
text-align: justify;
206+
margin: 0px 20px;
207+
}
208+
209+
.article{
210+
grid-area: at;
211+
display: flex;
212+
justify-content: center;
213+
align-items: center;
214+
}
215+
216+
.article-img{
217+
width: 80%;
218+
max-width: 400px;
219+
}
220+
221+
.sample-img{
222+
display: grid;
223+
justify-content: center;
224+
align-items: center;
225+
gap: 20px;
226+
margin: 20px 40px;
227+
grid-template-columns: minmax(140px);
228+
grid-template-rows: auto;
229+
grid-template-areas:
230+
"ck1 ck2"
231+
"ck3 ck4";
232+
}
233+
234+
.diff-cakes1{
235+
grid-area: ck1;
236+
}
237+
238+
.diff-cakes2{
239+
grid-area: ck2;
240+
}
241+
242+
.diff-cakes3{
243+
grid-area: ck3;
244+
}
245+
246+
.diff-cakes4{
247+
grid-area: ck4;
248+
}
249+
250+
.diff-cakes1, .diff-cakes2, .diff-cakes3, .diff-cakes4{
251+
width: 100%;
252+
height: max-content;
253+
}
254+
255+
.article-img:hover, .diff-cakes1:hover, .diff-cakes2:hover, .diff-cakes3:hover, .diff-cakes4:hover{
256+
opacity: 0.6;
257+
}
258+
259+
@media (min-width: 540px){
260+
261+
.navigation-list{
262+
display: flex;
263+
flex-direction: row;
264+
margin-top: 80px;
265+
}
266+
267+
.hamburger{
268+
display: none;
269+
}
270+
271+
.slogan{
272+
margin-top: 0;
273+
font-size: 30px;
274+
}
275+
276+
.heading{
277+
margin: 120px 0 0 0;
278+
}
279+
280+
.sample-img{
281+
display: grid;
282+
justify-content: center;
283+
align-items: center;
284+
gap: 20px;
285+
margin: 20px 40px;
286+
grid-template-columns: auto;
287+
grid-template-rows: auto;
288+
grid-template-areas:
289+
"ck1 ck2 ck3"
290+
"ck4 0 0 ";
291+
}
292+
}
293+
294+
@media (min-width: 900px) {
295+
296+
.navigation-list{
297+
display: flex;
298+
flex-direction: row;
299+
margin-top: 80px;
300+
}
301+
302+
.hamburger{
303+
display: none;
304+
}
305+
306+
.slogan{
307+
font-size: 35px;
308+
}
309+
310+
.heading{
311+
margin: 120px 0 0 0;
312+
}
313+
314+
.hero{
315+
margin-left: 40px;
316+
margin-right: 40px;
317+
display: grid;
318+
grid-template-columns: repeat(auto-fit, 1fr);
319+
grid-template-rows: auto;
320+
justify-content: center;
321+
align-items: center;
322+
column-gap: 50px;
323+
grid-template-areas:
324+
"0 ht"
325+
"at ht"
326+
"at ht";
327+
}
328+
329+
.article-img{
330+
width: 100%;
331+
}
332+
333+
.sample-img{
334+
display: grid;
335+
justify-content: center;
336+
align-items: center;
337+
gap: 20px;
338+
margin: 20px 40px;
339+
grid-template-columns: auto;
340+
grid-template-rows: auto;
341+
grid-template-areas:
342+
"ck1 ck2 ck3 ck4";
343+
}
344+
}

0 commit comments

Comments
 (0)