Skip to content

Commit bb5b2e0

Browse files
CoderSergCoderSerg
authored
NEW SITE
1 parent 04b23b0 commit bb5b2e0

1 file changed

Lines changed: 161 additions & 34 deletions

File tree

‎index.html‎

Lines changed: 161 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,166 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" xmlns="http://www.w3.org/1999/html">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>CoderSerg</title>
7-
<link rel="stylesheet" href="styling.css">
8-
<link rel="icon" type="icon/x-image" href="https://cdn-icons-png.flaticon.com/512/7274/7274757.png">
9-
<script src="main.js"></script>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Shop 3D Prints</title>
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
10+
<script>
11+
tailwind.config = {
12+
theme: {
13+
extend: {
14+
colors: {
15+
brand: '#10b981', // emerald-500
16+
},
17+
keyframes: {
18+
glowPulse: {
19+
"0%": { boxShadow: "0 0 20px rgba(16,185,129,0.2)" },
20+
"50%": { boxShadow: "0 0 40px rgba(16,185,129,0.6)" },
21+
"100%": { boxShadow: "0 0 20px rgba(16,185,129,0.2)" }
22+
}
23+
},
24+
animation: {
25+
glowPulse: "glowPulse 6s ease-in-out infinite",
26+
}
27+
}
28+
}
29+
};
30+
</script>
1031
</head>
11-
<body>
12-
<center>
13-
<br>
14-
<h1>Hi!</h1>
15-
<p>
16-
My name is Serhii. <br />
17-
This is my website <br />
18-
built using my
19-
<a href="https://github.com/CoderSerg/coderserg.github.io" style="color:rgb(48, 151, 216);">Github <br />repository</a>.
20-
You can get snippets of <br />code,
21-
cool stuff, and other! <br />
22-
Have fun!
32+
33+
<body class="bg-gray-950 min-h-screen text-white font-sans">
34+
35+
<main class="flex-1">
36+
<div class="max-w-5xl mx-auto px-6 py-14 lg:py-20">
37+
38+
<!-- HERO -->
39+
<div class="grid gap-12 lg:grid-cols-2 lg:items-center">
40+
41+
<!-- LEFT SIDE (TEXT) -->
42+
<div class="space-y-6 order-2 lg:order-1">
43+
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
44+
Shop 3D prints,
45+
<span class="text-brand"> simply.</span>
46+
</h1>
47+
48+
<p class="text-gray-400 text-sm sm:text-base max-w-xl">
49+
High-quality custom 3D printed models delivered fast.
50+
Choose from many products or request your own print.
2351
</p>
24-
<img id="cat" style="width: 275px; position: absolute; left: 200px; rotate: -13deg; border: 3px solid rgb(219, 177, 86); border-radius: 5px; opacity: 0; transition: opacity 1s;" src="catmeme.png">
25-
<button onclick="showCat()" id="sc">Show da cat</button> <br><br>
26-
<button onclick="alert('This is a button')">Click me!</button> <br><br>
27-
<button onclick="
28-
navigator.clipboard.writeText('Hello World!');
29-
document.getElementById('tc').style.borderColor = 'lightgreen';
30-
document.getElementById('tc').style.color = 'lightgreen';
31-
" id="tc">Copy Text</button>
32-
<br><br>
33-
<input type="text" id="inputText" placeholder="Type something...">
34-
<button onclick="AlertText()">Alert Text!</button>
35-
<h1>😃</h1>
36-
<h2>bye for now</h2>
37-
</center>
52+
53+
<div class="flex flex-wrap gap-3">
54+
<a href="./shop.html">
55+
<button class="bg-brand text-black font-semibold px-6 py-3 rounded-lg
56+
hover:bg-brand/80 hover:scale-105 transition-all duration-200 shadow-lg shadow-emerald-500/30">
57+
Shop
58+
</button>
59+
</a>
60+
</div>
61+
</div>
62+
63+
<!-- RIGHT SIDE (ICON PANEL) -->
64+
<div class="relative flex justify-center lg:justify-start order-1 lg:order-2">
65+
<div class="w-[260px] bg-white/5 backdrop-blur-2xl border border-white/10 rounded-3xl
66+
shadow-2xl p-12 flex items-center justify-center animate-glowPulse">
67+
68+
<svg xmlns="http://www.w3.org/2000/svg"
69+
viewBox="0 0 24 24"
70+
fill="none"
71+
stroke="currentColor"
72+
stroke-width="2"
73+
stroke-linecap="round"
74+
stroke-linejoin="round"
75+
class="w-32 h-32 text-brand drop-shadow-xl">
76+
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
77+
<path d="M12 22V12"/>
78+
<polyline points="3.29 7 12 12 20.71 7"/>
79+
<path d="m7.5 4.27 9 5.15"/>
80+
</svg>
81+
82+
</div>
83+
</div>
84+
85+
</div>
86+
87+
88+
<!-- REVIEWS -->
89+
<div class="mt-20">
90+
<h2 class="text-2xl font-semibold mb-6">What customers say</h2>
91+
92+
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
93+
<div class="bg-white/5 backdrop-blur-xl p-6 rounded-2xl border border-white/10">
94+
<p class="text-gray-300 text-sm">“Amazing detail quality. Better than Etsy sellers.”</p>
95+
<p class="text-brand mt-3 text-xs">— Austin</p>
96+
</div>
97+
98+
<div class="bg-white/5 backdrop-blur-xl p-6 rounded-2xl border border-white/10">
99+
<p class="text-gray-300 text-sm">“Arrived fast. Exactly what I requested.”</p>
100+
<p class="text-brand mt-3 text-xs">— Lucas</p>
101+
</div>
102+
103+
<div class="bg-white/5 backdrop-blur-xl p-6 rounded-2xl border border-white/10">
104+
<p class="text-gray-300 text-sm">“Perfect gift. Clean lines & smooth finish.”</p>
105+
<p class="text-brand mt-3 text-xs">— Roman</p>
106+
</div>
107+
</div>
108+
</div>
109+
110+
111+
<!-- ABOUT THE PRINTER -->
112+
<div class="mt-20">
113+
<h2 class="text-2xl font-semibold mb-6">About the printer</h2>
114+
115+
<div class="bg-white/5 backdrop-blur-xl p-8 rounded-3xl border border-white/10 shadow-xl">
116+
<h3 class="text-xl font-semibold mb-4 text-brand">High-precision 3D printing</h3>
117+
118+
<p class="text-gray-300 text-sm leading-relaxed">
119+
Our prints are produced using a high-resolution FDM 3D printer with consistent dimensional
120+
accuracy and clean detail. We use premium PLA to ensure smooth surfaces, strong structure,
121+
and excellent color quality. Every print is inspected, cleaned, and finished by hand before shipping.
122+
</p>
123+
124+
<div class="grid sm:grid-cols-2 gap-6 mt-6 text-sm">
125+
<div class="bg-white/5 p-4 rounded-xl border border-white/5">
126+
<p class="text-gray-400">Printer model</p>
127+
<p class="text-white font-medium">Bambu P1S</p>
128+
</div>
129+
130+
<div class="bg-white/5 p-4 rounded-xl border border-white/5">
131+
<p class="text-gray-400">Material</p>
132+
<p class="text-white font-medium">PLA</p>
133+
</div>
134+
135+
<div class="bg-white/5 p-4 rounded-xl border border-white/5">
136+
<p class="text-gray-400">Print speed</p>
137+
<p class="text-white font-medium">Standard & fast-print profiles</p>
138+
</div>
139+
140+
<div class="bg-white/5 p-4 rounded-xl border border-white/5">
141+
<p class="text-gray-400">Max build size</p>
142+
<p class="text-white font-medium">256 × 256 × 256 mm</p>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
148+
149+
<!-- FOOTER -->
150+
<footer class="mt-20 border-t border-white/10 pt-10 pb-6 text-sm text-gray-400">
151+
<div class="flex flex-wrap justify-between">
152+
153+
<p>© 2025 Serhii 3D Prints</p>
154+
155+
<div class="flex gap-6">
156+
<a href="./contact.html" class="hover:text-white">Contact</a>
157+
</div>
158+
159+
</div>
160+
</footer>
161+
162+
</div>
163+
</main>
164+
38165
</body>
39-
</html>
166+
</html>

0 commit comments

Comments
 (0)