Skip to content

Commit ddc75c9

Browse files
Mr-Mysterious001Mr-Mysterious001
authored
Added straw hat CSS design (#932)
1 parent 2581ba5 commit ddc75c9

File tree

2 files changed

+151
-0
lines changed

2 files changed

+151
-0
lines changed

‎Luffy Straw Hat/index.html‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Luffy's Straw Hat</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
min-height: 100vh;
15+
background: linear-gradient(135deg, #89CFF0 0%, #4A90E2 100%);
16+
}
17+
18+
.hat-container {
19+
position: relative;
20+
width: 400px;
21+
height: 300px;
22+
}
23+
24+
.hat-crown {
25+
position: absolute;
26+
top: 50px;
27+
left: 50%;
28+
transform: translateX(-50%);
29+
width: 180px;
30+
height: 120px;
31+
background: linear-gradient(to bottom, #f4d03f 0%, #c7a02d 100%);
32+
border-radius: 90px 90px 20px 20px;
33+
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
34+
}
35+
36+
.hat-crown::before {
37+
content: '';
38+
position: absolute;
39+
top: 10px;
40+
left: 10px;
41+
right: 10px;
42+
height: 15px;
43+
background: linear-gradient(90deg, transparent 0%, transparent 48%, #d4af37 48%, #d4af37 52%, transparent 52%, transparent 100%);
44+
}
45+
46+
.weave {
47+
position: absolute;
48+
width: 100%;
49+
height: 100%;
50+
background-image:
51+
repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(199, 160, 45, 0.3) 8px, rgba(199, 160, 45, 0.3) 10px),
52+
repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(199, 160, 45, 0.3) 8px, rgba(199, 160, 45, 0.3) 10px);
53+
border-radius: 90px 90px 20px 20px;
54+
}
55+
56+
.hat-brim {
57+
position: absolute;
58+
top: 150px;
59+
left: 50%;
60+
transform: translateX(-50%);
61+
width: 350px;
62+
height: 80px;
63+
background: linear-gradient(to bottom, #f4d03f 0%, #e6c84a 50%, #c7a02d 100%);
64+
border-radius: 50%;
65+
box-shadow: 0 6px 15px rgba(0,0,0,0.4);
66+
}
67+
68+
.brim-weave {
69+
position: absolute;
70+
width: 100%;
71+
height: 100%;
72+
background-image:
73+
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(199, 160, 45, 0.3) 10px, rgba(199, 160, 45, 0.3) 12px),
74+
repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(199, 160, 45, 0.2) 12px, rgba(199, 160, 45, 0.2) 14px);
75+
border-radius: 50%;
76+
}
77+
78+
.hat-brim::after {
79+
content: '';
80+
position: absolute;
81+
bottom: -5px;
82+
left: 10%;
83+
right: 10%;
84+
height: 8px;
85+
background: #a0822a;
86+
border-radius: 50%;
87+
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
88+
}
89+
90+
.ribbon {
91+
position: absolute;
92+
top: 160px;
93+
left: 50%;
94+
transform: translateX(-50%);
95+
width: 200px;
96+
height: 20px;
97+
background: linear-gradient(to right, #c41e3a 0%, #8b0000 50%, #c41e3a 100%);
98+
border-radius: 3px;
99+
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
100+
z-index: 10;
101+
}
102+
103+
.ribbon::before,
104+
.ribbon::after {
105+
content: '';
106+
position: absolute;
107+
top: 50%;
108+
transform: translateY(-50%);
109+
width: 0;
110+
height: 0;
111+
border-style: solid;
112+
}
113+
114+
.ribbon::before {
115+
left: -15px;
116+
border-width: 10px 15px 10px 0;
117+
border-color: transparent #8b0000 transparent transparent;
118+
}
119+
120+
.ribbon::after {
121+
right: -15px;
122+
border-width: 10px 0 10px 15px;
123+
border-color: transparent transparent transparent #8b0000;
124+
}
125+
126+
.ribbon-shine {
127+
position: absolute;
128+
top: 3px;
129+
left: 20%;
130+
right: 20%;
131+
height: 6px;
132+
background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
133+
border-radius: 3px;
134+
}
135+
</style>
136+
</head>
137+
<body>
138+
<div class="hat-container">
139+
<div class="hat-brim">
140+
<div class="brim-weave"></div>
141+
</div>
142+
<div class="ribbon">
143+
<div class="ribbon-shine"></div>
144+
</div>
145+
<div class="hat-crown">
146+
<div class="weave"></div>
147+
</div>
148+
</div>
149+
</body>
150+
</html>

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,7 @@ <h1>You Dont Need JavaScript</h1>
303303
<a href="./Growing-flower/growing.html">Growing Flower</a>
304304
<a href="./SolarSystem/index.html">Solar System</a>
305305
<a href="./Parallax_Effect/index.html">Parallax Portfolio</a>
306+
<a href="./Luffy Straw Hat/index.html">Luffy Straw Hat</a>
306307
</td>
307308
</tr>
308309

0 commit comments

Comments
 (0)