commit bc489699e47211507563f17fe3002eee9e2add95 Author: Robonen Andrew Date: Mon Jun 7 23:40:21 2021 +0700 Init commit diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..3190f1c --- /dev/null +++ b/css/index.css @@ -0,0 +1,950 @@ +/* GLOBAL */ +:root { + --main-bg-color: black; + --main-font-color: white; + --footer-bg-color: #0b0b0b; + --footer-font-color: #cacaca; +} + +html, +body, +.landing_head { + margin: 0; + width: 100%; + height: 100%; + background-color: var(--main-bg-color); + color: var(--main-font-color); + font-family: "Geometria", sans-serif; + font-weight: 300; +} + +a { + display: block; + text-decoration: none; + color: var(--main-font-color); +} + +.detail { + font-family: "Geometria", sans-serif; + font-size: 14px; + font-weight: bold; + cursor: pointer; +} + +.detail > img { + margin-left: 10px; + transition: margin-left 1s; +} + +.detail:hover > img { + margin-left: 20px; +} +/* END GLOBAL */ + +/* LANDING HEAD */ +.background { + height: 100%; + background-image: url("/img/landing.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + filter: blur(5px); +} + +header, +header > * { + display: flex; + margin: 0 auto; + align-items: center; +} + +header { + width: calc(100% - 40px * 2); + position: absolute; + top: 0; + left: 0; + padding: 40px 40px; + z-index: 10; + font-size: 16px; + line-height: 20px; +} + +header > .logo { + width: 25%; +} + +header > .menu { + width: 40%; + justify-content: space-around; +} + +header > .account { + width: 20%; + justify-content: space-around; +} + +.account img { + height: 25px; + width: 25px; +} + +header > .logo > img { + height: 23px; +} + +.logo > .location { + width: 45%; + margin-left: 40px; + cursor: pointer; +} + +.logo > .location > .city { + margin-left: 5px; +} + +.showreal { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: auto; + display: flex; + flex-direction: column; + align-items: center; +} + +.showreal > .logo > img { + height: 45px; +} + +.showreal > .dots { + margin: 25px 0; +} + +.showreal > .dots > img { + height: 10px; +} + +.showreal > article { + text-align: center; + width: 450px; +} + +.arrow { + position: absolute; + left: 50%; + top: 75%; + transform: translate(-50%, -50%); + animation: scrollme 2s cubic-bezier(0.46, -0.85, 0.76, 0.79) 1s infinite + forwards; +} + +@keyframes scrollme { + 0% { + top: 75%; + } + 50% { + top: calc(75% + 8px); + } + 100% { + top: 75%; + } +} + +.arrow > img { + height: 18px; +} + +.hamburger { + display: none; + width: 50px; + height: 50px; + position: absolute; + right: 40px; + z-index: 50; +} + +.hamburger .hamburger_btn { + background-color: transparent; + border: none; + cursor: pointer; + display: flex; + padding: 0; +} + +.hamburger .line { + fill: none; + stroke: var(--main-font-color); + stroke-width: 6; + transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), + stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.hamburger .line1 { + stroke-dasharray: 60 207; + stroke-width: 6; +} + +.hamburger .line2 { + stroke-dasharray: 60 60; + stroke-width: 6; +} + +.hamburger .line3 { + stroke-dasharray: 60 207; + stroke-width: 6; +} + +.hamburger .opened .line1 { + stroke-dasharray: 90 207; + stroke-dashoffset: -134; + stroke-width: 6; +} + +.hamburger .opened .line2 { + stroke-dasharray: 1 60; + stroke-dashoffset: -30; + stroke-width: 6; +} + +.hamburger .opened .line3 { + stroke-dasharray: 90 207; + stroke-dashoffset: -134; + stroke-width: 6; +} + +header > .mobile_menu { + width: 100vw; + height: 100vh; + display: flex; + visibility: hidden; + position: absolute; + top: 0; + left: 0; + background-color: var(--main-bg-color); + align-items: center; + justify-content: center; + transition: transform 0.9s; + transform: translate(-100vw); + z-index: 15; +} + +header > .mobile_menu_opened { + transform: translate(0); +} + +header > .mobile_menu > .menu { + width: 70%; + height: 50%; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: flex-start; +} + +header > .mobile_menu > .menu > a { + line-height: 50px; + font-size: 50px; + display: inline-block; + position: relative; +} + +header > .mobile_menu > .menu > a:after { + content: ""; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: 0; + left: 0; + background-color: var(--footer-font-color); + transform-origin: bottom right; + transition: transform 0.25s ease-out; +} + +header > .mobile_menu > .menu > a:hover::after { + transform: scaleX(1); + transform-origin: bottom left; +} +/* END LANDING HEAD */ + +/* LANDING SECTIONS */ +.landing_section { + margin: 80px; +} + +.section_title { + font-family: "AGMelanie", serif; + font-size: 36px; + font-weight: bold; + width: 100%; + margin-bottom: 25px; +} +/* END LANDING SECTIONS */ + +/* CARDS */ +.landing_section > .cards_container { + display: flex; + flex-wrap: wrap; + width: 100%; +} + +.cards_container > .card { + width: calc(50% - 25px); + height: 350px; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + margin: 25px 25px 0 0; +} + +.card > .card_description { + position: relative; + top: 25%; + left: 15%; + width: 60%; +} + +.card_description > * { + margin: 8px 0; +} + +.card_description > .description_title { + font-size: 24px; +} + +.card_description > img { + height: 10px; +} + +.card_description > .description_text { + margin-top: 18px; +} + +.card_description > .detail { + margin-top: 40px; +} + +.card#wine { + background-image: url(/img/cards/wine.png); +} + +.card#champagne { + background-image: url(/img/cards/champagne.png); +} + +.card#beer { + background-image: url(/img/cards/beer.png); +} + +.card#alcohol { + background-image: url(/img/cards/alcohol.png); +} +/* END CARDS */ + +/* POPULAR */ +.landing_section#popular { + /* background-image: url(/img/background-waves.png); */ + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.popular_container .detail { + display: inline; + margin-left: 10px; + font-size: 16px; + font-weight: 300; +} + +.popular_container { + display: flex; + flex-wrap: wrap; + align-items: center; +} + +.product_container { + display: flex; + flex-direction: column; + width: calc(25% - 81.5px); + height: 470px; + margin-top: 25px; + padding: 0 40px; +} + +.product_container > * { + margin: 10px 0; +} + +.product_container > .product_image { + height: 100%; + width: 100%; + background-size: contain; + background-position: center; + background-repeat: no-repeat; +} + +.product_container > .product_title { + font-size: 18px; +} + +.product_container > .product_price { + font-family: "AGMelanie", serif; + font-size: 24px; + font-weight: bold; +} + +.product_delim { + width: 0; + height: 225px; + background: white; + border: 1px solid white; +} + +.product_image#zinfandel { + background-image: url(/img/products/1.png); +} + +.product_image#fetzer { + background-image: url(/img/products/2.png); +} + +.product_image#regaleali { + background-image: url(/img/products/3.png); +} + +.product_image#scolca { + background-image: url(/img/products/4.png); +} +/* END POPULAR */ + +/* HELP */ +.landing_full { + width: 100%; + height: 50%; +} + +.landing_full#help { + margin-top: 160px; + background-image: url(/img/background-help.png); + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} + +.help_container { + height: 320px; + width: 525px; + max-width: 670px; + position: relative; + top: 50%; + left: 10%; + transform: translate(-10%, -50%); + padding: 30px 45px; + display: flex; + flex-direction: column; + justify-content: space-between; + background: rgba(144, 143, 143, 0.13); + backdrop-filter: blur(10px); +} + +.help_container > .help_title { + font-family: AGMelanieC; + font-size: 34px; +} + +.help_container > button { + width: 225px; + height: 60px; + background-color: black; + font-family: "Geometria", sans-serif; + font-weight: bold; + font-size: 16px; + color: var(--main-font-color); + border: 0; + cursor: pointer; +} +/* END HELP */ + +/* ABOUT */ +.about_container { + display: flex; + flex-wrap: wrap; +} + +.about_card_container, +.about_card_container_small { + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.about_card_container, +.about_card_container_double { + height: 500px; + margin-top: 25px; +} + +.about_card_container { + width: calc(100% / 3 - 20px); +} + +.about_card_container_double { + width: calc(100% / 3); +} + +.about_card_container_small { + width: 100%; + height: 250px; +} + +.about_card_container_small:first-child { + height: 230px; + margin-bottom: 20px; + margin-top: -10px; +} + +.about_card_container#shrimp { + margin-right: 20px; + background-image: url(/img/about_cards/1.png); +} + +.about_card_container#festival { + background-image: url(/img/about_cards/2.png); +} + +.about_card_container_small#wine { + background-image: url(/img/about_cards/3.png); +} + +.about_card_container_small#spanish { + background-image: url(/img/about_cards/4.png); +} + +.about_card_inside { + position: relative; + left: 40%; + top: 80%; + transform: translate(-40%, -80%); + width: 70%; +} + +.about_card_inside > * { + margin: 10px 0; +} + +.dot { + height: 5px; + width: 5px; + background-color: white; + border-radius: 50%; + display: inline-block; +} + +.about_card_category { + font-weight: bold; + font-size: 13px; + text-transform: uppercase; +} + +.about_card_category > * { + vertical-align: middle; +} + +.about_card_category > span:last-child { + margin-left: 5px; +} + +.about_card_title { + font-family: AGMelanieC; + font-size: 26px; +} + +.about_card_description { + font-size: 16px; +} + +/* END ABOUT */ + +/* FOOTER */ +footer { + width: calc(100% - 80px * 2); + /* height: 350px; */ + background: var(--footer-bg-color); + padding: 80px; + font-family: "Montserrat", sans-serif; + font-style: normal; + font-weight: normal; + font-size: 14px; + color: var(--footer-font-color); +} + +.footer_container { + /* height: 325px; */ + margin-top: 25px; + display: flex; + justify-content: space-evenly; +} + +.footer_container > .footer_row:first-child { + width: 25%; + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.row_wrapper { + width: 55%; + margin-top: 25px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.row_wrapper > .footer_row { + margin: 25px 25px 0 25px; +} + +.footer_row:first-child img { + height: 25px; +} + +.footer_row:first-child #phrase { + font-family: "Geometria", sans-serif; + font-weight: 300; + width: 50%; +} + +.footer_row > .row_title { + font-family: "Montserrat", sans-serif; + font-weight: normal; + font-style: normal; + font-weight: bold; + font-size: 16px; + margin-bottom: 25px; +} + +.footer_row > a { + color: var(--footer-font-color); + margin-bottom: 20px; +} + +.footer_row:last-child > .socials { + width: 100%; + display: flex; + justify-content: space-around; + align-items: center; +} + +.last_cointainer { + width: calc(100% - 80px * 2); + background: black; + font-family: "Montserrat", sans-serif; + font-weight: normal; + font-size: 14px; + padding: 20px 80px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.last_cointainer > .policy_container { + display: flex; + align-items: center; +} + +.policy_container > .product_delim { + height: 12px; + margin: 0 20px; +} + +/* END FOOTER */ + +/* ----- RESPONSIVE ----- */ + +@media (max-width: 1440px) { + header > .menu, + header > .account { + display: none; + } + + header > .hamburger { + display: block; + } + + header > .logo { + position: absolute; + left: 40px; + width: auto; + } + + .cards_container > .card { + height: 390px; + } +} + +@media (max-width: 1150px) { + .footer_row:first-child img { + height: auto; + width: 100%; + } +} + +@media (max-width: 1024px) { + .cards_container > .card { + width: 100%; + margin: 20px 0; + } + + .product_container { + width: calc(50% - 81px); + align-items: center; + } + + .popular_container > .product_delim:nth-child(3n - 1) { + display: none; + } + + .help_container { + width: 100%; + left: 50%; + transform: translate(-50%, -50%); + } + + .about_card_container { + width: calc(50% - 10px); + } + + .about_card_container_double { + width: 100%; + display: flex; + } + + .about_card_container_small { + height: 500px !important; + margin: 0; + } + + .about_card_container_small:first-child { + margin: 0 20px 0 0; + } + + .footer_container { + justify-content: space-between; + } + + .footer_container > .footer_row:first-child { + justify-content: space-evenly; + } + + .row_wrapper { + justify-content: flex-start; + } + + .row_wrapper > .footer_row { + width: 50%; + margin: 25px 0 0 0; + } + + .footer_row:last-child > .socials { + justify-content: flex-start; + } + + .footer_row:last-child > .socials > a { + margin-right: 15px; + } +} + +@media (max-width: 850px) { + .help_container { + width: 350px; + } + + .footer_container { + flex-direction: column-reverse; + } + + .footer_container > .footer_row:first-child { + width: 100%; + height: 400px; + } + + .footer_row:first-child img { + width: 50%; + } + + .row_wrapper { + width: 100%; + } + + .last_cointainer { + flex-direction: column; + justify-content: center; + text-align: center; + } + + .last_cointainer > .copyright { + margin-bottom: 10px; + } +} + +@media (max-width: 600px) { + header > .mobile_menu > .menu > a { + line-height: 40px; + font-size: 40px; + } + + .card > .card_description { + top: 10%; + } + + .product_container { + margin-top: 35px; + width: calc(70% - 81px); + } + + .popular_container { + flex-direction: column; + } + + .popular_container > .product_delim { + display: none; + } + + .about_container, + .about_card_container_double { + flex-direction: column; + } + + .about_card_container_double { + height: auto; + margin-top: 0; + } + + .about_card_container { + width: 100%; + height: 400px; + } + + .about_card_container_small { + height: 400px !important; + margin: 25px 0 0 0 !important; + } + + .footer_container { + margin-top: 0; + } + + .row_wrapper, + .last_cointainer > .policy_container { + flex-direction: column; + } + + .last_cointainer > .policy_container > a { + margin-bottom: 10px; + } + + .last_cointainer > .policy_container > .product_delim { + display: none; + } +} + +@media (max-width: 510px) { + header > .logo { + left: 20px; + } + + header > .hamburger { + right: 20px; + } + + header .location { + display: none; + } + + .card_description > .detail { + margin-top: 20px; + } + + .showreal > .logo > img, + .card_description > img { + height: 8px; + } + + .showreal > article { + width: 250px; + } + + .showreal > .logo > img { + height: 35px; + } + + .help_container { + width: 250px; + height: 320px; + padding: 10px 25px; + align-items: center; + } + + .help_container > .help_title { + font-size: 25px; + } + + .help_container > button { + width: 200px; + height: 40px; + font-size: 14px; + } + + .help_container > * { + margin-top: 15px; + } + + .section_title .detail { + margin: 10px 0 0 0; + display: block; + } + + .landing_section { + margin: 30px; + } + + footer { + padding: 30px; + width: calc(100% - 30px * 2); + } +} + +@media (max-width: 380px) { + body { + font-size: 14px; + } + + header > .logo > img { + height: 20px; + } + + .showreal > .logo > img { + height: 30px; + } + + .product_container { + width: calc(90% - 81px); + } + + .product_container > * { + text-align: center; + } + + .about_card_container { + height: 300px; + } + + .about_card_container_small { + height: 300px !important; + } + + .last_cointainer { + font-size: 12px; + } +} diff --git a/fonts/AGMelanie/AGMelanie.ttf b/fonts/AGMelanie/AGMelanie.ttf new file mode 100644 index 0000000..c34faa0 Binary files /dev/null and b/fonts/AGMelanie/AGMelanie.ttf differ diff --git a/fonts/AGMelanie/font.css b/fonts/AGMelanie/font.css new file mode 100644 index 0000000..cf66722 --- /dev/null +++ b/fonts/AGMelanie/font.css @@ -0,0 +1,6 @@ +@font-face { + font-family: "AGMelanie"; + src: url("AGMelanie.ttf") format("truetype"); + font-style: normal; + font-weight: bold; +} diff --git a/fonts/Geometria/Geometria-Bold.eot b/fonts/Geometria/Geometria-Bold.eot new file mode 100644 index 0000000..add3018 Binary files /dev/null and b/fonts/Geometria/Geometria-Bold.eot differ diff --git a/fonts/Geometria/Geometria-Bold.ttf b/fonts/Geometria/Geometria-Bold.ttf new file mode 100644 index 0000000..71187c9 Binary files /dev/null and b/fonts/Geometria/Geometria-Bold.ttf differ diff --git a/fonts/Geometria/Geometria-Bold.woff b/fonts/Geometria/Geometria-Bold.woff new file mode 100644 index 0000000..4b41949 Binary files /dev/null and b/fonts/Geometria/Geometria-Bold.woff differ diff --git a/fonts/Geometria/Geometria-BoldItalic.eot b/fonts/Geometria/Geometria-BoldItalic.eot new file mode 100644 index 0000000..5626a82 Binary files /dev/null and b/fonts/Geometria/Geometria-BoldItalic.eot differ diff --git a/fonts/Geometria/Geometria-BoldItalic.ttf b/fonts/Geometria/Geometria-BoldItalic.ttf new file mode 100644 index 0000000..a44ca18 Binary files /dev/null and b/fonts/Geometria/Geometria-BoldItalic.ttf differ diff --git a/fonts/Geometria/Geometria-BoldItalic.woff b/fonts/Geometria/Geometria-BoldItalic.woff new file mode 100644 index 0000000..eefdb87 Binary files /dev/null and b/fonts/Geometria/Geometria-BoldItalic.woff differ diff --git a/fonts/Geometria/Geometria-ExtraBold.eot b/fonts/Geometria/Geometria-ExtraBold.eot new file mode 100644 index 0000000..c11c1c7 Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraBold.eot differ diff --git a/fonts/Geometria/Geometria-ExtraBold.ttf b/fonts/Geometria/Geometria-ExtraBold.ttf new file mode 100644 index 0000000..6d6f36a Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraBold.ttf differ diff --git a/fonts/Geometria/Geometria-ExtraBold.woff b/fonts/Geometria/Geometria-ExtraBold.woff new file mode 100644 index 0000000..d37a158 Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraBold.woff differ diff --git a/fonts/Geometria/Geometria-ExtraBoldItalic.eot b/fonts/Geometria/Geometria-ExtraBoldItalic.eot new file mode 100644 index 0000000..f9fbc7e Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraBoldItalic.eot differ diff --git a/fonts/Geometria/Geometria-ExtraBoldItalic.ttf b/fonts/Geometria/Geometria-ExtraBoldItalic.ttf new file mode 100644 index 0000000..da614e6 Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraBoldItalic.ttf differ diff --git a/fonts/Geometria/Geometria-ExtraBoldItalic.woff b/fonts/Geometria/Geometria-ExtraBoldItalic.woff new file mode 100644 index 0000000..0e51438 Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraBoldItalic.woff differ diff --git a/fonts/Geometria/Geometria-ExtraLight.eot b/fonts/Geometria/Geometria-ExtraLight.eot new file mode 100644 index 0000000..4e3e777 Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraLight.eot differ diff --git a/fonts/Geometria/Geometria-ExtraLight.ttf b/fonts/Geometria/Geometria-ExtraLight.ttf new file mode 100644 index 0000000..40ebd48 Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraLight.ttf differ diff --git a/fonts/Geometria/Geometria-ExtraLight.woff b/fonts/Geometria/Geometria-ExtraLight.woff new file mode 100644 index 0000000..979bb65 Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraLight.woff differ diff --git a/fonts/Geometria/Geometria-ExtraLightItalic.eot b/fonts/Geometria/Geometria-ExtraLightItalic.eot new file mode 100644 index 0000000..3b43919 Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraLightItalic.eot differ diff --git a/fonts/Geometria/Geometria-ExtraLightItalic.ttf b/fonts/Geometria/Geometria-ExtraLightItalic.ttf new file mode 100644 index 0000000..7ef1a61 Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraLightItalic.ttf differ diff --git a/fonts/Geometria/Geometria-ExtraLightItalic.woff b/fonts/Geometria/Geometria-ExtraLightItalic.woff new file mode 100644 index 0000000..9af4770 Binary files /dev/null and b/fonts/Geometria/Geometria-ExtraLightItalic.woff differ diff --git a/fonts/Geometria/Geometria-Heavy.eot b/fonts/Geometria/Geometria-Heavy.eot new file mode 100644 index 0000000..923453c Binary files /dev/null and b/fonts/Geometria/Geometria-Heavy.eot differ diff --git a/fonts/Geometria/Geometria-Heavy.ttf b/fonts/Geometria/Geometria-Heavy.ttf new file mode 100644 index 0000000..633a1ba Binary files /dev/null and b/fonts/Geometria/Geometria-Heavy.ttf differ diff --git a/fonts/Geometria/Geometria-Heavy.woff b/fonts/Geometria/Geometria-Heavy.woff new file mode 100644 index 0000000..16d944a Binary files /dev/null and b/fonts/Geometria/Geometria-Heavy.woff differ diff --git a/fonts/Geometria/Geometria-HeavyItalic.eot b/fonts/Geometria/Geometria-HeavyItalic.eot new file mode 100644 index 0000000..491c67f Binary files /dev/null and b/fonts/Geometria/Geometria-HeavyItalic.eot differ diff --git a/fonts/Geometria/Geometria-HeavyItalic.ttf b/fonts/Geometria/Geometria-HeavyItalic.ttf new file mode 100644 index 0000000..2496bb1 Binary files /dev/null and b/fonts/Geometria/Geometria-HeavyItalic.ttf differ diff --git a/fonts/Geometria/Geometria-HeavyItalic.woff b/fonts/Geometria/Geometria-HeavyItalic.woff new file mode 100644 index 0000000..ebcf2b0 Binary files /dev/null and b/fonts/Geometria/Geometria-HeavyItalic.woff differ diff --git a/fonts/Geometria/Geometria-Italic.eot b/fonts/Geometria/Geometria-Italic.eot new file mode 100644 index 0000000..c66ba51 Binary files /dev/null and b/fonts/Geometria/Geometria-Italic.eot differ diff --git a/fonts/Geometria/Geometria-Italic.ttf b/fonts/Geometria/Geometria-Italic.ttf new file mode 100644 index 0000000..d9cd675 Binary files /dev/null and b/fonts/Geometria/Geometria-Italic.ttf differ diff --git a/fonts/Geometria/Geometria-Italic.woff b/fonts/Geometria/Geometria-Italic.woff new file mode 100644 index 0000000..9cdf32b Binary files /dev/null and b/fonts/Geometria/Geometria-Italic.woff differ diff --git a/fonts/Geometria/Geometria-Light.eot b/fonts/Geometria/Geometria-Light.eot new file mode 100644 index 0000000..88ac24e Binary files /dev/null and b/fonts/Geometria/Geometria-Light.eot differ diff --git a/fonts/Geometria/Geometria-Light.ttf b/fonts/Geometria/Geometria-Light.ttf new file mode 100644 index 0000000..9aab108 Binary files /dev/null and b/fonts/Geometria/Geometria-Light.ttf differ diff --git a/fonts/Geometria/Geometria-Light.woff b/fonts/Geometria/Geometria-Light.woff new file mode 100644 index 0000000..43baf2f Binary files /dev/null and b/fonts/Geometria/Geometria-Light.woff differ diff --git a/fonts/Geometria/Geometria-LightItalic.eot b/fonts/Geometria/Geometria-LightItalic.eot new file mode 100644 index 0000000..5af0f9a Binary files /dev/null and b/fonts/Geometria/Geometria-LightItalic.eot differ diff --git a/fonts/Geometria/Geometria-LightItalic.ttf b/fonts/Geometria/Geometria-LightItalic.ttf new file mode 100644 index 0000000..7f1a815 Binary files /dev/null and b/fonts/Geometria/Geometria-LightItalic.ttf differ diff --git a/fonts/Geometria/Geometria-LightItalic.woff b/fonts/Geometria/Geometria-LightItalic.woff new file mode 100644 index 0000000..2d35ce9 Binary files /dev/null and b/fonts/Geometria/Geometria-LightItalic.woff differ diff --git a/fonts/Geometria/Geometria-Medium.eot b/fonts/Geometria/Geometria-Medium.eot new file mode 100644 index 0000000..d23fe64 Binary files /dev/null and b/fonts/Geometria/Geometria-Medium.eot differ diff --git a/fonts/Geometria/Geometria-Medium.ttf b/fonts/Geometria/Geometria-Medium.ttf new file mode 100644 index 0000000..7b44c81 Binary files /dev/null and b/fonts/Geometria/Geometria-Medium.ttf differ diff --git a/fonts/Geometria/Geometria-Medium.woff b/fonts/Geometria/Geometria-Medium.woff new file mode 100644 index 0000000..5b06ea0 Binary files /dev/null and b/fonts/Geometria/Geometria-Medium.woff differ diff --git a/fonts/Geometria/Geometria-MediumItalic.eot b/fonts/Geometria/Geometria-MediumItalic.eot new file mode 100644 index 0000000..607f63a Binary files /dev/null and b/fonts/Geometria/Geometria-MediumItalic.eot differ diff --git a/fonts/Geometria/Geometria-MediumItalic.ttf b/fonts/Geometria/Geometria-MediumItalic.ttf new file mode 100644 index 0000000..876c38e Binary files /dev/null and b/fonts/Geometria/Geometria-MediumItalic.ttf differ diff --git a/fonts/Geometria/Geometria-MediumItalic.woff b/fonts/Geometria/Geometria-MediumItalic.woff new file mode 100644 index 0000000..f43fd8c Binary files /dev/null and b/fonts/Geometria/Geometria-MediumItalic.woff differ diff --git a/fonts/Geometria/Geometria-Thin.eot b/fonts/Geometria/Geometria-Thin.eot new file mode 100644 index 0000000..6feaeea Binary files /dev/null and b/fonts/Geometria/Geometria-Thin.eot differ diff --git a/fonts/Geometria/Geometria-Thin.ttf b/fonts/Geometria/Geometria-Thin.ttf new file mode 100644 index 0000000..6ca048f Binary files /dev/null and b/fonts/Geometria/Geometria-Thin.ttf differ diff --git a/fonts/Geometria/Geometria-Thin.woff b/fonts/Geometria/Geometria-Thin.woff new file mode 100644 index 0000000..e742c21 Binary files /dev/null and b/fonts/Geometria/Geometria-Thin.woff differ diff --git a/fonts/Geometria/Geometria-ThinItalic.eot b/fonts/Geometria/Geometria-ThinItalic.eot new file mode 100644 index 0000000..87b4463 Binary files /dev/null and b/fonts/Geometria/Geometria-ThinItalic.eot differ diff --git a/fonts/Geometria/Geometria-ThinItalic.ttf b/fonts/Geometria/Geometria-ThinItalic.ttf new file mode 100644 index 0000000..3122eb7 Binary files /dev/null and b/fonts/Geometria/Geometria-ThinItalic.ttf differ diff --git a/fonts/Geometria/Geometria-ThinItalic.woff b/fonts/Geometria/Geometria-ThinItalic.woff new file mode 100644 index 0000000..e8c98b4 Binary files /dev/null and b/fonts/Geometria/Geometria-ThinItalic.woff differ diff --git a/fonts/Geometria/Geometria.eot b/fonts/Geometria/Geometria.eot new file mode 100644 index 0000000..684d9ab Binary files /dev/null and b/fonts/Geometria/Geometria.eot differ diff --git a/fonts/Geometria/Geometria.ttf b/fonts/Geometria/Geometria.ttf new file mode 100644 index 0000000..50e87fa Binary files /dev/null and b/fonts/Geometria/Geometria.ttf differ diff --git a/fonts/Geometria/Geometria.woff b/fonts/Geometria/Geometria.woff new file mode 100644 index 0000000..e43409b Binary files /dev/null and b/fonts/Geometria/Geometria.woff differ diff --git a/fonts/Geometria/font.css b/fonts/Geometria/font.css new file mode 100644 index 0000000..b0b9a27 --- /dev/null +++ b/fonts/Geometria/font.css @@ -0,0 +1,177 @@ +/* This stylesheet generated by Transfonter (https://transfonter.org) on July 4, 2017 2:48 AM */ + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-Thin.eot'); + src: local('Geometria Thin'), local('Geometria-Thin'), + url('Geometria-Thin.eot?#iefix') format('embedded-opentype'), + url('Geometria-Thin.woff') format('woff'), + url('Geometria-Thin.ttf') format('truetype'); + font-weight: 100; + font-style: normal; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-MediumItalic.eot'); + src: local('Geometria MediumItalic'), local('Geometria-MediumItalic'), + url('Geometria-MediumItalic.eot?#iefix') format('embedded-opentype'), + url('Geometria-MediumItalic.woff') format('woff'), + url('Geometria-MediumItalic.ttf') format('truetype'); + font-weight: 500; + font-style: italic; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-Italic.eot'); + src: local('Geometria Italic'), local('Geometria-Italic'), + url('Geometria-Italic.eot?#iefix') format('embedded-opentype'), + url('Geometria-Italic.woff') format('woff'), + url('Geometria-Italic.ttf') format('truetype'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-Heavy.eot'); + src: local('Geometria Heavy'), local('Geometria-Heavy'), + url('Geometria-Heavy.eot?#iefix') format('embedded-opentype'), + url('Geometria-Heavy.woff') format('woff'), + url('Geometria-Heavy.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-ExtraBoldItalic.eot'); + src: local('Geometria ExtraBoldItalic'), local('Geometria-ExtraBoldItalic'), + url('Geometria-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'), + url('Geometria-ExtraBoldItalic.woff') format('woff'), + url('Geometria-ExtraBoldItalic.ttf') format('truetype'); + font-weight: 800; + font-style: italic; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-Medium.eot'); + src: local('Geometria Medium'), local('Geometria-Medium'), + url('Geometria-Medium.eot?#iefix') format('embedded-opentype'), + url('Geometria-Medium.woff') format('woff'), + url('Geometria-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-BoldItalic.eot'); + src: local('Geometria BoldItalic'), local('Geometria-BoldItalic'), + url('Geometria-BoldItalic.eot?#iefix') format('embedded-opentype'), + url('Geometria-BoldItalic.woff') format('woff'), + url('Geometria-BoldItalic.ttf') format('truetype'); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-LightItalic.eot'); + src: local('Geometria LightItalic'), local('Geometria-LightItalic'), + url('Geometria-LightItalic.eot?#iefix') format('embedded-opentype'), + url('Geometria-LightItalic.woff') format('woff'), + url('Geometria-LightItalic.ttf') format('truetype'); + font-weight: 300; + font-style: italic; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-HeavyItalic.eot'); + src: local('Geometria HeavyItalic'), local('Geometria-HeavyItalic'), + url('Geometria-HeavyItalic.eot?#iefix') format('embedded-opentype'), + url('Geometria-HeavyItalic.woff') format('woff'), + url('Geometria-HeavyItalic.ttf') format('truetype'); + font-weight: 900; + font-style: italic; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria.eot'); + src: local('Geometria'), + url('Geometria.eot?#iefix') format('embedded-opentype'), + url('Geometria.woff') format('woff'), + url('Geometria.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-Bold.eot'); + src: local('Geometria Bold'), local('Geometria-Bold'), + url('Geometria-Bold.eot?#iefix') format('embedded-opentype'), + url('Geometria-Bold.woff') format('woff'), + url('Geometria-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-ExtraBold.eot'); + src: local('Geometria ExtraBold'), local('Geometria-ExtraBold'), + url('Geometria-ExtraBold.eot?#iefix') format('embedded-opentype'), + url('Geometria-ExtraBold.woff') format('woff'), + url('Geometria-ExtraBold.ttf') format('truetype'); + font-weight: 800; + font-style: normal; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-ThinItalic.eot'); + src: local('Geometria ThinItalic'), local('Geometria-ThinItalic'), + url('Geometria-ThinItalic.eot?#iefix') format('embedded-opentype'), + url('Geometria-ThinItalic.woff') format('woff'), + url('Geometria-ThinItalic.ttf') format('truetype'); + font-weight: 100; + font-style: italic; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-ExtraLightItalic.eot'); + src: local('Geometria ExtraLightItalic'), local('Geometria-ExtraLightItalic'), + url('Geometria-ExtraLightItalic.eot?#iefix') format('embedded-opentype'), + url('Geometria-ExtraLightItalic.woff') format('woff'), + url('Geometria-ExtraLightItalic.ttf') format('truetype'); + font-weight: 200; + font-style: italic; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-Light.eot'); + src: local('Geometria Light'), local('Geometria-Light'), + url('Geometria-Light.eot?#iefix') format('embedded-opentype'), + url('Geometria-Light.woff') format('woff'), + url('Geometria-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Geometria'; + src: url('Geometria-ExtraLight.eot'); + src: local('Geometria ExtraLight'), local('Geometria-ExtraLight'), + url('Geometria-ExtraLight.eot?#iefix') format('embedded-opentype'), + url('Geometria-ExtraLight.woff') format('woff'), + url('Geometria-ExtraLight.ttf') format('truetype'); + font-weight: 200; + font-style: normal; +} diff --git a/fonts/Montserrat/font.css b/fonts/Montserrat/font.css new file mode 100644 index 0000000..bed9285 --- /dev/null +++ b/fonts/Montserrat/font.css @@ -0,0 +1,30 @@ +@font-face { + font-family: 'Montserrat'; + src: local('Montserrat Hairline'), local('Montserrat-Hairline'), url('montserrathairline.woff2') format('woff2'), url('montserrathairline.woff') format('woff'), url('montserrathairline.ttf') format('truetype'); + font-weight: 100; + font-style: normal; +} +@font-face { + font-family: 'Montserrat'; + src: local('Montserrat Light'), local('Montserrat-Light'), url('montserratlight.woff2') format('woff2'), url('montserratlight.woff') format('woff'), url('montserratlight.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: 'Montserrat'; + src: local('Montserrat'), local('Montserrat-Regular'), url('montserrat.woff2') format('woff2'), url('montserrat.woff') format('woff'), url('montserrat.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: 'Montserrat'; + src: local('Montserrat Bold'), local('Montserrat-Bold'), url('montserratbold.woff2') format('woff2'), url('montserratbold.woff') format('woff'), url('montserratbold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: 'Montserrat'; + src: local('Montserrat Black'), local('Montserrat-Black'), url('montserratblack.woff2') format('woff2'), url('montserratblack.woff') format('woff'), url('montserratblack.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} diff --git a/fonts/Montserrat/montserrat.ttf b/fonts/Montserrat/montserrat.ttf new file mode 100644 index 0000000..2d4140e Binary files /dev/null and b/fonts/Montserrat/montserrat.ttf differ diff --git a/fonts/Montserrat/montserrat.woff b/fonts/Montserrat/montserrat.woff new file mode 100644 index 0000000..ea1bdf8 Binary files /dev/null and b/fonts/Montserrat/montserrat.woff differ diff --git a/fonts/Montserrat/montserrat.woff2 b/fonts/Montserrat/montserrat.woff2 new file mode 100644 index 0000000..d12a730 Binary files /dev/null and b/fonts/Montserrat/montserrat.woff2 differ diff --git a/fonts/Montserrat/montserratblack.ttf b/fonts/Montserrat/montserratblack.ttf new file mode 100644 index 0000000..9d923d3 Binary files /dev/null and b/fonts/Montserrat/montserratblack.ttf differ diff --git a/fonts/Montserrat/montserratblack.woff b/fonts/Montserrat/montserratblack.woff new file mode 100644 index 0000000..4701b40 Binary files /dev/null and b/fonts/Montserrat/montserratblack.woff differ diff --git a/fonts/Montserrat/montserratblack.woff2 b/fonts/Montserrat/montserratblack.woff2 new file mode 100644 index 0000000..54e4dcb Binary files /dev/null and b/fonts/Montserrat/montserratblack.woff2 differ diff --git a/fonts/Montserrat/montserratbold.ttf b/fonts/Montserrat/montserratbold.ttf new file mode 100644 index 0000000..2d8b0b2 Binary files /dev/null and b/fonts/Montserrat/montserratbold.ttf differ diff --git a/fonts/Montserrat/montserratbold.woff b/fonts/Montserrat/montserratbold.woff new file mode 100644 index 0000000..471e8a5 Binary files /dev/null and b/fonts/Montserrat/montserratbold.woff differ diff --git a/fonts/Montserrat/montserratbold.woff2 b/fonts/Montserrat/montserratbold.woff2 new file mode 100644 index 0000000..2b58f05 Binary files /dev/null and b/fonts/Montserrat/montserratbold.woff2 differ diff --git a/fonts/Montserrat/montserrathairline.ttf b/fonts/Montserrat/montserrathairline.ttf new file mode 100644 index 0000000..bb5f0c5 Binary files /dev/null and b/fonts/Montserrat/montserrathairline.ttf differ diff --git a/fonts/Montserrat/montserrathairline.woff b/fonts/Montserrat/montserrathairline.woff new file mode 100644 index 0000000..2b872c0 Binary files /dev/null and b/fonts/Montserrat/montserrathairline.woff differ diff --git a/fonts/Montserrat/montserrathairline.woff2 b/fonts/Montserrat/montserrathairline.woff2 new file mode 100644 index 0000000..6fe977d Binary files /dev/null and b/fonts/Montserrat/montserrathairline.woff2 differ diff --git a/fonts/Montserrat/montserratlight.ttf b/fonts/Montserrat/montserratlight.ttf new file mode 100644 index 0000000..4f97e58 Binary files /dev/null and b/fonts/Montserrat/montserratlight.ttf differ diff --git a/fonts/Montserrat/montserratlight.woff b/fonts/Montserrat/montserratlight.woff new file mode 100644 index 0000000..aa9be1c Binary files /dev/null and b/fonts/Montserrat/montserratlight.woff differ diff --git a/fonts/Montserrat/montserratlight.woff2 b/fonts/Montserrat/montserratlight.woff2 new file mode 100644 index 0000000..643887c Binary files /dev/null and b/fonts/Montserrat/montserratlight.woff2 differ diff --git a/img/about_cards/1.png b/img/about_cards/1.png new file mode 100644 index 0000000..3b66dec Binary files /dev/null and b/img/about_cards/1.png differ diff --git a/img/about_cards/2.png b/img/about_cards/2.png new file mode 100644 index 0000000..b299555 Binary files /dev/null and b/img/about_cards/2.png differ diff --git a/img/about_cards/3.png b/img/about_cards/3.png new file mode 100644 index 0000000..bacc054 Binary files /dev/null and b/img/about_cards/3.png differ diff --git a/img/about_cards/4.png b/img/about_cards/4.png new file mode 100644 index 0000000..084cc6d Binary files /dev/null and b/img/about_cards/4.png differ diff --git a/img/background-help.png b/img/background-help.png new file mode 100644 index 0000000..0b0e91d Binary files /dev/null and b/img/background-help.png differ diff --git a/img/background-waves.png b/img/background-waves.png new file mode 100644 index 0000000..576f689 Binary files /dev/null and b/img/background-waves.png differ diff --git a/img/cards/alcohol.png b/img/cards/alcohol.png new file mode 100644 index 0000000..5761b35 Binary files /dev/null and b/img/cards/alcohol.png differ diff --git a/img/cards/beer.png b/img/cards/beer.png new file mode 100644 index 0000000..43548d6 Binary files /dev/null and b/img/cards/beer.png differ diff --git a/img/cards/champagne.png b/img/cards/champagne.png new file mode 100644 index 0000000..4f791ca Binary files /dev/null and b/img/cards/champagne.png differ diff --git a/img/cards/wine.png b/img/cards/wine.png new file mode 100644 index 0000000..8ea4457 Binary files /dev/null and b/img/cards/wine.png differ diff --git a/img/icons/arrow.svg b/img/icons/arrow.svg new file mode 100644 index 0000000..db3ec93 --- /dev/null +++ b/img/icons/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icons/cart.svg b/img/icons/cart.svg new file mode 100644 index 0000000..07978c8 --- /dev/null +++ b/img/icons/cart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/icons/dots.svg b/img/icons/dots.svg new file mode 100644 index 0000000..4a1d905 --- /dev/null +++ b/img/icons/dots.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/icons/location.svg b/img/icons/location.svg new file mode 100644 index 0000000..9d84eef --- /dev/null +++ b/img/icons/location.svg @@ -0,0 +1,4 @@ + + + + diff --git a/img/icons/long-arrow.svg b/img/icons/long-arrow.svg new file mode 100644 index 0000000..966871f --- /dev/null +++ b/img/icons/long-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icons/search.svg b/img/icons/search.svg new file mode 100644 index 0000000..4725b4a --- /dev/null +++ b/img/icons/search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/img/icons/user.svg b/img/icons/user.svg new file mode 100644 index 0000000..68978bb --- /dev/null +++ b/img/icons/user.svg @@ -0,0 +1,4 @@ + + + + diff --git a/img/landing.png b/img/landing.png new file mode 100644 index 0000000..1d7e7e3 Binary files /dev/null and b/img/landing.png differ diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..6478be9 --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/img/products/1.png b/img/products/1.png new file mode 100644 index 0000000..8fb0bbb Binary files /dev/null and b/img/products/1.png differ diff --git a/img/products/2.png b/img/products/2.png new file mode 100644 index 0000000..9cbd721 Binary files /dev/null and b/img/products/2.png differ diff --git a/img/products/3.png b/img/products/3.png new file mode 100644 index 0000000..346b92b Binary files /dev/null and b/img/products/3.png differ diff --git a/img/products/4.png b/img/products/4.png new file mode 100644 index 0000000..087cd09 Binary files /dev/null and b/img/products/4.png differ diff --git a/img/social/facebook.svg b/img/social/facebook.svg new file mode 100644 index 0000000..96ec2b0 --- /dev/null +++ b/img/social/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/social/instagram.svg b/img/social/instagram.svg new file mode 100644 index 0000000..6a10f31 --- /dev/null +++ b/img/social/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/social/vk.svg b/img/social/vk.svg new file mode 100644 index 0000000..c1601b2 --- /dev/null +++ b/img/social/vk.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..d4f71d2 --- /dev/null +++ b/index.html @@ -0,0 +1,335 @@ + + + + + + + Wine&Beer + + + + + + +
+
+
+ +
+ Вино + Шампанское + Крепкие напитки + О нас +
+ +
+ +
+
+
+ Вино + Шампанское + Крепкие напитки + О нас +
+
+
+
+ +
+ Dots +
+
+ Не важно, ищете ли вы «то самое вино» или хотите открыть что-то новое, + планируете семейный ужин или грандиозный банкет — + вы можете полностью на нас положиться. +
+
+
+ Arrow +
+
+
+
+
Каталог
+
+
+
Вино
+ Dots +
+ Вино — один из самых благородных и многогранных напитков в мире. В + Wine & Beer представлена одна из лучших коллекций тихих и игристых + вин со всего света. +
+
+ Подробнее + Arrow +
+
+
+
+
+
Шампанское
+ Dots +
+ Вино — один из самых благородных и многогранных напитков в мире. В + Wine & Beer представлена одна из лучших коллекций тихих и игристых + вин со всего света. +
+
+ Подробнее + Arrow +
+
+
+
+
+
Пиво
+ Dots +
+ Вино — один из самых благородных и многогранных напитков в мире. В + Wine & Beer представлена одна из лучших коллекций тихих и игристых + вин со всего света. +
+
+ Подробнее + Arrow +
+
+
+
+
+
Крепкие напитки
+ Dots +
+ Вино — один из самых благородных и многогранных напитков в мире. В + Wine & Beer представлена одна из лучших коллекций тихих и игристых + вин со всего света. +
+
+ Подробнее + Arrow +
+
+
+
+
+ +
+
+
+ Не знаете, как
+ выбрать вино?
Мы можем Вам помочь. +
+
+ Вино — это ключевая составляющая идеального ужина. Бокал вина украсит + любое блюдо и заставит его заиграть совершенно новыми + гастрономическими нотками. +
+ +
+
+
+
+
+ Интересно о вине +
+
+
+
+ + Рецепты +
+
+ Креветки в соусе из кунжутного масла +
+
+ Легкий и быстрый в приготовлении рецепт вы смело можете взять на + вооружение для приготовления в будни. +
+
+
+
+
+
+ + Вино и стиль жизни +
+
Винные фестивали Европы
+
+ Винодельческие регионы часто проводят винные фестивали. +
+
+
+
+
+
+
+ + Советы +
+
+ Подбор вина: советы опытных сомелье +
+
+ Выбрать вино и не сойти с ума. +
+
+
+
+
+
+ + История +
+
Эволюция испанских вин
+
+ В Испании срок выдержки вин считается основным критерием их + качества. +
+
+
+
+
+
+ +
+
© 2019 Wine & Beer
+
+ Конфиденциальность и cookie-файлы +
+ Правила и условия +
+ Доступность +
+
+ + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..e91edc9 --- /dev/null +++ b/js/index.js @@ -0,0 +1,26 @@ +const d = document; + +const body = d.querySelector('body'); +const btn = d.querySelector('button.hamburger_btn'); +const menu = d.querySelector('header > .mobile_menu'); + + +btn.addEventListener('click', e => { + const isOpen = btn.classList.contains('opened'); + + if (!isOpen) { + btn.classList.add('opened'); + body.style.overflow = 'hidden'; + menu.style.visibility = 'visible'; + menu.classList.add('mobile_menu_opened'); + } else { + menu.classList.remove('mobile_menu_opened'); + body.style.overflow = 'visible'; + btn.classList.remove('opened'); + setTimeout(() => { + menu.style.visibility = 'hidden'; + }, 1000); + } + + btn.setAttribute('aria-expanded', isOpen); +});