Skip to content

Commit b2f5081

Browse files
CosmoBladeCosmoBlade
committed
Update index.html
adaptation to mobiles!
1 parent c3f369a commit b2f5081

1 file changed

Lines changed: 105 additions & 69 deletions

File tree

‎index.html‎

Lines changed: 105 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,44 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Cosmoblade | Портфолио</title>
77
<style>
8-
body {
8+
:root {
9+
--primary-color: #64f0ff;
10+
--secondary-color: #9089fc;
11+
--bg-dark: #0f172a;
12+
--window-bg: rgba(30, 30, 40, 0.95);
13+
}
14+
15+
* {
16+
box-sizing: border-box;
917
margin: 0;
18+
padding: 0;
19+
}
20+
21+
body {
1022
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
11-
background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460);
23+
background: linear-gradient(45deg, var(--bg-dark), #16213e, #0f3460);
1224
color: #f8f9fa;
13-
height: 100vh;
14-
overflow: hidden;
25+
min-height: 100vh;
26+
padding: 20px;
1527
display: flex;
1628
justify-content: center;
1729
align-items: center;
1830
}
1931

2032
.mac-window {
21-
width: 85%;
22-
max-width: 850px;
23-
height: 75vh;
24-
background: rgba(40, 40, 45, 0.95);
33+
width: 100%;
34+
max-width: 900px;
35+
height: auto;
36+
min-height: 500px;
37+
background: var(--window-bg);
2538
backdrop-filter: blur(20px);
2639
border-radius: 16px;
2740
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5),
2841
0 0 0 1px rgba(255, 255, 255, 0.05);
2942
border: 1px solid rgba(255, 255, 255, 0.08);
3043
overflow: hidden;
3144
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);
45+
margin: 20px 0;
3846
}
3947

