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

figma_3 fonts&about

Browse Source
This commit is contained in:
Alena Trushcheva
2025-12-08 14:10:06 +02:00
parent 90bf9cdf5f
commit 49d869835b
20 changed files with 215 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
fonts/Muller-Trial-Black.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Muller-Trial-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Muller-Trial-ExtraBold.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Muller-Trial-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Muller-Trial-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Muller/Muller-ExtraBold-DEMO.eot
View File

Binary file not shown.

BIN
fonts/Muller/Muller-ExtraBold-DEMO.woff
View File

Binary file not shown.

BIN
fonts/Muller/Muller-ExtraBold-DEMO.woff2
View File

Binary file not shown.

BIN
fonts/Muller/Muller-Thin-DEMO.eot
View File

Binary file not shown.

BIN
fonts/Muller/Muller-Thin-DEMO.woff
View File

Binary file not shown.

BIN
fonts/Muller/Muller-Thin-DEMO.woff2
View File

Binary file not shown.

BIN
images/About/Background/bcg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

17
images/About/Circle/Ellipse 3.svg
View File

@@ -1,17 +0,0 @@
<svg width="348" height="348" viewBox="0 0 348 348" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_51_1000)">
<circle cx="174" cy="157" r="122" fill="#FFC619" fill-opacity="0.19" shape-rendering="crispEdges"/>
</g>
<defs>
<filter id="filter0_d_51_1000" x="0" y="0" width="348" height="348" 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="17"/>
<feGaussianBlur stdDeviation="26"/>
<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.58 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_51_1000"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_51_1000" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 945 B

20
images/About/Circle/Ellipse 5.svg
View File

@@ -1,20 +0,0 @@
<svg width="348" height="348" viewBox="0 0 348 348" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_51_1001)">
<mask id="path-1-inside-1_51_1001" fill="white">
<path d="M296 157C296 224.379 241.379 279 174 279C106.621 279 52 224.379 52 157C52 89.6213 106.621 35 174 35C241.379 35 296 89.6213 296 157Z"/>
</mask>
<g clip-path="url(#paint0_angular_51_1001_clip_path)" data-figma-skip-parse="true" mask="url(#path-1-inside-1_51_1001)"><g transform="matrix(0 0.122 -0.122 0 174 157)"><foreignObject x="-1057.38" y="-1057.38" width="2114.75" height="2114.75"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(250, 170, 28, 0.4962) 0deg,rgba(246, 144, 32, 0) 176.055deg,rgba(255, 198, 25, 1) 181.259deg,rgba(250, 170, 28, 0.4962) 360deg);height:100%;width:100%;opacity:0.66"></div></foreignObject></g></g><path d="M289 157C289 220.513 237.513 272 174 272V286C245.245 286 303 228.245 303 157H289ZM174 272C110.487 272 59 220.513 59 157H45C45 228.245 102.755 286 174 286V272ZM59 157C59 93.4873 110.487 42 174 42V28C102.755 28 45 85.7553 45 157H59ZM174 42C237.513 42 289 93.4873 289 157H303C303 85.7553 245.245 28 174 28V42Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.96470588445663452,&#34;g&#34;:0.56470590829849243,&#34;b&#34;:0.12549020349979401,&#34;a&#34;:0.0},&#34;position&#34;:0.48904117941856384},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.77647060155868530,&#34;b&#34;:0.098039217293262482,&#34;a&#34;:1.0},&#34;position&#34;:0.50349736213684082}],&#34;stopsVar&#34;:[],&#34;transform&#34;:{&#34;m00&#34;:1.4940692183874199e-14,&#34;m01&#34;:-244.0,&#34;m02&#34;:296.0,&#34;m10&#34;:244.0,&#34;m11&#34;:1.4940692183874199e-14,&#34;m12&#34;:35.0},&#34;opacity&#34;:0.66000002622604370,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}" mask="url(#path-1-inside-1_51_1001)"/>
</g>
<defs>
<filter id="filter0_d_51_1001" x="0" y="0" width="348" height="348" 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="17"/>
<feGaussianBlur stdDeviation="26"/>
<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.58 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_51_1001"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_51_1001" result="shape"/>
</filter>
<clipPath id="paint0_angular_51_1001_clip_path"><path d="M289 157C289 220.513 237.513 272 174 272V286C245.245 286 303 228.245 303 157H289ZM174 272C110.487 272 59 220.513 59 157H45C45 228.245 102.755 286 174 286V272ZM59 157C59 93.4873 110.487 42 174 42V28C102.755 28 45 85.7553 45 157H59ZM174 42C237.513 42 289 93.4873 289 157H303C303 85.7553 245.245 28 174 28V42Z" mask="url(#path-1-inside-1_51_1001)"/></clipPath></defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

