diff --git a/style.css b/style.css index 4a24708..8b3def4 100644 --- a/style.css +++ b/style.css @@ -1,40 +1,45 @@ @font-face { - font-family: "Muller"; - 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-Trial-Bold.woff2") format("woff2"); - font-weight: 700; - font-style: normal; - font-display: swap; -} -@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; + font-family: "Muller"; + src: url("/fonts/Muller-Trial-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; } -html, body { +@font-face { + font-family: "Muller"; + src: url("/fonts/Muller-Trial-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@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 { height: 100%; width: 100%; font-family: "Muller", sans-serif; @@ -42,17 +47,19 @@ html, body { font-weight: 400; letter-spacing: 3%; } + .wrapper { height: 100%; background: linear-gradient(rgba(96, 101, 113, 0.05), rgba(96, 101, 113, 100) 150%); background-color: black; } + .header { position: fixed; display: flex; height: 100px; padding: 20px 51px 20px 39px; - justify-content: space-between; + 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%); @@ -60,35 +67,42 @@ html, body { background-color: #000; z-index: 100; } + .container { max-width: 1818px; margin: 0 auto; width: 100%; height: 100%; } + .header_body { display: flex; justify-content: space-between; align-items: center; } + .header_logo { max-width: 293px; max-height: 67px; } + .img_logo { height: 100%; width: 80%; transition: all .3s; } + .img_logo:hover { transform: scale(1.05); } + .header_contacts { display: flex; align-items: center; justify-content: center; margin: 0 20px; } + .header_call { display: flex; align-items: center; @@ -98,10 +112,12 @@ html, body { margin-right: 40px; transition: all .1s; } + .header_call:hover { transform: scale(1.03); color: #F69020; } + .header_call_svg { display: flex; align-items: center; @@ -111,6 +127,7 @@ html, body { padding: 15px; margin-right: 17px; } + .header_map_svg svg { display: block; width: 25px; @@ -126,10 +143,12 @@ html, body { font-size: 13px; transition: all .1s; } + .header_map:hover { transform: scale(1.03); color: #F69020; } + .header_map_svg { display: flex; align-items: center; @@ -138,16 +157,19 @@ html, body { border-radius: 50%; padding: 15px; } + .header_map_svg svg { display: block; width: 29px; height: 29px; } + .header_buttons { display: flex; align-items: center; justify-content: center; } + .header_btn_about { border-radius: 40px; padding: 20px; @@ -162,12 +184,14 @@ html, body { 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; padding: 20px; @@ -180,19 +204,21 @@ html, body { 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 { display: flex; flex-direction: column; height: 100%; padding-top: 100px; - + } .about_inner { @@ -200,11 +226,12 @@ html, body { 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: 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; @@ -215,6 +242,7 @@ html, body { height: 100%; opacity: 0.8; } + .about_content { color: white; margin-left: 51px; @@ -222,17 +250,20 @@ html, body { z-index: 1; position: relative; } + .about_heading { font-size: 26px; text-transform: uppercase; margin-bottom: 25px; margin-top: 30px; } + .about_title { font-size: 46px; text-transform: uppercase; font-weight: 900; } + .about_title span { font-size: 15px; font-weight: 400; @@ -242,10 +273,12 @@ html, body { border-radius: 60px; vertical-align: middle; } + .about_row_if { display: flex; margin: 20px 0; } + .row_if { display: flex; align-items: center; @@ -253,12 +286,13 @@ html, body { margin-right: 21px; font-size: 14px; } + .row_if svg { margin-right: 11px; } -.about_button { -} +.about_button {} + .plus_about { position: absolute; bottom: 100px; @@ -272,6 +306,7 @@ html, body { letter-spacing: 20%; color: #606571; } + .button { padding: 20px 30px; border-radius: 60px; @@ -282,9 +317,11 @@ html, body { 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: 65%; display: flex; @@ -292,6 +329,7 @@ html, body { align-items: end; overflow: hidden; } + .about_img_circle { display: flex; align-items: end; @@ -299,16 +337,19 @@ html, body { width: 100%; z-index: 1; } + .about_img_circle img { width: 309px; height: 309px; } + .about_img_box { position: relative; height: 100%; width: 100%; z-index: 1; } + .about_img_box::before { position: absolute; top: 260px; @@ -323,6 +364,7 @@ html, body { background-size: contain; z-index: 5; } + .about_img_dance { position: absolute; top: 110px; @@ -332,9 +374,9 @@ html, body { height: 100%; z-index: 3; } -.about_img_dance img { - -} + +.about_img_dance img {} + .about_tg { display: flex; align-items: center; @@ -343,6 +385,7 @@ html, body { white-space: nowrap; margin-bottom: 120px; } + .about_reverse_text { font-size: 9px; font-weight: 700; @@ -351,6 +394,7 @@ html, body { color: #F69020; } + .about_svg { display: flex; align-items: center; @@ -362,44 +406,54 @@ html, body { 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: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px; z-index: 20; } + .about_item { display: flex; align-items: center; padding-left: 30px; font-size: 13px; } + .about_item_light { background-color: rgba(40, 43, 50, 1); } + .about_item_dark { background-color: rgba(32, 33, 36, 1); } + .about_item svg { display: block; width: 50px; height: 50px; } + .about_item span { display: block; min-width: 20px;