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

123

Browse Source
This commit is contained in:
Bloody
2023-09-29 12:09:57 +07:00
parent 3689ab10fe
commit 5f18053f10
3 changed files with 122 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/css/style.css
View File

@@ -1,12 +1,59 @@
.rectangle-77, .rectangle-77 * {
box-sizing: border-box;
}
.rectangle-77 {
background: #17181c;
border-radius: 20px;
width: 1362px;
.top_panel {
width: auto;
height: 87px;
position: relative;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
background: #17181C;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
margin-left: 105px;
margin-top: 7px;
}
.top_panel {
width: auto;
height: 87px;
background: #17181C;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
margin-left: 105px;
margin-top: 7px;
}
.top_panel {
width: auto;
height: 87px;
background: #17181C;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
margin-left: 105px;
margin-top: 7px;
}
.left_box{
width: 88px;
height: auto;
}
.left_panel {
width: 88px;
height: auto;
background: #17181C;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
margin-left: 8px;
padding-top: 100%;
margin-top: -86px;
}
.main_box{
width: 1165px;
height: 240px;
border-radius: 40px;
background: #EF4444;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
position: absolute;
top: 50%;
left: 10%;
}

56
src/img/svg/Group 3.svg Normal file
View File

@@ -0,0 +1,56 @@
<svg width="88" height="956" viewBox="0 0 88 956" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_378_57)">
<rect width="88" height="964.495" fill="#17181C"/>
</g>
<g filter="url(#filter1_d_378_57)">
<path d="M6 29C6 17.9543 14.9543 9 26 9H59C70.0457 9 79 17.9543 79 29V62C79 73.0457 70.0457 82 59 82H26C14.9543 82 6 73.0457 6 62V29Z" fill="#D9D9D9" fill-opacity="0.12" shape-rendering="crispEdges"/>
</g>
<g filter="url(#filter2_d_378_57)">
<path d="M7 895C7 883.954 15.9543 875 27 875H60C71.0457 875 80 883.954 80 895V928C80 939.046 71.0457 948 60 948H27C15.9543 948 7 939.046 7 928V895Z" fill="#D9D9D9" fill-opacity="0.12" shape-rendering="crispEdges"/>
</g>
<g filter="url(#filter3_d_378_57)">
<path d="M7 207C7 195.954 15.9543 187 27 187H60C71.0457 187 80 195.954 80 207V571C80 582.046 71.0457 591 60 591H27C15.9543 591 7 582.046 7 571V207Z" fill="#D9D9D9" fill-opacity="0.12" shape-rendering="crispEdges"/>
</g>
<defs>
<filter id="filter0_d_378_57" x="-4" y="0" width="96" height="972.495" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_378_57"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_378_57" result="shape"/>
</filter>
<filter id="filter1_d_378_57" x="6" y="9" width="81" height="81" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="4" dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_378_57"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_378_57" result="shape"/>
</filter>
<filter id="filter2_d_378_57" x="7" y="875" width="81" height="81" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="4" dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_378_57"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_378_57" result="shape"/>
</filter>
<filter id="filter3_d_378_57" x="7" y="187" width="81" height="412" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="4" dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_378_57"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_378_57" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

61
src/index.html
View File