20
images/About/Circle/Ellipse 6.svg
View File

@@ -1,20 +0,0 @@
<svg width="373" height="373" viewBox="0 0 373 373" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_51_1002)">
<mask id="path-1-inside-1_51_1002" fill="white">
<path d="M321 169.5C321 243.782 260.782 304 186.5 304C112.218 304 52 243.782 52 169.5C52 95.2177 112.218 35 186.5 35C260.782 35 321 95.2177 321 169.5Z"/>
</mask>
<g clip-path="url(#paint0_angular_51_1002_clip_path)" data-figma-skip-parse="true" mask="url(#path-1-inside-1_51_1002)"><g transform="matrix(0 0.1345 -0.1345 0 186.5 169.5)"><foreignObject x="-1014.87" y="-1014.87" width="2029.74" height="2029.74"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(255, 198, 24, 0.4962) 0deg,rgba(255, 198, 24, 0) 176.055deg,rgba(255, 198, 25, 1) 181.259deg,rgba(255, 198, 24, 0.4962) 360deg);height:100%;width:100%;opacity:0.4"></div></foreignObject></g></g><path d="M319 169.5C319 242.678 259.678 302 186.5 302V306C261.887 306 323 244.887 323 169.5H319ZM186.5 302C113.322 302 54 242.678 54 169.5H50C50 244.887 111.113 306 186.5 306V302ZM54 169.5C54 96.3223 113.322 37 186.5 37V33C111.113 33 50 94.1131 50 169.5H54ZM186.5 37C259.678 37 319 96.3223 319 169.5H323C323 94.1131 261.887 33 186.5 33V37Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.77647060155868530,&#34;b&#34;:0.098039209842681885,&#34;a&#34;:0.0},&#34;position&#34;:0.48904117941856384},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.77647060155868530,&#34;b&#34;:0.098039217293262482,&#34;a&#34;:1.0},&#34;position&#34;:0.50349736213684082}],&#34;stopsVar&#34;:[],&#34;transform&#34;:{&#34;m00&#34;:1.6471500948129006e-14,&#34;m01&#34;:-269.0,&#34;m02&#34;:321.0,&#34;m10&#34;:269.0,&#34;m11&#34;:1.6471500948129006e-14,&#34;m12&#34;:35.0},&#34;opacity&#34;:0.40000000596046448,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}" mask="url(#path-1-inside-1_51_1002)"/>
</g>
<defs>
<filter id="filter0_d_51_1002" x="0" y="0" width="373" height="373" 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="17"/>
<feGaussianBlur stdDeviation="26"/>
<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.58 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_51_1002"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_51_1002" result="shape"/>
</filter>
<clipPath id="paint0_angular_51_1002_clip_path"><path d="M319 169.5C319 242.678 259.678 302 186.5 302V306C261.887 306 323 244.887 323 169.5H319ZM186.5 302C113.322 302 54 242.678 54 169.5H50C50 244.887 111.113 306 186.5 306V302ZM54 169.5C54 96.3223 113.322 37 186.5 37V33C111.113 33 50 94.1131 50 169.5H54ZM186.5 37C259.678 37 319 96.3223 319 169.5H323C323 94.1131 261.887 33 186.5 33V37Z" mask="url(#path-1-inside-1_51_1002)"/></clipPath></defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

20
images/About/Circle/Ellipse 7.svg
View File

