|
111 | 111 | } |
112 | 112 |
|
113 | 113 | .icon { |
114 | | - width: clamp(80px, 25vw, 120px); |
115 | | - height: clamp(80px, 25vw, 120px); |
116 | | - background: rgba(255, 255, 255, 0.05); |
117 | | - border-radius: 50%; |
118 | | - margin: 0 auto 25px; |
119 | | - display: flex; |
120 | | - align-items: center; |
121 | | - justify-content: center; |
122 | | - font-size: clamp(2rem, 8vw, 3rem); |
123 | | - border: 2px solid rgba(255, 255, 255, 0.08); |
124 | | - transition: transform 0.4s; |
125 | | - } |
126 | | - |
127 | | - .watermelon { |
128 | | - /* Убраны градиент и тень */ |
129 | | - background: rgba(255, 255, 255, 0.05); |
130 | | - } |
131 | | - |
| 114 | + width: clamp(80px, 25vw, 120px); |
| 115 | + height: clamp(80px, 25vw, 120px); |
| 116 | + background: rgba(255, 255, 255, 0.05); |
| 117 | + border-radius: 50%; |
| 118 | + margin: 0 auto 25px; |
| 119 | + display: flex; |
| 120 | + align-items: center; |
| 121 | + justify-content: center; |
| 122 | + font-size: clamp(2rem, 8vw, 3rem); |
| 123 | + border: 2px solid rgba(255, 255, 255, 0.08); |
| 124 | + transition: transform 0.4s; |
| 125 | + } |
132 | 126 |
|
133 | 127 | .stack { |
134 | 128 | display: flex; |
|
193 | 187 | opacity: 0.7; |
194 | 188 | } |
195 | 189 |
|
196 | | - /* Адаптация для маленьких экранов */ |
197 | 190 | @media (max-width: 600px) { |
198 | 191 | body { |
199 | 192 | padding: 10px; |
|
216 | 209 | } |
217 | 210 | } |
218 | 211 |
|
219 | | - /* Анимации */ |
220 | 212 | @media (hover: hover) { |
221 | 213 | .mac-window:hover { |
222 | 214 | transform: scale(1.01); |
|
243 | 235 | <body> |
244 | 236 | <div class="mac-window"> |
245 | 237 | <div class="title-bar"> |
| 238 | + <div class="finder-icon"> |
| 239 | + <span>🔍</span> |
| 240 | + <span>Finder</span> |
246 | 241 | </div> |
247 | 242 | <div class="dots"> |
248 | 243 | <div class="dot dot-red"></div> |
|
251 | 246 | </div> |
252 | 247 | </div> |
253 | 248 | <div class="content"> |
254 | | - <div class="icon watermelon">🍉</div> |
| 249 | + <div class="icon">🍉</div> |
255 | 250 | <h1>Cosmoblade</h1> |
256 | 251 | <p>14 лет | Начинающий full-stack разработчик</p> |
257 | 252 |
|
@@ -280,7 +275,6 @@ <h3 class="contacts-title">Как связаться</h3> |
280 | 275 | </div> |
281 | 276 |
|
282 | 277 | <script> |
283 | | - // Анимация при клике на кнопки заголовка |
284 | 278 | document.querySelectorAll('.dot').forEach(dot => { |
285 | 279 | dot.addEventListener('click', function() { |
286 | 280 | this.style.transform = 'scale(0.8)'; |
|
0 commit comments