diff --git a/B&O.ae50684d.svg b/B&O.ae50684d.svg new file mode 100644 index 0000000000..d8c13b3fd0 --- /dev/null +++ b/B&O.ae50684d.svg @@ -0,0 +1,3 @@ + + + diff --git a/Icon-Burger-menu-hover.14c51bac.svg b/Icon-Burger-menu-hover.14c51bac.svg new file mode 100644 index 0000000000..6e12572898 --- /dev/null +++ b/Icon-Burger-menu-hover.14c51bac.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/Icon-Burger-menu.98f2364a.svg b/Icon-Burger-menu.98f2364a.svg new file mode 100644 index 0000000000..d771acdc82 --- /dev/null +++ b/Icon-Burger-menu.98f2364a.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/Icon-Close.2fa8315e.svg b/Icon-Close.2fa8315e.svg new file mode 100644 index 0000000000..8590db1515 --- /dev/null +++ b/Icon-Close.2fa8315e.svg @@ -0,0 +1,3 @@ + + + diff --git a/Icon-Phone-call.4c2e53f1.svg b/Icon-Phone-call.4c2e53f1.svg new file mode 100644 index 0000000000..fbf121a8cb --- /dev/null +++ b/Icon-Phone-call.4c2e53f1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/Image.a36266ca.png b/Image.a36266ca.png new file mode 100644 index 0000000000..1579f8133d Binary files /dev/null and b/Image.a36266ca.png differ diff --git a/about-bg.86429f17.png b/about-bg.86429f17.png new file mode 100644 index 0000000000..9f77bc0850 Binary files /dev/null and b/about-bg.86429f17.png differ diff --git a/card1.11d020f9.png b/card1.11d020f9.png new file mode 100644 index 0000000000..2f9682d428 Binary files /dev/null and b/card1.11d020f9.png differ diff --git a/card2.2792005f.png b/card2.2792005f.png new file mode 100644 index 0000000000..e5e8e787dd Binary files /dev/null and b/card2.2792005f.png differ diff --git a/card3.53fdcbc6.png b/card3.53fdcbc6.png new file mode 100644 index 0000000000..d92250f182 Binary files /dev/null and b/card3.53fdcbc6.png differ diff --git a/catalog1.a6844258.png b/catalog1.a6844258.png new file mode 100644 index 0000000000..ac68b70212 Binary files /dev/null and b/catalog1.a6844258.png differ diff --git a/catalog2.ef63bb6f.png b/catalog2.ef63bb6f.png new file mode 100644 index 0000000000..c71f1191ba Binary files /dev/null and b/catalog2.ef63bb6f.png differ diff --git a/catalog3.e80f4bcc.png b/catalog3.e80f4bcc.png new file mode 100644 index 0000000000..d5b2eedec2 Binary files /dev/null and b/catalog3.e80f4bcc.png differ diff --git a/catalog4.623af54e.png b/catalog4.623af54e.png new file mode 100644 index 0000000000..518944da69 Binary files /dev/null and b/catalog4.623af54e.png differ diff --git a/catalog5.1eae87a6.png b/catalog5.1eae87a6.png new file mode 100644 index 0000000000..25afd5f22f Binary files /dev/null and b/catalog5.1eae87a6.png differ diff --git a/catalog6.97c24c38.png b/catalog6.97c24c38.png new file mode 100644 index 0000000000..d35d9a3449 Binary files /dev/null and b/catalog6.97c24c38.png differ diff --git a/header-bg.53235e2c.png b/header-bg.53235e2c.png new file mode 100644 index 0000000000..af444c5edd Binary files /dev/null and b/header-bg.53235e2c.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000000..c21eb0a18b --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +Bang & Olufsen

Your senses.
Set free.

Recommended

card

BEOSOUND A5

Huge sound anywhere – in the home or outdoors. Beosound A5 is a Wi-Fi and Bluetooth speaker with long-lasting battery and wireless charging built in.

$ 1299.00 card

BEOPLAY HX

Wireless noise-cancelling headphones. Listen in comfort whether you're on a call, working from home or taking a moment for yourself.

$ 499.00 card

BEOSOUND THEATRE

Four patent-pending acoustic innovations in one sleek soundbar envelop you in sound from every angle. Made to fit any TV, and last for generations.