@@ -1,20 +0,0 @@
<svg width="296" height="296" viewBox="0 0 296 296" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_51_1003)">
<mask id="path-1-inside-1_51_1003" fill="white">
<path d="M244 131C244 184.019 201.019 227 148 227C94.9807 227 52 184.019 52 131C52 77.9807 94.9807 35 148 35C201.019 35 244 77.9807 244 131Z"/>
</mask>
<g clip-path="url(#paint0_angular_51_1003_clip_path)" data-figma-skip-parse="true" mask="url(#path-1-inside-1_51_1003)"><g transform="matrix(0 0.096 -0.096 0 148 131)"><foreignObject x="-1020.83" y="-1020.83" width="2041.67" height="2041.67"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(246, 144, 32, 0.4962) 0deg,rgba(246, 144, 32, 0) 176.055deg,rgba(246, 144, 32, 1) 181.259deg,rgba(246, 144, 32, 0.4962) 360deg);height:100%;width:100%;opacity:0.4"></div></foreignObject></g></g><path d="M242 131C242 182.915 199.915 225 148 225V229C202.124 229 246 185.124 246 131H242ZM148 225C96.0852 225 54 182.915 54 131H50C50 185.124 93.8761 229 148 229V225ZM54 131C54 79.0852 96.0852 37 148 37V33C93.8761 33 50 76.8761 50 131H54ZM148 37C199.915 37 242 79.0852 242 131H246C246 76.8761 202.124 33 148 33V37Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.96470588445663452,&#34;g&#34;:0.56470590829849243,&#34;b&#34;:0.12549020349979401,&#34;a&#34;:0.0},&#34;position&#34;:0.48904117941856384},{&#34;color&#34;:{&#34;r&#34;:0.96470588445663452,&#34;g&#34;:0.56470590829849243,&#34;b&#34;:0.12549020349979401,&#34;a&#34;:1.0},&#34;position&#34;:0.50349736213684082}],&#34;stopsVar&#34;:[],&#34;transform&#34;:{&#34;m00&#34;:1.1756609784817611e-14,&#34;m01&#34;:-192.0,&#34;m02&#34;:244.0,&#34;m10&#34;:192.0,&#34;m11&#34;:1.1756609784817611e-14,&#34;m12&#34;:35.0},&#34;opacity&#34;:0.40000000596046448,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}" mask="url(#path-1-inside-1_51_1003)"/>
</g>
<defs>
<filter id="filter0_d_51_1003" x="0" y="0" width="296" height="296" 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="17"/>
<feGaussianBlur stdDeviation="26"/>
<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.58 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_51_1003"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_51_1003" result="shape"/>
</filter>
<clipPath id="paint0_angular_51_1003_clip_path"><path d="M242 131C242 182.915 199.915 225 148 225V229C202.124 229 246 185.124 246 131H242ZM148 225C96.0852 225 54 182.915 54 131H50C50 185.124 93.8761 229 148 229V225ZM54 131C54 79.0852 96.0852 37 148 37V33C93.8761 33 50 76.8761 50 131H54ZM148 37C199.915 37 242 79.0852 242 131H246C246 76.8761 202.124 33 148 33V37Z" mask="url(#path-1-inside-1_51_1003)"/></clipPath></defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

8
images/About/Circle/index.svg
View File

