Skip to content

Commit c3f369a

Browse files
CosmoBladeCosmoBlade
committed
Create index.html
1 parent 4f5e771 commit c3f369a

1 file changed

Lines changed: 232 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Cosmoblade | Портфолио</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
11+
background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460);
12+
color: #f8f9fa;
13+
height: 100vh;
14+
overflow: hidden;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
20+
.mac-window {
21+
width: 85%;
22+
max-width: 850px;
23+
height: 75vh;
24+
background: rgba(40, 40, 45, 0.95);
25+
backdrop-filter: blur(20px);
26+
border-radius: 16px;
27+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5),
28+
0 0 0 1px rgba(255, 255, 255, 0.05);
29+
border: 1px solid rgba(255, 255, 255, 0.08);
30+
overflow: hidden;
31+
transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
32+
}
33+
34+
.mac-window:hover {
35+
transform: scale(1.01);
36+
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6),
37+
0 0 0 1px rgba(255, 255, 255, 0.1);
38+
}
39+
40+
.title-bar {
41+
height: 42px;
42+
background: linear-gradient(to bottom, #323238, #2a2a30);
43+
display: flex;
44+
align-items: center;
45+
padding: 0 15px;
46+
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
47+
}
48+
49+
.dots {
50+
display: flex;
51+
gap: 10px;
52+
}
53+
54+
.dot {
55+
width: 14px;
56+
height: 14px;
57+
border-radius: 50%;
58+
transition: all 0.3s ease;
59+
cursor: pointer;
60+
}
61+
62+
.dot-red { background: #ff5f57; box-shadow: 0 0 5px #ff5f5755; }
63+
.dot-yellow { background: #ffbc2e; box-shadow: 0 0 5px #ffbc2e55; }
64+
.dot-green { background: #28c840; box-shadow: 0 0 5px #28c84055; }
65+
66+
.dot:hover {
67+
transform: scale(1.15);
68+
}
69+
70+
.content {
71+
padding: 40px;
72+
text-align: center;
73+
height: calc(100% - 42px);
74+
box-sizing: border-box;
75+
display: flex;
76+
flex-direction: column;
77+
align-items: center;
78+
justify-content: center;
79+
}
80+
81+
h1 {
82+
font-size: 2.8em;
83+
margin-bottom: 20px;
84+
background: linear-gradient(90deg, #64f0ff, #9089fc);
85+
-webkit-background-clip: text;
86+
background-clip: text;
87+
color: transparent;
88+
text-shadow: 0 2px 10px rgba(100, 240, 255, 0.2);
89+
letter-spacing: -0.5px;
90+
}
91+
92+
p {
93+
font-size: 1.3em;
94+
line-height: 1.7;
95+
opacity: 0.9;
96+
max-width: 600px;
97+
margin: 0 auto;
98+
}
99+
100+
.icon {
101+
width: 120px;
102+
height: 120px;
103+
background: rgba(255, 255, 255, 0.05);
104+
border-radius: 50%;
105+
margin: 0 auto 30px;
106+
display: flex;
107+
align-items: center;
108+
justify-content: center;
109+
font-size: 3em;
110+
border: 2px solid rgba(255, 255, 255, 0.08);
111+
transition: transform 0.4s, box-shadow 0.4s;
112+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
113+
}
114+
115+
.icon:hover {
116+
transform: scale(1.1) rotate(5deg);
117+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
118+
background: rgba(255, 255, 255, 0.08);
119+
}
120+
121+
.stack {
122+
display: flex;
123+
flex-wrap: wrap;
124+
justify-content: center;
125+
gap: 12px;
126+
margin: 30px 0;
127+
max-width: 600px;
128+
}
129+
130+
.tech {
131+
background: rgba(100, 240, 255, 0.1);
132+
padding: 10px 18px;
133+
border-radius: 24px;
134+
font-size: 1em;
135+
border: 1px solid rgba(100, 240, 255, 0.2);
136+
transition: all 0.3s;
137+
cursor: default;
138+
}
139+
140+
.tech:hover {
141+
background: rgba(100, 240, 255, 0.2);
142+
transform: translateY(-3px);
143+
box-shadow: 0 5px 15px rgba(100, 240, 255, 0.1);
144+
}
145+
146+
.contact {
147+
margin-top: 40px;
148+
font-size: 1.2em;
149+
background: rgba(255, 255, 255, 0.05);
150+
padding: 12px 25px;
151+
border-radius: 50px;
152+
transition: all 0.3s;
153+
}
154+
155+
.contact:hover {
156+
background: rgba(255, 255, 255, 0.1);
157+
}
158+
159+
.contact a {
160+
color: #64f0ff;
161+
text-decoration: none;
162+
transition: all 0.3s;
163+
display: flex;
164+
align-items: center;
165+
gap: 8px;
166+
}
167+
168+
.contact a:hover {
169+
color: #9089fc;
170+
text-decoration: none;
171+
}
172+
173+
.contact a::after {
174+
content: "↗";
175+
font-size: 0.9em;
176+
opacity: 0.7;
177+
}
178+
</style>
179+
</head>
180+
<body>
181+
<div class="mac-window">
182+
<div class="title-bar">
183+
<div class="dots">
184+
<div class="dot dot-red"></div>
185+
<div class="dot dot-yellow"></div>
186+
<div class="dot dot-green"></div>
187+
</div>
188+
</div>
189+
<div class="content">
190+
<div class="icon">🚀</div>
191+
<h1>Cosmoblade</h1>
192+
<p>14 лет | Начинающий разработчик с фокусом на full-stack решениях</p>
193+
194+
<div class="stack">
195+
<span class="tech">Python</span>
196+
<span class="tech">JavaScript</span>
197+
<span class="tech">Java</span>
198+
<span class="tech">C++</span>
199+
<span class="tech">Linux</span>
200+
<span class="tech">HTML/CSS</span>
201+
<span class="tech">Git</span>
202+
</div>
203+
204+
<div class="contact">
205+
<a href="https://t.me/cosmoblade" target="_blank">Telegram: @cosmoblade</a>
206+
</div>
207+
</div>
208+
</div>
209+
210+
<script>
211+
// Анимация при клике на кнопки заголовка
212+
document.querySelectorAll('.dot').forEach(dot => {
213+
dot.addEventListener('click', function() {
214+
this.style.transform = 'scale(0.8)';
215+
setTimeout(() => {
216+
this.style.transform = 'scale(1)';
217+
if(this.classList.contains('dot-red')) {
218+
alert('❌ Это не закроет окно - просто красивая кнопка!');
219+
} else if(this.classList.contains('dot-yellow')) {
220+
document.querySelector('.mac-window').style.transform = 'scale(0.98)';
221+
setTimeout(() => {
222+
document.querySelector('.mac-window').style.transform = 'scale(1)';
223+
}, 300);
224+
} else {
225+
alert('🚀 Добро пожаловать в моё космическое портфолио!');
226+
}
227+
}, 200);
228+
});
229+
});
230+
</script>
231+
</body>
232+
</html>

0 commit comments

Comments
 (0)