diff --git a/fonts/Muller-Trial-Black.woff2 b/fonts/Muller-Trial-Black.woff2 new file mode 100644 index 0000000..e1da7a0 Binary files /dev/null and b/fonts/Muller-Trial-Black.woff2 differ diff --git a/fonts/Muller-Trial-Bold.woff2 b/fonts/Muller-Trial-Bold.woff2 new file mode 100644 index 0000000..3371656 Binary files /dev/null and b/fonts/Muller-Trial-Bold.woff2 differ diff --git a/fonts/Muller-Trial-ExtraBold.woff2 b/fonts/Muller-Trial-ExtraBold.woff2 new file mode 100644 index 0000000..8607117 Binary files /dev/null and b/fonts/Muller-Trial-ExtraBold.woff2 differ diff --git a/fonts/Muller-Trial-Medium.woff2 b/fonts/Muller-Trial-Medium.woff2 new file mode 100644 index 0000000..d7650b0 Binary files /dev/null and b/fonts/Muller-Trial-Medium.woff2 differ diff --git a/fonts/Muller-Trial-Regular.woff2 b/fonts/Muller-Trial-Regular.woff2 new file mode 100644 index 0000000..e8afc04 Binary files /dev/null and b/fonts/Muller-Trial-Regular.woff2 differ diff --git a/fonts/Muller/Muller-ExtraBold-DEMO.eot b/fonts/Muller/Muller-ExtraBold-DEMO.eot deleted file mode 100644 index f3e37df..0000000 Binary files a/fonts/Muller/Muller-ExtraBold-DEMO.eot and /dev/null differ diff --git a/fonts/Muller/Muller-ExtraBold-DEMO.woff b/fonts/Muller/Muller-ExtraBold-DEMO.woff deleted file mode 100644 index e90fd4a..0000000 Binary files a/fonts/Muller/Muller-ExtraBold-DEMO.woff and /dev/null differ diff --git a/fonts/Muller/Muller-ExtraBold-DEMO.woff2 b/fonts/Muller/Muller-ExtraBold-DEMO.woff2 deleted file mode 100644 index 14e911a..0000000 Binary files a/fonts/Muller/Muller-ExtraBold-DEMO.woff2 and /dev/null differ diff --git a/fonts/Muller/Muller-Thin-DEMO.eot b/fonts/Muller/Muller-Thin-DEMO.eot deleted file mode 100644 index 50603dd..0000000 Binary files a/fonts/Muller/Muller-Thin-DEMO.eot and /dev/null differ diff --git a/fonts/Muller/Muller-Thin-DEMO.woff b/fonts/Muller/Muller-Thin-DEMO.woff deleted file mode 100644 index 982a80f..0000000 Binary files a/fonts/Muller/Muller-Thin-DEMO.woff and /dev/null differ diff --git a/fonts/Muller/Muller-Thin-DEMO.woff2 b/fonts/Muller/Muller-Thin-DEMO.woff2 deleted file mode 100644 index 478bf6f..0000000 Binary files a/fonts/Muller/Muller-Thin-DEMO.woff2 and /dev/null differ diff --git a/images/About/Background/bcg.jpg b/images/About/Background/bcg.jpg new file mode 100644 index 0000000..e791235 Binary files /dev/null and b/images/About/Background/bcg.jpg differ diff --git a/images/About/Circle/Ellipse 3.svg b/images/About/Circle/Ellipse 3.svg deleted file mode 100644 index 69557cb..0000000 --- a/images/About/Circle/Ellipse 3.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/images/About/Circle/Ellipse 5.svg b/images/About/Circle/Ellipse 5.svg deleted file mode 100644 index 39ec50c..0000000 --- a/images/About/Circle/Ellipse 5.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - -
 - - - - - - - - - - - - - - diff --git a/images/About/Circle/Ellipse 6.svg b/images/About/Circle/Ellipse 6.svg deleted file mode 100644 index aaed2bb..0000000 --- a/images/About/Circle/Ellipse 6.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - -
 - - - - - - - - - - - - - - diff --git a/images/About/Circle/Ellipse 7.svg b/images/About/Circle/Ellipse 7.svg deleted file mode 100644 index 3e40e74..0000000 --- a/images/About/Circle/Ellipse 7.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - -
 - - - - - - - - - - - - - - diff --git a/images/About/Circle/index.svg b/images/About/Circle/index.svg deleted file mode 100644 index dd42390..0000000 --- a/images/About/Circle/index.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/images/About/Circle/Бирка.png b/images/About/Circle/Бирка.png new file mode 100644 index 0000000..19c7999 Binary files /dev/null and b/images/About/Circle/Бирка.png differ diff --git a/index.html b/index.html index 85f30dd..2ba0014 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@