@@ -1,8 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 24C7 33.4 14.6 41 24 41C33.4 41 41 33.4 41 24C41 14.6 33.4 7 24 7C14.6 7 7 14.6 7 24Z" fill="#131517"/>
<path d="M24 44C13 44 4 35 4 24C4 13 13 4 24 4C28.7 4 33.3 5.7 36.9 8.8L34.3 11.8C31.5 9.3 27.8 8 24 8C15.2 8 8 15.2 8 24C8 32.8 15.2 40 24 40V44Z" fill="#606571"/>
<path d="M27 12L19 6L27 0V12Z" fill="#FFC619"/>
<path d="M11 24C11 24.6 10.6 25 10 25H7V23H10C10.6 23 11 23.4 11 24ZM24 37C23.4 37 23 37.4 23 38V41H25V38C25 37.4 24.6 37 24 37ZM38 23C37.4 23 37 23.4 37 24C37 24.6 37.4 25 38 25H41V23H38Z" fill="white"/>
<path d="M24 44C13 44 4 35 4 24C4 19.3 5.7 14.7 8.8 11.1L11.8 13.7C9.3 16.5 8 20.2 8 24C8 32.8 15.2 40 24 40C32.8 40 40 32.8 40 24C40 15.2 32.8 8 24 8V4C35 4 44 13 44 24C44 35 35 44 24 44Z" fill="#FFC619"/>
<path d="M23 30H15V28.2L18.8 24.2C19.7 23.1 20.2 22.3 20.2 21.7C20.2 21.2 20.1 20.8 19.9 20.5C19.7 20.2 19.4 20.1 18.9 20.1C18.5 20.1 18.1 20.3 17.9 20.6C17.6 21 17.5 21.4 17.5 21.9H15C15 21.2 15.2 20.5 15.5 19.9C15.9 19.3 16.4 18.8 17 18.5C17.6 18.2 18.1 18 18.9 18C20.2 18 21.2 18.3 21.9 18.9C22.6 19.5 22.9 20.3 22.9 21.4C22.9 21.9 22.8 22.3 22.6 22.8C22.4 23.2 22.2 23.7 21.8 24.2C21.4 24.7 20.8 25.3 20 26.1L18.6 28H23V30ZM31.8 26H33V28H31.8V30H29V28H24.4L24.2 26.4L29 18H31.8V26ZM26.8 26H29V21.6L28.8 21.9L26.8 26Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
images/About/Circle/Бирка.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

32
index.html
View File

