From dfd129cd96cad8e4ec5c2c8dae4c68824ec917b5 Mon Sep 17 00:00:00 2001 From: Swino4ka Date: Tue, 5 Mar 2024 20:33:40 +0100 Subject: [PATCH] AAAA ANIMACII MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Мега много анимаций прикиньте да? --- .../assets/css/ComponentsStyles/header.css | 6 ++ .../src/assets/css/PagesStyles/home.css | 64 ++++++++++++++++++- luckydiamond/src/pages/HomePage.vue | 10 +-- src/css/style.css | 6 ++ 4 files changed, 78 insertions(+), 8 deletions(-) diff --git a/luckydiamond/src/assets/css/ComponentsStyles/header.css b/luckydiamond/src/assets/css/ComponentsStyles/header.css index 510c86a..a41484b 100644 --- a/luckydiamond/src/assets/css/ComponentsStyles/header.css +++ b/luckydiamond/src/assets/css/ComponentsStyles/header.css @@ -24,6 +24,11 @@ font-weight: 700; font-size: 18px; margin-right: 3em; + transition: 250ms; +} + +.header__nav nav a:hover { + color: #EF4444; } .header__nav--now { @@ -84,6 +89,7 @@ padding: 20px 23px 20px 23px; text-decoration: none; margin-left: -15%; + transition: 200ms; } .header__auth--discord { diff --git a/luckydiamond/src/assets/css/PagesStyles/home.css b/luckydiamond/src/assets/css/PagesStyles/home.css index a2ad6b8..9c2f496 100644 --- a/luckydiamond/src/assets/css/PagesStyles/home.css +++ b/luckydiamond/src/assets/css/PagesStyles/home.css @@ -137,6 +137,7 @@ font-weight: 700; text-transform: uppercase; text-align: center; + padding: 0px 0px 0px 28px; } .line__footer { @@ -175,13 +176,36 @@ .line__img__jackpot { display: flex; - margin: 1% 6.6% 1% 4.7%; + margin: 1% 6.6% 1% 0%; } .display-firstline { display: flex; } +.cumming_soon_btn { + border-radius: 21px; + background: #FFF; + box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); + color: #000; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + font-family: Montserrat Alternates; + font-size: 36px; + font-weight: 700; + padding: 11px 0px 11px 11px; + text-decoration: none; + text-transform: uppercase; + position: relative; + bottom: 5%; + left: 2%; + transition: 250ms; + cursor: default; +} + +.cumming_soon_btn:hover { + background-color: #525252; +} + .line__btn { border-radius: 21px; background: #FFF; @@ -191,14 +215,31 @@ font-family: Montserrat Alternates; font-size: 36px; font-weight: 700; - padding: 11px 11px; + padding: 11px 0px 11px 11px; text-decoration: none; text-transform: uppercase; position: relative; bottom: 5%; left: 2%; + transition: 250ms; } +.line__btn span:after { + content: '\00bb'; + opacity: 0; + transition: 250ms; + } + +.line__btn:hover span:after { + opacity: 1; + right: 0; + padding-right: 0px; + } + +.line__btn:hover { + padding:11px 11px 11px 22px ; + } + .line__btn__jackpot { border-radius: 21px; background: #FFF; @@ -208,14 +249,31 @@ font-family: Montserrat Alternates; font-size: 36px; font-weight: 700; - padding: 11px 11px; + padding: 11px 0px 11px 11px; text-decoration: none; text-transform: uppercase; position: relative; bottom: 4%; left: 6%; + transition: 250ms; } +.line__btn__jackpot span:after { + content: '\00bb'; + opacity: 0; + transition: 250ms; + } + +.line__btn__jackpot:hover span:after { + opacity: 1; + right: 0; + padding-right: 0px; + } + +.line__btn__jackpot:hover { + padding:11px 11px 11px 22px ; + } + .line__btn--elm { color: #000; font-size: 38px ; diff --git a/luckydiamond/src/pages/HomePage.vue b/luckydiamond/src/pages/HomePage.vue index 41ce281..4fd965b 100644 --- a/luckydiamond/src/pages/HomePage.vue +++ b/luckydiamond/src/pages/HomePage.vue @@ -42,7 +42,7 @@ href="#" @click="$router.push({ name: 'saper' })" class="line__btn" - >play >play @@ -66,7 +66,7 @@ href="#" @click="$router.push({ name: 'jackpot' })" class="line__btn__jackpot" - >play > play @@ -84,8 +84,8 @@

скоро

- play >play
@@ -104,7 +104,7 @@ href="#" @click="$router.push({ name: 'crash' })" class="line__btn" - >play >play diff --git a/src/css/style.css b/src/css/style.css index afc58a1..9c415bc 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -72,6 +72,12 @@ font-family: Montserrat Alternates; font-size: 18px; font-weight: 700; + transition: 250ms; +} + +.header_other_text_menu:hover { + color: #EF4444; + } .flex-container {