4048
.title-bar {
@@ -59,122 +67,150 @@
5967
cursor: pointer;
6068
}
6169

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-
}
70+
.dot-red { background: #ff5f57; }
71+
.dot-yellow { background: #ffbc2e; }
72+
.dot-green { background: #28c840; }
6973

7074
.content {
71-
padding: 40px;
75+
padding: 30px 20px;
7276
text-align: center;
73-
height: calc(100% - 42px);
74-
box-sizing: border-box;
7577
display: flex;
7678
flex-direction: column;
7779
align-items: center;
7880
justify-content: center;
7981
}
8082

8183
h1 {
82-
font-size: 2.8em;
83-
margin-bottom: 20px;
84-
background: linear-gradient(90deg, #64f0ff, #9089fc);
84+
font-size: clamp(2rem, 6vw, 2.8rem);
85+
margin-bottom: 15px;
86+
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
8587
-webkit-background-clip: text;
8688
background-clip: text;
8789
color: transparent;
8890
text-shadow: 0 2px 10px rgba(100, 240, 255, 0.2);
89-
letter-spacing: -0.5px;
91+
line-height: 1.2;
9092
}
9193

9294
p {
93-
font-size: 1.3em;
94-
line-height: 1.7;
95+
font-size: clamp(1rem, 4vw, 1.3rem);
96+
line-height: 1.6;
9597
opacity: 0.9;
9698
max-width: 600px;
97-
margin: 0 auto;
99+
margin: 0 auto 20px;
100+
padding: 0 10px;
98101
}
99102

100103
.icon {
101-
width: 120px;
102-
height: 120px;
104+
width: clamp(80px, 25vw, 120px);
105+
height: clamp(80px, 25vw, 120px);
103106
background: rgba(255, 255, 255, 0.05);
104107
border-radius: 50%;
105-
margin: 0 auto 30px;
108+
margin: 0 auto 25px;
106109
display: flex;
107110
align-items: center;
108111
justify-content: center;
109-
font-size: 3em;
112+
font-size: clamp(2rem, 8vw, 3rem);
110113
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);
114+
transition: transform 0.4s;
119115
}
120116

121117
.stack {
122118
display: flex;
123119
flex-wrap: wrap;
124120
justify-content: center;
125-
gap: 12px;
126-
margin: 30px 0;
121+
gap: 10px;
122+
margin: 20px 0;
127123
max-width: 600px;
124+
padding: 0 10px;
128125
}
129126

130127
.tech {
131128
background: rgba(100, 240, 255, 0.1);
132-
padding: 10px 18px;
133-
border-radius: 24px;
134-
font-size: 1em;
129+
padding: 8px 16px;
130+
border-radius: 20px;
131+
font-size: clamp(0.8rem, 3vw, 1rem);
135132
border: 1px solid rgba(100, 240, 255, 0.2);
136133
transition: all 0.3s;
137134
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);
135+
white-space: nowrap;
144136
}
145137

146138
.contact {
147-
margin-top: 40px;
148-
font-size: 1.2em;
139+
margin-top: 30px;
140+
font-size: clamp(1rem, 4vw, 1.2rem);
149141
background: rgba(255, 255, 255, 0.05);
150142
padding: 12px 25px;
151143
border-radius: 50px;
152144
transition: all 0.3s;
153145
}
154146

155-
.contact:hover {
156-
background: rgba(255, 255, 255, 0.1);
157-
}
158-
159147
.contact a {
160-
color: #64f0ff;
148+
color: var(--primary-color);
161149
text-decoration: none;
162-
transition: all 0.3s;
163150
display: flex;
164151
align-items: center;
165152
gap: 8px;
166153
}
167154

168-
.contact a:hover {
169-
color: #9089fc;
170-
text-decoration: none;
171-
}
172-
173155
.contact a::after {
174156
content: "↗";
175157
font-size: 0.9em;
176158
opacity: 0.7;
177159
}
160+
161+
/* Адаптация для маленьких экранов */
162+
@media (max-width: 600px) {
163+
body {
164+
padding: 10px;
165+
}
166+
167+
.content {
168+
padding: 25px 15px;
169+
}
170+
171+
.stack {
172+
gap: 8px;
173+
}
174+
175+
.tech {
176+
padding: 6px 12px;
177+
}
178+
179+
.contact {
180+
padding: 10px 20px;
181+
}
182+
}
183+
184+
/* Анимации */
185+
@media (hover: hover) {
186+
.mac-window:hover {
187+
transform: scale(1.01);
188+
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6),
189+
0 0 0 1px rgba(255, 255, 255, 0.1);
190+
}
191+
192+
.dot:hover {
193+
transform: scale(1.15);
194+
}
195+
196+
.icon:hover {
197+
transform: scale(1.1) rotate(5deg);
198+
background: rgba(255, 255, 255, 0.08);
199+
}
200+
201+
.tech:hover {
202+
background: rgba(100, 240, 255, 0.2);
203+
transform: translateY(-3px);
204+
}
205+
206+
.contact:hover {
207+
background: rgba(255, 255, 255, 0.1);
208+
}
209+
210+
.contact a:hover {
211+
color: var(--secondary-color);
212+
}
213+
}
178214
</style>
179215
</head>
180216
<body>
@@ -189,7 +225,7 @@
189225
<div class="content">
190226
<div class="icon">🚀</div>
191227
<h1>Cosmoblade</h1>
192-
<p>14 лет | Начинающий разработчик с фокусом на full-stack решениях</p>
228+
<p>14 лет | Начинающий full-stack разработчик</p>
193229

194230
<div class="stack">
195231
<span class="tech">Python</span>
@@ -202,7 +238,7 @@ <h1>Cosmoblade</h1>
202238
</div>
203239

204240
<div class="contact">
205-
<a href="https://t.me/cosmoblade" target="_blank">Telegram: @cosmoblade</a>
241+
<a href="https://t.me/cosmoblade" target="_blank">Telegram @cosmoblade</a>
206242
</div>
207243
</div>
208244
</div>

0 commit comments

Comments
 (0)