added styles for mobile-header

This commit is contained in:
Kostya
2023-11-26 18:35:39 +03:00
parent b246e5adb6
commit 1a3312c809
6 changed files with 82 additions and 6 deletions

View File

@@ -3,7 +3,6 @@
grid-auto-columns: 1fr;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr repeat(2, 0.5fr) 1fr;
gap: 0px 0px;
grid-template-areas:
"header-mobile header-mobile header-mobile header-mobile"
"main-mobile main-mobile main-mobile main-mobile"
@@ -15,9 +14,9 @@
.header-mobile {
grid-area: header-mobile;
width: 100%;
height: 100%;
background: #000;
border-radius: 20px;
background: #17181C;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.main-mobile {
@@ -32,4 +31,41 @@
width: 100%;
height: 100%;
background: #73ce36;
}
}
/* Header */
.header-mobile__content {
display: flex;
align-items: center;
justify-content: space-between;
}
.header-mobile__nav {
display: flex;
}
.header-mobile__logo {
padding: 23px 0 11px 17px;
}
.header-mobile__logo img {
width: 170px;
}
.balance-mobile__card {
align-self: start;
display: flex;
}
.card-balance h2 {
border-radius: 7px;
background: #22252F;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
display: flex;
text-align: center;
align-items: center;
font-size: 0.813em;
}
/* /Header */

Binary file not shown.

After

Width:  |  Height:  |  Size: 774 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 11 KiB

View File

@@ -1,7 +1,17 @@
<template>
<div class="content-grid__mobile-home">
<header class="header-mobile">
<h1>header</h1>
<div class="header-mobile__content">
<div class="header-mobile__logo">
<img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
</div>
<div class="header-mobile__nav">
<div class="balance-mobile__card card-balance">
<h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
<a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
</div>
</div>
</div>
</header>
<main class="main-mobile">
<h1>main</h1>