$ 3199.00

Sound. Vision.
It's your pick.

Portable speakers Portable speakers
Portable speakers
Earphones Earphones
Earphones
Smart Home Smart Home
Smart Home
View all

Timeless, for 50 years and counting

Bang & Olufsen is expanding its Recreated Classics Program with the launch of Beosystems – a limited edition music system that transcends time by bridging the gap between one of our iconic designs from 1972 and today’s cutting-edge digital technology.

Contact us

\ No newline at end of file diff --git a/main.773d914d.css b/main.773d914d.css new file mode 100644 index 0000000000..7a91346019 --- /dev/null +++ b/main.773d914d.css @@ -0,0 +1,2 @@ +html{scroll-behavior:smooth}.page{overflow-x:hidden;margin:0;min-width:320px}.top-bar__container{display:flex;justify-content:space-between;align-items:center;padding-block:24px}@media (min-width:576px){.top-bar__container{padding-block:32px}}.top-bar__logo{width:152px;height:16px;box-sizing:content-box;transition:.5s}.top-bar__logo:hover{transform:scale(1.05)}@media (min-width:576px){.top-bar__logo{width:228px;height:24px}}.top-bar__icons{display:flex;gap:24px}@media (min-width:576px){.top-bar__icons{gap:32px}}.top-bar__link{height:24px;width:24px;display:block;background-repeat:no-repeat;transition:.5s}.top-bar__link:hover{transform:scale(1.2)}@media (min-width:576px){.top-bar__link{height:32px;width:32px}}.icon--phone{position:relative;background-image:url(Icon-Phone-call.4c2e53f1.svg)}.icon--phone,.icon--phone:hover{transition:.5s}.icon--phone:hover:before{content:"+1 234 555-55-55";position:absolute;top:5px;left:-150px;text-decoration:none;color:#1b2129;text-align:right;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:2px;text-transform:uppercase}.icon--menu{background-image:url(Icon-Burger-menu.98f2364a.svg)}.icon--menu:hover{background-image:url(Icon-Burger-menu-hover.14c51bac.svg)}.header{background-image:url(header-bg.53235e2c.png);height:100vh;background-size:cover;background-position:50%;background-repeat:no-repeat}.header__content{display:flex;justify-content:space-between;flex-direction:column;height:100vh}.header__title{margin:0;padding-bottom:40px;color:#fff;font-family:manrope,sans-serif;font-size:36px;font-style:normal;font-weight:700;line-height:100%}@media (min-width:576px){.header__title{font-size:48px;padding-bottom:64px}}.menu{position:fixed;left:0;right:0;top:0;margin:0;height:100vh;box-sizing:border-box;background-color:#f9f9f9;opacity:0;pointer-events:none}.menu__nav{padding-top:32px;padding-bottom:48px}.menu:target{opacity:1;pointer-events:all}.icon--close{background-image:url(Icon-Close.2fa8315e.svg)}.page:has(.page__menu:target){overflow:hidden}.nav{justify-content:space-between;padding-top:32px}.nav,.nav__list{display:flex;gap:32px}.nav__list{padding:0;margin:0;list-style:none;flex-direction:column}.nav__link{position:relative;font-family:manrope,sans-serif;font-size:22px;font-weight:700;line-height:22px;color:#1b2129;text-decoration:none}.nav__link:after{content:"";position:absolute;bottom:-8;display:block;height:1px;width:100%;background-color:#1b2129;transition:transform .5s;transform:scale(0);transform-origin:left}.nav__link:hover:after{transform:scale(1)}.nav__call-to-order{display:block;width:fit-content;border-bottom:1px solid #1b2129;color:#1b2129;font-size:16px;font-weight:700;line-height:140%;letter-spacing:2px;text-transform:uppercase;text-decoration:none}.nav__call-to-order:hover{color:#f98921}.nav__number{display:block;margin:0;padding:0}.section-title{margin:0;color:#1b2129;font-family:manrope,sans-serif;font-size:32px;font-weight:700;line-height:32px;padding-top:64px}@media (min-width:576px){.section-title{padding-bottom:56px}}@media (min-width:768px){.section-title{padding-top:120px;font-size:48px;font-weight:700;line-height:48px;grid-column:1/-1}}.card{display:flex;flex-direction:column}.card__photo{border-radius:4px;padding-bottom:24px;width:100%;transition:.5s}.card__photo:hover{transform:scale(1.05)}.card__title>a{color:inherit;text-decoration:none;font-family:manrope,sans-serif;font-size:18px;font-weight:700;line-height:140%;padding-bottom:8px;margin:0;cursor:pointer;transition:.5s}.card__title>a:hover{color:#f98921}.card__text{font-family:manrope,sans-serif;font-size:16px;font-weight:400;line-height:140%;letter-spacing:.15px;padding-bottom:12px;margin:0}@media (min-width:576px){.card__text{padding-bottom:34px}}.card__price{font-family:manrope,sans-serif;font-size:16px;font-weight:700;line-height:140%;margin:0}.recommended__content{display:grid;grid-template-columns:repeat(1,1fr);gap:40px;padding-top:48px}@media (min-width:576px){.recommended__content{gap:56px}}@media (min-width:768px){.recommended__content{grid-template-columns:repeat(3,1fr);grid-row:1fr;gap:24px}}@media (min-width:768px){.categories__container{grid-template-columns:repeat(12,1fr)}}.categories__content{display:grid;gap:40px;grid-template-columns:repeat(2,1fr);padding-top:47px;padding-bottom:96px}@media (min-width:576px){.categories__content{padding-bottom:120px;gap:56px}}@media (min-width:768px){.categories__content{grid-template-columns:repeat(12,1fr)}}.categories__section{grid-column:span 2}@media (min-width:768px){.categories__section{grid-column:1/-1}}.categories__photos{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding-bottom:16px}@media (min-width:576px){.categories__photos{gap:24px}}.categories__photo{width:100%}.categories__photo-link{transition:.5s}.categories__photo-link:hover{transform:scale(1.05)}.categories__link{color:inherit;text-decoration:none;font-size:18px;font-weight:700;line-height:140%}.categories__link:hover{color:#f98921}@media (min-width:576px){.categories__link{font-size:24px}}.categories--button{padding-top:40px;text-decoration:none;grid-column:span 2}@media (min-width:768px){.categories--button{grid-column:span 4}}.about{background-color:#fcfaef}.about__bg-photo{height:200px;background-repeat:no-repeat;background-size:cover;background-image:url(about-bg.86429f17.png);background-position:50%;background-attachment:fixed}.about__text{display:grid;grid-template-columns:repeat(2,1fr);padding:48px 20px;gap:24px}.about__text-paragraf{margin:0;grid-column:span 2}@media (min-width:576px){.about__text-paragraf{grid-column:4/span 3}}@media (min-width:768px){.about__text-paragraf{grid-column:8/-1}}@media (min-width:576px){.about__text{grid-template-columns:repeat(6,1fr);padding-block:120px;padding-inline:72px}}@media (min-width:768px){.about__text{grid-template-columns:repeat(12,1fr);padding-inline:120px}}.section-title--another-padding{grid-column:span 2;padding:0}@media (min-width:576px){.section-title--another-padding{grid-column:1/4;padding:0}}@media (min-width:768px){.section-title--another-padding{grid-column:1/6;padding:0}}.contacts__items{display:grid;grid-template-columns:repeat(2,1fr);gap:48px}@media (min-width:768px){.contacts__items{grid-template-columns:repeat(12,1fr)}}.contacts__title{grid-column:span 2}@media (min-width:768px){.contacts__title{grid-column:span 12}}.contacts__form{display:flex;flex-direction:column;gap:16px;grid-column:span 2}@media (min-width:768px){.contacts__form{grid-column:1/7}}.contacts__input{padding:14px 16px;height:48px;box-sizing:border-box;background-color:#f9f9f9;border:none;border-radius:8px;grid-column:span 2;color:#1b2129;font-family:manrope,sans-serif;font-size:14px;font-weight:400;line-height:140%;letter-spacing:.15px}.contacts__input:hover{border-radius:8px;border:1px solid #dbdbdb;background:#f9f9f9}.contacts__input:focus{outline:0;border-radius:8px;border:2px solid #f98921;background:#f9f9f9}.contacts__input::placeholder{color:#7e7e83;font-family:manrope,sans-serif;font-size:14px;font-weight:400;line-height:140%;letter-spacing:.15px;border-radius:8px;background:#f9f9f9}.contacts__text-area{box-sizing:border-box;height:120px;background-color:#f9f9f9;border:none;border-radius:8px;padding-left:10px;padding-top:10px;grid-column:span 2}.contacts__text-area:hover{border-radius:8px;border:1px solid #dbdbdb;background:#f9f9f9}.contacts__text-area:focus{outline:none;border-radius:8px;border:2px solid #f98921;background:#f9f9f9}.contacts__text-area::placeholder{color:#7e7e83;font-family:manrope,sans-serif;font-size:14px;font-weight:400;line-height:140%;letter-spacing:.15px;border-radius:8px;background:#f9f9f9}.contacts__list{display:flex;flex-direction:column;gap:24px;list-style:none;padding:0;margin:0;grid-column:span 2}@media (min-width:768px){.contacts__list{grid-column:8/-1}}.contacts__link{text-decoration:none;color:#191919;font-family:manrope,sans-serif;font-size:16px;font-weight:400;line-height:140%;letter-spacing:.15px;transition:.5s}.contacts__link:hover{color:#f98921}.contacts__link>span{padding-bottom:8px;color:#9393a3;font-size:16px;font-weight:400;line-height:140%;letter-spacing:.15px}.button{display:inline-flex;height:56px;padding:0 48px;flex-direction:column;justify-content:center;align-items:center;background-color:#f98921;outline:none;border-radius:8px;border:none;color:#fff;text-align:center;font-family:manrope,sans-serif;font-size:16px;font-weight:700;line-height:27px;cursor:pointer;transition:background-color .3s}.button:hover{background-color:#1b2129;opacity:.8}body{margin:0;font-family:manrope,sans-serif;text-align:left}a,div,li,ul{margin:0;padding:0}.container{margin:0;padding-inline:20px;padding-bottom:64px}@media (min-width:576px){.container{padding-inline:72px;padding-bottom:120px}}@media (min-width:768px){.container{padding-inline:120px;padding-bottom:120px;max-width:1200px;margin:0 auto}}.main__content{margin:0;padding:0;display:grid;row-gap:48px;grid-template-columns:100%} +/*# sourceMappingURL=main.773d914d.css.map */ \ No newline at end of file diff --git a/main.773d914d.css.map b/main.773d914d.css.map new file mode 100644 index 0000000000..7b87564d60 --- /dev/null +++ b/main.773d914d.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["styles\\normalize.scss","styles\\header-menu\\top-bar.scss","styles\\variables.scss","styles\\header-menu\\header.scss","styles\\header-menu\\menu.scss","styles\\header-menu\\nav.scss","styles\\sections.scss","styles\\recommended\\card.scss","styles\\recommended\\recommended.scss","styles\\categories\\categories.scss","styles\\about\\about.scss","styles\\contacts\\contacts.scss","styles\\buttons.scss","styles\\main.scss"],"names":[],"mappings":"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","file":"main.773d914d.css","sourceRoot":"..\\src","sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\n.page {\n overflow-x: hidden;\n margin: 0;\n min-width: 320px;\n &:has(.page__menu:target) {\n overflow: hidden; /* not to scroll the page */\n }\n}\n",".top-bar {\n &__container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-block: 24px;\n\n @media (min-width: 576px) {\n padding-block: 32px;\n }\n }\n\n &__logo {\n width: 152px;\n height: 16px;\n box-sizing: content-box;\n\n transition: $transition;\n\n &:hover {\n transform: scale(1.05);\n }\n\n @media (min-width: 576px) {\n width: 228px;\n height: 24px;\n }\n }\n\n &__icons {\n display: flex;\n gap: 24px;\n\n @media (min-width: 576px) {\n gap: 32px;\n }\n }\n\n &__link {\n height: 24px;\n width: 24px;\n display: block;\n background-repeat: no-repeat;\n\n transition: $transition;\n\n &:hover {\n transform: scale(1.2);\n }\n\n @media (min-width: 576px) {\n height: 32px;\n width: 32px;\n }\n }\n}\n\n.icon--phone {\n position: relative;\n transition: $transition;\n background-image: url(icons/Icon-Phone-call.svg);\n}\n\n.icon--phone:hover {\n transition: $transition;\n &::before {\n content: \"+1 234 555-55-55\";\n position: absolute;\n top: 5px;\n left: -150px;\n\n text-decoration: none;\n color: $mainTextColor;\n text-align: right;\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 16px;\n letter-spacing: 2px;\n text-transform: uppercase;\n }\n\n}\n\n.icon--menu {\n background-image: url(icons/Icon-Burger-menu.svg);\n &:hover {\n background-image: url(icons/Icon-Burger-menu-hover.svg);\n }\n}\n","$mainFont: manrope, sans-serif;\n$backgroundColor: #f9f9f9;\n$mainTextColor: #1b2129;\n$inlinePadding: 20px;\n$placeholderColor: #7e7e83;\n$contactsColor: #9393a3;\n$buttonPressed: #1b2129;\n$buttonColor: #f98921;\n\n$transition: 0.5s;\n",".header {\n\n background-image: url(./images/header-bg.png);\n height: 100vh;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n\n &__content {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n height: 100vh;\n }\n\n &__title {\n margin: 0;\n padding-bottom: 40px;\n color: #fff;\n font-family: $mainFont;\n font-size: 36px;\n font-style: normal;\n font-weight: 700;\n line-height: 100%;\n\n @media (min-width: 576px) {\n font-size: 48px;\n padding-bottom: 64px;\n }\n }\n}\n",".menu {\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n margin: 0;\n height: 100vh;\n box-sizing: border-box;\n background-color: $backgroundColor;\n\n opacity: 0;\n pointer-events: none;\n\n &__nav {\n padding-top: 32px;\n padding-bottom: 48px;\n\n }\n\n &:target {\n opacity: 1;\n pointer-events: all;\n }\n}\n\n.icon--close {\n background-image: url(icons/Icon-Close.svg);\n}\n\n.page:has(.page__menu:target) {\n overflow: hidden; /* not to scroll the page */\n}\n",".nav {\n display: flex;\n justify-content: space-between;\n gap: 32px;\n padding-top: 32px;\n &__list {\n padding: 0;\n margin: 0;\n list-style: none;\n\n display: flex;\n flex-direction: column;\n gap: 32px;\n }\n\n &__link {\n position: relative;\n font-family: $mainFont;\n font-size: 22px;\n font-weight: 700;\n line-height: 22px;\n color: $mainTextColor;\n text-decoration: none;\n\n &::after {\n content: \"\";\n position: absolute;\n bottom: -8;\n display: block;\n height: 1px;\n width: 100%;\n background-color: $mainTextColor;\n\n transition: transform $transition;\n transform: scale(0);\n transform-origin: left;\n }\n\n &:hover::after {\n transform: scale(1);\n }\n }\n\n &__call-to-order {\n display: block;\n width: fit-content;\n\n border-bottom: 1px solid $mainTextColor;\n\n color: $mainTextColor;\n font-size: 16px;\n font-weight: 700;\n line-height: 140%;\n letter-spacing: 2px;\n text-transform: uppercase;\n text-decoration: none;\n\n &:hover {\n color: $buttonColor;\n }\n }\n\n &__number {\n display: block;\n margin: 0;\n padding: 0;\n }\n}\n",".section-title {\n margin: 0;\n color: $mainTextColor;\n font-family: $mainFont;\n font-size: 32px;\n font-weight: 700;\n line-height: 32px;\n padding-top: 64px;\n\n @media (min-width: 576px) {\n padding-bottom: 56px;\n }\n\n @media (min-width: 768px) {\n padding-top: 120px;\n font-size: 48px;\n font-weight: 700;\n line-height: 48px;\n\n grid-column: 1/-1;\n }\n}\n",".card {\n display: flex;\n flex-direction: column;\n\n &__photo {\n border-radius: 4px;\n padding-bottom: 24px;\n width: 100%;\n transition: $transition;\n\n &:hover {\n transform: scale(1.05);\n }\n }\n\n &__title > a {\n color: inherit;\n text-decoration: none;\n font-family: $mainFont;\n font-size: 18px;\n font-weight: 700;\n line-height: 140%;\n padding-bottom: 8px;\n margin: 0;\n cursor: pointer;\n transition: $transition;\n\n &:hover {\n color: $buttonColor;\n }\n }\n\n &__text {\n font-family: $mainFont;\n font-size: 16px;\n font-weight: 400;\n line-height: 140%;\n letter-spacing: 0.15px;\n padding-bottom: 12px;\n margin: 0;\n\n @media (min-width: 576px) {\n padding-bottom: 34px;\n }\n }\n\n &__price {\n font-family: $mainFont;\n font-size: 16px;\n font-weight: 700;\n line-height: 140%;\n margin: 0;\n }\n}\n",".recommended {\n &__content {\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n gap: 40px;\n padding-top: 48px;\n \n @media (min-width: 576px) {\n gap: 56px;\n }\n\n @media (min-width: 768px) {\n grid-template-columns: repeat(3, 1fr);\n grid-row: 1fr;\n gap: 24px;\n }\n }\n}\n",".categories {\n &__container {\n @media (min-width: 768px) {\n grid-template-columns: repeat(12, 1fr);\n }\n }\n\n &__content {\n display: grid;\n gap: 40px;\n grid-template-columns: repeat(2, 1fr);\n padding-top: 47px;\n padding-bottom: 96px;\n\n @media (min-width: 576px) {\n padding-bottom: 120px;\n gap: 56px;\n }\n\n @media (min-width: 768px) {\n grid-template-columns: repeat(12, 1fr);\n }\n }\n\n &__section {\n grid-column: span 2;\n\n @media (min-width: 768px) {\n grid-column: 1/ -1;\n }\n }\n\n &__photos {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n padding-bottom: 16px;\n\n @media (min-width: 576px) {\n gap: 24px;\n }\n }\n\n &__photo {\n width: 100%;\n }\n\n &__photo-link {\n transition: $transition;\n\n &:hover {\n transform: scale(1.05);\n }\n }\n\n &__link {\n color: inherit;\n text-decoration: none;\n font-size: 18px;\n font-weight: 700;\n line-height: 140%;\n\n &:hover {\n color: $buttonColor;\n }\n\n @media (min-width: 576px) {\n font-size: 24px;\n }\n }\n\n &--button {\n padding-top: 40px;\n text-decoration: none;\n grid-column: span 2;\n\n @media (min-width: 768px) {\n grid-column: span 4;\n }\n }\n\n}\n",".about {\n background-color: rgba(252, 250, 239, 1);\n &__bg-photo {\n height: 200px;\n background-repeat: no-repeat;\n background-size: cover;\n background-image: url(./images/about-bg.png);\n background-position: 50%;\n background-attachment: fixed;\n }\n\n &__text {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n\n padding: 48px 20px;\n gap: 24px;\n\n &-paragraf {\n margin: 0;\n grid-column: span 2;\n\n @media (min-width: 576px) {\n grid-column: 4/ span 3;\n }\n\n @media (min-width: 768px) {\n grid-column: 8/-1;\n }\n }\n\n @media (min-width: 576px) {\n grid-template-columns: repeat(6, 1fr);\n padding-block: 120px;\n padding-inline: 72px;\n }\n\n @media (min-width: 768px) {\n grid-template-columns: repeat(12, 1fr);\n padding-inline: 120px;\n }\n }\n}\n\n.section-title--another-padding {\n grid-column: span 2;\n padding: 0;\n\n @media (min-width: 576px) {\n grid-column: 1/ 4;\n padding: 0;\n }\n\n @media (min-width: 768px) {\n grid-column: 1/ 6;\n padding: 0;\n }\n}\n",".contacts {\n &__items {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 48px;\n\n @media (min-width: 768px) {\n grid-template-columns: repeat(12, 1fr);\n }\n\n }\n\n &__title {\n grid-column: span 2;\n\n @media (min-width: 768px) {\n grid-column: span 12;\n }\n }\n\n &__form {\n display: flex;\n flex-direction: column;\n gap: 16px;\n grid-column: span 2;\n\n @media (min-width: 768px) {\n grid-column: 1/ 7;\n }\n }\n\n &__input {\n padding: 14px 16px;\n height: 48px;\n box-sizing: border-box;\n\n background-color: $backgroundColor;\n border: none;\n border-radius: 8px;\n\n grid-column: span 2;\n\n color: $mainTextColor;\n font-family: $mainFont;\n font-size: 14px;\n font-weight: 400;\n line-height: 140%;\n letter-spacing: 0.15px;\n\n &:hover {\n border-radius: 8px;\n border: 1px solid #dbdbdb;\n background: $backgroundColor;\n }\n\n &:focus {\n outline: 0;\n border-radius: 8px;\n border: 2px solid $buttonColor;\n background: $backgroundColor;\n }\n\n &::placeholder {\n color: $placeholderColor;\n font-family: $mainFont;\n font-size: 14px;\n font-weight: 400;\n line-height: 140%;\n letter-spacing: 0.15px;\n border-radius: 8px;\n background: $backgroundColor;\n }\n }\n\n &__text-area {\n box-sizing: border-box;\n height: 120px;\n background-color: $backgroundColor;\n border: none;\n border-radius: 8px;\n\n padding-left: 10px;\n padding-top: 10px;\n\n grid-column: span 2;\n\n &:hover {\n border-radius: 8px;\n border: 1px solid #dbdbdb;\n background: $backgroundColor;\n }\n\n &:focus {\n outline: none;\n border-radius: 8px;\n border: 2px solid $buttonColor;\n background: $backgroundColor;\n }\n\n &::placeholder {\n color: $placeholderColor;\n font-family: $mainFont;\n font-size: 14px;\n font-weight: 400;\n line-height: 140%;\n letter-spacing: 0.15px;\n border-radius: 8px;\n background: $backgroundColor;\n }\n }\n\n &__list {\n display: flex;\n flex-direction: column;\n gap: 24px;\n list-style: none;\n padding: 0;\n margin: 0;\n\n grid-column: span 2;\n\n @media (min-width: 768px) {\n grid-column: 8/ -1;\n }\n\n }\n\n &__link {\n text-decoration: none;\n color: #191919;\n font-family: $mainFont;\n font-size: 16px;\n font-weight: 400;\n line-height: 140%;\n letter-spacing: 0.15px;\n\n transition: $transition;\n\n &:hover {\n color: $buttonColor;\n }\n }\n\n &__link > span {\n padding-bottom: 8px;\n color: $contactsColor;\n font-size: 16px;\n font-weight: 400;\n line-height: 140%;\n letter-spacing: 0.15px;\n }\n}\n",".button {\n display: inline-flex;\n height: 56px;\n padding: 0 48px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n background-color: $buttonColor;\n outline: none;\n border-radius: 8px;\n border: none;\n\n color: #fff;\n text-align: center;\n font-family: $mainFont;\n font-size: 16px;\n font-weight: 700;\n line-height: 27px;\n\n cursor: pointer;\n transition: background-color 0.3s;\n &:hover {\n background-color: $buttonPressed;\n opacity: 0.8;\n }\n}\n","@import \"./variables.scss\";\n@import \"./normalize.scss\";\n@import \"./header-menu/top-bar\";\n@import \"./header-menu/header\";\n@import \"./header-menu/menu\";\n@import \"./header-menu/nav\";\n@import \"./sections.scss\";\n\n@import \"./recommended/card.scss\";\n@import \"./recommended/recommended.scss\";\n\n@import \"./categories/categories.scss\";\n\n@import \"./about/about.scss\";\n\n@import \"./contacts/contacts.scss\";\n@import \"./buttons.scss\";\n\nbody {\n margin: 0;\n font-family: $mainFont;\n text-align: left;\n}\n\na,\nul,\nli,\ndiv {\n margin: 0;\n padding: 0;\n}\n\n.container {\n margin: 0;\n padding-inline: 20px;\n padding-bottom: 64px;\n\n @media (min-width: 576px) {\n padding-inline: 72px;\n padding-bottom: 120px;\n }\n\n @media (min-width: 768px) {\n padding-inline: 120px;\n padding-bottom: 120px;\n max-width: 1200px;\n margin: 0 auto;\n }\n\n}\n\n.main {\n &__content {\n margin: 0;\n padding: 0;\n display: grid;\n row-gap: 48px;\n grid-template-columns: 100%;\n }\n}\n"]} \ No newline at end of file diff --git a/main.b2b0b56a.js b/main.b2b0b56a.js new file mode 100644 index 0000000000..b9a9686489 --- /dev/null +++ b/main.b2b0b56a.js @@ -0,0 +1,4 @@ +parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c