damanukyan/frontend-start
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update

Browse Source
This commit is contained in:
Daniil Manukian
2026-04-23 13:17:24 +03:00
parent acaeabd5c4
commit 06a35b10cf
10 changed files with 307 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/logo-arbitrum.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 321 KiB

BIN
assets/images/logo-bnb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 KiB

BIN
assets/images/logo-ethereum.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 440 KiB

BIN
assets/images/logo-rub.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
assets/images/logo-solana.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
assets/images/logo-tether.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
assets/images/logo-tron.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

62
cabinet.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Личный кабинет — заявка</title>
<meta name='theme-color' content='#070b28'>
<link rel='icon' href='assets/images/logo-icon.ico' sizes='any'>
<link rel='apple-touch-icon' href='assets/images/logo-icon.ico'>
<link rel='preconnect' href='https://fonts.googleapis.com'>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap' rel='stylesheet'>
<link rel='stylesheet' href='css/styles.css'>
</head>
<body>
<div class='page'>
<header class='header' id='top'>
<div class='header__inner'>
<a class='logo logo--header' href='index.html'><img class='logo__img' src='assets/images/logo-full-white.png' alt='ЭКСА' width='160' height='48' decoding='async'></a>
<nav class='nav'>
<a class='nav__link' href='index.html#about'>О нас</a>
</nav>
<a class='btn btn--cabinet' href='cabinet.html'>Личный кабинет</a>
<button class='burger' type='button' aria-label='Меню'></button>
</div>
</header>
<main class='cabinet'>
<a class='cabinet__back' href='index.html'>← На главную</a>
<div class='cabinet__center'>
<section class='cabinet__card' aria-labelledby='cabinet-title'>
<h1 class='cabinet__title' id='cabinet-title'>Заявка</h1>
<form class='cabinet__form' id='cabinet-form'>
<label class='cabinet__field'>
<span class='cabinet__label'>Email</span>
<input class='cabinet__input' type='email' name='email' required autocomplete='email' inputmode='email'>
</label>
<label class='cabinet__field'>
<span class='cabinet__label'>Имя</span>
<input class='cabinet__input' type='text' name='name' required autocomplete='name'>
</label>
<button class='cabinet__submit' type='submit'>Оставить заявку</button>
</form>
</section>
</div>
</main>
</div>
<script src='js/main.js' defer></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const f = document.getElementById('cabinet-form');
if (!f) {
return;
}
f.addEventListener('submit', (e) => {
e.preventDefault();
f.reset();
});
});
</script>
</body>
</html>

298
css/styles.css
View File

