From 20e43036eb3e321987cb04d4e9553f80a7d90014 Mon Sep 17 00:00:00 2001 From: OrelAshush123 Date: Sun, 10 Sep 2023 23:07:08 +0300 Subject: [PATCH] Add shape to the website. --- src/css/style.css | 161 +++++++++++++++++++++++++++++++++++++++++++++- src/index.html | 56 ++++++++++++++++ 2 files changed, 216 insertions(+), 1 deletion(-) diff --git a/src/css/style.css b/src/css/style.css index 4d54a30..a68db5e 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -29,4 +29,163 @@ font-style: normal; font-weight: 800; src: url('../fonts/montserrat-alternates-v17-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ - } \ No newline at end of file + } + + body::after { + content: ""; + background-image: url('../img/main/BG/BG.png'); /* Замените на реальный путь к вашей прозрачной картинке */ + opacity: 1; /* Уровень прозрачности (0 - полностью прозрачно, 1 - непрозрачно) */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; /* Позволяет положить этот слой под остальные элементы */ + background-size: cover; + } + .sidebar { + background-color: #1D202B; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-top: 20px; + height: 100vh; + position: fixed; + top: 0; + left: 0; /* Добавьте это свойство, чтобы прижать к правому краю */ + background-image: url('../img/basic/sidebgcolor.png'); /* Замените путь к вашей фоновой картинке */ + background-size: cover; + } + .header { + display: flex; + flex-direction: column; + align-items: left; + text-align: center; + margin-top: 36px; + margin-left: 138px; + } + .WebSiteNameUp { + width: 63px; + height: 17px; + flex-shrink: 0; + color: #FFB400; + text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.25); + font-family: 'Montserrat Alternates', sans-serif; + font-size: 10px; + font-style: normal; + font-weight: 800; + line-height: normal; + } + .WebSiteName { + width: 220px; + height: 36px; + flex-shrink: 0; + color: #B6AAAA; + text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.25); + font-family: 'Montserrat Alternates', sans-serif; + font-size: 22px; + font-style: normal; + font-weight: 700; + line-height: normal; + } + .top-texts { + margin-top: 15px; + display: flex; + justify-content: center; /* Измените на flex-end, чтобы прижать тексты к правому краю */ + align-items: center; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100px; /* Высота блока с текстами (можете изменить по необходимости) */ + } + .top-text { + width: 91px; + height: 17px; + flex-shrink: 0; + color: #FFF; + font-family: 'Montserrat Alternates', sans-serif; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: normal; + margin: 0 30px; /* Расстояние между текстами */ + } + .top-text.active { + color: #FFB400; /* Измените цвет текста кнопки Главная */ + } + .profile-panel { + width: 10%; + height: 2%; + flex-shrink: 0; + border-radius: 10px; + background: #1D202B; + background: url(), lightgray 50% / cover no-repeat; + box-shadow: 4px 3px 4px 0px rgba(0, 0, 0, 0.25); + position: fixed; + top: 0px; /* Расстояние от верхнего края */ + right: 0px; /* Расстояние от правого края */ + z-index: 1; /* Уровень слоя, чтобы панель была поверх других элементов */ + } + .chat-panel{ + width: 10%; + height: 92; + flex-shrink: 0; + border-radius: 10px; + background: #1D202B; + background: url(), lightgray 50% / cover no-repeat; + box-shadow: 4px 3px 4px 0px rgba(0, 0, 0, 0.25); + position: fixed; + bottom: 0px; /* Расстояние от верхнего края */ + right: 0px; /* Расстояние от правого края */ + z-index: 1; /* Уровень слоя, чтобы панель была поверх других элементов */ + } + /* Добавьте содержимое вашей панели здесь */ + .top-text.active::after { + content: ""; + width: 77.062px; + height: 0px; + flex-shrink: 0; + stroke-width: 2.3px; + stroke: #FFB400; /* Измените цвет линии под текстом Главная */ + display: inline-block; + margin-left: 5px; /* Оставьте зазор таким же, как вам нужно */ + } + .sidebar { + width: 6%; + background-color: #1D202B; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-top: 3%; + height: 100vh; + position: fixed; + top: 0; + } + .icon { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 40px; /* Расстояние между картинками (измените на нужное значение) */ + } + + .icon img { + float: left; + width: 60%; + height: 60%; + } + .banner { + width: 900px; + height: 280px; + flex-shrink: 0; + border-radius: 27px; + background: url(), lightgray 50% / cover no-repeat; + box-shadow: 10px 10px 8px 0px rgba(0, 0, 0, 0.25); + margin: 1% 24% 0 auto; /* Отступ сверху 135px и центрирование по горизонтали */ + display: flex; + justify-content: center; + align-items: center; + } + diff --git a/src/index.html b/src/index.html index e69de29..d2eb6b1 100644 --- a/src/index.html +++ b/src/index.html @@ -0,0 +1,56 @@ + + + + + + + LuckyDiamond Casino + + +
+
PLAY NOW
+
LUCKY DIAMOND
+
+ +
+
Главная
+
Профиль
+
Помощь
+
+ +
+ +
+
+ +
+ +
+
+ Изображение 1 +
+ +
+ Изображение 1 +
+ +
+ Изображение 2 +
+ +
+ Изображение 3 +
+ +
+ Изображение 4 +
+ +
+ Изображение 5 +
+
+ + \ No newline at end of file