@@ -7,60 +7,17 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<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 rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>LUCKY DIAMOND</title>
</head>
<body style="background-color: #121212;">
<div style="width: 100%; height: 100%; position: relative; background: #121212">
<div style="width: 88px; height: 957px; left: 4px; top: 0px; position: absolute; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px">
<div style="width: 88px; height: 956px; left: 0px; top: 4px; position: absolute; border-radius: 20px; overflow: hidden">
<div style="width: 88px; height: 964.50px; left: 0px; top: 0px; position: absolute; background: #17181C"></div>
<div style="width: 73px; height: 73px; left: 6px; top: 9px; position: absolute; background: rgba(217, 217, 217, 0.28); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
<div style="width: 73px; height: 73px; left: 7px; top: 875px; position: absolute; background: rgba(217, 217, 217, 0.12); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
<div style="width: 73px; height: 401px; left: 7px; top: 190px; position: absolute; background: rgba(217, 217, 217, 0.12); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
<div style="width: 52px; height: 52px; left: 20px; top: 521px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 10px"></div>
<div style="width: 60px; height: 60px; left: 14px; top: 882px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 10px"></div>
<div style="width: 50.19px; height: 49.94px; left: 19px; top: 346px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25)"></div>
<img style="width: 60px; height: 33px; left: 16px; top: 281px; position: absolute; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25)" src="https://via.placeholder.com/60x33" />
<div style="width: 53px; height: 48px; left: 16px; top: 208px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25)"></div>
</div>
<div style="width: 1362px; height: 87px; left: 95px; top: 4px; position: absolute; background: #17181C; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
</div>
<div style="width: 87px; height: 17px; left: 562px; top: 32px; position: absolute; color: #EF4444; font-size: 18px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">Главная</div>
<div style="width: 91px; height: 17px; left: 724px; top: 35px; position: absolute; color: white; font-size: 18px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">Профиль</div>
<div style="width: 84px; height: 17px; left: 890px; top: 35px; position: absolute; color: white; font-size: 18px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">Помощь</div>
<div style="width: 77.06px; height: 0px; left: 564px; top: 56px; position: absolute; border: 2.30px #EF4444 solid"></div>
<div style="width: 139px; height: 48px; left: 1166px; top: 20px; position: absolute; background: #22252F; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 9px"></div>
<div style="width: 134px; height: 54px; left: 1273px; top: 17px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 13px"></div>
<div style="width: 59px; height: 15px; left: 1207px; top: 36px; position: absolute; color: white; font-size: 18px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">25000</div>
<div style="width: 88px; height: 13px; left: 1296px; top: 37px; position: absolute; color: black; font-size: 16px; font-family: Montserrat; font-weight: 600; word-wrap: break-word">КОШЕЛЁК</div>
<div style="width: 220px; height: 36px; left: 135px; top: 37px; position: absolute; color: white; font-size: 22px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">LUCKY DIAMOND</div>
<div style="width: 63px; height: 17px; left: 136px; top: 26px; position: absolute; color: #EF4444; font-size: 10px; font-family: Montserrat Alternates; font-weight: 800; word-wrap: break-word">PLAY NOW</div>
<img style="width: 28px; height: 28px; left: 1173px; top: 30px; position: absolute" src="https://via.placeholder.com/28x28" />
<div style="width: 403px; height: 87px; left: 1466px; top: 4px; position: absolute">
<div style="width: 403px; height: 87px; left: 0px; top: 0px; position: absolute; background: #17181C; box-shadow: 4px 3px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
<div style="width: 80.60px; height: 15.01px; left: 82.32px; top: 24px; position: absolute; color: white; font-size: 15px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">Artemka</div>
<img style="width: 51.81px; height: 54.03px; left: 15.35px; top: 17.01px; position: absolute; border-radius: 20px" src="https://via.placeholder.com/52x54" />
<div style="width: 90.94px; height: 27px; left: 79.45px; top: 44px; position: absolute">
<div style="width: 90.94px; height: 26px; left: -0px; top: 1px; position: absolute; background: #30323E; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); border-radius: 20px"></div>
<div style="width: 64.14px; height: 27px; left: 4.79px; top: 0px; position: absolute; color: rgba(255, 255, 255, 0.50); font-size: 14px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">ВЫХОД</div>
<img style="width: 16.27px; height: 16px; left: 66.05px; top: 6px; position: absolute; border-radius: 20px" src="https://via.placeholder.com/16x16" />
</div>
</div>
<div style="width: 1165px; height: 240px; left: 215px; top: 137px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 40px"></div>
<div style="width: 436px; height: 493px; left: 215px; top: 429px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 40px"></div>
<div style="width: 694px; height: 226px; left: 686px; top: 429px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 40px"></div>
<div style="width: 367px; height: 249px; left: 686px; top: 673px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 40px"></div>
<div style="width: 291px; height: 249px; left: 1089px; top: 673px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 40px"></div>
<div style="width: 884px; height: 299px; left: 356px; top: 104px; position: absolute; text-align: center; color: white; font-size: 91px; font-family: Montserrat Alternates; font-weight: 700; word-wrap: break-word">LUCKY DIAMOND</div>
<div style="width: 384px; height: 95px; left: 629px; top: 285px; position: absolute"><span style="color: white; font-size: 24px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">MINECRAFT CASINO - </span><span style="color: #CFEB21; font-size: 24px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">SPM</span></div>
<div style="width: 270px; height: 95px; left: 686px; top: 146px; position: absolute; color: white; font-size: 32px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">онлайн-казино</div>
<div style="width: 175px; height: 21px; left: 212px; top: 388px; position: absolute; color: white; font-size: 20px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">РЕЖИМЫ ИГРЫ</div>
<div style="width: 1165px; height: 0px; left: 215px; top: 415px; position: absolute; border-radius: 50px; border: 3px white solid"></div>
<div style="width: 392px; height: 785px; left: 1448px; top: 137px; position: absolute; background: #D9D9D9; border-radius: 30px"></div>
<div style="width: 50px; height: 50px; left: 24px; top: 439px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25)"></div>
<div style="width: 49px; height: 55px; left: 22px; top: 21px; position: absolute; background: #EF4444; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 4px"></div>
</div>
<header>
<div class="top_panel"></div>
<div class="left_panel"></div>
</header>
<main>
<div class="main_box"></div>
</main>
</body>
</html>