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

Начало кнопки авторизации

Browse Source
This commit is contained in:
Bloody
2023-09-30 11:06:32 +07:00
parent 86308b59f6
commit aeee9f2765
3 changed files with 79 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/css/style.css
View File

@@ -46,7 +46,7 @@
.menu { .menu {
display: flex; display: flex;
margin-left: 369px; margin-left: 100px;
margin-top: -70.5px; margin-top: -70.5px;
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; align-content: center;
@@ -59,41 +59,6 @@
} }
.header_other_text { .header_other_text {
/* width: 91px;
height: 17px; */
color: #FFF;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Montserrat Alternates;
font-size: 18px;
font-weight: 700;
/* margin-left: 75px; */
}
.bal {
display: flex;
}
.bal_bac {
width: 139px;
height: 48px;
border-radius: 9px;
background: #22252F;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.bal_button {
width: 134px;
height: 54px;
border-radius: 13px;
background: #EF4444;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.bal_text {
width: 59px;
height: 15px;
flex-direction: column;
justify-content: center;
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;
@@ -101,32 +66,28 @@
font-weight: 700; font-weight: 700;
} }
.bal_button_text { .header_other_text_menu {
width: 88px;
height: 13px;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: #FFF; color: #FFF;
font-family: Montserrat; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-size: 16px; font-family: Montserrat Alternates;
font-weight: 600; font-size: 18px;
font-weight: 700;
} }
.flex-container { .flex-container {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.flex-container > div { .flex-container>div {
width: 100px; width: 100px;
margin: 10px; margin: 10px;
text-align: center; text-align: center;
line-height: 75px; line-height: 75px;
font-size: 30px; font-size: 30px;
} }
.wallet_element_money { .wallet_element_money {
margin-top: 2px; margin-top: 2px;
background: #22252F; background: #22252F;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
@@ -138,22 +99,22 @@
width: 55%; width: 55%;
z-index: 4; z-index: 4;
} }
.wallet_element_image { .wallet_element_image {
margin-top: 8px; margin-top: 8px;
} }
.wallet_element_numbers { .wallet_element_numbers {
text-align: left; text-align: left;
margin-right: 10px; margin-right: 10px;
font-weight: bold; font-weight: bold;
font-family: Montserrat Alternates; font-family: Montserrat Alternates;
} }
.wallet_element { .wallet_element {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 10px; border: 10px;
width: 55%; width: 55%;
height: 10%; height: 10%;
@@ -162,16 +123,46 @@
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
height: 45px; height: 45px;
z-index: 5; z-index: 5;
margin-left: -5px; margin-left: -8px;
} }
.wallet_elements{ .wallet_elements {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
} }
.wallet_text{ .wallet_text {
margin-inline: 10px; margin-inline: 10px;
} }
.login_elements {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.login_elements_box {
width: 134px;
height: 54px;
border-radius: 13px;
background: #5865F2;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.login_elements_text {
color: #000;
display: flex;
width: 88px;
height: 13px;
flex-direction: column;
justify-content: center;
text-align: center;
font-family: Montserrat;
font-size: 16px;
font-weight: 600;
}
.login_elements_img {
display: flex;
}

BIN
src/img/basic/DiscordLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 771 B

61
src/index.html
View File

@@ -1,16 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
<title>LUCKY DIAMOND</title> <title>LUCKY DIAMOND</title>
</head> </head>
<body style="background-color: #121212;"> <body style="background-color: #121212;">
<header> <header>
<div class="top_panel"> <div class="top_panel">
@@ -21,51 +25,38 @@
<div class="menu"> <div class="menu">
<div class="main_content"> <div class="main_content">
<a href="#"> <a href="#"><img src="img/svg/Главная.svg" class="main_div"></a>
<img src="img/svg/Главная.svg" class="main_div"></a>
</div> </div>
<a href="#" style="text-decoration: none;"><p class="header_other_text">Профиль</p></a> <a href="#" style="text-decoration: none;">
<a href="#" style="text-decoration: none;"><p class="header_other_text">Помощь</p></a> <p class="header_other_text_menu">Профиль</p>
</a>
<a href="#" style="text-decoration: none;">
<p class="header_other_text_menu">Помощь</p>
</a>
<div class="wallet_elements"> <div class="wallet_elements">
<div class="wallet_element_money"> <div class="wallet_element_money">
<img src="img/basic/BalanceLogoDiamondOre.png" alt="example image" class="wallet_element_image"> <img src="img/basic/BalanceLogoDiamondOre.png" alt="example image" class="wallet_element_image">
<div class="wallet_element_numbers">25000</div> <div class="wallet_element_numbers">25000</div>
</div> </div>
<div class="wallet_element"> <div class="wallet_element">
<p class="header_other_text wallet_text">Кошелёк</p> <a href="#" style="text-decoration: none;"><p class="header_other_text wallet_text">Кошелёк</p></a>
</div> </div>
</div>
<div class="login_elements">
<div class="login_elements_box">
<a href="#" style="text-decoration: none;"><p class="login_elements_text">ВОЙТИ</p></a>
<img class="login_elements_img" src="img/basic/DiscordLogo.png">
</div>
</div> </div>
</div> </div>
<div class="bal"></div> </div>
<!-- <div class="bal_bac"></div>
<a href="#"><button class="bal_button"></button></a>
<img class="bal_img" src="img/basic/BalanceLogoDiamondOre.png">
<p class="bal_text">25000</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 class="diamond-container">
</div> -->
<div class="left_panel"></div> <div class="left_panel"></div>
</header> </header>
<main> <main>
</main> </main>
</body> </body>
</html> </html>