-
+
@@ -28,9 +28,9 @@ fill="#606571" />
-
+
38 (097) 970-90-90 -
-
+ +38 (097) 970-90-90 + +
@@ -40,7 +40,7 @@
м. Лубянка -
+
+
Листайте вниз
-
-
24
-
Можно шуметь
-
Круглосуточно
+
+
-
+
+ +
+
+
Связаться с нами
+ - -
-
Связаться с нами
+
+
+
@@ -189,6 +194,7 @@
+ diff --git a/style.css b/style.css index 9e10034..4a24708 100644 --- a/style.css +++ b/style.css @@ -1,28 +1,37 @@ @font-face { font-family: "Muller"; - src: url("/fonts/Muller/Muller-Thin-DEMO.woff2") format("woff2"), - url("/fonts/Muller/Muller-Thin-DEMO.eot") format("eot"), - url("/fonts/Muller/Muller-Thin-DEMO.woff") format("woff"); + src: url("/fonts/Muller-Trial-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } - @font-face { font-family: "Muller"; - src: url("/fonts/Muller/Muller-ExtraBold-DEMO.woff2") format("woff2"), - url("/fonts/Muller/Muller-ExtraBold-DEMO.eot") format("eot"), - url("/fonts/Muller/Muller-ExtraBold-DEMO.woff") format("woff"); + src: url("/fonts/Muller-Trial-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } -.plus { - font-family: Arial, Helvetica, sans-serif; - font-weight: 100; - opacity: 0.5; - font-size: 16px; - margin: 2px; +@font-face { + font-family: "Muller"; + src: url("/fonts/Muller-Trial-Black.woff2") format("woff2"); + font-weight: 900; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Muller"; + src: url("/fonts/Muller-Trial-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Muller"; + src: url("/fonts/Muller-Trial-ExtraBold.woff2") format("woff2"); + font-weight: 800; + font-style: normal; + font-display: swap; } html, body { @@ -40,15 +49,19 @@ html, body { } .header { position: fixed; - height: 140px; display: flex; + height: 100px; + padding: 20px 51px 20px 39px; justify-content: space-between; width: 100%; border-bottom: 5px dashed #191820; + background: linear-gradient(rgba(96, 101, 113, 0.05), rgba(96, 101, 113, 100) 1000%); + background-color: rgba(0, 0, 0, 0); + background-color: #000; + z-index: 100; } .container { max-width: 1818px; - padding: 40px 51px 0px 39px; margin: 0 auto; width: 100%; height: 100%; @@ -64,7 +77,11 @@ html, body { } .img_logo { height: 100%; - width: 100%; + width: 80%; + transition: all .3s; +} +.img_logo:hover { + transform: scale(1.05); } .header_contacts { display: flex; @@ -77,8 +94,13 @@ html, body { align-items: center; justify-content: center; color: #fff; - font-size: 15px; + font-size: 13px; margin-right: 40px; + transition: all .1s; +} +.header_call:hover { + transform: scale(1.03); + color: #F69020; } .header_call_svg { display: flex; @@ -91,8 +113,8 @@ html, body { } .header_map_svg svg { display: block; - width: 29px; - height: 29px; + width: 25px; + height: 25px; } .header_map { @@ -101,7 +123,12 @@ html, body { justify-content: center; color: #fff; gap: 17px; - font-size: 15px; + font-size: 13px; + transition: all .1s; +} +.header_map:hover { + transform: scale(1.03); + color: #F69020; } .header_map_svg { display: flex; @@ -133,6 +160,13 @@ html, body { border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; margin-right: 25px; + transition: all .3s; +} +.header_btn_about:hover { + background-color: #fff; + color: #000; + border: none; + transform: scale(1.03); } .header_btn_reserv { border-radius: 40px; @@ -142,36 +176,62 @@ html, body { font-weight: 700; font-size: 13px; letter-spacing: 5%; + background-color: #fff; + border: 1px solid rgba(255, 255, 255, 0.5); + transition: all .3s; +} +.header_btn_reserv:hover { + background-color: transparent; + border: 1px solid rgba(255, 255, 255, 0.5); + color: #fff; + transform: scale(1.03); } /* --------------------------------------------------------------------------------------------------- */ .about { - padding-top: 180px; display: flex; flex-direction: column; height: 100%; - background: url("./images/About/Background/dancer.png") 70%; - background-repeat: no-repeat; - background-size: contain; + padding-top: 100px; + } + .about_inner { + position: relative; display: flex; height: 100%; + width: 100%; + background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/About/Background/bcg.jpg") 100% 100%; + background-repeat: no-repeat; + background-position: right; + overflow: hidden; +} +.about_inner::before { + position: absolute; + display: block; + content: ''; + background-color: #000; + filter: brightness(0.7) drop-shadow(5px 5px 10px #000000); + width: 100%; + height: 100%; + opacity: 0.8; } .about_content { color: white; margin-left: 51px; - width: 50%; + width: 40%; + z-index: 1; + position: relative; } .about_heading { - font-size: 32px; + font-size: 26px; text-transform: uppercase; margin-bottom: 25px; + margin-top: 30px; } .about_title { - font-size: 60px; + font-size: 46px; text-transform: uppercase; font-weight: 900; - margin-right: 60px; } .about_title span { font-size: 15px; @@ -191,52 +251,143 @@ html, body { align-items: center; justify-content: center; margin-right: 21px; + font-size: 14px; } .row_if svg { margin-right: 11px; } .about_button { +} +.plus_about { + position: absolute; + bottom: 100px; + right: 0; + display: flex; + transform: rotate(-90deg); + width: max-content; + text-transform: uppercase; + font-size: 8px; + font-weight: 700; + letter-spacing: 20%; + color: #606571; } .button { - - padding: 25px 35px; + padding: 20px 30px; border-radius: 60px; text-transform: uppercase; - font-size: 13px; + font-size: 12px; letter-spacing: 5%; font-weight: 700; background: linear-gradient(93.25deg, #EA422A 0%, #F69020 48.58%, #FFC619 101.38%); + transition: all .3s; +} +.button:hover { + transform: scale(1.03); } .about_image { - width: 50%; + width: 65%; + display: flex; + justify-content: space-between; + align-items: end; + overflow: hidden; +} +.about_img_circle { + display: flex; + align-items: end; height: 100%; + width: 100%; + z-index: 1; } -.about_info { - color: #fff; +.about_img_circle img { + width: 309px; + height: 309px; } -.about_info_index { +.about_img_box { + position: relative; + height: 100%; + width: 100%; + z-index: 1; } -.about_info_heading { +.about_img_box::before { + position: absolute; + top: 260px; + right: 130px; + display: block; + content: ''; + width: 80%; + height: 80%; + background: url("images/About/Background/Microphone.png") 100% 100%; + background-position: right; + background-repeat: no-repeat; + background-size: contain; + z-index: 5; } -.about_info_title { +.about_img_dance { + position: absolute; + top: 110px; + right: 100px; + transform: scale(1.4); + width: 90%; + height: 100%; + z-index: 3; } -.about_svg { +.about_img_dance img { + +} +.about_tg { + display: flex; + align-items: center; + justify-content: center; + transform: rotate(-90deg); + white-space: nowrap; + margin-bottom: 120px; } .about_reverse_text { + font-size: 9px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 20%; + color: #F69020; + +} +.about_svg { + display: flex; + align-items: center; + justify-content: center; + transform: rotate(90deg); + padding: 20px; + background: linear-gradient(217.04deg, #FFC619 21.5%, #F69020 48.98%, #EC5128 80.77%); + border-radius: 50%; + margin-left: 45px; + border: 2px solid; +} +.about_svg:hover #telegram { + fill: #F69020; +} +.about_svg:hover { + border: 2px solid #F69020; + background: transparent; +} +.about_svg svg { + width: 25px; + height: 25px; } .about_row { color: #fff; + } .about_list { - display: flex; - + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 100px; + z-index: 20; } .about_item { display: flex; align-items: center; - width: 25%; - padding: 30px 50px; + padding-left: 30px; + font-size: 13px; } .about_item_light { background-color: rgba(40, 43, 50, 1); @@ -246,12 +397,12 @@ html, body { } .about_item svg { display: block; - width: 70px; - height: 70px; + width: 50px; + height: 50px; } .about_item span { display: block; - width: 34px; + min-width: 20px; height: 1px; background-color: rgba(255, 198, 25, 0.3); margin: 0px 21px 0px 18px;