@@ -9,6 +9,7 @@
--blue-panel: #101a5c;
--footer-bg: #05052d;
--footer-line: rgba(255, 255, 255, 0.18);
--page-max: 120rem;
}
*,
@@ -24,8 +25,11 @@ html {
body {
margin: 0;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 18px;
color: #1a1a2e;
background: var(--cream);
background: radial-gradient(ellipse 120% 90% at 35% 10%, rgba(80, 70, 170, 0.25) 0%, transparent 55%),
radial-gradient(ellipse 120% 90% at 60% 55%, rgba(140, 120, 255, 0.14) 0%, transparent 62%),
linear-gradient(180deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 32%, var(--hero-bg-3) 62%, var(--footer-bg) 100%);
}
a {
@@ -33,13 +37,22 @@ a {
text-decoration: none;
}
.page {
width: min(100%, var(--page-max));
margin: 0 auto;
background: transparent;
min-height: 100vh;
box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
left: 50%;
transform: translateX(-50%);
width: min(100%, var(--page-max));
z-index: 50;
padding: 1.25rem 4vw 0;
padding: 2.25rem 4vw 0;
background: linear-gradient(180deg, rgba(7, 11, 40, 0.95) 0%, rgba(7, 11, 40, 0.65) 70%, transparent 100%);
}
@@ -50,7 +63,7 @@ a {
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding-bottom: 1rem;
padding-bottom: 1.35rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
@@ -68,13 +81,13 @@ a {
}
.logo--header .logo__img {
height: clamp(1.35rem, 3.2vw, 1.85rem);
height: clamp(1.65rem, 3.8vw, 2.25rem);
width: auto;
}
.logo--hero {
margin: 0 0 2rem;
max-width: min(100%, 28rem);
max-width: min(100%, 34rem);
}
.logo--hero .logo__img {
@@ -87,13 +100,13 @@ a {
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(0.75rem, 2vw, 2.5rem);
gap: clamp(1rem, 2.4vw, 3.1rem);
}
.nav__link {
font-size: clamp(0.7rem, 1.1vw, 0.85rem);
font-size: clamp(0.95rem, 1.35vw, 1.15rem);
font-weight: 600;
letter-spacing: 0.14em;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.92);
transition: color 0.2s ease, opacity 0.2s ease;
@@ -105,9 +118,9 @@ a {
.btn--cabinet {
flex-shrink: 0;
padding: 0.65rem 1.35rem;
padding: 0.95rem 1.9rem;
border-radius: 999px;
font-size: 0.78rem;
font-size: 1.02rem;
font-weight: 700;
letter-spacing: 0.06em;
color: #0c0c24;
@@ -164,23 +177,44 @@ a {
background: radial-gradient(ellipse 120% 80% at 20% 20%, #2a1b6e 0%, transparent 55%),
radial-gradient(ellipse 90% 70% at 85% 30%, #3d1f7a 0%, transparent 50%),
linear-gradient(165deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 42%, var(--hero-bg-3) 100%);
pointer-events: none;
z-index: 0;
}
.hero__bg::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 120% 90% at 55% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 58%),
radial-gradient(ellipse 80% 70% at 20% 55%, rgba(120, 90, 220, 0.16) 0%, transparent 62%);
opacity: 0.9;
}
.hero__glow {
position: absolute;
z-index: 1;
width: clamp(5rem, 14vw, 9rem);
height: clamp(5rem, 14vw, 9rem);
width: clamp(80px, 14vw, 144px);
height: clamp(80px, 14vw, 144px);
display: grid;
place-items: center;
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 300;
color: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 1.1rem;
transform: rotate(-8deg);
box-shadow: 0 0 40px rgba(140, 120, 255, 0.15);
box-shadow: 0 0 26px rgba(140, 120, 255, 0.12);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
background: rgba(255, 255, 255, 0.03);
}
.hero__glow-img {
width: 62%;
height: auto;
opacity: 0.5;
filter: grayscale(1) brightness(1.08) contrast(1.08) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22));
}
.hero__glow-img[src$='logo-ethereum.png'] {
filter: grayscale(1) brightness(1.50) contrast(1.00) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22));
}
.hero__glow--1 {
@@ -200,6 +234,30 @@ a {
transform: rotate(12deg);
}
.hero__glow--4 {
top: 58%;
left: 6%;
transform: rotate(-14deg);
}
.hero__glow--5 {
top: 64%;
left: 20%;
transform: rotate(10deg);
}
.hero__glow--6 {
top: 12%;
left: 42%;
transform: rotate(-6deg);
}
.hero__glow--7 {
top: 36%;
left: 36%;
transform: rotate(16deg);
}
.hero__grid {
position: relative;
z-index: 2;
@@ -221,7 +279,7 @@ a {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: clamp(0.65rem, 1.1vw, 0.8rem);
font-size: clamp(0.75rem, 1.25vw, 0.95rem);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
@@ -233,7 +291,7 @@ a {
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: 1.5rem;
gap: 2rem;
}
.hero__bridge-wrap {
@@ -242,7 +300,7 @@ a {
.hero__bridge {
margin: 0;
font-size: clamp(2rem, 5vw, 3.6rem);
font-size: clamp(2.4rem, 5.6vw, 4.2rem);
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.05;
@@ -267,7 +325,7 @@ a {
.hero__tag {
margin: 0;
font-size: clamp(2.4rem, 7.5vw, 5.8rem);
font-size: clamp(3.1rem, 8.6vw, 7.4rem);
font-weight: 800;
line-height: 0.95;
letter-spacing: -0.02em;
@@ -292,7 +350,7 @@ a {
.countdown__title {
margin: 0 0 1rem;
font-size: clamp(0.85rem, 1.5vw, 1rem);
font-size: clamp(1.15rem, 2vw, 1.5rem);
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
@@ -300,21 +358,25 @@ a {
}
.countdown__units {
display: flex;
align-items: stretch;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
--countdown-gap: clamp(1rem, 2.2vw, 1.75rem);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: end;
justify-items: center;
column-gap: var(--countdown-gap);
row-gap: 0.75rem;
}
.countdown__unit {
min-width: clamp(4.2rem, 12vw, 6.5rem);
min-width: 0;
text-align: center;
position: relative;
padding-inline: clamp(0.65rem, 1.2vw, 0.9rem);
}
.countdown__value {
display: block;
font-size: clamp(2.4rem, 6vw, 4.25rem);
font-size: clamp(4.2rem, 9.6vw, 7.1rem);
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
@@ -326,7 +388,7 @@ a {
.countdown__label {
display: block;
margin-top: 0.45rem;
font-size: 0.68rem;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
@@ -334,11 +396,23 @@ a {
}
.countdown__sep {
width: 1px;
align-self: stretch;
min-height: 2.5rem;
margin-top: 0.35rem;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35), transparent);
display: none;
}
@media (max-width: 620px) {
.countdown__units {
--countdown-gap: 0.9rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-items: center;
column-gap: var(--countdown-gap);
row-gap: 0.9rem;
}
.countdown__unit {
width: 100%;
padding-inline: 0.75rem;
}
}
.countdown__done {
@@ -353,83 +427,87 @@ a {
.about {
position: relative;
padding: clamp(4rem, 10vw, 7rem) 4vw;
background: var(--cream);
background: transparent;
overflow: hidden;
}
.about__slant {
position: absolute;
left: -15%;
right: -5%;
top: 12%;
bottom: 8%;
background: linear-gradient(135deg, #0a1438 0%, #15206e 45%, #1c2a8a 100%);
transform: skewY(-6deg);
border-radius: 2rem;
box-shadow: 0 40px 100px rgba(12, 18, 64, 0.35);
opacity: 0.98;
inset: 0;
background: radial-gradient(ellipse 55% 60% at 35% 25%, rgba(255, 255, 255, 0.06) 0%, transparent 62%);
opacity: 1;
}
.about__slant::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(ellipse 50% 60% at 90% 100%, rgba(255, 255, 255, 0.06) 0%, transparent 55%);
background: linear-gradient(180deg, rgba(7, 11, 40, 0.2) 0%, transparent 40%, rgba(7, 11, 40, 0.25) 100%);
pointer-events: none;
}
.about__inner {
position: relative;
z-index: 2;
max-width: 72rem;
max-width: 78rem;
margin: 0 auto;
padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
padding: clamp(2.2rem, 4.5vw, 4rem) clamp(1.6rem, 4vw, 3.4rem);
}
.about__panel {
max-width: 38rem;
max-width: 44rem;
padding: clamp(1.75rem, 3vw, 2.5rem);
border-radius: 1.4rem;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.about__title {
margin: 0 0 1.25rem;
font-size: clamp(2rem, 4vw, 3rem);
font-size: clamp(2.2rem, 4.2vw, 3.2rem);
font-weight: 800;
letter-spacing: 0.04em;
color: #ece8ff;
color: #fff;
}
.about__text {
margin: 0 0 1rem;
font-size: clamp(0.95rem, 1.4vw, 1.1rem);
font-weight: 300;
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
font-weight: 400;
line-height: 1.65;
color: rgba(244, 242, 255, 0.88);
color: rgba(244, 242, 255, 0.86);
}
.about__legal {
position: relative;
z-index: 3;
max-width: 52rem;
margin: clamp(2rem, 6vw, 4rem) auto 0;
max-width: 78rem;
margin: clamp(1.5rem, 3.5vw, 2.25rem) auto 0;
display: flex;
flex-direction: column;
gap: 1rem;
gap: 0.75rem;
}
.about__legal p {
margin: 0;
font-size: clamp(0.75rem, 1.1vw, 0.88rem);
font-size: clamp(0.85rem, 1.15vw, 1rem);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.55;
color: var(--blue-deep);
color: rgba(255, 255, 255, 0.72);
padding: 0.9rem 1.1rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.03);
}
.footer {
padding: 3.5rem 4vw 2.5rem;
background: var(--footer-bg);
background: transparent;
color: rgba(255, 255, 255, 0.9);
font-family: 'Nunito Sans', 'Manrope', system-ui, sans-serif;
font-size: 1rem;
@@ -541,6 +619,100 @@ a {
opacity: 0.85;
}
.cabinet {
position: relative;
min-height: 100vh;
padding: 0 4vw;
color: rgba(255, 255, 255, 0.92);
display: flex;
align-items: center;
justify-content: center;
}
.cabinet__back {
position: absolute;
top: clamp(6.75rem, 14vw, 8.75rem);
left: 4vw;
z-index: 2;
width: fit-content;
color: rgba(255, 255, 255, 0.72);
text-decoration: underline;
text-underline-offset: 4px;
}
.cabinet__center {
width: min(42rem, 100%);
margin: 0 auto;
}
.cabinet__card {
width: 100%;
border-radius: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(10, 10, 40, 0.72);
box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
padding: 2rem 2rem 1.75rem;
}
.cabinet__title {
margin: 0 0 1.25rem;
font-size: 2rem;
letter-spacing: 0.02em;
}
.cabinet__form {
display: grid;
gap: 1rem;
}
.cabinet__field {
display: grid;
gap: 0.45rem;
}
.cabinet__label {
font-size: 0.95rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.cabinet__input {
width: 100%;
padding: 0.95rem 1.05rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
outline: none;
font: inherit;
}
.cabinet__input:focus {
border-color: rgba(201, 184, 255, 0.5);
box-shadow: 0 0 0 4px rgba(201, 184, 255, 0.16);
}
.cabinet__submit {
margin-top: 0.35rem;
padding: 0.95rem 1.25rem;
border-radius: 1.05rem;
border: 0;
background: #fff;
color: #0c0c24;
font: inherit;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cabinet__submit:hover {
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
@media (max-width: 600px) {
.hero__glow {
display: none;

17
index.html
View File

@@ -33,16 +33,14 @@
<body>
<script src="js/site-config.js"></script>
<script src="js/tracking.js"></script>
<div class="page">
<header class="header" id="top">
<div class="header__inner">
<a class="logo logo--header" href="#top"><img class="logo__img" src="assets/images/logo-full-white.png" alt="ЭКСА" width="160" height="48" decoding="async"></a>
<nav class="nav">
<a class="nav__link" href="#about">О нас</a>
<a class="nav__link" href="#top">Конвертация</a>
<a class="nav__link" href="#top">Услуги</a>
<a class="nav__link" href="#top">Новости</a>
</nav>
<a class="btn btn--cabinet" href="#top">Личный кабинет</a>
<a class="btn btn--cabinet" href="cabinet.html">Личный кабинет</a>
<button class="burger" type="button" aria-label="Меню"></button>
</div>
</header>
@@ -50,9 +48,13 @@
<main>
<section class="hero">
<div class="hero__bg" aria-hidden="true"></div>
<div class="hero__glow hero__glow--1" aria-hidden="true">₽</div>
<div class="hero__glow hero__glow--2" aria-hidden="true">₮</div>
<div class="hero__glow hero__glow--3" aria-hidden="true">Ξ</div>
<div class="hero__glow hero__glow--1" aria-hidden="true"><img class="hero__glow-img" src="assets/images/logo-rub.png" alt="" width="160" height="160" decoding="async"></div>
<div class="hero__glow hero__glow--2" aria-hidden="true"><img class="hero__glow-img" src="assets/images/logo-tether.png" alt="" width="160" height="160" decoding="async"></div>
<div class="hero__glow hero__glow--3" aria-hidden="true"><img class="hero__glow-img" src="assets/images/logo-ethereum.png" alt="" width="160" height="160" decoding="async"></div>
<div class="hero__glow hero__glow--4" aria-hidden="true"><img class="hero__glow-img" src="assets/images/logo-solana.png" alt="" width="160" height="160" decoding="async"></div>
<div class="hero__glow hero__glow--5" aria-hidden="true"><img class="hero__glow-img" src="assets/images/logo-bnb.png" alt="" width="160" height="160" decoding="async"></div>
<div class="hero__glow hero__glow--6" aria-hidden="true"><img class="hero__glow-img" src="assets/images/logo-tron.png" alt="" width="160" height="160" decoding="async"></div>
<div class="hero__glow hero__glow--7" aria-hidden="true"><img class="hero__glow-img" src="assets/images/logo-arbitrum.png" alt="" width="160" height="160" decoding="async"></div>
<div class="hero__grid">
<div class="hero__left">
<div class="logo logo--hero"><img class="logo__img" src="assets/images/logo-full-white.png" alt="ЭКСА" width="520" height="160" decoding="async"></div>
@@ -161,5 +163,6 @@
</footer>
<script src="js/main.js" defer></script>
</div>
</body>
</html>