mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 20:29:35 +02:00
changed template mobile, separation his on components header and menu
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
/* Header */
|
||||
|
||||
.header-mobile {
|
||||
grid-area: header-mobile;
|
||||
border-radius: 20px;
|
||||
background: #17181C;
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.header-mobile__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-mobile__logo {
|
||||
padding: 6% 0 2.5% 4%;
|
||||
}
|
||||
|
||||
.header-mobile__logo img {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.header-mobile__balance--content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-mobile__card {
|
||||
border-radius: 7px;
|
||||
background: #22252F;
|
||||
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.card-display h2 {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 8% 15px 8% 7%;
|
||||
}
|
||||
|
||||
.card-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
font-family: Montserrat Alternates;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-card img {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.btn-card__margin {
|
||||
margin-left: -8%;
|
||||
}
|
||||
|
||||
/* /Header */
|
||||
@@ -0,0 +1,46 @@
|
||||
/* Footer */
|
||||
|
||||
.footer-mobile {
|
||||
grid-area: footer-mobile;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background: #17181C;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.footer-mobile__content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 2%;
|
||||
}
|
||||
.chat-icon a,
|
||||
.home-icon a,
|
||||
.settings-icon a {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.home-icon a img {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.settings-icon a img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
padding: 9px 0 0 6px;
|
||||
}
|
||||
|
||||
.footer-mobile__block a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
height: 4em;
|
||||
background: #D9D9D91F;
|
||||
border-radius: 20px;
|
||||
margin: 0 .8em;
|
||||
}
|
||||
|
||||
|
||||
/* /Footer */
|
||||
@@ -16,86 +16,12 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-mobile {
|
||||
grid-area: header-mobile;
|
||||
border-radius: 20px;
|
||||
background: #17181C;
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.main-mobile {
|
||||
grid-area: main-mobile;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer-mobile {
|
||||
grid-area: footer-mobile;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background: #17181C;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
.header-mobile__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-mobile__logo {
|
||||
padding: 6% 0 2.5% 4%;
|
||||
}
|
||||
|
||||
.header-mobile__logo img {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.header-mobile__balance--content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-mobile__card {
|
||||
border-radius: 7px;
|
||||
background: #22252F;
|
||||
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.card-display h2 {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 8% 15px 8% 7%;
|
||||
}
|
||||
|
||||
.card-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
font-family: Montserrat Alternates;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-card img {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.btn-card__margin {
|
||||
margin-left: -8%;
|
||||
}
|
||||
|
||||
/* /Header */
|
||||
|
||||
/* Main */
|
||||
|
||||
.main-mobile__content {
|
||||
@@ -168,41 +94,3 @@ body {
|
||||
}
|
||||
|
||||
/* /Main */
|
||||
|
||||
/* Footer */
|
||||
|
||||
.footer-mobile__content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 2%;
|
||||
}
|
||||
.chat-icon a,
|
||||
.home-icon a,
|
||||
.settings-icon a {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.home-icon a img {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.settings-icon a img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
padding: 9px 0 0 6px;
|
||||
}
|
||||
|
||||
.footer-mobile__block a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
height: 4em;
|
||||
background: #D9D9D91F;
|
||||
border-radius: 20px;
|
||||
margin: 0 .8em;
|
||||
}
|
||||
|
||||
|
||||
/* /Footer */
|
||||
Reference in New Issue
Block a user