Alena/Figma_3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
Alena Trushcheva
2025-12-08 15:40:12 +02:00
parent 49d869835b
commit e7839c75f8
1 changed files with 97 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
style.css
View File

@@ -5,6 +5,7 @@
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-Bold.woff2") format("woff2");
@@ -12,6 +13,7 @@
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-Black.woff2") format("woff2");
@@ -19,6 +21,7 @@
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-Medium.woff2") format("woff2");
@@ -26,6 +29,7 @@
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Muller";
src: url("/fonts/Muller-Trial-ExtraBold.woff2") format("woff2");
@@ -34,7 +38,8 @@
font-display: swap;
}
html, body {
html,
body {
height: 100%;
width: 100%;
font-family: "Muller", sans-serif;
@@ -42,11 +47,13 @@ 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;
@@ -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,12 +204,14 @@ 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;
@@ -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;