diff --git a/luckydiamond/src/assets/css/PagesStyles/home.css b/luckydiamond/src/assets/css/PagesStyles/home.css index b880858..2e327c9 100644 --- a/luckydiamond/src/assets/css/PagesStyles/home.css +++ b/luckydiamond/src/assets/css/PagesStyles/home.css @@ -159,11 +159,15 @@ .gamemode__lines { display: flex; flex-direction: column; + width: 50%; + height: 100%; } .gamemode__twolines { display: flex; align-items: flex-start; + height: 100%; + width: 100%; } .gamemode__firstline { @@ -221,9 +225,9 @@ background: #EF4444; filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25)); border-radius: 40px; - width: 55%; - height: 50%; + width: 100%; margin: 18px 36px 0 35px; + min-height: 180px; } .linecontent-3 { @@ -252,13 +256,34 @@ .gamemode__twoline--first__element .container a { margin-right: 10%; - padding: 20px 20px; + padding: 12px 10px; } .gamemode__twoline--two__element { border-radius: 40px; background: #EF4444; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); + margin-top: 18px; + width: 100%; + min-height: 180px; +} + +.gamemode__twoline--two__element .linecontent-4 h3 { + color: #FFF; + text-transform: uppercase; + text-align: center; + text-shadow: 6px 12px 9px rgba(0, 0, 0, 0.25); + font-family: Montserrat Alternates; + font-size: 87px; +} + +.gamemode__twoline--two__element .container { + display: flex; + justify-content: center; +} + +.gamemode__twoline--two__element .container a { + margin-right: 10%; } /* /GameMode */ \ No newline at end of file diff --git a/luckydiamond/src/assets/icons-gamemodes/crush-icon.svg b/luckydiamond/src/assets/icons-gamemodes/crush-icon.svg new file mode 100644 index 0000000..6f63610 --- /dev/null +++ b/luckydiamond/src/assets/icons-gamemodes/crush-icon.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/luckydiamond/src/pages/HomePage.vue b/luckydiamond/src/pages/HomePage.vue index a8b9778..0659777 100644 --- a/luckydiamond/src/pages/HomePage.vue +++ b/luckydiamond/src/pages/HomePage.vue @@ -81,9 +81,13 @@ v-for="mode in twolinetwoelementGameMode" :key="mode.id" > -
+

{{ mode.title }}

+
+ play > + +