diff --git a/3/bundle.e0c298bc55f37dc6e8bb.js b/3/bundle.e0c298bc55f37dc6e8bb.js
new file mode 100644
index 0000000..237aa35
--- /dev/null
+++ b/3/bundle.e0c298bc55f37dc6e8bb.js
@@ -0,0 +1,2 @@
+(()=>{"use strict";function e(e){var t=document.createElement("div");return t.innerHTML=e,t.firstElementChild}function t(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"beforeend";t.insertAdjacentElement(n,e.getElement())}function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function r(e,t){for(var n=0;n ').concat("18 — 20 Mar",' \n Total: € ').concat("1230","\n \n \n —\n \n ').concat((Date.parse(x[A].eventEndTime)-Date.parse(x[A].eventStartTime))/1e3/60,'M \n € ').concat(x[A].price,'\n '.concat("Amsterdam — Chamonix — Geneva",'
\n ').concat(x[A].title,'
\n Offers:
\n \n
\n \n \n
${tripInfoDate}
\n\n Total: € ${tripInfoCostValue}\n
\n\n \n —\n \n
\n${((Date.parse(EVENTS[i].eventEndTime) - Date.parse(EVENTS[i].eventStartTime)) / 1000) / 60}M
\n\n € ${EVENTS[i].price}\n
\nLoading...
';\n}\n\nexport default class Loading {\n getTemplate() {\n return createLoadingTemplate();\n }\n\n getElement() {\n if(!this.element) {\n this.element = createElement(this.getTemplate());\n }\n\n return this.element;\n }\n\n removeElement() {\n this.element = null;\n }\n}\n","import {createElement} from '../render.js';\n\nfunction createTripEventsMessageTemplate() {\n return 'Click New Event to create your first point
';\n}\n\nexport default class TripEventsMessage {\n getTemplate() {\n return createTripEventsMessageTemplate();\n }\n\n getElement() {\n if(!this.element) {\n this.element = createElement(this.getTemplate());\n }\n\n return this.element;\n }\n\n removeElement() {\n this.element = null;\n }\n}\n\n\n","import {createElement} from '../render.js';\n\nfunction createEventEditFormTemplate() {\n return '';\n}\n\nexport default class EventEditForm {\n getTemplate() {\n return createEventEditFormTemplate();\n }\n\n getElement() {\n if(!this.element) {\n this.element = createElement(this.getTemplate());\n }\n\n return this.element;\n }\n\n removeElement() {\n this.element = null;\n }\n}\n","import {createElement} from '../render.js';\n\nfunction createEventHeaderTemplate() {\n return `Geneva is a city in Switzerland that lies at the southern tip of expansive Lac Léman (Lake Geneva). Surrounded by the Alps and Jura mountains, the city has views of dramatic Mont Blanc.
';\n}\n\nexport default class EventDestinationDescription {\n getTemplate() {\n return createEventDestinationDescriptionTemplate();\n }\n\n getElement() {\n if(!this.element) {\n this.element = createElement(this.getTemplate());\n }\n\n return this.element;\n }\n\n removeElement() {\n this.element = null;\n }\n}\n\n\n","import {createElement} from '../render.js';\n\nfunction createEventPhotosTapeTemplate() {\n return '';\n}\n\nexport default class EventPhotosTape {\n getTemplate() {\n return createEventPhotosTapeTemplate();\n }\n\n getElement() {\n if(!this.element) {\n this.element = createElement(this.getTemplate());\n }\n\n return this.element;\n }\n\n removeElement() {\n this.element = null;\n }\n}\n\n\n","import {createElement} from '../render.js';\n\nconst EVENT_PHOTO = ['img/photos/1.jpg', 'img/photos/2.jpg', 'img/photos/3.jpg', 'img/photos/4.jpg', 'img/photos/5.jpg', ];\n\nlet i = -1;\n\nfunction createEventPhotoTemplate() {\n i++;\n return ``;\n}\n\nexport default class EventPhoto {\n getTemplate() {\n return createEventPhotoTemplate();\n }\n\n getElement() {\n if(!this.element) {\n this.element = createElement(this.getTemplate());\n }\n\n return this.element;\n }\n\n removeElement() {\n this.element = null;\n }\n}\n\n","import {createElement} from '../render.js';\n\nfunction createEventPhotosContainerTemplate() {\n return '';\n}\n\nexport default class EventPhotosContainer {\n getTemplate() {\n return createEventPhotosContainerTemplate();\n }\n\n getElement() {\n if(!this.element) {\n this.element = createElement(this.getTemplate());\n }\n\n return this.element;\n }\n\n removeElement() {\n this.element = null;\n }\n}\n\n","import {RenderPosition, render} from './render.js';\nimport SectionTripInfo from './view/section-trip-info-view.js';\nimport TripFiltersForm from './view/trip-filters-form-view.js';\nimport TripFilters from './view/trip-filters-view.js';\nimport SortView from './view/sort-view.js';\nimport TripEventList from './view/trip-events-list-view.js';\nimport TripEventItem from './view/trip-events-item-view.js';\nimport Loading from './view/loading-view.js';\nimport TripEventsMessage from './view/trip-events-message-view.js';\nimport EventEditForm from './view/event-edit-form-view.js';\nimport EventHeader from './view/event-header-view.js';\nimport SectionEventDetails from './view/event-section-details-views.js';\nimport EventSectionTitle from './view/event-section-title-view.js';\nimport EventSectionOffers from './view/event-section-offers-view.js';\nimport EventAvailableOffers from './view/event-available-offers-view.js';\nimport EventOfferSelector from './view/event-offers-selector-view.js';\nimport EventSectionDestination from './view/event-section-detination-view.js';\nimport EventDestinationDescription from './view/event-destination-description-view.js';\nimport EventPhotosTape from './view/event-photos-tape-view.js';\nimport EventPhoto from './view/event-photo-view.js';\nimport EventPhotosContainer from './view/event-photos-container-view.js';\n\nconst tripMain = document.querySelector('.trip-main');\nconst tripControlsFilters = document.querySelector('.trip-controls__filters');\nconst tripEvents = document.querySelector('.trip-events');\n\nrender(new SectionTripInfo(), tripMain, RenderPosition.AFTERBEGIN); // Заголовок, даты, общая цена\nrender (new TripFiltersForm(), tripControlsFilters);\n\nconst tripFilters = document.querySelector('.trip-filters');\n\nfor (let i = 0; i < 4; i++) { // Создание кнопок для сортировки по времени\n render(new TripFilters(i), tripFilters);\n}\n\nrender (new SortView(), tripEvents); // Создание кнопок для сортировки по дате, виду передвижения, цене...\nrender (new TripEventList(), tripEvents); // Создание списка элементов\n\nconst tripEventList = document.querySelector('.trip-events__list');\n\nfor (let i = 0; i < 9; i++) { // Создание элементов в списке\n render (new TripEventItem(), tripEventList);\n}\n\nrender (new Loading(), tripEvents); // Сообщение о загрузке\nrender (new TripEventsMessage(), tripEvents);\n\nconst tripEventItem = document.querySelector('.trip-events__item');\nrender (new EventEditForm(), tripEventItem); // Создание формы(контейнера) для редактирования события\n\nconst eventEditForm = document.querySelector('.event--edit');\nrender (new EventHeader(), eventEditForm); // Создание header для редактирования события\nrender (new SectionEventDetails(), eventEditForm); // Создание Секции для редактирования деталей события\n\nconst eventSectionDetails = document.querySelector('.event__details');\nrender (new EventSectionOffers(), eventSectionDetails); //Создание секции offers\n\nconst eventSectionOffers = document.querySelector('.event__section--offers');\nrender (new EventSectionTitle(0), eventSectionOffers); // Создание заголовка для секции деталий события КАК ПЕРЕДАТЬ ПЕРЕМЕННЫЕ?\nrender (new EventAvailableOffers(), eventSectionOffers); // Создание контейнера для предложений\n\nconst eventAvailableOffers = document.querySelector('.event__available-offers');\n\nfor (let i = 0; i < 5; i++) { // Создание элементов в списке предложений\n render (new EventOfferSelector(), eventAvailableOffers);\n}\n\nrender (new EventSectionDestination(), eventSectionDetails); // создает блок destionation\n\nconst eventSectionDestination = document.querySelector('.event__section--destination');\nrender (new EventSectionTitle(1), eventSectionDestination); // Создание заголовка для секции описания\nrender (new EventDestinationDescription(), eventSectionDestination); // создает описание места\nrender (new EventPhotosContainer(), eventSectionDestination);\n\nconst EventPhotoContainer = document.querySelector('.event__photos-container');\nrender (new EventPhotosTape(), EventPhotoContainer); // создает описание места\n\nconst EventPhotoTape = document.querySelector('.event__photos-tape');\nfor (let i = 0; i < 5; i++) { // Создание элементов в списке предложений\n render (new EventPhoto(), EventPhotoTape); // создает фотографии места\n}\n\n"],"names":["createElement","template","newElement","document","innerHTML","firstElementChild","render","component","container","place","arguments","length","undefined","insertAdjacentElement","getElement","SectionTripInfo","_classCallCheck","key","value","concat","this","element","getTemplate","TripFiltersForm","filterName","checkedName","disabledName","i","TripFilters","charAt","toUpperCase","slice","SortView","TripEventList","EVENTS","iconParth","title","eventDate","eventStartTime","eventStartTimeText","eventEndTime","eventEndTimeText","price","OFFERS","TripEventItem","Date","parse","Loading","TripEventsMessage","EventEditForm","EventHeader","SectionEventDetails","titleOptions","EventSectionTitle","EventSectionOffers","EventAvailableOffers","EventOfferSelector","EventSectionDestination","EventDestinationDescription","EventPhotosTape","EVENT_PHOTO","EventPhoto","EventPhotosContainer","tripMain","querySelector","tripControlsFilters","tripEvents","tripFilters","tripEventList","tripEventItem","eventEditForm","eventSectionDetails","eventSectionOffers","eventAvailableOffers","eventSectionDestination","EventPhotoContainer","EventPhotoTape"],"sourceRoot":""} \ No newline at end of file diff --git a/3/css/style.css b/3/css/style.css new file mode 100644 index 0000000..1a6b68f --- /dev/null +++ b/3/css/style.css @@ -0,0 +1,834 @@ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: local('Montserrat Regular'), local('Montserrat-Regular'), url('../fonts/Montserrat-Regular.woff2') format('woff2'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 500; + src: local('Montserrat Medium'), local('Montserrat-Medium'), url('../fonts/Montserrat-Medium.woff2') format('woff2'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 600; + src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url('../fonts/Montserrat-SemiBold.woff2') format('woff2'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 700; + src: local('Montserrat Bold'), local('Montserrat-Bold'), url('../fonts/Montserrat-Bold.woff2') format('woff2'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 800; + src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url('../fonts/Montserrat-ExtraBold.woff2') format('woff2'); +} + +html { + height: 100%; } + +body { + padding: 0; + margin: 0; + -webkit-font-smoothing: antialiased; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; } + +main { + display: block; } + +@-moz-document url-prefix() { + body { + font-weight: 200; + -moz-osx-font-smoothing: grayscale; } } + +.visually-hidden { + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + border: 0; } + +.page-body { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; + min-width: 1200px; + padding: 0; + margin: 0; + font-size: 17px; + line-height: 1.2; + font-family: "Montserrat", "Arial", sans-serif; + color: #000000; + background-color: #f2f2f2; } + +.page-body__container { + -ms-flex-positive: 1; + flex-grow: 1; + position: relative; + z-index: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 1200px; + padding: 0 10px; + margin: 0 auto; } + .page-body__container::after { + content: ""; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + left: 130px; + width: 2px; + background-color: rgba(255, 255, 255, 0.58); } + +.page-body__page-main { + -ms-flex-positive: 1; + flex-grow: 1; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; } + +.btn { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + padding: 4px 16px 5px; + font-weight: 500; + font-size: 17px; + line-height: 21px; + font-family: inherit; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: none; + border-radius: 15px; + cursor: pointer; + -webkit-transition: opacity 0.2s; + transition: opacity 0.2s; } + .btn:hover { + opacity: 0.8; } + .btn:active { + opacity: 0.6; } + .btn--big { + padding: 17px 29px 16px; + font-size: 18px; + line-height: 21px; + border-radius: 27px; } + .btn--yellow { + color: #424242; + background-color: #ffd054; } + .btn--blue { + color: #ffffff; + background-color: #0d8ae4; } + .btn:disabled { + opacity: 0.46; + cursor: default; } + +.page-header { + padding-top: 23px; + color: #ffffff; + background-color: #078ff0; + background-image: url("../img/header-bg.png"); + background-size: cover; + background-repeat: no-repeat; } + @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { + .page-header { + background-image: url("../img/header-bg@2x.png"); } } + +.page-header__container { + display: -ms-flexbox; + display: flex; + -ms-flex-align: start; + align-items: flex-start; + padding-left: 110px; } + +.page-header__logo { + display: block; + width: 42px; + height: 42px; + margin-right: 18px; } + +.trip-main { + -ms-flex-positive: 1; + flex-grow: 1; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-pack: justify; + justify-content: space-between; + padding-bottom: 10px; } + .trip-main--hidden { + display: none; } + +.trip-main__trip-info { + width: 100%; + margin-bottom: 35px; } + +.trip-main__trip-controls { + margin-top: 36px; + width: 600px; } + +.trip-main__event-add-btn { + min-width: 170px; + margin-left: auto; } + .trip-main__event-add-btn::before { + content: "\002B\000A0"; } + .trip-main__event-add-btn--hidden { + display: none; } + +.trip-info { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: justify; } + +.trip-info__main { + width: 600px; } + +.trip-info__title { + margin: 0; + margin-bottom: 4px; + font-weight: 800; + font-size: 17px; + line-height: 21px; } + +.trip-info__dates { + margin: 0; + font-weight: 800; + font-size: 13px; + line-height: 16px; + text-transform: uppercase; + opacity: 0.8; } + +.trip-info__cost { + width: 170px; + margin: 0 0 0 auto; + font-weight: 700; + font-size: 21px; + line-height: 25px; + text-align: center; } + +.trip-controls__trip-tabs { + margin-bottom: 9px; } + +.trip-tabs { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: start; + align-items: flex-start; } + +.trip-tabs__btn { + display: block; + font-weight: 500; + font-size: 21px; + line-height: 25px; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: inherit; + opacity: 0.8; + -webkit-transition: opacity 0.2s; + transition: opacity 0.2s; } + .trip-tabs__btn:not(:last-of-type) { + margin-right: 26px; } + .trip-tabs__btn:hover { + opacity: 1; } + .trip-tabs__btn:active { + opacity: 0.6; } + .trip-tabs__btn--active, .trip-tabs__btn--active:hover, .trip-tabs__btn--active:active { + opacity: 1; + cursor: default; } + +.trip-filters { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: start; + align-items: flex-start; } + .trip-filters--hidden { + display: none; } + +.trip-filters__filter:not(:last-of-type) { + margin-right: 19px; } + +.trip-filters__filter-label { + font-weight: 800; + font-size: 14px; + line-height: 17px; + letter-spacing: 0.5px; + text-transform: uppercase; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + opacity: 0.6; + cursor: pointer; + -webkit-transition: opacity 0.2s; + transition: opacity 0.2s; } + .trip-filters__filter-label:hover { + opacity: 1; } + .trip-filters__filter-label:active { + opacity: 0.6; } + .trip-filters__filter-input:checked + .trip-filters__filter-label { + opacity: 1; + cursor: default; } + .trip-filters__filter-input:disabled + .trip-filters__filter-label { + opacity: 0.4; + cursor: default; } + +.trip-events { + padding-top: 22px; } + .trip-events--hidden { + display: none; } + +.trip-events__trip-sort { + margin-bottom: 8px; } + +.trip-events__msg { + margin: 0; + margin-top: 280px; + font-weight: 500; + font-size: 44px; + line-height: 60px; + text-align: center; + opacity: 0.89; } + .trip-events__msg--hidden { + display: none; } + +.trip-events__list { + padding: 0; + margin: 0; + list-style: none; } + +.trip-events__item { + margin-bottom: 54px; + margin-left: auto; } + +.trip-sort { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: center; + align-items: center; } + +.trip-sort__item { + margin-right: 15px; + font-weight: 800; + font-size: 13px; + line-height: 16px; + letter-spacing: 0.6px; + text-transform: uppercase; + color: #b4b4b4; + cursor: default; + -webkit-transition: color 0.2s; + transition: color 0.2s; } + .trip-sort__item:last-child { + margin-right: 0; } + .trip-sort__item--day { + width: 55px; + text-align: center; + margin-right: 83px; } + .trip-sort__item--event { + width: 300px; } + .trip-sort__item--time { + width: 225px; } + .trip-sort__item--price { + width: 90px; } + +.trip-sort__btn { + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + padding: 7px 15px 6px 22px; + border: 1px solid transparent; + border-radius: 14px; + cursor: pointer; } + .trip-sort__btn:hover { + color: #000000; } + .trip-sort__input:checked + .trip-sort__btn { + position: relative; + color: #000000; + border-color: #000000; } + .trip-sort__input:checked + .trip-sort__btn::before { + content: ""; + position: absolute; + top: 50%; + left: 8px; + width: 8px; + height: 8px; + background-color: #ffd054; + border-radius: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); } + +.trip-sort__input:disabled + .trip-sort__btn { + opacity: 0.6; } +.trip-sort__input:disabled + .trip-sort__btn:hover { + color: #b4b4b4; + cursor: default; } + +.event { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 20px; + font-size: 17px; + line-height: 21px; } + .event--edit { + display: block; + margin-left: 80px; + padding: 0; + background-color: #ffffff; + border-radius: 18px; + -webkit-box-shadow: 0 11px 20px rgba(0, 0, 0, 0.043); + box-shadow: 0 11px 20px rgba(0, 0, 0, 0.043); } + +.event__header { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + padding: 20px; } + +.event__date { + display: block; + min-width: 80px; + font-size: 13px; + line-height: 16px; + text-transform: uppercase; + text-align: left; } + +.event__type-wrapper { + position: relative; } + +.event__type { + -ms-flex-negative: 0; + flex-shrink: 0; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 42px; + height: 42px; + margin-right: 18px; + background-color: #ffffff; + border-radius: 50%; } + +.event__type-btn { + padding: 0; + border: 1px solid #0d8ae4; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; } + +.event__type-icon { + display: block; + width: 17px; + height: 17px; } + +.event__type-list { + position: absolute; + z-index: 2; + top: calc(100% + 7px); + left: -20px; + display: none; + width: 180px; + background-color: #ffffff; + border: 1px solid rgba(151, 151, 151, 0.169724); + -webkit-box-shadow: 0 11px 20px rgba(0, 0, 0, 0.219146); + box-shadow: 0 11px 20px rgba(0, 0, 0, 0.219146); + border-radius: 4px; } + +.event__type-toggle:checked + .event__type-list { + display: block; } + +.event__type-group { + padding: 13px 0 11px; + margin: 0; + border: none; } + .event__type-group:not(:last-of-type) { + border-bottom: 1px solid rgba(151, 151, 151, 0.33); } + +.event__type-item:not(:last-child) { + margin-bottom: 5px; } + +.event__type-label { + position: relative; + display: block; + padding: 5px 10px 5px 62px; + font-size: 17px; + line-height: 21px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + -webkit-transition: color 0.2s; + transition: color 0.2s; } + .event__type-label::before { + content: ""; + position: absolute; + top: calc(50% - 3px); + left: 32px; + width: 17px; + height: 17px; + background-position: 0 0; + background-size: 17px 17px; + background-repeat: no-repeat; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); } + .event__type-label--taxi::before { + background-image: url("../img/icons/taxi.png"); } + .event__type-label--bus::before { + background-image: url("../img/icons/bus.png"); } + .event__type-label--train::before { + background-image: url("../img/icons/train.png"); } + .event__type-label--ship::before { + background-image: url("../img/icons/ship.png"); } + .event__type-label--drive::before { + background-image: url("../img/icons/drive.png"); } + .event__type-label--flight::before { + background-image: url("../img/icons/flight.png"); } + .event__type-label--check-in::before { + background-image: url("../img/icons/check-in.png"); } + .event__type-label--sightseeing::before { + background-image: url("../img/icons/sightseeing.png"); } + .event__type-label--restaurant::before { + background-image: url("../img/icons/restaurant.png"); } + .event__type-label:hover { + color: #ffd054; } + +.event__type-input:checked + .event__type-label { + color: #000000; + background-color: #ffd054; } + .event__type-input:checked + .event__type-label::after { + content: ""; + position: absolute; + top: 50%; + left: 11px; + width: 8px; + height: 8px; + background-color: #ffffff; + border-radius: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); } + +.event__title { + -ms-flex-negative: 0; + flex-shrink: 0; + width: 298px; + margin: 0; + margin-right: 15px; + font-weight: 400; + font-size: inherit; } + .event__title::first-letter { + text-transform: capitalize; } + +.event__schedule { + -ms-flex-negative: 0; + flex-shrink: 0; + width: 230px; + margin-right: 15px; } + +.event__time { + margin: 0; + margin-bottom: 4px; } + +.event__duration { + margin: 0; + font-size: 14px; + line-height: 17px; + letter-spacing: 0.6px; + text-transform: uppercase; + color: #999999; + opacity: 0.9; } + +.event__price { + -ms-flex-negative: 0; + flex-shrink: 0; + width: 90px; + margin: 0; + margin-right: 15px; } + +.event__selected-offers { + width: 220px; + padding: 0; + margin: 0; + font-weight: 600; + list-style: none; } + +.event__rollup-btn { + position: relative; + display: block; + width: 40px; + height: 40px; + padding: 0; + margin: 0; + background-color: transparent; + border: none; + cursor: pointer; } + .event__rollup-btn::after { + content: ""; + position: absolute; + top: calc(50% - 5px); + left: 50%; + width: 10px; + height: 10px; + border-right: 2px solid #000000; + border-bottom: 2px solid #000000; + -webkit-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); + -webkit-transition: border-color 0.2s, -webkit-transform 0.6s; + transition: border-color 0.2s, -webkit-transform 0.6s; + transition: border-color 0.2s, transform 0.6s; + transition: border-color 0.2s, transform 0.6s, -webkit-transform 0.6s; } + .event__rollup-btn:hover::after { + border-color: #0d8ae4; } + +.event--edit .event__rollup-btn { + margin-left: auto; } +.event--edit .event__rollup-btn::after { + top: calc(50% + 3px); + -webkit-transform: translate(-50%, -50%) rotate(225deg); + transform: translate(-50%, -50%) rotate(225deg); } + +.event__field-group { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + padding: 5px 2px; + margin-right: 18px; + border-bottom: 1px solid #0d8ae4; } + .event__field-group--destination { + width: 290px; } + +.event__label { + margin-right: 5px; + cursor: pointer; } + .event__label::first-letter { + text-transform: capitalize; } + +.event__input { + -ms-flex-positive: 1; + flex-grow: 1; + padding: 0; + font-size: inherit; + line-height: inherit; + font-family: inherit; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; } + .event__input--destination { + width: 150px; } + .event__input--destination::-webkit-calendar-picker-indicator { + display: none; } + .event__input--time { + width: 130px; + text-align: center; } + .event__input--price { + width: 66px; } + +.event__save-btn { + margin-right: 18px; } + +.event__reset-btn { + display: block; + padding: 0; + font-weight: 500; + font-size: 17px; + line-height: 21px; + font-family: inherit; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #0d8ae4; + background-color: transparent; + border: none; + cursor: pointer; + -webkit-transition: opacity 0.2s; + transition: opacity 0.2s; } + .event__reset-btn:hover { + opacity: 0.8; } + .event__reset-btn:active { + opacity: 0.6; } + +.event__favorite-btn { + margin: 0 10px; + margin-left: auto; + color: #ebebeb; + background-color: transparent; + border: none; + cursor: pointer; + outline: none; + -webkit-transition: color 0.2s; + transition: color 0.2s; } + .event__favorite-btn:hover, + .event__favorite-btn:focus { + color: rgba(255, 208, 84, 0.6); } + .event__favorite-btn--active { + color: #ffd054; + } + +.event__favorite-icon { + display: block; + width: 28px; + height: 28px; + fill: currentColor; + -webkit-transition: fill 0.2s; + transition: fill 0.2s; } + +.event__details { + padding: 20px 0 27px; + border-top: 2px solid #ffd054; } + +.event--blocked .event__details { + position: relative; } + .event--blocked .event__details::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(255, 255, 255, 0.8); + border-radius: 0 0 18px 18px; } + +.event__details-title { + padding-left: 20px; + margin: 0; + margin-bottom: 24px; + font-weight: 500; + font-size: 23px; + line-height: 27px; } + +.event__section:not(:last-child) { + margin-bottom: 28px; } + +.event__section--offers { + padding: 0 20px; } + +.event__section--destination { + padding: 0 20px; } + +.event__section-title { + margin: 0; + font-weight: 800; + font-size: 14px; + line-height: 17px; + letter-spacing: 0.6px; + text-transform: uppercase; + color: #ffd054; } + .event__section-title--offers { + margin-bottom: 15px; } + .event__section-title--destination { + margin-bottom: 8px;} + +.event__available-offers { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: -6px; } + +.event__offer::first-letter { + text-transform: capitalize; } + +.event__offer-selector { + margin-bottom: 6px; } + .event__offer-selector:not(:last-of-type) { + margin-right: 6px; } + +.event__offer-label { + display: block; + padding: 22px 30px 21px; + font-size: 17px; + line-height: 21px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #f2f2f2; + border-radius: 32px; + cursor: pointer; + -webkit-transition: background-color 0.2s; + transition: background-color 0.2s; } + .event__offer-label:hover { + background-color: rgba(13, 138, 228, 0.6); } + .event__offer-label::first-letter { + text-transform: capitalize; } + +.event__offer-checkbox:checked + .event__offer-label { + background-color: #0d8ae4; } + +.event__destination-description { + width: 560px; + margin: 0; + margin-bottom: 16px; + font-size: 15px; + line-height: 18px; } + +.event__photos-container { + width: 100%; + overflow-x: scroll; } + +.event__photos-tape { + display: -ms-flexbox; + display: flex; + -ms-flex-align: start; + align-items: flex-start; } + +.event__photo { + display: block; + height: 152px; + width: auto; + border-radius: 4px; } + .event__photo:first-child { + padding-left: 20px; } + .event__photo:last-child { + padding-right: 20px; } + .event__photo:not(:last-child) { + margin-right: 5px; } diff --git a/3/fonts/Montserrat-Bold.woff2 b/3/fonts/Montserrat-Bold.woff2 new file mode 100644 index 0000000..3d0b409 Binary files /dev/null and b/3/fonts/Montserrat-Bold.woff2 differ diff --git a/3/fonts/Montserrat-ExtraBold.woff2 b/3/fonts/Montserrat-ExtraBold.woff2 new file mode 100644 index 0000000..0abb707 Binary files /dev/null and b/3/fonts/Montserrat-ExtraBold.woff2 differ diff --git a/3/fonts/Montserrat-Medium.woff2 b/3/fonts/Montserrat-Medium.woff2 new file mode 100644 index 0000000..9dc5c7f Binary files /dev/null and b/3/fonts/Montserrat-Medium.woff2 differ diff --git a/3/fonts/Montserrat-Regular.woff2 b/3/fonts/Montserrat-Regular.woff2 new file mode 100644 index 0000000..70788c2 Binary files /dev/null and b/3/fonts/Montserrat-Regular.woff2 differ diff --git a/3/fonts/Montserrat-SemiBold.woff2 b/3/fonts/Montserrat-SemiBold.woff2 new file mode 100644 index 0000000..29cc1a9 Binary files /dev/null and b/3/fonts/Montserrat-SemiBold.woff2 differ diff --git a/3/img/header-bg.png b/3/img/header-bg.png new file mode 100644 index 0000000..c7ccbda Binary files /dev/null and b/3/img/header-bg.png differ diff --git a/3/img/header-bg@2x.png b/3/img/header-bg@2x.png new file mode 100644 index 0000000..26716e3 Binary files /dev/null and b/3/img/header-bg@2x.png differ diff --git a/3/img/icons/bus.png b/3/img/icons/bus.png new file mode 100644 index 0000000..bb2bad6 Binary files /dev/null and b/3/img/icons/bus.png differ diff --git a/3/img/icons/check-in.png b/3/img/icons/check-in.png new file mode 100644 index 0000000..866702e Binary files /dev/null and b/3/img/icons/check-in.png differ diff --git a/3/img/icons/drive.png b/3/img/icons/drive.png new file mode 100644 index 0000000..ef3522d Binary files /dev/null and b/3/img/icons/drive.png differ diff --git a/3/img/icons/flight.png b/3/img/icons/flight.png new file mode 100644 index 0000000..3e690ca Binary files /dev/null and b/3/img/icons/flight.png differ diff --git a/3/img/icons/restaurant.png b/3/img/icons/restaurant.png new file mode 100644 index 0000000..d677771 Binary files /dev/null and b/3/img/icons/restaurant.png differ diff --git a/3/img/icons/ship.png b/3/img/icons/ship.png new file mode 100644 index 0000000..e854301 Binary files /dev/null and b/3/img/icons/ship.png differ diff --git a/3/img/icons/sightseeing.png b/3/img/icons/sightseeing.png new file mode 100644 index 0000000..a87e06b Binary files /dev/null and b/3/img/icons/sightseeing.png differ diff --git a/3/img/icons/taxi.png b/3/img/icons/taxi.png new file mode 100644 index 0000000..f052e81 Binary files /dev/null and b/3/img/icons/taxi.png differ diff --git a/3/img/icons/train.png b/3/img/icons/train.png new file mode 100644 index 0000000..1dfd1f3 Binary files /dev/null and b/3/img/icons/train.png differ diff --git a/3/img/icons/transport.png b/3/img/icons/transport.png new file mode 100644 index 0000000..9200b63 Binary files /dev/null and b/3/img/icons/transport.png differ diff --git a/3/img/logo.png b/3/img/logo.png new file mode 100644 index 0000000..f11c3ae Binary files /dev/null and b/3/img/logo.png differ diff --git a/3/img/photos/1.jpg b/3/img/photos/1.jpg new file mode 100644 index 0000000..2234819 Binary files /dev/null and b/3/img/photos/1.jpg differ diff --git a/3/img/photos/2.jpg b/3/img/photos/2.jpg new file mode 100644 index 0000000..833055b Binary files /dev/null and b/3/img/photos/2.jpg differ diff --git a/3/img/photos/3.jpg b/3/img/photos/3.jpg new file mode 100644 index 0000000..b63e90a Binary files /dev/null and b/3/img/photos/3.jpg differ diff --git a/3/img/photos/4.jpg b/3/img/photos/4.jpg new file mode 100644 index 0000000..de034f4 Binary files /dev/null and b/3/img/photos/4.jpg differ diff --git a/3/img/photos/5.jpg b/3/img/photos/5.jpg new file mode 100644 index 0000000..fa162ab Binary files /dev/null and b/3/img/photos/5.jpg differ diff --git a/3/index.html b/3/index.html new file mode 100644 index 0000000..2e2480c --- /dev/null +++ b/3/index.html @@ -0,0 +1 @@ +