added styled and refactor styles for home-mobile

This commit is contained in:
Kostya
2023-11-29 15:54:43 +03:00
parent 3042801dc3
commit 405d06cc46
2 changed files with 19 additions and 5 deletions

View File

@@ -21,7 +21,7 @@ body {
border-radius: 20px; border-radius: 20px;
background: #17181C; background: #17181C;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
height: 65%; height: 45%;
} }
.main-mobile { .main-mobile {
@@ -97,6 +97,7 @@ body {
/* Main */ /* Main */
.main-mobile__content { .main-mobile__content {
margin-top: 60px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -107,16 +108,18 @@ body {
border-radius: 10px; border-radius: 10px;
background: #EF4444; background: #EF4444;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
width: 150px; width: 100%;
height: 105px; height: 120px;
} }
.main-mobile__first-line { .main-mobile__first-line {
display: flex; display: flex;
width: 100%;
} }
.main-mobile__two-line { .main-mobile__two-line {
display: flex; display: flex;
width: 100%;
} }
.card-mobile__content { /* text display */ .card-mobile__content { /* text display */
@@ -128,11 +131,22 @@ body {
.card-first { .card-first {
margin-left: 10px; margin-left: 10px;
margin-right: 10px;
}
.card-game__text h2 {
color: #FFF;
font-weight: 700;
font-size: 45px;
text-align: center;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Montserrat Alternates;
} }
.card-two { .card-two {
margin-top: 20px; margin-top: 20px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px;
} }
/* /Main */ /* /Main */

View File

@@ -21,7 +21,7 @@
<main class="main-mobile"> <main class="main-mobile">
<div class="main-mobile__content"> <div class="main-mobile__content">
<div class="main-mobile__first-line"> <div class="main-mobile__first-line">
<div class="card-mobile__content bg-mobile card-first" v-for="mode in firstlineGameMode" :key="mode"> <div class="card-mobile__content bg-mobile card-first card-game__text" v-for="mode in firstlineGameMode" :key="mode">
<h2>{{ mode.title }}</h2> <h2>{{ mode.title }}</h2>
<div class="card-mobile__btn"> <div class="card-mobile__btn">
<a href="#">Play ></a> <a href="#">Play ></a>
@@ -29,7 +29,7 @@
</div> </div>
</div> </div>
<div class="main-mobile__two-line"> <div class="main-mobile__two-line">
<div class="card-mobile__content bg-mobile card-two" v-for="mode in twolineGameMode" :key="mode"> <div class="card-mobile__content bg-mobile card-two card-game__text" v-for="mode in twolineGameMode" :key="mode">
<h2>{{ mode.title }}</h2> <h2>{{ mode.title }}</h2>
<div class="card-mobile__btn"> <div class="card-mobile__btn">
<a href="#">Play ></a> <a href="#">Play ></a>