Skip to content

Commit 5653615

Browse files
DivyanshSood5DivyanshSood5
committed
add website3 - INSECT specimen page clone
1 parent a83d141 commit 5653615

3 files changed

Lines changed: 511 additions & 0 deletions

File tree

‎website3/assets/images/insect.png‎

296 KB
Loading

‎website3/assets/index.css‎

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
/* google font for the big italic stuff - playfair looks close to the design */
2+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400;1,600&display=swap');
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
12+
overflow: hidden;
13+
}
14+
15+
/* full page flex - white on left, red on right */
16+
.page {
17+
display: flex;
18+
height: 100vh;
19+
width: 100vw;
20+
position: relative;
21+
}
22+
23+
/* -------- LEFT SIDE -------- */
24+
25+
.left {
26+
width: 50%;
27+
background: #ffffff;
28+
display: flex;
29+
flex-direction: column;
30+
padding-left: 55px;
31+
}
32+
33+
.topbar {
34+
display: flex;
35+
align-items: center;
36+
gap: 28px;
37+
padding: 26px 0;
38+
}
39+
40+
/* dark green, chunky, all caps */
41+
.logo {
42+
font-size: 20px;
43+
font-weight: 900;
44+
color: #1a3d1f;
45+
letter-spacing: 3px;
46+
}
47+
48+
.searchbar {
49+
display: flex;
50+
align-items: center;
51+
gap: 10px;
52+
background: #f0f0f0;
53+
border-radius: 999px;
54+
padding: 9px 20px;
55+
width: 230px;
56+
}
57+
58+
.search-icon {
59+
width: 15px;
60+
height: 15px;
61+
color: #999;
62+
flex-shrink: 0;
63+
}
64+
65+
.searchbar input {
66+
border: none;
67+
background: transparent;
68+
outline: none;
69+
font-size: 14px;
70+
color: #666;
71+
width: 100%;
72+
}
73+
74+
/* flex row: rotated label on the left, list items on the right */
75+
.classification-block {
76+
display: flex;
77+
align-items: center;
78+
flex: 1;
79+
gap: 32px;
80+
padding-bottom: 50px;
81+
}
82+
83+
/* turned sideways - reads bottom to top */
84+
.classification-label {
85+
font-family: 'Playfair Display', serif;
86+
font-style: italic;
87+
font-size: 32px;
88+
color: #1a3d1f;
89+
writing-mode: vertical-rl;
90+
transform: rotate(180deg);
91+
white-space: nowrap;
92+
letter-spacing: 4px;
93+
}
94+
95+
.classification-list {
96+
list-style: none;
97+
display: flex;
98+
flex-direction: column;
99+
}
100+
101+
.classification-list li {
102+
display: flex;
103+
flex-direction: column;
104+
padding: 13px 0 13px 22px;
105+
border-bottom: 1px solid #ebebeb;
106+
position: relative;
107+
}
108+
109+
/* little red dot instead of a normal bullet */
110+
.classification-list li::before {
111+
content: '';
112+
position: absolute;
113+
left: 0;
114+
top: 20px;
115+
width: 8px;
116+
height: 8px;
117+
border-radius: 50%;
118+
background: #c0231a;
119+
}
120+
121+
.classification-list li strong {
122+
font-size: 13px;
123+
font-weight: 700;
124+
color: #c0231a;
125+
margin-bottom: 3px;
126+
}
127+
128+
.classification-list li span {
129+
font-size: 13px;
130+
color: #333;
131+
}
132+
133+
/* -------- BEETLE IN THE MIDDLE -------- */
134+
135+
/* sits exactly over the split line, slightly above center */
136+
.beetle-dome {
137+
position: absolute;
138+
left: 50%;
139+
top: 50%;
140+
transform: translate(-50%, -48%);
141+
z-index: 10;
142+
width: 360px;
143+
pointer-events: none;
144+
}
145+
146+
.beetle-dome img {
147+
width: 100%;
148+
height: auto;
149+
display: block;
150+
}
151+
152+
/* -------- RIGHT SIDE -------- */
153+
154+
.right {
155+
width: 50%;
156+
background: #b01b12;
157+
display: flex;
158+
flex-direction: column;
159+
color: white;
160+
}
161+
162+
nav {
163+
padding: 26px 50px;
164+
display: flex;
165+
justify-content: flex-end;
166+
}
167+
168+
nav ul {
169+
list-style: none;
170+
display: flex;
171+
gap: 38px;
172+
}
173+
174+
nav li {
175+
font-size: 15px;
176+
cursor: pointer;
177+
opacity: 0.85;
178+
transition: opacity 0.15s;
179+
}
180+
181+
nav li:hover {
182+
opacity: 1;
183+
border-bottom: 1px solid rgba(255,255,255,0.6);
184+
}
185+
186+
/* content sits in the lower two-thirds of the right side */
187+
.specimen-info {
188+
flex: 1;
189+
display: flex;
190+
flex-direction: column;
191+
justify-content: center;
192+
padding: 0 55px 40px;
193+
gap: 26px;
194+
}
195+
196+
/* big italic serif - the star of the right side */
197+
h1 {
198+
font-family: 'Playfair Display', serif;
199+
font-style: italic;
200+
font-size: 54px;
201+
font-weight: 600;
202+
line-height: 1.1;
203+
}
204+
205+
/* beetle silhouette + thin divider + 3 stats */
206+
.meta-row {
207+
display: flex;
208+
align-items: center;
209+
gap: 28px;
210+
}
211+
212+
.beetle-icon {
213+
display: flex;
214+
flex-direction: column;
215+
align-items: center;
216+
gap: 8px;
217+
}
218+
219+
.beetle-icon svg {
220+
width: 52px;
221+
height: 70px;
222+
opacity: 0.75;
223+
}
224+
225+
.beetle-icon span {
226+
font-size: 12px;
227+
opacity: 0.7;
228+
}
229+
230+
.meta-divider {
231+
width: 1px;
232+
height: 85px;
233+
background: rgba(255, 255, 255, 0.25);
234+
flex-shrink: 0;
235+
}
236+
237+
.meta-items {
238+
display: flex;
239+
flex-direction: column;
240+
gap: 10px;
241+
}
242+
243+
.meta-item {
244+
display: flex;
245+
align-items: center;
246+
gap: 12px;
247+
font-size: 14px;
248+
}
249+
250+
.stat-icon {
251+
width: 18px;
252+
height: 18px;
253+
opacity: 0.75;
254+
flex-shrink: 0;
255+
}
256+
257+
.meta-label {
258+
font-size: 11px;
259+
opacity: 0.65;
260+
margin-bottom: 1px;
261+
}
262+
263+
/* golden yellow price - same warm tone as the dome base */
264+
.price {
265+
font-family: 'Playfair Display', serif;
266+
font-size: 44px;
267+
font-weight: 700;
268+
color: #d4a030;
269+
}
270+
271+
/* toggle rows */
272+
.toggles {
273+
display: flex;
274+
flex-direction: column;
275+
gap: 14px;
276+
}
277+
278+
.toggle-item {
279+
display: flex;
280+
align-items: center;
281+
gap: 14px;
282+
cursor: pointer;
283+
font-size: 15px;
284+
user-select: none;
285+
}
286+
287+
.toggle-switch {
288+
position: relative;
289+
width: 44px;
290+
height: 24px;
291+
flex-shrink: 0;
292+
}
293+
294+
.toggle-switch input {
295+
opacity: 0;
296+
width: 0;
297+
height: 0;
298+
}
299+
300+
.track {
301+
position: absolute;
302+
inset: 0;
303+
background: rgba(255, 255, 255, 0.2);
304+
border-radius: 999px;
305+
transition: background 0.2s;
306+
}
307+
308+
/* the white circle handle inside the toggle */
309+
.track::before {
310+
content: '';
311+
position: absolute;
312+
width: 18px;
313+
height: 18px;
314+
left: 3px;
315+
top: 3px;
316+
background: white;
317+
border-radius: 50%;
318+
transition: transform 0.2s;
319+
}
320+
321+
.toggle-switch input:checked + .track {
322+
background: rgba(255, 255, 255, 0.5);
323+
}
324+
325+
.toggle-switch input:checked + .track::before {
326+
transform: translateX(20px);
327+
}
328+
329+
/* tan/beige button - stands out from the red */
330+
.add-btn {
331+
width: 255px;
332+
padding: 17px 0;
333+
background: #c9a96e;
334+
color: #3a1e00;
335+
border: none;
336+
border-radius: 8px;
337+
font-size: 15px;
338+
font-weight: 600;
339+
cursor: pointer;
340+
letter-spacing: 0.3px;
341+
transition: background 0.15s;
342+
}
343+
344+
.add-btn:hover {
345+
background: #d6b87c;
346+
}

0 commit comments

Comments
 (0)