@@ -19,7 +19,7 @@
<img class="img_logo" src="images/Header/Logo.svg" alt="Logo"> <img class="img_logo" src="images/Header/Logo.svg" alt="Logo">
</a> </a>
<div class="header_contacts"> <div class="header_contacts">
<div class="header_call"> <a class="header_call" href="tel:+380979709090">
<div class="header_call_svg"> <div class="header_call_svg">
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" <svg width="27" height="27" viewBox="0 0 27 27" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@@ -28,9 +28,9 @@
fill="#606571" /> fill="#606571" />
</svg> </svg>
</div> </div>
<div class="plus">+</div>38 (097) 970-90-90 +38 (097) 970-90-90
</div> </a>
<div class="header_map"> <a class="header_map" href="#">
<div class="header_map_svg"> <div class="header_map_svg">
<svg width="20" height="29" viewBox="0 0 20 29" fill="none" <svg width="20" height="29" viewBox="0 0 20 29" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@@ -40,7 +40,7 @@
</svg> </svg>
</div> </div>
м. Лубянка м. Лубянка
</div> </a>
</div> </div>
<div class="header_buttons"> <div class="header_buttons">
<button class="header_btn_about"> <button class="header_btn_about">
@@ -95,22 +95,27 @@
<button class="about_button button"> <button class="about_button button">
Забронировать онлайн Забронировать онлайн
</button> </button>
<div class="plus_about">Листайте вниз</div>
</div> </div>
<div class="about_image"> <div class="about_image">
<div class="about_info"> <div class="about_img_circle">
<div class="about_info_index">24</div> <img src="images/About/Circle/Бирка.png" alt="">
<div class="about_info_heading">Можно шуметь</div>
<div class="about_info_title">Круглосуточно</div>
</div> </div>
<div class="about_svg"> <div class="about_img_box">
<img class="about_img_dance" src="images/About/Background/dancer.png" alt="">
</div>
<div class="about_tg">
<div class="about_reverse_text">Связаться с нами</div>
<a class="about_svg" href="#">
<svg width="28" height="26" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="28" height="26" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path id="telegram"
d="M25.8467 0.002207C25.4674 0.0189382 25.1141 0.1294 24.8031 0.255137C24.5117 0.372344 23.3984 0.849832 21.6449 1.60182C19.8898 2.35446 17.5659 3.35218 15.0869 4.41822C10.129 6.55031 4.55491 8.9503 1.69987 10.1786C1.59251 10.2248 1.21791 10.3445 0.820312 10.6549C0.422717 10.9653 0 11.6085 0 12.3251C0 12.903 0.275412 13.4771 0.62207 13.8199C0.968728 14.1627 1.33554 14.332 1.64974 14.4602C2.78977 14.9254 6.32549 16.3723 6.99316 16.6454C7.22814 17.3652 8.50791 21.2801 8.80469 22.2395C9.00033 22.8727 9.18656 23.2692 9.42904 23.5839C9.55027 23.7413 9.6912 23.8792 9.86198 23.9872C9.93024 24.0304 10.0051 24.0637 10.0807 24.0943L10.0853 24.0966C10.1027 24.1036 10.1177 24.1155 10.1354 24.1217C10.1688 24.1333 10.1911 24.1347 10.2357 24.1445C10.4134 24.2019 10.5928 24.2379 10.7529 24.2379C11.4356 24.2379 11.8535 23.8619 11.8535 23.8619L11.8786 23.8437L15.39 20.8062L19.6488 24.8349C19.7087 24.9197 20.268 25.6871 21.5013 25.6871C22.2336 25.6871 22.8145 25.3196 23.1875 24.9283C23.5605 24.537 23.7928 24.1259 23.8916 23.609V23.6067C23.984 23.1183 27.9089 2.969 27.9089 2.969L27.902 2.99635C28.0169 2.47192 28.047 1.98352 27.9202 1.50156C27.7935 1.0196 27.4594 0.558142 27.0452 0.309824C26.6311 0.0615619 26.2259 -0.0145243 25.8467 0.002207ZM25.6279 2.44036C25.6223 2.47441 25.6321 2.45729 25.6234 2.49732L25.6211 2.511L25.6188 2.52467C25.6188 2.52467 21.7426 22.4162 21.5993 23.1738C21.6098 23.1165 21.5618 23.2303 21.5127 23.2991C21.4432 23.2512 21.3008 23.1897 21.3008 23.1897L21.278 23.1646L15.4606 17.6617L11.3477 21.2164L12.5713 16.3173C12.5713 16.3173 20.2202 8.39956 20.681 7.93873C21.052 7.57006 21.1299 7.44155 21.1299 7.31438C21.1299 7.14405 21.0411 7.02044 20.8428 7.02044C20.6643 7.02044 20.4242 7.19398 20.2959 7.27564C18.6239 8.34145 11.2838 12.6194 7.99349 14.5331C7.47061 14.3191 3.83794 12.8322 2.60677 12.3297C2.61609 12.3256 2.61302 12.327 2.62272 12.3228C5.47851 11.0942 11.0502 8.69421 16.0075 6.56243C18.4861 5.49653 20.8118 4.49805 22.5654 3.74602C24.2921 3.00557 25.4918 2.49597 25.6279 2.44036Z" d="M25.8467 0.002207C25.4674 0.0189382 25.1141 0.1294 24.8031 0.255137C24.5117 0.372344 23.3984 0.849832 21.6449 1.60182C19.8898 2.35446 17.5659 3.35218 15.0869 4.41822C10.129 6.55031 4.55491 8.9503 1.69987 10.1786C1.59251 10.2248 1.21791 10.3445 0.820312 10.6549C0.422717 10.9653 0 11.6085 0 12.3251C0 12.903 0.275412 13.4771 0.62207 13.8199C0.968728 14.1627 1.33554 14.332 1.64974 14.4602C2.78977 14.9254 6.32549 16.3723 6.99316 16.6454C7.22814 17.3652 8.50791 21.2801 8.80469 22.2395C9.00033 22.8727 9.18656 23.2692 9.42904 23.5839C9.55027 23.7413 9.6912 23.8792 9.86198 23.9872C9.93024 24.0304 10.0051 24.0637 10.0807 24.0943L10.0853 24.0966C10.1027 24.1036 10.1177 24.1155 10.1354 24.1217C10.1688 24.1333 10.1911 24.1347 10.2357 24.1445C10.4134 24.2019 10.5928 24.2379 10.7529 24.2379C11.4356 24.2379 11.8535 23.8619 11.8535 23.8619L11.8786 23.8437L15.39 20.8062L19.6488 24.8349C19.7087 24.9197 20.268 25.6871 21.5013 25.6871C22.2336 25.6871 22.8145 25.3196 23.1875 24.9283C23.5605 24.537 23.7928 24.1259 23.8916 23.609V23.6067C23.984 23.1183 27.9089 2.969 27.9089 2.969L27.902 2.99635C28.0169 2.47192 28.047 1.98352 27.9202 1.50156C27.7935 1.0196 27.4594 0.558142 27.0452 0.309824C26.6311 0.0615619 26.2259 -0.0145243 25.8467 0.002207ZM25.6279 2.44036C25.6223 2.47441 25.6321 2.45729 25.6234 2.49732L25.6211 2.511L25.6188 2.52467C25.6188 2.52467 21.7426 22.4162 21.5993 23.1738C21.6098 23.1165 21.5618 23.2303 21.5127 23.2991C21.4432 23.2512 21.3008 23.1897 21.3008 23.1897L21.278 23.1646L15.4606 17.6617L11.3477 21.2164L12.5713 16.3173C12.5713 16.3173 20.2202 8.39956 20.681 7.93873C21.052 7.57006 21.1299 7.44155 21.1299 7.31438C21.1299 7.14405 21.0411 7.02044 20.8428 7.02044C20.6643 7.02044 20.4242 7.19398 20.2959 7.27564C18.6239 8.34145 11.2838 12.6194 7.99349 14.5331C7.47061 14.3191 3.83794 12.8322 2.60677 12.3297C2.61609 12.3256 2.61302 12.327 2.62272 12.3228C5.47851 11.0942 11.0502 8.69421 16.0075 6.56243C18.4861 5.49653 20.8118 4.49805 22.5654 3.74602C24.2921 3.00557 25.4918 2.49597 25.6279 2.44036Z"
fill="#2C383F" /> fill="#2C383F" />
</svg> </svg>
</div> </a>
<div class="about_reverse_text">Связаться с нами</div>
</div> </div>
</div>
</div> </div>
<div class="about_row"> <div class="about_row">
<div class="about_list"> <div class="about_list">
@@ -189,6 +194,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
</div> </div>

