yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 12:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

add walllet elements

Browse Source
This commit is contained in:
Hepatica
2023-09-29 18:07:16 +02:00
parent 989a9aec03
commit 53d11655e0
2 changed files with 100 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/css/style.css
View File

@@ -48,6 +48,9 @@
display: flex; display: flex;
margin-left: 369px; margin-left: 369px;
margin-top: -70.5px; margin-top: -70.5px;
flex-wrap: wrap;
align-content: center;
justify-content: space-evenly;
} }
.main_div { .main_div {
@@ -56,14 +59,14 @@
} }
.header_other_text { .header_other_text {
width: 91px; /* width: 91px;
height: 17px; height: 17px; */
color: #FFF; color: #FFF;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Montserrat Alternates; font-family: Montserrat Alternates;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
margin-left: 75px; /* margin-left: 75px; */
} }
.bal { .bal {
@@ -108,4 +111,66 @@
font-family: Montserrat; font-family: Montserrat;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.wallet_element_money {
background: #22252F;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
color: white;
width: 55%;
z-index: 4;
}
.wallet_element_image {
margin-top: 8px;
}
.wallet_element_numbers {
text-align: left;
margin-right: 10px;
font-weight: bold;
font-family: Montserrat Alternates;
}
.wallet_element {
display: flex;
justify-content: center;
align-items: center;
border: 10px;
width: 55%;
height: 10%;
border-radius: 9px;
background: #EF4444;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
height: 45px;
z-index: 5;
margin-left: -5px;
}
.wallet_elements{
display: flex;
justify-content: space-evenly;
align-items: center;
}
.wallet_text{
margin-inline: 10px;
}

33
src/index.html
View File

@@ -18,6 +18,7 @@
<p class="header_title_text">PLAY NOW</p> <p class="header_title_text">PLAY NOW</p>
<h2 class="header_title">LUCKY DIAMOND</h2> <h2 class="header_title">LUCKY DIAMOND</h2>
</div> </div>
<div class="menu"> <div class="menu">
<div class="main_content"> <div class="main_content">
<a href="#"> <a href="#">
@@ -25,14 +26,42 @@
</div> </div>
<a href="#" style="text-decoration: none;"><p class="header_other_text">Профиль</p></a> <a href="#" style="text-decoration: none;"><p class="header_other_text">Профиль</p></a>
<a href="#" style="text-decoration: none;"><p class="header_other_text">Помощь</p></a> <a href="#" style="text-decoration: none;"><p class="header_other_text">Помощь</p></a>
<div class="wallet_elements">
<div class="wallet_element_money">
<img src="img/basic/BalanceLogoDiamondOre.png" alt="example image" class="wallet_element_image">
<div class="wallet_element_numbers">25000</div>
</div>
<div class="wallet_element">
<p class="header_other_text wallet_text">Кошелёк</p>
</div>
</div>
</div> </div>
<div class="bal"></div> <div class="bal"></div>
<div class="bal_bac"></div> <!-- <div class="bal_bac"></div>
<a href="#"><button class="bal_button"></button></a> <a href="#"><button class="bal_button"></button></a>
<img class="bal_img" src="img/basic/BalanceLogoDiamondOre.png"> <img class="bal_img" src="img/basic/BalanceLogoDiamondOre.png">
<p class="bal_text">25000</p> <p class="bal_text">25000</p>
<p class="bal_button_text">КОШЕЛЁК</p> <p class="bal_button_text">КОШЕЛЁК</p> -->
<!-- <div class="flex-container">
<div> <div class="bal_bac"></div></div>
<div> <a href="#"><button class="bal_button"></button></a></div>
<div> <img class="bal_img" src="img/basic/BalanceLogoDiamondOre.png"></div>
<div> <p class="bal_text">25000</p></div>
<div> <p class="bal_button_text">КОШЕЛЁК</p></div>
<div>6</div>
<div>7</div>
<div>8</div>
</div> -->
</div> </div>
<!-- <div class="diamond-container">
</div> -->
<div class="left_panel"></div> <div class="left_panel"></div>
</header> </header>
<main> <main>