241
style.css
View File

@@ -1,28 +1,37 @@
@font-face { @font-face {
font-family: "Muller"; font-family: "Muller";
src: url("/fonts/Muller/Muller-Thin-DEMO.woff2") format("woff2"), src: url("/fonts/Muller-Trial-Regular.woff2") format("woff2");
url("/fonts/Muller/Muller-Thin-DEMO.eot") format("eot"),
url("/fonts/Muller/Muller-Thin-DEMO.woff") format("woff");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "Muller"; font-family: "Muller";
src: url("/fonts/Muller/Muller-ExtraBold-DEMO.woff2") format("woff2"), src: url("/fonts/Muller-Trial-Bold.woff2") format("woff2");
url("/fonts/Muller/Muller-ExtraBold-DEMO.eot") format("eot"),
url("/fonts/Muller/Muller-ExtraBold-DEMO.woff") format("woff");
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
.plus { @font-face {
font-family: Arial, Helvetica, sans-serif; font-family: "Muller";
font-weight: 100; src: url("/fonts/Muller-Trial-Black.woff2") format("woff2");
opacity: 0.5; font-weight: 900;
font-size: 16px; font-style: normal;
margin: 2px; 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 { html, body {
@@ -40,15 +49,19 @@ html, body {
} }
.header { .header {
position: fixed; position: fixed;
height: 140px;
display: flex; display: flex;
height: 100px;
padding: 20px 51px 20px 39px;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
border-bottom: 5px dashed #191820; 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 { .container {
max-width: 1818px; max-width: 1818px;
padding: 40px 51px 0px 39px;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -64,7 +77,11 @@ html, body {
} }
.img_logo { .img_logo {
height: 100%; height: 100%;
width: 100%; width: 80%;
transition: all .3s;
}
.img_logo:hover {
transform: scale(1.05);
} }
.header_contacts { .header_contacts {
display: flex; display: flex;
@@ -77,8 +94,13 @@ html, body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
font-size: 15px; font-size: 13px;
margin-right: 40px; margin-right: 40px;
transition: all .1s;
}
.header_call:hover {
transform: scale(1.03);
color: #F69020;
} }
.header_call_svg { .header_call_svg {
display: flex; display: flex;
@@ -91,8 +113,8 @@ html, body {
} }
.header_map_svg svg { .header_map_svg svg {
display: block; display: block;
width: 29px; width: 25px;
height: 29px; height: 25px;
} }
.header_map { .header_map {
@@ -101,7 +123,12 @@ html, body {
justify-content: center; justify-content: center;
color: #fff; color: #fff;
gap: 17px; gap: 17px;
font-size: 15px; font-size: 13px;
transition: all .1s;
}
.header_map:hover {
transform: scale(1.03);
color: #F69020;
} }
.header_map_svg { .header_map_svg {
display: flex; display: flex;
@@ -133,6 +160,13 @@ html, body {
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff; color: #fff;
margin-right: 25px; margin-right: 25px;
transition: all .3s;
}
.header_btn_about:hover {
background-color: #fff;
color: #000;
border: none;
transform: scale(1.03);
} }
.header_btn_reserv { .header_btn_reserv {
border-radius: 40px; border-radius: 40px;
@@ -142,36 +176,62 @@ html, body {
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 13px;
letter-spacing: 5%; 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 { .about {
padding-top: 180px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
background: url("./images/About/Background/dancer.png") 70%; padding-top: 100px;
background-repeat: no-repeat;
background-size: contain;
} }
.about_inner { .about_inner {
position: relative;
display: flex; display: flex;
height: 100%; 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 { .about_content {
color: white; color: white;
margin-left: 51px; margin-left: 51px;
width: 50%; width: 40%;
z-index: 1;
position: relative;
} }
.about_heading { .about_heading {
font-size: 32px; font-size: 26px;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 25px; margin-bottom: 25px;
margin-top: 30px;
} }
.about_title { .about_title {
font-size: 60px; font-size: 46px;
text-transform: uppercase; text-transform: uppercase;
font-weight: 900; font-weight: 900;
margin-right: 60px;
} }
.about_title span { .about_title span {
font-size: 15px; font-size: 15px;
@@ -191,52 +251,143 @@ html, body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 21px; margin-right: 21px;
font-size: 14px;
} }
.row_if svg { .row_if svg {
margin-right: 11px; margin-right: 11px;
} }
.about_button { .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 { .button {
padding: 20px 30px;
padding: 25px 35px;
border-radius: 60px; border-radius: 60px;
text-transform: uppercase; text-transform: uppercase;
font-size: 13px; font-size: 12px;
letter-spacing: 5%; letter-spacing: 5%;
font-weight: 700; font-weight: 700;
background: linear-gradient(93.25deg, #EA422A 0%, #F69020 48.58%, #FFC619 101.38%); background: linear-gradient(93.25deg, #EA422A 0%, #F69020 48.58%, #FFC619 101.38%);
transition: all .3s;
}
.button:hover {
transform: scale(1.03);
} }
.about_image { .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%; height: 100%;
width: 100%;
z-index: 1;
} }
.about_info { .about_img_circle img {
color: #fff; 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 { .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 { .about_row {
color: #fff; color: #fff;
} }
.about_list { .about_list {
display: flex; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px;
z-index: 20;
} }
.about_item { .about_item {
display: flex; display: flex;
align-items: center; align-items: center;
width: 25%; padding-left: 30px;
padding: 30px 50px; font-size: 13px;
} }
.about_item_light { .about_item_light {
background-color: rgba(40, 43, 50, 1); background-color: rgba(40, 43, 50, 1);
@@ -246,12 +397,12 @@ html, body {
} }
.about_item svg { .about_item svg {
display: block; display: block;
width: 70px; width: 50px;
height: 70px; height: 50px;
} }
.about_item span { .about_item span {
display: block; display: block;
width: 34px; min-width: 20px;
height: 1px; height: 1px;
background-color: rgba(255, 198, 25, 0.3); background-color: rgba(255, 198, 25, 0.3);
margin: 0px 21px 0px 18px; margin: 0px 21px 0px 18px;