diff --git a/Natours/after-S05/css/fonts/linea-basic-10.eot b/Natours/after-S05/css/fonts/linea-basic-10.eot new file mode 100644 index 0000000..6534fd2 Binary files /dev/null and b/Natours/after-S05/css/fonts/linea-basic-10.eot differ diff --git a/Natours/after-S05/css/fonts/linea-basic-10.svg b/Natours/after-S05/css/fonts/linea-basic-10.svg new file mode 100644 index 0000000..4f31eff --- /dev/null +++ b/Natours/after-S05/css/fonts/linea-basic-10.svg @@ -0,0 +1,145 @@ + + + +Generated by Fontastic.me + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Natours/after-S05/css/fonts/linea-basic-10.ttf b/Natours/after-S05/css/fonts/linea-basic-10.ttf new file mode 100644 index 0000000..0747f27 Binary files /dev/null and b/Natours/after-S05/css/fonts/linea-basic-10.ttf differ diff --git a/Natours/after-S05/css/fonts/linea-basic-10.woff b/Natours/after-S05/css/fonts/linea-basic-10.woff new file mode 100644 index 0000000..36e3185 Binary files /dev/null and b/Natours/after-S05/css/fonts/linea-basic-10.woff differ diff --git a/Natours/after-S05/css/icon-font.css b/Natours/after-S05/css/icon-font.css new file mode 100644 index 0000000..51800c6 --- /dev/null +++ b/Natours/after-S05/css/icon-font.css @@ -0,0 +1,445 @@ +@charset "UTF-8"; + +@font-face { + font-family: "linea-basic-10"; + src:url("fonts/linea-basic-10.eot"); + src:url("fonts/linea-basic-10.eot?#iefix") format("embedded-opentype"), + url("fonts/linea-basic-10.woff") format("woff"), + url("fonts/linea-basic-10.ttf") format("truetype"), + url("fonts/linea-basic-10.svg#linea-basic-10") format("svg"); + font-weight: normal; + font-style: normal; + +} + +[data-icon]:before { + font-family: "linea-basic-10" !important; + content: attr(data-icon); + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[class^="icon-"]:before, +[class*=" icon-"]:before { + font-family: "linea-basic-10" !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-basic-accelerator:before { + content: "a"; +} +.icon-basic-alarm:before { + content: "b"; +} +.icon-basic-anchor:before { + content: "c"; +} +.icon-basic-anticlockwise:before { + content: "d"; +} +.icon-basic-archive:before { + content: "e"; +} +.icon-basic-archive-full:before { + content: "f"; +} +.icon-basic-ban:before { + content: "g"; +} +.icon-basic-battery-charge:before { + content: "h"; +} +.icon-basic-battery-empty:before { + content: "i"; +} +.icon-basic-battery-full:before { + content: "j"; +} +.icon-basic-battery-half:before { + content: "k"; +} +.icon-basic-bolt:before { + content: "l"; +} +.icon-basic-book:before { + content: "m"; +} +.icon-basic-book-pen:before { + content: "n"; +} +.icon-basic-book-pencil:before { + content: "o"; +} +.icon-basic-bookmark:before { + content: "p"; +} +.icon-basic-calculator:before { + content: "q"; +} +.icon-basic-calendar:before { + content: "r"; +} +.icon-basic-cards-diamonds:before { + content: "s"; +} +.icon-basic-cards-hearts:before { + content: "t"; +} +.icon-basic-case:before { + content: "u"; +} +.icon-basic-chronometer:before { + content: "v"; +} +.icon-basic-clessidre:before { + content: "w"; +} +.icon-basic-clock:before { + content: "x"; +} +.icon-basic-clockwise:before { + content: "y"; +} +.icon-basic-cloud:before { + content: "z"; +} +.icon-basic-clubs:before { + content: "A"; +} +.icon-basic-compass:before { + content: "B"; +} +.icon-basic-cup:before { + content: "C"; +} +.icon-basic-diamonds:before { + content: "D"; +} +.icon-basic-display:before { + content: "E"; +} +.icon-basic-download:before { + content: "F"; +} +.icon-basic-exclamation:before { + content: "G"; +} +.icon-basic-eye:before { + content: "H"; +} +.icon-basic-eye-closed:before { + content: "I"; +} +.icon-basic-female:before { + content: "J"; +} +.icon-basic-flag1:before { + content: "K"; +} +.icon-basic-flag2:before { + content: "L"; +} +.icon-basic-floppydisk:before { + content: "M"; +} +.icon-basic-folder:before { + content: "N"; +} +.icon-basic-folder-multiple:before { + content: "O"; +} +.icon-basic-gear:before { + content: "P"; +} +.icon-basic-geolocalize-01:before { + content: "Q"; +} +.icon-basic-geolocalize-05:before { + content: "R"; +} +.icon-basic-globe:before { + content: "S"; +} +.icon-basic-gunsight:before { + content: "T"; +} +.icon-basic-hammer:before { + content: "U"; +} +.icon-basic-headset:before { + content: "V"; +} +.icon-basic-heart:before { + content: "W"; +} +.icon-basic-heart-broken:before { + content: "X"; +} +.icon-basic-helm:before { + content: "Y"; +} +.icon-basic-home:before { + content: "Z"; +} +.icon-basic-info:before { + content: "0"; +} +.icon-basic-ipod:before { + content: "1"; +} +.icon-basic-joypad:before { + content: "2"; +} +.icon-basic-key:before { + content: "3"; +} +.icon-basic-keyboard:before { + content: "4"; +} +.icon-basic-laptop:before { + content: "5"; +} +.icon-basic-life-buoy:before { + content: "6"; +} +.icon-basic-lightbulb:before { + content: "7"; +} +.icon-basic-link:before { + content: "8"; +} +.icon-basic-lock:before { + content: "9"; +} +.icon-basic-lock-open:before { + content: "!"; +} +.icon-basic-magic-mouse:before { + content: "\""; +} +.icon-basic-magnifier:before { + content: "#"; +} +.icon-basic-magnifier-minus:before { + content: "$"; +} +.icon-basic-magnifier-plus:before { + content: "%"; +} +.icon-basic-mail:before { + content: "&"; +} +.icon-basic-mail-multiple:before { + content: "'"; +} +.icon-basic-mail-open:before { + content: "("; +} +.icon-basic-mail-open-text:before { + content: ")"; +} +.icon-basic-male:before { + content: "*"; +} +.icon-basic-map:before { + content: "+"; +} +.icon-basic-message:before { + content: ","; +} +.icon-basic-message-multiple:before { + content: "-"; +} +.icon-basic-message-txt:before { + content: "."; +} +.icon-basic-mixer2:before { + content: "/"; +} +.icon-basic-mouse:before { + content: ":"; +} +.icon-basic-notebook:before { + content: ";"; +} +.icon-basic-notebook-pen:before { + content: "<"; +} +.icon-basic-notebook-pencil:before { + content: "="; +} +.icon-basic-paperplane:before { + content: ">"; +} +.icon-basic-pencil-ruler:before { + content: "?"; +} +.icon-basic-pencil-ruler-pen:before { + content: "@"; +} +.icon-basic-photo:before { + content: "["; +} +.icon-basic-picture:before { + content: "]"; +} +.icon-basic-picture-multiple:before { + content: "^"; +} +.icon-basic-pin1:before { + content: "_"; +} +.icon-basic-pin2:before { + content: "`"; +} +.icon-basic-postcard:before { + content: "{"; +} +.icon-basic-postcard-multiple:before { + content: "|"; +} +.icon-basic-printer:before { + content: "}"; +} +.icon-basic-question:before { + content: "~"; +} +.icon-basic-rss:before { + content: "\\"; +} +.icon-basic-server:before { + content: "\e000"; +} +.icon-basic-server2:before { + content: "\e001"; +} +.icon-basic-server-cloud:before { + content: "\e002"; +} +.icon-basic-server-download:before { + content: "\e003"; +} +.icon-basic-server-upload:before { + content: "\e004"; +} +.icon-basic-settings:before { + content: "\e005"; +} +.icon-basic-share:before { + content: "\e006"; +} +.icon-basic-sheet:before { + content: "\e007"; +} +.icon-basic-sheet-multiple:before { + content: "\e008"; +} +.icon-basic-sheet-pen:before { + content: "\e009"; +} +.icon-basic-sheet-pencil:before { + content: "\e00a"; +} +.icon-basic-sheet-txt:before { + content: "\e00b"; +} +.icon-basic-signs:before { + content: "\e00c"; +} +.icon-basic-smartphone:before { + content: "\e00d"; +} +.icon-basic-spades:before { + content: "\e00e"; +} +.icon-basic-spread:before { + content: "\e00f"; +} +.icon-basic-spread-bookmark:before { + content: "\e010"; +} +.icon-basic-spread-text:before { + content: "\e011"; +} +.icon-basic-spread-text-bookmark:before { + content: "\e012"; +} +.icon-basic-star:before { + content: "\e013"; +} +.icon-basic-tablet:before { + content: "\e014"; +} +.icon-basic-target:before { + content: "\e015"; +} +.icon-basic-todo:before { + content: "\e016"; +} +.icon-basic-todo-pen:before { + content: "\e017"; +} +.icon-basic-todo-pencil:before { + content: "\e018"; +} +.icon-basic-todo-txt:before { + content: "\e019"; +} +.icon-basic-todolist-pen:before { + content: "\e01a"; +} +.icon-basic-todolist-pencil:before { + content: "\e01b"; +} +.icon-basic-trashcan:before { + content: "\e01c"; +} +.icon-basic-trashcan-full:before { + content: "\e01d"; +} +.icon-basic-trashcan-refresh:before { + content: "\e01e"; +} +.icon-basic-trashcan-remove:before { + content: "\e01f"; +} +.icon-basic-upload:before { + content: "\e020"; +} +.icon-basic-usb:before { + content: "\e021"; +} +.icon-basic-video:before { + content: "\e022"; +} +.icon-basic-watch:before { + content: "\e023"; +} +.icon-basic-webpage:before { + content: "\e024"; +} +.icon-basic-webpage-img-txt:before { + content: "\e025"; +} +.icon-basic-webpage-multiple:before { + content: "\e026"; +} +.icon-basic-webpage-txt:before { + content: "\e027"; +} +.icon-basic-world:before { + content: "\e028"; +} diff --git a/Natours/after-S05/css/style.css b/Natours/after-S05/css/style.css new file mode 100644 index 0000000..b0fc160 --- /dev/null +++ b/Natours/after-S05/css/style.css @@ -0,0 +1,761 @@ +@keyframes moveInLeft { + 0% { + opacity: 0; + transform: translateX(-10rem); } + 80% { + transform: translateX(1rem); } + 100% { + opacity: 1; + transform: translate(0); } } + +@keyframes moveInRight { + 0% { + opacity: 0; + transform: translateX(10rem); } + 80% { + transform: translateX(-1rem); } + 100% { + opacity: 1; + transform: translate(0); } } + +@keyframes moveInBottom { + 0% { + opacity: 0; + transform: translateY(3rem); } + 100% { + opacity: 1; + transform: translate(0); } } + +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; } + +html { + font-size: 62.5%; } + +body { + box-sizing: border-box; } + +body { + font-family: "Lato", sans-serif; + font-weight: 400; + /*font-size: 16px;*/ + line-height: 1.7; + color: #777; + padding: 3rem; } + +.heading-primary { + color: #fff; + text-transform: uppercase; + backface-visibility: hidden; + margin-bottom: 6rem; } + .heading-primary--main { + display: block; + font-size: 6rem; + font-weight: 400; + letter-spacing: 3.5rem; + animation-name: moveInLeft; + animation-duration: 1s; + animation-timing-function: ease-out; + /* + animation-delay: 3s; + animation-iteration-count: 3; + */ } + .heading-primary--sub { + display: block; + font-size: 2rem; + font-weight: 700; + letter-spacing: 1.75rem; + animation: moveInRight 1s ease-out; } + +.heading-secondary { + font-size: 3.5rem; + text-transform: uppercase; + font-weight: 700; + display: inline-block; + background-image: linear-gradient(to right, #7ed56f, #28b485); + -webkit-background-clip: text; + color: transparent; + letter-spacing: .2rem; + transition: all .2s; } + .heading-secondary:hover { + transform: skewY(2deg) skewX(15deg) scale(1.1); + text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); } + +.heading-tertiary { + font-size: 1.6rem; + font-weight: 700; + text-transform: uppercase; } + +.paragraph { + font-size: 1.6rem; } + .paragraph:not(:last-child) { + margin-bottom: 3rem; } + +.u-center-text { + text-align: center !important; } + +.u-margin-bottom-small { + margin-bottom: 1.5rem !important; } + +.u-margin-bottom-medium { + margin-bottom: 4rem !important; } + +.u-margin-bottom-big { + margin-bottom: 8rem !important; } + +.u-margin-top-big { + margin-top: 8rem !important; } + +.u-margin-top-huge { + margin-top: 10rem !important; } + +.bg-video { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: -1; + opacity: .15; + overflow: hidden; } + .bg-video__content { + height: 100%; + width: 100%; + object-fit: cover; } + +.btn, .btn:link, .btn:visited { + text-transform: uppercase; + text-decoration: none; + padding: 1.5rem 4rem; + display: inline-block; + border-radius: 10rem; + transition: all .2s; + position: relative; + font-size: 1.6rem; + border: none; + cursor: pointer; } + +.btn:hover { + transform: translateY(-3px); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); } + .btn:hover::after { + transform: scaleX(1.4) scaleY(1.6); + opacity: 0; } + +.btn:active, .btn:focus { + outline: none; + transform: translateY(-1px); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); } + +.btn--white { + background-color: #fff; + color: #777; } + .btn--white::after { + background-color: #fff; } + +.btn--green { + background-color: #55c57a; + color: #fff; } + .btn--green::after { + background-color: #55c57a; } + +.btn::after { + content: ""; + display: inline-block; + height: 100%; + width: 100%; + border-radius: 10rem; + position: absolute; + top: 0; + left: 0; + z-index: -1; + transition: all .4s; } + +.btn--animated { + animation: moveInBottom .5s ease-out .75s; + animation-fill-mode: backwards; } + +.btn-text:link, .btn-text:visited { + font-size: 1.6rem; + color: #55c57a; + display: inline-block; + text-decoration: none; + border-bottom: 1px solid #55c57a; + padding: 3px; + transition: all .2s; } + +.btn-text:hover { + background-color: #55c57a; + color: #fff; + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15); + transform: translateY(-2px); } + +.btn-text:active { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + transform: translateY(0); } + +.card { + perspective: 150rem; + -moz-perspective: 150rem; + position: relative; + height: 52rem; } + .card__side { + height: 52rem; + transition: all .8s ease; + position: absolute; + top: 0; + left: 0; + width: 100%; + backface-visibility: hidden; + border-radius: 3px; + overflow: hidden; + box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); } + .card__side--front { + background-color: #fff; } + .card__side--back { + transform: rotateY(180deg); } + .card__side--back-1 { + background-image: linear-gradient(to right bottom, #ffb900, #ff7730); } + .card__side--back-2 { + background-image: linear-gradient(to right bottom, #7ed56f, #28b485); } + .card__side--back-3 { + background-image: linear-gradient(to right bottom, #2998ff, #5643fa); } + .card:hover .card__side--front { + transform: rotateY(-180deg); } + .card:hover .card__side--back { + transform: rotateY(0); } + .card__picture { + background-size: cover; + height: 23rem; + background-blend-mode: screen; + -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); + clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); + border-top-left-radius: 3px; + border-top-right-radius: 3px; } + .card__picture--1 { + background-image: linear-gradient(to right bottom, #ffb900, #ff7730), url(../img/nat-5.jpg); } + .card__picture--2 { + background-image: linear-gradient(to right bottom, #7ed56f, #28b485), url(../img/nat-6.jpg); } + .card__picture--3 { + background-image: linear-gradient(to right bottom, #2998ff, #5643fa), url(../img/nat-7.jpg); } + .card__heading { + font-size: 2.8rem; + font-weight: 300; + text-transform: uppercase; + text-align: right; + color: #fff; + position: absolute; + top: 12rem; + right: 2rem; + width: 75%; } + .card__heading-span { + padding: 1rem 1.5rem; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; } + .card__heading-span--1 { + background-image: linear-gradient(to right bottom, rgba(255, 185, 0, 0.85), rgba(255, 119, 48, 0.85)); } + .card__heading-span--2 { + background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.85), rgba(40, 180, 133, 0.85)); } + .card__heading-span--3 { + background-image: linear-gradient(to right bottom, rgba(41, 152, 255, 0.85), rgba(86, 67, 250, 0.85)); } + .card__details { + padding: 3rem; } + .card__details ul { + list-style: none; + width: 80%; + margin: 0 auto; } + .card__details ul li { + text-align: center; + font-size: 1.5rem; + padding: 1rem; } + .card__details ul li:not(:last-child) { + border-bottom: 1px solid #eee; } + .card__cta { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90%; + text-align: center; } + .card__price-box { + text-align: center; + color: #fff; + margin-bottom: 8rem; } + .card__price-only { + font-size: 1.4rem; + text-transform: uppercase; } + .card__price-value { + font-size: 6rem; + font-weight: 100; } + +.composition { + position: relative; } + .composition__photo { + width: 55%; + box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4); + border-radius: 2px; + position: absolute; + z-index: 10; + transition: all .2s; + outline-offset: 2rem; } + .composition__photo--p1 { + left: 0; + top: -2rem; } + .composition__photo--p2 { + right: 0; + top: 2rem; } + .composition__photo--p3 { + left: 20%; + top: 10rem; } + .composition__photo:hover { + outline: 1.5rem solid #55c57a; + transform: scale(1.05) translateY(-0.5rem); + box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5); + z-index: 20; } + .composition:hover .composition__photo:not(:hover) { + transform: scale(0.95); } + +.feature-box { + background-color: rgba(255, 255, 255, 0.8); + font-size: 1.5rem; + padding: 2.5rem; + text-align: center; + border-radius: 3px; + box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); + transition: transform .3s; } + .feature-box__icon { + font-size: 6rem; + margin-bottom: .5rem; + display: inline-block; + background-image: linear-gradient(to right, #7ed56f, #28b485); + -webkit-background-clip: text; + color: transparent; } + .feature-box:hover { + transform: translateY(-1.5rem) scale(1.03); } + +.form__group:not(:last-child) { + margin-bottom: 2rem; } + +.form__input { + font-size: 1.5rem; + font-family: inherit; + color: inherit; + padding: 1.5rem 2rem; + border-radius: 2px; + background-color: rbga(#fff, 0.5); + border: none; + border-bottom: 3px solid transparent; + width: 90%; + display: block; + transition: all .3s; } + .form__input:focus { + outline: none; + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1); + border-bottom: 3px solid #55c57a; } + .form__input:focus:invalid { + border-bottom: 3px solid #ff7730; } + .form__input::-webkit-input-placeholder { + color: #999; } + +.form__label { + font-size: 1.2rem; + font-weight: 700; + margin-left: 2rem; + margin-top: .7rem; + display: block; + transition: all .3s; } + +.form__input:placeholder-shown + .form__label { + opacity: 0; + visibility: hidden; + transform: translateY(-4rem); } + +.form__radio-group { + width: 49%; + display: inline-block; } + +.form__radio-input { + display: none; } + +.form__radio-label { + font-size: 1.6rem; + cursor: pointer; + position: relative; + padding-left: 4.5rem; } + +.form__radio-button { + height: 3rem; + width: 3rem; + border: 5px solid #55c57a; + border-radius: 50%; + display: inline-block; + position: absolute; + left: 0; + top: -.4rem; } + .form__radio-button::after { + content: ""; + display: block; + height: 1.3rem; + width: 1.3rem; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #55c57a; + opacity: 0; + transition: opacity .2s; } + +.form__radio-input:checked ~ .form__radio-label .form__radio-button::after { + opacity: 1; } + +.popup { + height: 100vh; + width: 100%; + position: fixed; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.8); + z-index: 9999; + opacity: 0; + visibility: hidden; + transition: all .3s; } + .popup__content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 75%; + background-color: #fff; + box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2); + border-radius: 3px; + display: table; + overflow: hidden; + opacity: 0; + transform: translate(-50%, -50%) scale(0.25); + transition: all .5s .2s; } + .popup__left { + width: 33.333333%; + display: table-cell; } + .popup__right { + width: 66.6666667%; + display: table-cell; + vertical-align: middle; + padding: 3rem 5rem; } + .popup__img { + display: block; + width: 100%; } + .popup__text { + font-size: 1.4rem; + margin-bottom: 4rem; + -moz-column-count: 2; + -moz-column-gap: 4rem; + -moz-column-rule: 1px solid #eee; + column-count: 2; + column-gap: 4rem; + column-rule: 1px solid #eee; + -moz-hyphens: auto; + -ms-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; } + .popup:target { + opacity: 1; + visibility: visible; } + .popup:target .popup__content { + opacity: 1; + transform: translate(-50%, -50%) scale(1); } + .popup__close:link, .popup__close:visited { + color: #777; + position: absolute; + top: 2.5rem; + right: 2.5rem; + font-size: 3rem; + text-decoration: none; + display: inline-block; + transition: all .2s; + line-height: 1; } + .popup__close:hover { + color: #55c57a; } + +.story { + width: 75%; + margin: 0 auto; + box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1); + background-color: rgba(255, 255, 255, 0.6); + border-radius: 3px; + padding: 6rem; + padding-left: 9rem; + font-size: 1.6rem; + transform: skewX(-12deg); } + .story__shape { + width: 15rem; + height: 15rem; + float: left; + -webkit-shape-outside: circle(50% at 50% 50%); + shape-outside: circle(50% at 50% 50%); + -webkit-clip-path: circle(50% at 50% 50%); + clip-path: circle(50% at 50% 50%); + transform: translateX(-3rem) skewX(12deg); + position: relative; } + .story__img { + height: 100%; + transform: translateX(-4rem) scale(1.4); + backface-visibility: hidden; + transition: all .5s; } + .story__text { + transform: skewX(12deg); } + .story__caption { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 20%); + color: #fff; + text-transform: uppercase; + font-size: 1.7rem; + text-align: center; + opacity: 0; + transition: all .5s; + backface-visibility: hidden; } + .story:hover .story__caption { + opacity: 1; + transform: translate(-50%, -50%); } + .story:hover .story__img { + transform: translateX(-4rem) scale(1); + filter: blur(3px) brightness(80%); } + +.footer { + background-color: #333; + padding: 10rem 0; + font-size: 1.4rem; + color: #f7f7f7; } + .footer__logo-box { + text-align: center; + margin-bottom: 8rem; } + .footer__logo { + width: 15rem; + height: auto; } + .footer__navigation { + border-top: 1px solid #777; + padding-top: 2rem; + display: inline-block; } + .footer__list { + list-style: none; } + .footer__item { + display: inline-block; } + .footer__item:not(:last-child) { + margin-right: 1.5rem; } + .footer__link:link, .footer__link:visited { + color: #f7f7f7; + background-color: #333; + text-decoration: none; + text-transform: uppercase; + display: inline-block; + transition: all .2s; } + .footer__link:hover, .footer__link:active { + color: #55c57a; + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4); + transform: rotate(5deg) scale(1.3); } + .footer__copyright { + border-top: 1px solid #777; + padding-top: 2rem; + width: 80%; + float: right; } + +.row { + max-width: 114rem; + margin: 0 auto; } + .row:not(:last-child) { + margin-bottom: 8rem; } + .row::after { + content: ""; + display: table; + clear: both; } + .row [class^="col-"] { + float: left; } + .row [class^="col-"]:not(:last-child) { + margin-right: 6rem; } + .row .col-1-of-2 { + width: calc((100% - 6rem) / 2); } + .row .col-1-of-3 { + width: calc((100% - 2 * 6rem) / 3); } + .row .col-2-of-3 { + width: calc(2 * ((100% - 2 * 6rem) / 3) + 6rem); } + .row .col-1-of-4 { + width: calc((100% - 3 * 6rem) / 4); } + .row .col-2-of-4 { + width: calc(2 * ((100% - 3 * 6rem) / 4) + 6rem); } + .row .col-3-of-4 { + width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem); } + +.header { + height: 95vh; + background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url(../img/hero.jpg); + background-size: cover; + background-position: top; + position: relative; + -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); + clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); } + .header__logo-box { + position: absolute; + top: 4rem; + left: 4rem; } + .header__logo { + height: 3.5rem; } + .header__text-box { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; } + +.navigation__checkbox { + display: none; } + +.navigation__button { + background-color: #fff; + height: 7rem; + width: 7rem; + position: fixed; + top: 6rem; + right: 6rem; + border-radius: 50%; + z-index: 2000; + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1); + text-align: center; + cursor: pointer; } + +.navigation__background { + height: 6rem; + width: 6rem; + border-radius: 50%; + position: fixed; + top: 6.5rem; + right: 6.5rem; + background-image: radial-gradient(#7ed56f, #28b485); + z-index: 1000; + transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1); } + +.navigation__nav { + height: 100vh; + position: fixed; + top: 0; + left: 0; + z-index: 1500; + opacity: 0; + width: 0; + transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); } + +.navigation__list { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + list-style: none; + text-align: center; + width: 100%; } + +.navigation__item { + margin: 1rem; } + +.navigation__link:link, .navigation__link:visited { + display: inline-block; + font-size: 3rem; + font-weight: 300; + padding: 1rem 2rem; + color: #fff; + text-decoration: none; + text-transform: uppercase; + background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%); + background-size: 220%; + transition: all .4s; } + .navigation__link:link span, .navigation__link:visited span { + margin-right: 1.5rem; + display: inline-block; } + +.navigation__link:hover, .navigation__link:active { + background-position: 100%; + color: #55c57a; + transform: translateX(1rem); } + +.navigation__checkbox:checked ~ .navigation__background { + transform: scale(80); } + +.navigation__checkbox:checked ~ .navigation__nav { + opacity: 1; + width: 100%; } + +.navigation__icon { + position: relative; + margin-top: 3.5rem; } + .navigation__icon, .navigation__icon::before, .navigation__icon::after { + width: 3rem; + height: 2px; + background-color: #333; + display: inline-block; } + .navigation__icon::before, .navigation__icon::after { + content: ""; + position: absolute; + left: 0; + transition: all .2s; } + .navigation__icon::before { + top: -.8rem; } + .navigation__icon::after { + top: .8rem; } + +.navigation__button:hover .navigation__icon::before { + top: -1rem; } + +.navigation__button:hover .navigation__icon::after { + top: 1rem; } + +.navigation__checkbox:checked + .navigation__button .navigation__icon { + background-color: transparent; } + +.navigation__checkbox:checked + .navigation__button .navigation__icon::before { + top: 0; + transform: rotate(135deg); } + +.navigation__checkbox:checked + .navigation__button .navigation__icon::after { + top: 0; + transform: rotate(-135deg); } + +.section-about { + background-color: #f7f7f7; + padding: 25rem 0; + margin-top: -20vh; } + +.section-features { + padding: 20rem 0; + background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url(../img/nat-4.jpg); + background-size: cover; + transform: skewY(-7deg); + margin-top: -10rem; } + .section-features > * { + transform: skewY(7deg); } + +.section-tours { + background-color: #f7f7f7; + padding: 25rem 0 15rem 0; + margin-top: -10rem; } + +.section-stories { + position: relative; + padding: 15rem 0; } + +.section-book { + padding: 15rem 0; + background-image: linear-gradient(to right bottom, #7ed56f, #28b485); } + +.book { + background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), url(../img/nat-10.jpg); + background-size: 100%; + border-radius: 3px; + box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2); + height: 50rem; } + .book__form { + width: 50%; + padding: 6rem; } diff --git a/Natours/after-S05/img/favicon.png b/Natours/after-S05/img/favicon.png new file mode 100644 index 0000000..0ccb9a6 Binary files /dev/null and b/Natours/after-S05/img/favicon.png differ diff --git a/Natours/after-S05/img/hero-small.jpg b/Natours/after-S05/img/hero-small.jpg new file mode 100644 index 0000000..f703c18 Binary files /dev/null and b/Natours/after-S05/img/hero-small.jpg differ diff --git a/Natours/after-S05/img/hero.jpg b/Natours/after-S05/img/hero.jpg new file mode 100644 index 0000000..0b91dcd Binary files /dev/null and b/Natours/after-S05/img/hero.jpg differ diff --git a/Natours/after-S05/img/logo-green-1x.png b/Natours/after-S05/img/logo-green-1x.png new file mode 100644 index 0000000..de3a31e Binary files /dev/null and b/Natours/after-S05/img/logo-green-1x.png differ diff --git a/Natours/after-S05/img/logo-green-2x.png b/Natours/after-S05/img/logo-green-2x.png new file mode 100644 index 0000000..8d01b96 Binary files /dev/null and b/Natours/after-S05/img/logo-green-2x.png differ diff --git a/Natours/after-S05/img/logo-green-small-1x.png b/Natours/after-S05/img/logo-green-small-1x.png new file mode 100644 index 0000000..9639ceb Binary files /dev/null and b/Natours/after-S05/img/logo-green-small-1x.png differ diff --git a/Natours/after-S05/img/logo-green-small-2x.png b/Natours/after-S05/img/logo-green-small-2x.png new file mode 100644 index 0000000..dd8a91e Binary files /dev/null and b/Natours/after-S05/img/logo-green-small-2x.png differ diff --git a/Natours/after-S05/img/logo-white.png b/Natours/after-S05/img/logo-white.png new file mode 100644 index 0000000..865fe23 Binary files /dev/null and b/Natours/after-S05/img/logo-white.png differ diff --git a/Natours/after-S05/img/nat-1-large.jpg b/Natours/after-S05/img/nat-1-large.jpg new file mode 100644 index 0000000..4064e17 Binary files /dev/null and b/Natours/after-S05/img/nat-1-large.jpg differ diff --git a/Natours/after-S05/img/nat-1.jpg b/Natours/after-S05/img/nat-1.jpg new file mode 100644 index 0000000..4b0919b Binary files /dev/null and b/Natours/after-S05/img/nat-1.jpg differ diff --git a/Natours/after-S05/img/nat-10.jpg b/Natours/after-S05/img/nat-10.jpg new file mode 100644 index 0000000..a01a76b Binary files /dev/null and b/Natours/after-S05/img/nat-10.jpg differ diff --git a/Natours/after-S05/img/nat-2-large.jpg b/Natours/after-S05/img/nat-2-large.jpg new file mode 100644 index 0000000..dff2ba9 Binary files /dev/null and b/Natours/after-S05/img/nat-2-large.jpg differ diff --git a/Natours/after-S05/img/nat-2.jpg b/Natours/after-S05/img/nat-2.jpg new file mode 100644 index 0000000..c945721 Binary files /dev/null and b/Natours/after-S05/img/nat-2.jpg differ diff --git a/Natours/after-S05/img/nat-3-large.jpg b/Natours/after-S05/img/nat-3-large.jpg new file mode 100644 index 0000000..47e20d1 Binary files /dev/null and b/Natours/after-S05/img/nat-3-large.jpg differ diff --git a/Natours/after-S05/img/nat-3.jpg b/Natours/after-S05/img/nat-3.jpg new file mode 100644 index 0000000..843ad85 Binary files /dev/null and b/Natours/after-S05/img/nat-3.jpg differ diff --git a/Natours/after-S05/img/nat-4.jpg b/Natours/after-S05/img/nat-4.jpg new file mode 100644 index 0000000..85f681b Binary files /dev/null and b/Natours/after-S05/img/nat-4.jpg differ diff --git a/Natours/after-S05/img/nat-5.jpg b/Natours/after-S05/img/nat-5.jpg new file mode 100644 index 0000000..4b7b256 Binary files /dev/null and b/Natours/after-S05/img/nat-5.jpg differ diff --git a/Natours/after-S05/img/nat-6.jpg b/Natours/after-S05/img/nat-6.jpg new file mode 100644 index 0000000..4a4fc19 Binary files /dev/null and b/Natours/after-S05/img/nat-6.jpg differ diff --git a/Natours/after-S05/img/nat-7.jpg b/Natours/after-S05/img/nat-7.jpg new file mode 100644 index 0000000..f36bd57 Binary files /dev/null and b/Natours/after-S05/img/nat-7.jpg differ diff --git a/Natours/after-S05/img/nat-8.jpg b/Natours/after-S05/img/nat-8.jpg new file mode 100644 index 0000000..8087468 Binary files /dev/null and b/Natours/after-S05/img/nat-8.jpg differ diff --git a/Natours/after-S05/img/nat-9.jpg b/Natours/after-S05/img/nat-9.jpg new file mode 100644 index 0000000..4980404 Binary files /dev/null and b/Natours/after-S05/img/nat-9.jpg differ diff --git a/Natours/after-S05/img/video.mp4 b/Natours/after-S05/img/video.mp4 new file mode 100755 index 0000000..856d9cb Binary files /dev/null and b/Natours/after-S05/img/video.mp4 differ diff --git a/Natours/after-S05/img/video.webm b/Natours/after-S05/img/video.webm new file mode 100755 index 0000000..01b0c85 Binary files /dev/null and b/Natours/after-S05/img/video.webm differ diff --git a/Natours/after-S05/index.html b/Natours/after-S05/index.html new file mode 100644 index 0000000..9974d7e --- /dev/null +++ b/Natours/after-S05/index.html @@ -0,0 +1,469 @@ + + + + + + + + + + + + + + Natours | Exciting tours for adventurous people + + + +
+ + + + +
 
+ + +
+ +
+
+ +
+ +
+

+ Outdoors + is where life happens +

+ + Discover our tours +
+
+ +
+
+
+

+ Exciting tours for adventurous people +

+
+ +
+
+

You're going to fall in love with nature

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur + ducimus quam nisi exercitationem omnis earum qui. +

+ +

Live adventures like you never have before

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores nulla deserunt voluptatum nam. +

+ + Learn more → +
+
+
+ Photo 1 + Photo 2 + Photo 3 +
+
+
+
+ +
+ +
+
+
+ +

Explore the world

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur. +

+
+
+ +
+
+ +

Meet nature

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur. +

+
+
+ +
+
+ +

Find your way

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur. +

+
+
+ +
+
+ +

Live a healthier life

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur. +

+
+
+
+
+ +
+
+

+ Most popular tours +

+
+ +
+
+
+
+
+   +
+

+ The Sea Explorer +

+
+
    +
  • 3 day tours
    • +
  • Up to 30 people
    • +
  • 2 tour guides
    • +
  • Sleep in cozy hotels
    • +
  • Difficulty: easy
    • +
+
+
+
+
+
+

Only

+

$297

+
+ Book now! +
+
+
+
+ + +
+
+
+
+   +
+

+ The Forest Hiker +

+
+
    +
  • 7 day tours
    • +
  • Up to 40 people
    • +
  • 6 tour guides
    • +
  • Sleep in provided tents
    • +
  • Difficulty: medium
    • +
+
+ +
+
+
+
+

Only

+

$497

+
+ Book now! +
+
+
+
+ + +
+
+
+
+   +
+

+ The Snow Adventurer +

+
+
    +
  • 5 day tours
    • +
  • Up to 15 people
    • +
  • 3 tour guides
    • +
  • Sleep in provided tents
    • +
  • Difficulty: hard
    • +
+
+ +
+
+
+
+

Only

+

$897

+
+ Book now! +
+
+
+
+
+ +
+ Discover all tours +
+
+ +
+
+ +
+ +
+

+ We make people genuinely happy +

+
+ +
+
+
+ Person on a tour +
Mary Smith
+
+
+

I had the best week ever with my family

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur + ducimus quam nisi exercitationem omnis earum qui. Aperiam, ipsum sapiente aspernatur libero + repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui. +

+
+
+
+ +
+
+
+ Person on a tour +
Jack Wilson
+
+
+

WOW! My life is completely different now

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur + ducimus quam nisi exercitationem omnis earum qui. Aperiam, ipsum sapiente aspernatur libero + repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui. +

+
+
+
+ +
+ Read all stories → +
+
+ +
+
+
+
+
+
+

+ Start booking now +

+
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+ +
+ + +
+
+ +
+ +
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/Natours/after-S05/package.json b/Natours/after-S05/package.json new file mode 100644 index 0000000..298840b --- /dev/null +++ b/Natours/after-S05/package.json @@ -0,0 +1,14 @@ +{ + "name": "natours", + "version": "1.0.0", + "description": "Landing page for natours", + "main": "index.js", + "scripts": { + "compile:sass": "node-sass sass/main.scss css/style.css -w" + }, + "author": "Jonas", + "license": "ISC", + "devDependencies": { + "node-sass": "^4.5.3" + } +} diff --git a/Natours/after-S05/sass/abstracts/_functions.scss b/Natours/after-S05/sass/abstracts/_functions.scss new file mode 100644 index 0000000..e69de29 diff --git a/Natours/after-S05/sass/abstracts/_mixins.scss b/Natours/after-S05/sass/abstracts/_mixins.scss new file mode 100644 index 0000000..2cb4080 --- /dev/null +++ b/Natours/after-S05/sass/abstracts/_mixins.scss @@ -0,0 +1,14 @@ +@mixin clearfix { + &::after { + content: ""; + display: table; + clear: both; + } +} + +@mixin absCenter { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} \ No newline at end of file diff --git a/Natours/after-S05/sass/abstracts/_variables.scss b/Natours/after-S05/sass/abstracts/_variables.scss new file mode 100644 index 0000000..f7d9ac1 --- /dev/null +++ b/Natours/after-S05/sass/abstracts/_variables.scss @@ -0,0 +1,30 @@ +// COLORS +$color-primary: #55c57a; +$color-primary-light: #7ed56f; +$color-primary-dark: #28b485; + +$color-secondary-light: #ffb900; +$color-secondary-dark: #ff7730; + +$color-tertiary-light: #2998ff; +$color-tertiary-dark: #5643fa; + +$color-grey-light-1: #f7f7f7; +$color-grey-light-2: #eee; + +$color-grey-dark: #777; +$color-grey-dark-2: #999; +$color-grey-dark-3: #333; + +$color-white: #fff; +$color-black: #000; + + +// FONT +$default-font-size: 1.6rem; + + +// GRID +$grid-width: 114rem; +$gutter-vertical: 8rem; +$gutter-horizontal: 6rem; \ No newline at end of file diff --git a/Natours/after-S05/sass/base/_animations.scss b/Natours/after-S05/sass/base/_animations.scss new file mode 100644 index 0000000..3559adf --- /dev/null +++ b/Natours/after-S05/sass/base/_animations.scss @@ -0,0 +1,43 @@ +@keyframes moveInLeft { + 0% { + opacity: 0; + transform: translateX(-10rem); + } + + 80% { + transform: translateX(1rem); + } + + 100% { + opacity: 1; + transform: translate(0); + } +} + +@keyframes moveInRight { + 0% { + opacity: 0; + transform: translateX(10rem); + } + + 80% { + transform: translateX(-1rem); + } + + 100% { + opacity: 1; + transform: translate(0); + } +} + +@keyframes moveInBottom { + 0% { + opacity: 0; + transform: translateY(3rem); + } + + 100% { + opacity: 1; + transform: translate(0); + } +} \ No newline at end of file diff --git a/Natours/after-S05/sass/base/_base.scss b/Natours/after-S05/sass/base/_base.scss new file mode 100644 index 0000000..965e7fb --- /dev/null +++ b/Natours/after-S05/sass/base/_base.scss @@ -0,0 +1,16 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + // This defines what 1rem is + font-size: 62.5%; +} + +body { + box-sizing: border-box; +} \ No newline at end of file diff --git a/Natours/after-S05/sass/base/_typography.scss b/Natours/after-S05/sass/base/_typography.scss new file mode 100644 index 0000000..0b842bd --- /dev/null +++ b/Natours/after-S05/sass/base/_typography.scss @@ -0,0 +1,71 @@ +body { + font-family: "Lato", sans-serif; + font-weight: 400; + /*font-size: 16px;*/ + line-height: 1.7; + color: $color-grey-dark; + padding: 3rem; +} + +.heading-primary { + color: $color-white; + text-transform: uppercase; + + backface-visibility: hidden; + margin-bottom: 6rem; + + &--main { + display: block; + font-size: 6rem; + font-weight: 400; + letter-spacing: 3.5rem; + + animation-name: moveInLeft; + animation-duration: 1s; + animation-timing-function: ease-out; + + /* + animation-delay: 3s; + animation-iteration-count: 3; + */ + } + + &--sub { + display: block; + font-size: 2rem; + font-weight: 700; + letter-spacing: 1.75rem; + animation: moveInRight 1s ease-out; + } +} + +.heading-secondary { + font-size: 3.5rem; + text-transform: uppercase; + font-weight: 700; + display: inline-block; + background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark); + -webkit-background-clip: text; + color: transparent; + letter-spacing: .2rem; + transition: all .2s; + + &:hover { + transform: skewY(2deg) skewX(15deg) scale(1.1); + text-shadow: .5rem 1rem 2rem rgba($color-black, .2); + } +} + +.heading-tertiary { + font-size: $default-font-size; + font-weight: 700; + text-transform: uppercase; +} + +.paragraph { + font-size: $default-font-size; + + &:not(:last-child) { + margin-bottom: 3rem; + } +} \ No newline at end of file diff --git a/Natours/after-S05/sass/base/_utilities.scss b/Natours/after-S05/sass/base/_utilities.scss new file mode 100644 index 0000000..f206cbb --- /dev/null +++ b/Natours/after-S05/sass/base/_utilities.scss @@ -0,0 +1,8 @@ +.u-center-text { text-align: center !important; } + +.u-margin-bottom-small { margin-bottom: 1.5rem !important; } +.u-margin-bottom-medium { margin-bottom: 4rem !important; } +.u-margin-bottom-big { margin-bottom: 8rem !important; } + +.u-margin-top-big { margin-top: 8rem !important; } +.u-margin-top-huge { margin-top: 10rem !important; } \ No newline at end of file diff --git a/Natours/after-S05/sass/components/_bg-video.scss b/Natours/after-S05/sass/components/_bg-video.scss new file mode 100644 index 0000000..b06bae5 --- /dev/null +++ b/Natours/after-S05/sass/components/_bg-video.scss @@ -0,0 +1,16 @@ +.bg-video { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: -1; + opacity: .15; + overflow: hidden; + + &__content { + height: 100%; + width: 100%; + object-fit: cover; + } +} \ No newline at end of file diff --git a/Natours/after-S05/sass/components/_button.scss b/Natours/after-S05/sass/components/_button.scss new file mode 100644 index 0000000..2b525c3 --- /dev/null +++ b/Natours/after-S05/sass/components/_button.scss @@ -0,0 +1,96 @@ +.btn { + &, + &:link, + &:visited { + text-transform: uppercase; + text-decoration: none; + padding: 1.5rem 4rem; + display: inline-block; + border-radius: 10rem; + transition: all .2s; + position: relative; + font-size: $default-font-size; + + //Change for the + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Natours/final-after-S06/package.json b/Natours/final-after-S06/package.json new file mode 100644 index 0000000..f02cb65 --- /dev/null +++ b/Natours/final-after-S06/package.json @@ -0,0 +1,26 @@ +{ + "name": "natours", + "version": "1.0.0", + "description": "Landing page for natours", + "main": "index.js", + "scripts": { + "watch:sass": "node-sass sass/main.scss css/style.css -w", + "devserver": "live-server", + "start": "npm-run-all --parallel devserver watch:sass", + + "compile:sass": "node-sass sass/main.scss css/style.comp.css", + "concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css", + "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css", + "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed", + "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css" + }, + "author": "Jonas", + "license": "ISC", + "devDependencies": { + "autoprefixer": "^7.1.4", + "concat": "^1.0.3", + "node-sass": "^4.5.3", + "npm-run-all": "^4.1.1", + "postcss-cli": "^4.1.1" + } +} diff --git a/Natours/final-after-S06/sass/abstracts/_functions.scss b/Natours/final-after-S06/sass/abstracts/_functions.scss new file mode 100644 index 0000000..e69de29 diff --git a/Natours/final-after-S06/sass/abstracts/_mixins.scss b/Natours/final-after-S06/sass/abstracts/_mixins.scss new file mode 100644 index 0000000..1d57177 --- /dev/null +++ b/Natours/final-after-S06/sass/abstracts/_mixins.scss @@ -0,0 +1,49 @@ +@mixin clearfix { + &::after { + content: ""; + display: table; + clear: both; + } +} + +@mixin absCenter { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + + +// MEDIA QUERY MANAGER +/* +0 - 600px: Phone +600 - 900px: Tablet portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our normal styles apply +1800px + : Big desktop + +$breakpoint arguement choices: +- phone +- tab-port +- tab-land +- big-desktop + +ORDER: Base + typography > general layout + grid > page layout > components + +1em = 16px +*/ +@mixin respond($breakpoint) { + @if $breakpoint == phone { + @media only screen and (max-width: 37.5em) { @content }; //600px + } + @if $breakpoint == tab-port { + @media only screen and (max-width: 56.25em) { @content }; //900px + } + @if $breakpoint == tab-land { + @media only screen and (max-width: 75em) { @content }; //1200px + } + @if $breakpoint == big-desktop { + @media only screen and (min-width: 112.5em) { @content }; //1800 + } +} + diff --git a/Natours/final-after-S06/sass/abstracts/_variables.scss b/Natours/final-after-S06/sass/abstracts/_variables.scss new file mode 100644 index 0000000..1be4f80 --- /dev/null +++ b/Natours/final-after-S06/sass/abstracts/_variables.scss @@ -0,0 +1,31 @@ +// COLORS +$color-primary: #55c57a; +$color-primary-light: #7ed56f; +$color-primary-dark: #28b485; + +$color-secondary-light: #ffb900; +$color-secondary-dark: #ff7730; + +$color-tertiary-light: #2998ff; +$color-tertiary-dark: #5643fa; + +$color-grey-light-1: #f7f7f7; +$color-grey-light-2: #eee; + +$color-grey-dark: #777; +$color-grey-dark-2: #999; +$color-grey-dark-3: #333; + +$color-white: #fff; +$color-black: #000; + + +// FONT +$default-font-size: 1.6rem; + + +// GRID +$grid-width: 114rem; +$gutter-vertical: 8rem; +$gutter-vertical-small: 6rem; +$gutter-horizontal: 6rem; \ No newline at end of file diff --git a/Natours/final-after-S06/sass/base/_animations.scss b/Natours/final-after-S06/sass/base/_animations.scss new file mode 100644 index 0000000..3559adf --- /dev/null +++ b/Natours/final-after-S06/sass/base/_animations.scss @@ -0,0 +1,43 @@ +@keyframes moveInLeft { + 0% { + opacity: 0; + transform: translateX(-10rem); + } + + 80% { + transform: translateX(1rem); + } + + 100% { + opacity: 1; + transform: translate(0); + } +} + +@keyframes moveInRight { + 0% { + opacity: 0; + transform: translateX(10rem); + } + + 80% { + transform: translateX(-1rem); + } + + 100% { + opacity: 1; + transform: translate(0); + } +} + +@keyframes moveInBottom { + 0% { + opacity: 0; + transform: translateY(3rem); + } + + 100% { + opacity: 1; + transform: translate(0); + } +} \ No newline at end of file diff --git a/Natours/final-after-S06/sass/base/_base.scss b/Natours/final-after-S06/sass/base/_base.scss new file mode 100644 index 0000000..b5062e8 --- /dev/null +++ b/Natours/final-after-S06/sass/base/_base.scss @@ -0,0 +1,38 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + // This defines what 1rem is + font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5% + + @include respond(tab-land) { // width < 1200? + font-size: 56.25%; //1 rem = 9px, 9/16 = 50% + } + + @include respond(tab-port) { // width < 900? + font-size: 50%; //1 rem = 8px, 8/16 = 50% + } + + @include respond(big-desktop) { + font-size: 75%; //1rem = 12, 12/16 + } +} + +body { + box-sizing: border-box; + padding: 3rem; + + @include respond(tab-port) { + padding: 0; + } +} + +::selection { + background-color: $color-primary; + color: $color-white; +} \ No newline at end of file diff --git a/Natours/final-after-S06/sass/base/_typography.scss b/Natours/final-after-S06/sass/base/_typography.scss new file mode 100644 index 0000000..d99391f --- /dev/null +++ b/Natours/final-after-S06/sass/base/_typography.scss @@ -0,0 +1,86 @@ +body { + font-family: "Lato", sans-serif; + font-weight: 400; + /*font-size: 16px;*/ + line-height: 1.7; + color: $color-grey-dark; +} + +.heading-primary { + color: $color-white; + text-transform: uppercase; + + backface-visibility: hidden; + margin-bottom: 6rem; + + &--main { + display: block; + font-size: 6rem; + font-weight: 400; + letter-spacing: 3.5rem; + + animation-name: moveInLeft; + animation-duration: 1s; + animation-timing-function: ease-out; + + @include respond(phone) { + letter-spacing: 1rem; + font-family: 5rem; + } + /* + animation-delay: 3s; + animation-iteration-count: 3; + */ + } + + &--sub { + display: block; + font-size: 2rem; + font-weight: 700; + letter-spacing: 1.75rem; + animation: moveInRight 1s ease-out; + + @include respond(phone) { + letter-spacing: .5rem; + } + } +} + +.heading-secondary { + font-size: 3.5rem; + text-transform: uppercase; + font-weight: 700; + display: inline-block; + background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark); + -webkit-background-clip: text; + color: transparent; + letter-spacing: .2rem; + transition: all .2s; + + @include respond(tab-port) { + font-size: 3rem; + } + + @include respond(phone) { + font-size: 2.5rem; + } + + &:hover { + transform: skewY(2deg) skewX(15deg) scale(1.1); + text-shadow: .5rem 1rem 2rem rgba($color-black, .2); + } +} + +.heading-tertiary { + font-size: $default-font-size; + font-weight: 700; + text-transform: uppercase; +} + +.paragraph { + font-size: $default-font-size; + + &:not(:last-child) { + margin-bottom: 3rem; + } +} \ No newline at end of file diff --git a/Natours/final-after-S06/sass/base/_utilities.scss b/Natours/final-after-S06/sass/base/_utilities.scss new file mode 100644 index 0000000..e59c5f1 --- /dev/null +++ b/Natours/final-after-S06/sass/base/_utilities.scss @@ -0,0 +1,21 @@ +.u-center-text { text-align: center !important; } + +.u-margin-bottom-small { margin-bottom: 1.5rem !important; } +.u-margin-bottom-medium { + margin-bottom: 4rem !important; + + @include respond(tab-port) { + margin-bottom: 3rem !important; + } +} + +.u-margin-bottom-big { + margin-bottom: 8rem !important; + + @include respond(tab-port) { + margin-bottom: 5rem !important; + } +} + +.u-margin-top-big { margin-top: 8rem !important; } +.u-margin-top-huge { margin-top: 10rem !important; } \ No newline at end of file diff --git a/Natours/final-after-S06/sass/components/_bg-video.scss b/Natours/final-after-S06/sass/components/_bg-video.scss new file mode 100644 index 0000000..b06bae5 --- /dev/null +++ b/Natours/final-after-S06/sass/components/_bg-video.scss @@ -0,0 +1,16 @@ +.bg-video { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: -1; + opacity: .15; + overflow: hidden; + + &__content { + height: 100%; + width: 100%; + object-fit: cover; + } +} \ No newline at end of file diff --git a/Natours/final-after-S06/sass/components/_button.scss b/Natours/final-after-S06/sass/components/_button.scss new file mode 100644 index 0000000..2b525c3 --- /dev/null +++ b/Natours/final-after-S06/sass/components/_button.scss @@ -0,0 +1,96 @@ +.btn { + &, + &:link, + &:visited { + text-transform: uppercase; + text-decoration: none; + padding: 1.5rem 4rem; + display: inline-block; + border-radius: 10rem; + transition: all .2s; + position: relative; + font-size: $default-font-size; + + //Change for the + + +
+ +

Your own home:

+

The ultimate personal freedom

+ +
Seen on
+
+ Seen on logo 1 + Seen on logo 2 + Seen on logo 3 + Seen on logo 4 +
+
+ +
+

Top 3 Realtors

+
+ Realtor 1 +
+

Erik Feinman

+

245 houses sold

+
+ + Realtor 2 +
+

Kim Brown

+

212 houses sold

+
+ + Realtor 3 +
+

Toby Ramsey

+

198 houses sold

+
+
+
+ +
+
+ + + +

World's best luxury homes

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus.

+
+ +
+ + + +

Only the best properties

+

Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus rerum sed a eligendi aut quia.

+
+ +
+ + + +

All homes in in top locations

+

Tenetur distinctio necessitatibus pariatur voluptatibus quidem consequatur harum.

+
+ +
+ + + +

New home in one week

+

Vero ipsum sapiente molestias accusamus rerum. Lorem, ipsum dolor sit amet consectetur adipisicing elit.

+
+ +
+ + + +

Top 1% realtors

+

Quidem consequatur harum, voluptatum mollitia quae. Tenetur distinctio necessitatibus pariatur voluptatibus.

+
+ +
+ + + +

Secure payments on nexter

+

Pariatur voluptatibus quidem consequatur harum, voluptatum mollitia quae.

+
+
+ +
+ Couple with new house + New house +
+ +
+

Happy Customers

+

“The best decision of our lives”

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus. Quidem consequatur harum volupta! +

+ +
+ +
+
+ House 1 + +
Beautiful Familiy House
+
+ + + +

USA

+
+
+ + + +

5 rooms

+
+
+ + + +

325 m2

+
+
+ + + +

$1,200,000

+
+ +
+ + +
+ House 2 + +
Modern Glass Villa
+
+ + + +

Canada

+
+
+ + + +

6 rooms

+
+
+ + + +

450 m2

+
+
+ + + +

$2,750,000

+
+ +
+ +
+ House 3 + +
Cozy Country House
+
+ + + +

UK

+
+
+ + + +

4 rooms

+
+
+ + + +

250 m2

+
+
+ + + +

$850,000

+
+ +
+ +
+ House 4 + +
Large Rustical Villa
+
+ + + +

Portugal

+
+
+ + + +

6 rooms

+
+
+ + + +

480 m2

+
+
+ + + +

$1,950,000

+
+ +
+ +
+ House 5 + +
Majestic Palace House
+
+ + + +

Germany

+
+
+ + + +

18 rooms

+
+
+ + + +

4230 m2

+
+
+ + + +

$9,500,000

+
+ +
+ +
+ House 6 + +
Modern Familiy Apartment
+
+ + + +

Italy

+
+
+ + + +

3 rooms

+
+
+ + + +

180 m2

+
+
+ + + +

$600,000

+
+ +
+
+ + +
+
Gallery image 1
+
Gallery image 2
+
Gallery image 3
+
Gallery image 4
+
Gallery image 5
+
Gallery image 6
+
Gallery image 7
+
Gallery image 8
+
Gallery image 9
+
Gallery image 10
+
Gallery image 11
+
Gallery image 12
+
Gallery image 13
+
Gallery image 14
+ + +
+ + + + \ No newline at end of file diff --git a/Nexter/final/package.json b/Nexter/final/package.json new file mode 100644 index 0000000..85eb37e --- /dev/null +++ b/Nexter/final/package.json @@ -0,0 +1,25 @@ +{ + "name": "Nexter", + "version": "1.0.0", + "description": "Nexter webpage", + "main": "index.js", + "scripts": { + "watch:sass": "node-sass sass/main.scss css/style.css -w", + "devserver": "live-server --browser=firefox", + "start": "npm-run-all --parallel devserver watch:sass", + + "compile:sass": "node-sass sass/main.scss css/style.comp.css", + "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css", + "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed", + "build:css": "npm-run-all compile:sass prefix:css compress:css" + }, + "author": "Jonas", + "license": "ISC", + "devDependencies": { + "autoprefixer": "^7.1.4", + "concat": "^1.0.3", + "node-sass": "^4.5.3", + "npm-run-all": "^4.1.1", + "postcss-cli": "^4.1.1" + } +} \ No newline at end of file diff --git a/Nexter/final/sass/_base.scss b/Nexter/final/sass/_base.scss new file mode 100644 index 0000000..1e75da9 --- /dev/null +++ b/Nexter/final/sass/_base.scss @@ -0,0 +1,60 @@ +// COLOR VARIABLES +$color-primary: #c69963; +$color-primary-dark: #B28451; + +$color-secondary: #101d2c; + +$color-grey-light-1: #f9f7f6; +$color-grey-light-2: #aaa; + +$color-grey-dark-1: #54483A; +$color-grey-dark-2: #6D5D4B; + +// FONT VARIABLES +$font-primary: 'Nunito', sans-serif; +$font-display: 'Josefin Sans', sans-serif; + +// RESPONSIVE BREAKPOINTS +$bp-largest: 75em; // 1200px +$bp-large: 62.5em; // 1000px +$bp-medium: 50em; // 800px; +$bp-small: 37.5em; // 600px; + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + box-sizing: border-box; + font-size: 62.5%; // 10px/16px = 62.5% -> 1rem = 10px + + @media only screen and (max-width: $bp-largest) { + font-size: 50%; + } +} + +body { + font-family: $font-primary; + color: $color-grey-dark-2; + font-weight: 300; + line-height: 1.6; +} + +.container { + display: grid; + grid-template-rows: 80vh min-content 40vw repeat(3, min-content); + grid-template-columns: [sidebar-start] 8rem [sidebar-end full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end]; + + @media only screen and (max-width: $bp-large) { + grid-template-rows: 6rem 80vh min-content 40vw repeat(3, min-content); + grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end]; + } + + @media only screen and (max-width: $bp-medium) { + grid-template-rows: 6rem calc(100vh - 6rem); + } +} \ No newline at end of file diff --git a/Nexter/final/sass/_features.scss b/Nexter/final/sass/_features.scss new file mode 100644 index 0000000..2bb09b9 --- /dev/null +++ b/Nexter/final/sass/_features.scss @@ -0,0 +1,43 @@ +.features { + grid-column: center-start / center-end; + + margin: 15rem 0; + + @supports(display: grid) { + display: grid; + //grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); + grid-gap: 6rem; + align-items: start; + } +} + + +.feature { + + float: left; + width: 33.3333%; + margin-bottom: 6rem; + + @supports(display: grid) { + width: auto; + margin-bottom: 0; + } + + display: grid; + grid-template-columns: min-content 1fr; + grid-row-gap: 1.5rem; + grid-column-gap: 2.5rem; + + &__icon { + fill: $color-primary; + width: 4.5rem; + height: 4.5rem; + grid-row: 1 / span 2; + transform: translateY(-1rem); + } + + &__text { + font-size: 1.7rem; + } +} \ No newline at end of file diff --git a/Nexter/final/sass/_footer.scss b/Nexter/final/sass/_footer.scss new file mode 100644 index 0000000..fcc9931 --- /dev/null +++ b/Nexter/final/sass/_footer.scss @@ -0,0 +1,43 @@ +.footer { + background-color: $color-secondary; + grid-column: full-start / full-end; + padding: 8rem; +} + +.nav { + list-style: none; + + display: grid; + grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); + grid-gap: 2rem; + align-items: center; + + &__link:link, + &__link:visited { + font-size: 1.4rem; + color: #fff; + text-decoration: none; + font-family: $font-display; + text-transform: uppercase; + text-align: center; + padding: 1.5rem; + display: block; + transition: all .2s; + } + + &__link:hover, + &__link:active { + background-color: rgba(#fff, .05); + transform: translateY(-3px); + } +} + +.copyright { + font-size: 1.4rem; + color: $color-grey-light-2; + margin-top: 6rem; + margin-right: auto; + margin-left: auto; + text-align: center; + width: 70%; +} \ No newline at end of file diff --git a/Nexter/final/sass/_gallery.scss b/Nexter/final/sass/_gallery.scss new file mode 100644 index 0000000..155e675 --- /dev/null +++ b/Nexter/final/sass/_gallery.scss @@ -0,0 +1,92 @@ +.gallery { + background-color: $color-grey-light-1; + grid-column: full-start / full-end; + + display: grid; + /*grid-template-columns: repeat(8, 1fr); + grid-template-rows: repeat(7, 5vw);*/ + grid-template: repeat(7, 5vw) / repeat(8, 1fr); + + + grid-gap: 1.5rem; + padding: 1.5rem; + + &__item { + &--1 { + grid-row: 1 / span 2; + grid-column: 1 / span 2; + } + + &--2 { + grid-row: 1 / span 3; + grid-column: 3 / span 3; + } + + &--3 { + grid-row: 1 / span 2; + grid-column: 6 / 7; + } + + &--4 { + grid-row: 1 / span 2; + grid-column: 7 / -1; + } + + &--5 { + grid-row: 3 / span 3; + grid-column: 1 / span 2; + } + + &--6 { + grid-row: 4 / span 2; + grid-column: 3 / span 2; + } + + &--7 { + grid-row: 4 / 5; + grid-column: 5 / 6; + } + + &--8 { + grid-row: 3 / span 2; + grid-column: 6 / span 2; + } + + &--9 { + grid-row: 3 / span 3; + grid-column: 8 / -1; + } + + &--10 { + grid-row: 6 / span 2; + grid-column: 1 / 2; + } + + &--11 { + grid-row: 6 / span 2; + grid-column: 2 / span 2; + } + + &--12 { + grid-row: 6 / span 2; + grid-column: 4 / 5; + } + + &--13 { + grid-row: 5 / span 3; + grid-column: 5 / span 3; + } + + &--14 { + grid-row: 6 / span 2; + grid-column: 8 / -1; + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + } +} \ No newline at end of file diff --git a/Nexter/final/sass/_header.scss b/Nexter/final/sass/_header.scss new file mode 100644 index 0000000..ce97bed --- /dev/null +++ b/Nexter/final/sass/_header.scss @@ -0,0 +1,65 @@ +.header { + background-color: $color-grey-dark-1; + grid-column: full-start / col-end 6; + background-image: linear-gradient(rgba($color-secondary, .93), rgba($color-secondary, .93)), url(../img/hero.jpeg); + background-size: cover; + background-position: center; + padding: 8rem; + padding-top: 4rem; + + display: grid; + grid-template-rows: 1fr min-content minmax(6rem, min-content) 1fr; + grid-template-columns: minmax(min-content, max-content); + grid-row-gap: 1.5rem; + justify-content: center; + + @media only screen and (max-width: $bp-medium) { + grid-column: 1 / -1; + } + + @media only screen and (max-width: $bp-small) { + padding: 5rem; + } + + &__logo { + height: 3rem; + justify-self: center; + } + + &__btn { + align-self: start; + justify-self: start; + } + + &__seenon-text { + display: grid; + grid-template-columns: 1fr max-content 1fr; + grid-column-gap: 1.5rem; + align-items: center; + + font-size: 1.6rem; + color: $color-grey-light-2; + + &::before, + &::after { + content: ""; + height: 1px; + display: block; + background-color: currentColor; + } + } + + &__seenon-logos { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-column-gap: 3rem; + justify-items: center; + align-items: center; + + img { + max-height: 2.5rem; + max-width: 100%; + filter: brightness(70%); + } + } +} \ No newline at end of file diff --git a/Nexter/final/sass/_homes.scss b/Nexter/final/sass/_homes.scss new file mode 100644 index 0000000..6cd43be --- /dev/null +++ b/Nexter/final/sass/_homes.scss @@ -0,0 +1,80 @@ +.homes { + grid-column: center-start / center-end; + margin: 15rem 0; + + display: grid; + grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); + grid-gap: 7rem; +} + +.home { + background-color: $color-grey-light-1; + + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-row-gap: 3.5rem; + + &__img { + width: 100%; + grid-row: 1 / 2; + grid-column: 1 / -1; + z-index: 1; + } + + &__like { + grid-row: 1 / 2; + grid-column: 2 / 3; + fill: $color-primary; + height: 2.5rem; + width: 2.5rem; + z-index: 2; + justify-self: end; + margin: 1rem; + } + + &__name { + grid-row: 1 / 2; + grid-column: 1 / -1; + justify-self: center; + align-self: end; + z-index: 3; + + width: 80%; + font-family: $font-display; + font-size: 1.6rem; + text-align: center; + padding: 1.25rem; + background-color: $color-secondary; + color: #fff; + font-weight: 400; + transform: translateY(50%); + } + + &__location, + &__rooms { + margin-top: 2.5rem; + } + + &__location, + &__rooms, + &__area, + &__price { + + font-size: 1.5rem; + margin-left: 2rem; + + display: flex; + align-items: center; + + svg { + fill: $color-primary; + height: 2rem; + width: 2rem; + margin-right: 1rem; + } + } + + &__btn { + grid-column: 1 / -1; + } +} \ No newline at end of file diff --git a/Nexter/final/sass/_realtors.scss b/Nexter/final/sass/_realtors.scss new file mode 100644 index 0000000..59b7cba --- /dev/null +++ b/Nexter/final/sass/_realtors.scss @@ -0,0 +1,43 @@ +.realtors { + background-color: $color-secondary; + grid-column: col-start 7 / full-end; + padding: 3rem; + + display: grid; + align-content: center; + justify-content: center; + justify-items: center; + grid-row-gap: 2rem; + + @media only screen and (max-width: $bp-medium) { + grid-column: 1 / -1; + } + + &__list { + display: grid; + grid-template-columns: min-content max-content; + grid-column-gap: 2rem; + grid-row-gap: 5vh; + align-items: center; + + @media only screen and (max-width: $bp-medium) { + grid-template-columns: repeat(3, min-content max-content); + } + + @media only screen and (max-width: $bp-small) { + grid-template-columns: min-content max-content; + } + } + + &__img { + width: 7rem; + border-radius: 50%; + display: block; + } + + &__sold { + text-transform: uppercase; + color: $color-grey-light-2; + margin-top: -3px; + } +} \ No newline at end of file diff --git a/Nexter/final/sass/_sidebar.scss b/Nexter/final/sass/_sidebar.scss new file mode 100644 index 0000000..046ecc2 --- /dev/null +++ b/Nexter/final/sass/_sidebar.scss @@ -0,0 +1,45 @@ +.sidebar { + background-color: $color-primary; + grid-column: sidebar-start / sidebar-end; + grid-row: 1 / -1; + + display: flex; + justify-content: center; + + @media only screen and (max-width: $bp-large) { + grid-column: 1 / -1; + grid-row: 1 / 2; + justify-content: flex-end; + align-items: center; + } +} + +.nav-btn { + border: none; + border-radius: 0; + + background-color: #fff; + height: 2px; + width: 4.5rem; + margin-top: 4rem; + + &::before, + &::after { + background-color: #fff; + height: 2px; + width: 4.5rem; + content: ""; + display: block; + } + + &::before { transform: translateY(-1.5rem); } + &::after { transform: translateY(1.3rem); } + + @media only screen and (max-width: $bp-large) { + margin-top: 0; + margin-right: 3rem; + + &::before { transform: translateY(-1.2rem); } + &::after { transform: translateY(1rem); } + } +} \ No newline at end of file diff --git a/Nexter/final/sass/_story.scss b/Nexter/final/sass/_story.scss new file mode 100644 index 0000000..5f20057 --- /dev/null +++ b/Nexter/final/sass/_story.scss @@ -0,0 +1,72 @@ +.story { + &__pictures { + background-color: $color-primary; + grid-column: full-start / col-end 4; + background-image: linear-gradient(rgba($color-primary, .5), rgba($color-primary, .5)), url(../img/back.jpg); + background-size: cover; + + display: grid; + grid-template-rows: repeat(6, 1fr); + grid-template-columns: repeat(6, 1fr); + align-items: center; + + @media only screen and (max-width: $bp-medium) { + grid-column: 1 / -1; + padding: 6rem; + } + } + + &__img--1 { + width: 100%; + grid-row: 2 / 6; + grid-column: 2 / 6; + box-shadow: 0 2rem 5rem rgba(#000, .1); + + @media only screen and (max-width: $bp-medium) { + grid-column: 1 / 5; + grid-row: 1 / -1; + } + } + + &__img--2 { + width: 115%; + grid-row: 4 / 6; + grid-column: 4 / 7; + z-index: 20; + box-shadow: 0 2rem 5rem rgba(#000, .2); + + @media only screen and (max-width: $bp-medium) { + grid-row: 1 / -1; + width: 100%; + } + } + + &__content { + background-color: $color-grey-light-1; + grid-column: col-start 5 / full-end; + + padding: 6rem 8vw; + + /* + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + */ + + display: grid; + align-content: center; + justify-items: start; + + @media only screen and (max-width: $bp-medium) { + grid-column: 1 / -1; + grid-row: 5 / 6; + } + } + + &__text { + font-size: 1.5rem; + font-style: italic; + margin-bottom: 4rem; + } +} \ No newline at end of file diff --git a/Nexter/final/sass/_typography.scss b/Nexter/final/sass/_typography.scss new file mode 100644 index 0000000..1063e00 --- /dev/null +++ b/Nexter/final/sass/_typography.scss @@ -0,0 +1,58 @@ +%heading { + font-family: $font-display; + font-weight: 400; +} + +.heading-1 { + @extend %heading; + font-size: 4.5rem; + color: $color-grey-light-1; + line-height: 1; +} + +.heading-2 { + @extend %heading; + font-size: 4rem; + font-style: italic; + line-height: 1; + + &--light { color: $color-grey-light-1; } + &--dark { color: $color-grey-dark-1; } +} + +.heading-3 { + @extend %heading; + font-size: 1.6rem; + color: $color-primary; + text-transform: uppercase; +} + +.heading-4 { + @extend %heading; + font-size: 1.9rem; + + &--light { color: $color-grey-light-1; } + &--dark { color: $color-grey-dark-1; } +} + +.btn { + background-color: $color-primary; + color: #fff; + border: none; + border-radius: 0; + font-family: $font-display; + font-size: 1.5rem; + text-transform: uppercase; + padding: 1.8rem 3rem; + cursor: pointer; + transition: all .2s; + + &:hover { + background-color: $color-primary-dark; + } +} + +.mb-sm { margin-bottom: 2rem; } +.mb-md { margin-bottom: 3rem; } +.mb-lg { margin-bottom: 4rem; } +.mb-hg { margin-bottom: 8rem; } \ No newline at end of file diff --git a/Nexter/final/sass/main.scss b/Nexter/final/sass/main.scss new file mode 100644 index 0000000..3b54ba6 --- /dev/null +++ b/Nexter/final/sass/main.scss @@ -0,0 +1,11 @@ +@import "base"; +@import "typography"; + +@import "sidebar"; +@import "header"; +@import "realtors"; +@import "features"; +@import "story"; +@import "homes"; +@import "gallery"; +@import "footer"; \ No newline at end of file diff --git a/Nexter/starter/img/back.jpg b/Nexter/starter/img/back.jpg new file mode 100644 index 0000000..3cdb094 Binary files /dev/null and b/Nexter/starter/img/back.jpg differ diff --git a/Nexter/starter/img/favicon.png b/Nexter/starter/img/favicon.png new file mode 100644 index 0000000..ce09276 Binary files /dev/null and b/Nexter/starter/img/favicon.png differ diff --git a/Nexter/starter/img/gal-1.jpeg b/Nexter/starter/img/gal-1.jpeg new file mode 100644 index 0000000..053ec32 Binary files /dev/null and b/Nexter/starter/img/gal-1.jpeg differ diff --git a/Nexter/starter/img/gal-10.jpeg b/Nexter/starter/img/gal-10.jpeg new file mode 100644 index 0000000..fa59ee3 Binary files /dev/null and b/Nexter/starter/img/gal-10.jpeg differ diff --git a/Nexter/starter/img/gal-11.jpeg b/Nexter/starter/img/gal-11.jpeg new file mode 100644 index 0000000..0ac34c5 Binary files /dev/null and b/Nexter/starter/img/gal-11.jpeg differ diff --git a/Nexter/starter/img/gal-12.jpeg b/Nexter/starter/img/gal-12.jpeg new file mode 100644 index 0000000..2cceced Binary files /dev/null and b/Nexter/starter/img/gal-12.jpeg differ diff --git a/Nexter/starter/img/gal-13.jpeg b/Nexter/starter/img/gal-13.jpeg new file mode 100644 index 0000000..d069059 Binary files /dev/null and b/Nexter/starter/img/gal-13.jpeg differ diff --git a/Nexter/starter/img/gal-14.jpeg b/Nexter/starter/img/gal-14.jpeg new file mode 100644 index 0000000..d3bb763 Binary files /dev/null and b/Nexter/starter/img/gal-14.jpeg differ diff --git a/Nexter/starter/img/gal-2.jpeg b/Nexter/starter/img/gal-2.jpeg new file mode 100644 index 0000000..e90f95f Binary files /dev/null and b/Nexter/starter/img/gal-2.jpeg differ diff --git a/Nexter/starter/img/gal-3.jpeg b/Nexter/starter/img/gal-3.jpeg new file mode 100644 index 0000000..c6021c3 Binary files /dev/null and b/Nexter/starter/img/gal-3.jpeg differ diff --git a/Nexter/starter/img/gal-4.jpeg b/Nexter/starter/img/gal-4.jpeg new file mode 100644 index 0000000..b3938c8 Binary files /dev/null and b/Nexter/starter/img/gal-4.jpeg differ diff --git a/Nexter/starter/img/gal-5.jpeg b/Nexter/starter/img/gal-5.jpeg new file mode 100644 index 0000000..ac565c9 Binary files /dev/null and b/Nexter/starter/img/gal-5.jpeg differ diff --git a/Nexter/starter/img/gal-6.jpeg b/Nexter/starter/img/gal-6.jpeg new file mode 100644 index 0000000..6b0c35b Binary files /dev/null and b/Nexter/starter/img/gal-6.jpeg differ diff --git a/Nexter/starter/img/gal-7.jpeg b/Nexter/starter/img/gal-7.jpeg new file mode 100644 index 0000000..66a9c82 Binary files /dev/null and b/Nexter/starter/img/gal-7.jpeg differ diff --git a/Nexter/starter/img/gal-8.jpeg b/Nexter/starter/img/gal-8.jpeg new file mode 100644 index 0000000..af5bada Binary files /dev/null and b/Nexter/starter/img/gal-8.jpeg differ diff --git a/Nexter/starter/img/gal-9.jpeg b/Nexter/starter/img/gal-9.jpeg new file mode 100644 index 0000000..e702450 Binary files /dev/null and b/Nexter/starter/img/gal-9.jpeg differ diff --git a/Nexter/starter/img/hero.jpeg b/Nexter/starter/img/hero.jpeg new file mode 100644 index 0000000..2914568 Binary files /dev/null and b/Nexter/starter/img/hero.jpeg differ diff --git a/Nexter/starter/img/house-1.jpeg b/Nexter/starter/img/house-1.jpeg new file mode 100644 index 0000000..760bf92 Binary files /dev/null and b/Nexter/starter/img/house-1.jpeg differ diff --git a/Nexter/starter/img/house-2.jpeg b/Nexter/starter/img/house-2.jpeg new file mode 100644 index 0000000..4a0c37c Binary files /dev/null and b/Nexter/starter/img/house-2.jpeg differ diff --git a/Nexter/starter/img/house-3.jpeg b/Nexter/starter/img/house-3.jpeg new file mode 100644 index 0000000..427560d Binary files /dev/null and b/Nexter/starter/img/house-3.jpeg differ diff --git a/Nexter/starter/img/house-4.jpeg b/Nexter/starter/img/house-4.jpeg new file mode 100644 index 0000000..5885d87 Binary files /dev/null and b/Nexter/starter/img/house-4.jpeg differ diff --git a/Nexter/starter/img/house-5.jpeg b/Nexter/starter/img/house-5.jpeg new file mode 100644 index 0000000..b7a4de0 Binary files /dev/null and b/Nexter/starter/img/house-5.jpeg differ diff --git a/Nexter/starter/img/house-6.jpeg b/Nexter/starter/img/house-6.jpeg new file mode 100644 index 0000000..2df637c Binary files /dev/null and b/Nexter/starter/img/house-6.jpeg differ diff --git a/Nexter/starter/img/logo-bbc.png b/Nexter/starter/img/logo-bbc.png new file mode 100644 index 0000000..085de36 Binary files /dev/null and b/Nexter/starter/img/logo-bbc.png differ diff --git a/Nexter/starter/img/logo-bi.png b/Nexter/starter/img/logo-bi.png new file mode 100644 index 0000000..0de8be1 Binary files /dev/null and b/Nexter/starter/img/logo-bi.png differ diff --git a/Nexter/starter/img/logo-forbes.png b/Nexter/starter/img/logo-forbes.png new file mode 100644 index 0000000..c847471 Binary files /dev/null and b/Nexter/starter/img/logo-forbes.png differ diff --git a/Nexter/starter/img/logo-techcrunch.png b/Nexter/starter/img/logo-techcrunch.png new file mode 100644 index 0000000..1a42d1e Binary files /dev/null and b/Nexter/starter/img/logo-techcrunch.png differ diff --git a/Nexter/starter/img/logo.png b/Nexter/starter/img/logo.png new file mode 100644 index 0000000..c7a1bfc Binary files /dev/null and b/Nexter/starter/img/logo.png differ diff --git a/Nexter/starter/img/realtor-1.jpeg b/Nexter/starter/img/realtor-1.jpeg new file mode 100644 index 0000000..dd5223b Binary files /dev/null and b/Nexter/starter/img/realtor-1.jpeg differ diff --git a/Nexter/starter/img/realtor-2.jpeg b/Nexter/starter/img/realtor-2.jpeg new file mode 100644 index 0000000..7925df5 Binary files /dev/null and b/Nexter/starter/img/realtor-2.jpeg differ diff --git a/Nexter/starter/img/realtor-3.jpeg b/Nexter/starter/img/realtor-3.jpeg new file mode 100644 index 0000000..835a681 Binary files /dev/null and b/Nexter/starter/img/realtor-3.jpeg differ diff --git a/Nexter/starter/img/sprite.svg b/Nexter/starter/img/sprite.svg new file mode 100755 index 0000000..25e3404 --- /dev/null +++ b/Nexter/starter/img/sprite.svg @@ -0,0 +1,44 @@ + + + +heart-full + + + +presentation + + + +expand + + + +lock + + + +trophy + + + +key + + + +profile-male + + + +map-pin + + + +heart + + + +global + + + + diff --git a/Nexter/starter/img/story-1.jpeg b/Nexter/starter/img/story-1.jpeg new file mode 100644 index 0000000..7dfbf32 Binary files /dev/null and b/Nexter/starter/img/story-1.jpeg differ diff --git a/Nexter/starter/img/story-2.jpeg b/Nexter/starter/img/story-2.jpeg new file mode 100644 index 0000000..325d782 Binary files /dev/null and b/Nexter/starter/img/story-2.jpeg differ diff --git a/Nexter/starter/img/text.txt b/Nexter/starter/img/text.txt new file mode 100644 index 0000000..43ad680 --- /dev/null +++ b/Nexter/starter/img/text.txt @@ -0,0 +1,18 @@ +--- Features + +Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus. + +Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus rerum sed a eligendi aut quia. + +Tenetur distinctio necessitatibus pariatur voluptatibus quidem consequatur harum. + +Vero ipsum sapiente molestias accusamus rerum. Lorem, ipsum dolor sit amet consectetur adipisicing elit. + +Quidem consequatur harum, voluptatum mollitia quae. Tenetur distinctio necessitatibus pariatur voluptatibus. + +Pariatur voluptatibus quidem consequatur harum, voluptatum mollitia quae. + + +--- Stories + +Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus. Quidem consequatur harum volupta! \ No newline at end of file diff --git a/Nexter/starter/index.html b/Nexter/starter/index.html new file mode 100644 index 0000000..2797dc6 --- /dev/null +++ b/Nexter/starter/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + nexter — your home, your freedom + + + + + \ No newline at end of file diff --git a/Nexter/starter/package.json b/Nexter/starter/package.json new file mode 100644 index 0000000..b8c44d6 --- /dev/null +++ b/Nexter/starter/package.json @@ -0,0 +1,25 @@ +{ + "name": "Nexter", + "version": "1.0.0", + "description": "Nexter webpage", + "main": "index.js", + "scripts": { + "watch:sass": "node-sass sass/main.scss css/style.css -w", + "devserver": "live-server", + "start": "npm-run-all --parallel devserver watch:sass", + + "compile:sass": "node-sass sass/main.scss css/style.comp.css", + "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css", + "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed", + "build:css": "npm-run-all compile:sass prefix:css compress:css" + }, + "author": "Jonas", + "license": "ISC", + "devDependencies": { + "autoprefixer": "^7.1.4", + "concat": "^1.0.3", + "node-sass": "^4.5.3", + "npm-run-all": "^4.1.1", + "postcss-cli": "^4.1.1" + } +} \ No newline at end of file diff --git a/Nexter/starter/sass/_base.scss b/Nexter/starter/sass/_base.scss new file mode 100644 index 0000000..cc267b6 --- /dev/null +++ b/Nexter/starter/sass/_base.scss @@ -0,0 +1,15 @@ +// COLOR VARIABLES +$color-primary: #c69963; +$color-primary-dark: #B28451; + +$color-secondary: #101d2c; + +$color-grey-light-1: #f9f7f6; +$color-grey-light-2: #aaa; + +$color-grey-dark-1: #54483A; +$color-grey-dark-2: #6D5D4B; + +// FONT VARIABLES +$font-primary: 'Nunito', sans-serif; +$font-display: 'Josefin Sans', sans-serif; \ No newline at end of file diff --git a/Nexter/starter/sass/_features.scss b/Nexter/starter/sass/_features.scss new file mode 100644 index 0000000..e69de29 diff --git a/Nexter/starter/sass/_footer.scss b/Nexter/starter/sass/_footer.scss new file mode 100644 index 0000000..e69de29 diff --git a/Nexter/starter/sass/_gallery.scss b/Nexter/starter/sass/_gallery.scss new file mode 100644 index 0000000..e69de29 diff --git a/Nexter/starter/sass/_header.scss b/Nexter/starter/sass/_header.scss new file mode 100644 index 0000000..e69de29 diff --git a/Nexter/starter/sass/_homes.scss b/Nexter/starter/sass/_homes.scss new file mode 100644 index 0000000..e69de29 diff --git a/Nexter/starter/sass/_realtors.scss b/Nexter/starter/sass/_realtors.scss new file mode 100644 index 0000000..e69de29 diff --git a/Nexter/starter/sass/_sidebar.scss b/Nexter/starter/sass/_sidebar.scss new file mode 100644 index 0000000..e69de29 diff --git a/Nexter/starter/sass/_story.scss b/Nexter/starter/sass/_story.scss new file mode 100644 index 0000000..e69de29 diff --git a/Nexter/starter/sass/_typography.scss b/Nexter/starter/sass/_typography.scss new file mode 100644 index 0000000..e69de29 diff --git a/Nexter/starter/sass/main.scss b/Nexter/starter/sass/main.scss new file mode 100644 index 0000000..3b54ba6 --- /dev/null +++ b/Nexter/starter/sass/main.scss @@ -0,0 +1,11 @@ +@import "base"; +@import "typography"; + +@import "sidebar"; +@import "header"; +@import "realtors"; +@import "features"; +@import "story"; +@import "homes"; +@import "gallery"; +@import "footer"; \ No newline at end of file diff --git a/Trillo/final/css/style.comp.css b/Trillo/final/css/style.comp.css new file mode 100644 index 0000000..7aada55 --- /dev/null +++ b/Trillo/final/css/style.comp.css @@ -0,0 +1,505 @@ +:root { + --color-primary: #eb2f64; + --color-primary-light: #FF3366; + --color-primary-dark: #BA265D; + --color-grey-light-1: #faf9f9; + --color-grey-light-2: #f4f2f2; + --color-grey-light-3: #f0eeee; + --color-grey-light-4: #ccc; + --color-grey-dark-1: #333; + --color-grey-dark-2: #777; + --color-grey-dark-3: #999; + --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3); + --shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06); + --line: 1px solid var(--color-grey-light-2); } + +* { + margin: 0; + padding: 0; } + +*, +*::before, +*::after { + box-sizing: inherit; } + +html { + box-sizing: border-box; + font-size: 62.5%; } + @media only screen and (max-width: 68.75em) { + html { + font-size: 50%; } } + +body { + font-family: 'Open Sans', sans-serif; + font-weight: 400; + line-height: 1.6; + color: var(--color-grey-dark-2); + background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark)); + background-size: cover; + background-repeat: no-repeat; + min-height: 100vh; } + +.container { + max-width: 120rem; + margin: 8rem auto; + background-color: var(--color-grey-light-1); + box-shadow: var(--shadow-dark); + min-height: 50rem; } + @media only screen and (max-width: 75em) { + .container { + margin: 0; + max-width: 100%; + width: 100%; } } + +.header { + font-size: 1.4rem; + height: 7rem; + background-color: #fff; + border-bottom: var(--line); + display: flex; + justify-content: space-between; + align-items: center; } + @media only screen and (max-width: 31.25em) { + .header { + flex-wrap: wrap; + align-content: space-around; + height: 11rem; } } + +.content { + display: flex; } + @media only screen and (max-width: 56.25em) { + .content { + flex-direction: column; } } + +.sidebar { + background-color: var(--color-grey-dark-1); + flex: 0 0 18%; + display: flex; + flex-direction: column; + justify-content: space-between; } + +.hotel-view { + background-color: #fff; + flex: 1; } + +.detail { + font-size: 1.4rem; + display: flex; + padding: 4.5rem; + background-color: var(--color-grey-light-1); + border-bottom: var(--line); } + @media only screen and (max-width: 56.25em) { + .detail { + padding: 3rem; } } + @media only screen and (max-width: 37.5em) { + .detail { + flex-direction: column; } } + +.description { + background-color: #fff; + box-shadow: var(--shadow-light); + padding: 3rem; + flex: 0 0 60%; + margin-right: 4.5rem; } + @media only screen and (max-width: 56.25em) { + .description { + padding: 2rem; + margin-right: 3rem; } } + @media only screen and (max-width: 37.5em) { + .description { + margin-right: 0; + margin-bottom: 3rem; } } + +.user-reviews { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; } + +.logo { + height: 3.25rem; + margin-left: 2rem; } + +.search { + flex: 0 0 40%; + display: flex; + align-items: center; + justify-content: center; } + @media only screen and (max-width: 31.25em) { + .search { + order: 1; + flex: 0 0 100%; + background-color: var(--color-grey-light-2); } } + .search__input { + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: var(--color-grey-light-2); + border: none; + padding: .7rem 2rem; + border-radius: 100px; + width: 90%; + transition: all .2s; + margin-right: -3.25rem; } + .search__input:focus { + outline: none; + width: 100%; + background-color: var(--color-grey-light-3); } + .search__input::-webkit-input-placeholder { + font-weight: 100; + color: var(--color-grey-light-4); } + .search__input:focus + .search__button { + background-color: var(--color-grey-light-3); } + .search__button { + border: none; + background-color: var(--color-grey-light-2); } + .search__button:focus { + outline: none; } + .search__button:active { + transform: translateY(2px); } + .search__icon { + height: 2rem; + width: 2rem; + fill: var(--color-grey-dark-3); } + +.user-nav { + align-self: stretch; + display: flex; + align-items: center; } + .user-nav > * { + padding: 0 2rem; + cursor: pointer; + height: 100%; + display: flex; + align-items: center; } + .user-nav > *:hover { + background-color: var(--color-grey-light-2); } + .user-nav__icon-box { + position: relative; } + .user-nav__icon { + height: 2.25rem; + width: 2.25rem; + fill: var(--color-grey-dark-2); } + .user-nav__notification { + font-size: .8rem; + height: 1.75rem; + width: 1.75rem; + border-radius: 50%; + background-color: var(--color-primary); + color: #fff; + position: absolute; + top: 1.5rem; + right: 1.1rem; + display: flex; + justify-content: center; + align-items: center; } + .user-nav__user-photo { + height: 3.75rem; + border-radius: 50%; + margin-right: 1rem; } + +.side-nav { + font-size: 1.4rem; + list-style: none; + margin-top: 3.5rem; } + @media only screen and (max-width: 56.25em) { + .side-nav { + display: flex; + margin: 0; } } + .side-nav__item { + position: relative; } + .side-nav__item:not(:last-child) { + margin-bottom: .5rem; } + @media only screen and (max-width: 56.25em) { + .side-nav__item:not(:last-child) { + margin: 0; } } + @media only screen and (max-width: 56.25em) { + .side-nav__item { + flex: 1; } } + .side-nav__item::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 3px; + background-color: var(--color-primary); + transform: scaleY(0); + transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s; } + .side-nav__item:hover::before, .side-nav__item--active::before { + transform: scaleY(1); + width: 100%; } + .side-nav__item:active::before { + background-color: var(--color-primary-light); } + .side-nav__link:link, .side-nav__link:visited { + color: var(--color-grey-light-1); + text-decoration: none; + text-transform: uppercase; + display: block; + padding: 1.5rem 3rem; + position: relative; + z-index: 10; + display: flex; + align-items: center; } + @media only screen and (max-width: 56.25em) { + .side-nav__link:link, .side-nav__link:visited { + justify-content: center; + padding: 2rem; } } + @media only screen and (max-width: 37.5em) { + .side-nav__link:link, .side-nav__link:visited { + flex-direction: column; + padding: 1.5rem .5rem; } } + .side-nav__icon { + width: 1.75rem; + height: 1.75rem; + margin-right: 2rem; + fill: currentColor; } + @media only screen and (max-width: 37.5em) { + .side-nav__icon { + margin-right: 0; + margin-bottom: .7rem; + width: 1.5rem; + height: 1.5rem; } } + +.legal { + font-size: 1.2rem; + color: var(--color-grey-light-4); + text-align: center; + padding: 2.5rem; } + @media only screen and (max-width: 56.25em) { + .legal { + display: none; } } + +.gallery { + display: flex; } + .gallery__photo { + width: 100%; + display: block; } + +.overview { + display: flex; + align-items: center; + border-bottom: var(--line); } + .overview__heading { + font-size: 2.25rem; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 1px; + padding: 1.5rem 3rem; } + @media only screen and (max-width: 37.5em) { + .overview__heading { + font-size: 1.8rem; + padding: 1.25rem 2rem; } } + .overview__stars { + margin-right: auto; + display: flex; } + .overview__icon-star, .overview__icon-location { + width: 1.75rem; + height: 1.75rem; + fill: var(--color-primary); } + .overview__location { + font-size: 1.2rem; + display: flex; + vertical-align: center; } + .overview__icon-location { + margin-right: .5rem; } + .overview__rating { + background-color: var(--color-primary); + color: #fff; + margin-left: 3rem; + padding: 0 2.25rem; + align-self: stretch; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } + @media only screen and (max-width: 37.5em) { + .overview__rating { + padding: 0 1.5rem; } } + .overview__rating-average { + font-size: 2.25rem; + font-weight: 300; + margin-bottom: -3px; } + @media only screen and (max-width: 37.5em) { + .overview__rating-average { + font-size: 1.8rem; } } + .overview__rating-count { + font-size: .8rem; + text-transform: uppercase; } + @media only screen and (max-width: 37.5em) { + .overview__rating-count { + font-size: .5rem; } } + +.btn-inline { + border: none; + color: var(--color-primary); + font-size: inherit; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + display: inline-block; + background-color: transparent; + cursor: pointer; + transition: all .2s; } + .btn-inline span { + margin-left: 3px; + transition: margin-left .2s; } + .btn-inline:hover { + color: var(--color-grey-dark-1); } + .btn-inline:hover span { + margin-left: 8px; } + .btn-inline:focus { + outline: none; + animation: pulsate 1s infinite; } + +@keyframes pulsate { + 0% { + transform: scale(1); + box-shadow: none; } + 50% { + transform: scale(1.05); + box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25); } + 100% { + transform: scale(1); + box-shadow: none; } } + +.paragraph:not(:last-of-type) { + margin-bottom: 2rem; } + +.list { + list-style: none; + margin: 3rem 0; + padding: 3rem 0; + border-top: var(--line); + border-bottom: var(--line); + display: flex; + flex-wrap: wrap; } + .list__item { + flex: 0 0 50%; + margin-bottom: .7rem; } + .list__item::before { + content: ""; + display: inline-block; + height: 1rem; + width: 1rem; + margin-right: .7rem; + background-image: url(../img/chevron-thin-right.svg); + background-size: cover; } + @supports (-webkit-mask-image: url()) or (mask-image: url()) { + .list__item::before { + background-color: var(--color-primary); + -webkit-mask-image: url(../img/chevron-thin-right.svg); + -webkit-mask-size: cover; + mask-image: url(../img/chevron-thin-right.svg); + mask-size: cover; + background-image: none; } } + +.recommend { + font-size: 1.3rem; + color: var(--color-grey-dark-3); + display: flex; + align-items: center; } + .recommend__count { + margin-right: auto; } + .recommend__friends { + display: flex; } + .recommend__photo { + box-sizing: content-box; + height: 4rem; + width: 4rem; + border-radius: 50%; + border: 3px solid #fff; } + .recommend__photo:not(:last-child) { + margin-right: -2rem; } + +.review { + background-color: #fff; + box-shadow: var(--shadow-light); + padding: 3rem; + margin-bottom: 3.5rem; + position: relative; + overflow: hidden; } + @media only screen and (max-width: 56.25em) { + .review { + padding: 2rem; + margin-bottom: 3rem; } } + .review__text { + margin-bottom: 2rem; + z-index: 10; + position: relative; } + .review__user { + display: flex; + align-items: center; } + .review__photo { + height: 4.5rem; + width: 4.5rem; + border-radius: 50%; + margin-right: 1.5rem; } + .review__user-box { + margin-right: auto; } + .review__user-name { + font-size: 1.1rem; + font-weight: 600; + text-transform: uppercase; + margin-bottom: .4rem; } + .review__user-date { + font-size: 1rem; + color: var(--color-grey-dark-3); } + .review__rating { + color: var(--color-primary); + font-size: 2.2rem; + font-weight: 300; } + .review::before { + content: "\201C"; + position: absolute; + top: -2.75rem; + left: -1rem; + line-height: 1; + font-size: 20rem; + color: var(--color-grey-light-2); + font-family: sans-serif; + z-index: 1; } + +.cta { + padding: 3.5rem 0; + text-align: center; } + @media only screen and (max-width: 56.25em) { + .cta { + padding: 2.5rem 0; } } + .cta__book-now { + font-size: 2rem; + font-weight: 300; + text-transform: uppercase; + margin-bottom: 2.5rem; } + +.btn { + font-size: 1.5rem; + font-weight: 300; + text-transform: uppercase; + border-radius: 100px; + border: none; + background-image: linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark)); + color: #fff; + position: relative; + overflow: hidden; + cursor: pointer; } + .btn > * { + display: inline-block; + height: 100%; + width: 100%; + transition: all .2s; } + .btn__visible { + padding: 2rem 7.5rem; } + .btn__invisible { + position: absolute; + padding: 2rem 0; + left: 0; + top: -100%; } + .btn:hover { + background-image: linear-gradient(to left, var(--color-primary-light), var(--color-primary-dark)); } + .btn:hover .btn__visible { + transform: translateY(100%); } + .btn:hover .btn__invisible { + top: 0; } + .btn:focus { + outline: none; + animation: pulsate 1s infinite; } diff --git a/Trillo/final/css/style.css b/Trillo/final/css/style.css new file mode 100644 index 0000000..f6267a6 --- /dev/null +++ b/Trillo/final/css/style.css @@ -0,0 +1 @@ +:root{--color-primary:#eb2f64;--color-primary-light:#FF3366;--color-primary-dark:#BA265D;--color-grey-light-1:#faf9f9;--color-grey-light-2:#f4f2f2;--color-grey-light-3:#f0eeee;--color-grey-light-4:#ccc;--color-grey-dark-1:#333;--color-grey-dark-2:#777;--color-grey-dark-3:#999;--shadow-dark:0 2rem 6rem rgba(0,0,0,0.3);--shadow-light:0 2rem 5rem rgba(0,0,0,0.06);--line:1px solid var(--color-grey-light-2)}*{margin:0;padding:0}*,*::before,*::after{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:62.5%}@media only screen and (max-width: 68.75em){html{font-size:50%}}body{font-family:'Open Sans', sans-serif;font-weight:400;line-height:1.6;color:var(--color-grey-dark-2);background-image:-webkit-gradient(linear, left top, right bottom, from(var(--color-primary-light)), to(var(--color-primary-dark)));background-image:linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark));background-size:cover;background-repeat:no-repeat;min-height:100vh}.container{max-width:120rem;margin:8rem auto;background-color:var(--color-grey-light-1);-webkit-box-shadow:var(--shadow-dark);box-shadow:var(--shadow-dark);min-height:50rem}@media only screen and (max-width: 75em){.container{margin:0;max-width:100%;width:100%}}.header{font-size:1.4rem;height:7rem;background-color:#fff;border-bottom:var(--line);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media only screen and (max-width: 31.25em){.header{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:distribute;align-content:space-around;height:11rem}}.content{display:-webkit-box;display:-ms-flexbox;display:flex}@media only screen and (max-width: 56.25em){.content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.sidebar{background-color:var(--color-grey-dark-1);-webkit-box-flex:0;-ms-flex:0 0 18%;flex:0 0 18%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.hotel-view{background-color:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1}.detail{font-size:1.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;padding:4.5rem;background-color:var(--color-grey-light-1);border-bottom:var(--line)}@media only screen and (max-width: 56.25em){.detail{padding:3rem}}@media only screen and (max-width: 37.5em){.detail{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.description{background-color:#fff;-webkit-box-shadow:var(--shadow-light);box-shadow:var(--shadow-light);padding:3rem;-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;margin-right:4.5rem}@media only screen and (max-width: 56.25em){.description{padding:2rem;margin-right:3rem}}@media only screen and (max-width: 37.5em){.description{margin-right:0;margin-bottom:3rem}}.user-reviews{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.logo{height:3.25rem;margin-left:2rem}.search{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media only screen and (max-width: 31.25em){.search{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;background-color:var(--color-grey-light-2)}}.search__input{font-family:inherit;font-size:inherit;color:inherit;background-color:var(--color-grey-light-2);border:none;padding:.7rem 2rem;border-radius:100px;width:90%;-webkit-transition:all .2s;transition:all .2s;margin-right:-3.25rem}.search__input:focus{outline:none;width:100%;background-color:var(--color-grey-light-3)}.search__input::-webkit-input-placeholder{font-weight:100;color:var(--color-grey-light-4)}.search__input:focus+.search__button{background-color:var(--color-grey-light-3)}.search__button{border:none;background-color:var(--color-grey-light-2)}.search__button:focus{outline:none}.search__button:active{-webkit-transform:translateY(2px);transform:translateY(2px)}.search__icon{height:2rem;width:2rem;fill:var(--color-grey-dark-3)}.user-nav{-ms-flex-item-align:stretch;align-self:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.user-nav>*{padding:0 2rem;cursor:pointer;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.user-nav>*:hover{background-color:var(--color-grey-light-2)}.user-nav__icon-box{position:relative}.user-nav__icon{height:2.25rem;width:2.25rem;fill:var(--color-grey-dark-2)}.user-nav__notification{font-size:.8rem;height:1.75rem;width:1.75rem;border-radius:50%;background-color:var(--color-primary);color:#fff;position:absolute;top:1.5rem;right:1.1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.user-nav__user-photo{height:3.75rem;border-radius:50%;margin-right:1rem}.side-nav{font-size:1.4rem;list-style:none;margin-top:3.5rem}@media only screen and (max-width: 56.25em){.side-nav{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0}}.side-nav__item{position:relative}.side-nav__item:not(:last-child){margin-bottom:.5rem}@media only screen and (max-width: 56.25em){.side-nav__item:not(:last-child){margin:0}}@media only screen and (max-width: 56.25em){.side-nav__item{-webkit-box-flex:1;-ms-flex:1;flex:1}}.side-nav__item::before{content:"";position:absolute;top:0;left:0;height:100%;width:3px;background-color:var(--color-primary);-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transition:width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,background-color 0.1s,-webkit-transform 0.2s;transition:width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,background-color 0.1s,-webkit-transform 0.2s;transition:transform 0.2s,width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,background-color 0.1s;transition:transform 0.2s,width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,background-color 0.1s,-webkit-transform 0.2s}.side-nav__item:hover::before,.side-nav__item--active::before{-webkit-transform:scaleY(1);transform:scaleY(1);width:100%}.side-nav__item:active::before{background-color:var(--color-primary-light)}.side-nav__link:link,.side-nav__link:visited{color:var(--color-grey-light-1);text-decoration:none;text-transform:uppercase;display:block;padding:1.5rem 3rem;position:relative;z-index:10;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media only screen and (max-width: 56.25em){.side-nav__link:link,.side-nav__link:visited{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:2rem}}@media only screen and (max-width: 37.5em){.side-nav__link:link,.side-nav__link:visited{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1.5rem .5rem}}.side-nav__icon{width:1.75rem;height:1.75rem;margin-right:2rem;fill:currentColor}@media only screen and (max-width: 37.5em){.side-nav__icon{margin-right:0;margin-bottom:.7rem;width:1.5rem;height:1.5rem}}.legal{font-size:1.2rem;color:var(--color-grey-light-4);text-align:center;padding:2.5rem}@media only screen and (max-width: 56.25em){.legal{display:none}}.gallery{display:-webkit-box;display:-ms-flexbox;display:flex}.gallery__photo{width:100%;display:block}.overview{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:var(--line)}.overview__heading{font-size:2.25rem;font-weight:300;text-transform:uppercase;letter-spacing:1px;padding:1.5rem 3rem}@media only screen and (max-width: 37.5em){.overview__heading{font-size:1.8rem;padding:1.25rem 2rem}}.overview__stars{margin-right:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.overview__icon-star,.overview__icon-location{width:1.75rem;height:1.75rem;fill:var(--color-primary)}.overview__location{font-size:1.2rem;display:-webkit-box;display:-ms-flexbox;display:flex;vertical-align:center}.overview__icon-location{margin-right:.5rem}.overview__rating{background-color:var(--color-primary);color:#fff;margin-left:3rem;padding:0 2.25rem;-ms-flex-item-align:stretch;align-self:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media only screen and (max-width: 37.5em){.overview__rating{padding:0 1.5rem}}.overview__rating-average{font-size:2.25rem;font-weight:300;margin-bottom:-3px}@media only screen and (max-width: 37.5em){.overview__rating-average{font-size:1.8rem}}.overview__rating-count{font-size:.8rem;text-transform:uppercase}@media only screen and (max-width: 37.5em){.overview__rating-count{font-size:.5rem}}.btn-inline{border:none;color:var(--color-primary);font-size:inherit;border-bottom:1px solid currentColor;padding-bottom:2px;display:inline-block;background-color:transparent;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}.btn-inline span{margin-left:3px;-webkit-transition:margin-left .2s;transition:margin-left .2s}.btn-inline:hover{color:var(--color-grey-dark-1)}.btn-inline:hover span{margin-left:8px}.btn-inline:focus{outline:none;-webkit-animation:pulsate 1s infinite;animation:pulsate 1s infinite}@-webkit-keyframes pulsate{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:none;box-shadow:none}50%{-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-box-shadow:0 1rem 4rem rgba(0,0,0,0.25);box-shadow:0 1rem 4rem rgba(0,0,0,0.25)}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:none;box-shadow:none}}@keyframes pulsate{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:none;box-shadow:none}50%{-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-box-shadow:0 1rem 4rem rgba(0,0,0,0.25);box-shadow:0 1rem 4rem rgba(0,0,0,0.25)}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:none;box-shadow:none}}.paragraph:not(:last-of-type){margin-bottom:2rem}.list{list-style:none;margin:3rem 0;padding:3rem 0;border-top:var(--line);border-bottom:var(--line);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.list__item{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;margin-bottom:.7rem}.list__item::before{content:"";display:inline-block;height:1rem;width:1rem;margin-right:.7rem;background-image:url(../img/chevron-thin-right.svg);background-size:cover}@supports (-webkit-mask-image: url()) or (mask-image: url()){.list__item::before{background-color:var(--color-primary);-webkit-mask-image:url(../img/chevron-thin-right.svg);-webkit-mask-size:cover;mask-image:url(../img/chevron-thin-right.svg);mask-size:cover;background-image:none}}.recommend{font-size:1.3rem;color:var(--color-grey-dark-3);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.recommend__count{margin-right:auto}.recommend__friends{display:-webkit-box;display:-ms-flexbox;display:flex}.recommend__photo{-webkit-box-sizing:content-box;box-sizing:content-box;height:4rem;width:4rem;border-radius:50%;border:3px solid #fff}.recommend__photo:not(:last-child){margin-right:-2rem}.review{background-color:#fff;-webkit-box-shadow:var(--shadow-light);box-shadow:var(--shadow-light);padding:3rem;margin-bottom:3.5rem;position:relative;overflow:hidden}@media only screen and (max-width: 56.25em){.review{padding:2rem;margin-bottom:3rem}}.review__text{margin-bottom:2rem;z-index:10;position:relative}.review__user{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.review__photo{height:4.5rem;width:4.5rem;border-radius:50%;margin-right:1.5rem}.review__user-box{margin-right:auto}.review__user-name{font-size:1.1rem;font-weight:600;text-transform:uppercase;margin-bottom:.4rem}.review__user-date{font-size:1rem;color:var(--color-grey-dark-3)}.review__rating{color:var(--color-primary);font-size:2.2rem;font-weight:300}.review::before{content:"\201C";position:absolute;top:-2.75rem;left:-1rem;line-height:1;font-size:20rem;color:var(--color-grey-light-2);font-family:sans-serif;z-index:1}.cta{padding:3.5rem 0;text-align:center}@media only screen and (max-width: 56.25em){.cta{padding:2.5rem 0}}.cta__book-now{font-size:2rem;font-weight:300;text-transform:uppercase;margin-bottom:2.5rem}.btn{font-size:1.5rem;font-weight:300;text-transform:uppercase;border-radius:100px;border:none;background-image:-webkit-gradient(linear, left top, right top, from(var(--color-primary-light)), to(var(--color-primary-dark)));background-image:linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark));color:#fff;position:relative;overflow:hidden;cursor:pointer}.btn>*{display:inline-block;height:100%;width:100%;-webkit-transition:all .2s;transition:all .2s}.btn__visible{padding:2rem 7.5rem}.btn__invisible{position:absolute;padding:2rem 0;left:0;top:-100%}.btn:hover{background-image:-webkit-gradient(linear, right top, left top, from(var(--color-primary-light)), to(var(--color-primary-dark)));background-image:linear-gradient(to left, var(--color-primary-light), var(--color-primary-dark))}.btn:hover .btn__visible{-webkit-transform:translateY(100%);transform:translateY(100%)}.btn:hover .btn__invisible{top:0}.btn:focus{outline:none;-webkit-animation:pulsate 1s infinite;animation:pulsate 1s infinite} diff --git a/Trillo/final/css/style.prefix.css b/Trillo/final/css/style.prefix.css new file mode 100644 index 0000000..d714fb2 --- /dev/null +++ b/Trillo/final/css/style.prefix.css @@ -0,0 +1,667 @@ +:root { + --color-primary: #eb2f64; + --color-primary-light: #FF3366; + --color-primary-dark: #BA265D; + --color-grey-light-1: #faf9f9; + --color-grey-light-2: #f4f2f2; + --color-grey-light-3: #f0eeee; + --color-grey-light-4: #ccc; + --color-grey-dark-1: #333; + --color-grey-dark-2: #777; + --color-grey-dark-3: #999; + --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3); + --shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06); + --line: 1px solid var(--color-grey-light-2); } + +* { + margin: 0; + padding: 0; } + +*, +*::before, +*::after { + -webkit-box-sizing: inherit; + box-sizing: inherit; } + +html { + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-size: 62.5%; } + @media only screen and (max-width: 68.75em) { + html { + font-size: 50%; } } + +body { + font-family: 'Open Sans', sans-serif; + font-weight: 400; + line-height: 1.6; + color: var(--color-grey-dark-2); + background-image: -webkit-gradient(linear, left top, right bottom, from(var(--color-primary-light)), to(var(--color-primary-dark))); + background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark)); + background-size: cover; + background-repeat: no-repeat; + min-height: 100vh; } + +.container { + max-width: 120rem; + margin: 8rem auto; + background-color: var(--color-grey-light-1); + -webkit-box-shadow: var(--shadow-dark); + box-shadow: var(--shadow-dark); + min-height: 50rem; } + @media only screen and (max-width: 75em) { + .container { + margin: 0; + max-width: 100%; + width: 100%; } } + +.header { + font-size: 1.4rem; + height: 7rem; + background-color: #fff; + border-bottom: var(--line); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + @media only screen and (max-width: 31.25em) { + .header { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-line-pack: distribute; + align-content: space-around; + height: 11rem; } } + +.content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + @media only screen and (max-width: 56.25em) { + .content { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } } + +.sidebar { + background-color: var(--color-grey-dark-1); + -webkit-box-flex: 0; + -ms-flex: 0 0 18%; + flex: 0 0 18%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + +.hotel-view { + background-color: #fff; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } + +.detail { + font-size: 1.4rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 4.5rem; + background-color: var(--color-grey-light-1); + border-bottom: var(--line); } + @media only screen and (max-width: 56.25em) { + .detail { + padding: 3rem; } } + @media only screen and (max-width: 37.5em) { + .detail { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } } + +.description { + background-color: #fff; + -webkit-box-shadow: var(--shadow-light); + box-shadow: var(--shadow-light); + padding: 3rem; + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + margin-right: 4.5rem; } + @media only screen and (max-width: 56.25em) { + .description { + padding: 2rem; + margin-right: 3rem; } } + @media only screen and (max-width: 37.5em) { + .description { + margin-right: 0; + margin-bottom: 3rem; } } + +.user-reviews { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + +.logo { + height: 3.25rem; + margin-left: 2rem; } + +.search { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + @media only screen and (max-width: 31.25em) { + .search { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + background-color: var(--color-grey-light-2); } } + .search__input { + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: var(--color-grey-light-2); + border: none; + padding: .7rem 2rem; + border-radius: 100px; + width: 90%; + -webkit-transition: all .2s; + transition: all .2s; + margin-right: -3.25rem; } + .search__input:focus { + outline: none; + width: 100%; + background-color: var(--color-grey-light-3); } + .search__input::-webkit-input-placeholder { + font-weight: 100; + color: var(--color-grey-light-4); } + .search__input:focus + .search__button { + background-color: var(--color-grey-light-3); } + .search__button { + border: none; + background-color: var(--color-grey-light-2); } + .search__button:focus { + outline: none; } + .search__button:active { + -webkit-transform: translateY(2px); + transform: translateY(2px); } + .search__icon { + height: 2rem; + width: 2rem; + fill: var(--color-grey-dark-3); } + +.user-nav { + -ms-flex-item-align: stretch; + align-self: stretch; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .user-nav > * { + padding: 0 2rem; + cursor: pointer; + height: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .user-nav > *:hover { + background-color: var(--color-grey-light-2); } + .user-nav__icon-box { + position: relative; } + .user-nav__icon { + height: 2.25rem; + width: 2.25rem; + fill: var(--color-grey-dark-2); } + .user-nav__notification { + font-size: .8rem; + height: 1.75rem; + width: 1.75rem; + border-radius: 50%; + background-color: var(--color-primary); + color: #fff; + position: absolute; + top: 1.5rem; + right: 1.1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .user-nav__user-photo { + height: 3.75rem; + border-radius: 50%; + margin-right: 1rem; } + +.side-nav { + font-size: 1.4rem; + list-style: none; + margin-top: 3.5rem; } + @media only screen and (max-width: 56.25em) { + .side-nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 0; } } + .side-nav__item { + position: relative; } + .side-nav__item:not(:last-child) { + margin-bottom: .5rem; } + @media only screen and (max-width: 56.25em) { + .side-nav__item:not(:last-child) { + margin: 0; } } + @media only screen and (max-width: 56.25em) { + .side-nav__item { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } } + .side-nav__item::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 3px; + background-color: var(--color-primary); + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s, -webkit-transform 0.2s; + transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s, -webkit-transform 0.2s; + transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s; + transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s, -webkit-transform 0.2s; } + .side-nav__item:hover::before, .side-nav__item--active::before { + -webkit-transform: scaleY(1); + transform: scaleY(1); + width: 100%; } + .side-nav__item:active::before { + background-color: var(--color-primary-light); } + .side-nav__link:link, .side-nav__link:visited { + color: var(--color-grey-light-1); + text-decoration: none; + text-transform: uppercase; + display: block; + padding: 1.5rem 3rem; + position: relative; + z-index: 10; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + @media only screen and (max-width: 56.25em) { + .side-nav__link:link, .side-nav__link:visited { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding: 2rem; } } + @media only screen and (max-width: 37.5em) { + .side-nav__link:link, .side-nav__link:visited { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding: 1.5rem .5rem; } } + .side-nav__icon { + width: 1.75rem; + height: 1.75rem; + margin-right: 2rem; + fill: currentColor; } + @media only screen and (max-width: 37.5em) { + .side-nav__icon { + margin-right: 0; + margin-bottom: .7rem; + width: 1.5rem; + height: 1.5rem; } } + +.legal { + font-size: 1.2rem; + color: var(--color-grey-light-4); + text-align: center; + padding: 2.5rem; } + @media only screen and (max-width: 56.25em) { + .legal { + display: none; } } + +.gallery { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .gallery__photo { + width: 100%; + display: block; } + +.overview { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: var(--line); } + .overview__heading { + font-size: 2.25rem; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 1px; + padding: 1.5rem 3rem; } + @media only screen and (max-width: 37.5em) { + .overview__heading { + font-size: 1.8rem; + padding: 1.25rem 2rem; } } + .overview__stars { + margin-right: auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .overview__icon-star, .overview__icon-location { + width: 1.75rem; + height: 1.75rem; + fill: var(--color-primary); } + .overview__location { + font-size: 1.2rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + vertical-align: center; } + .overview__icon-location { + margin-right: .5rem; } + .overview__rating { + background-color: var(--color-primary); + color: #fff; + margin-left: 3rem; + padding: 0 2.25rem; + -ms-flex-item-align: stretch; + align-self: stretch; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + @media only screen and (max-width: 37.5em) { + .overview__rating { + padding: 0 1.5rem; } } + .overview__rating-average { + font-size: 2.25rem; + font-weight: 300; + margin-bottom: -3px; } + @media only screen and (max-width: 37.5em) { + .overview__rating-average { + font-size: 1.8rem; } } + .overview__rating-count { + font-size: .8rem; + text-transform: uppercase; } + @media only screen and (max-width: 37.5em) { + .overview__rating-count { + font-size: .5rem; } } + +.btn-inline { + border: none; + color: var(--color-primary); + font-size: inherit; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + display: inline-block; + background-color: transparent; + cursor: pointer; + -webkit-transition: all .2s; + transition: all .2s; } + .btn-inline span { + margin-left: 3px; + -webkit-transition: margin-left .2s; + transition: margin-left .2s; } + .btn-inline:hover { + color: var(--color-grey-dark-1); } + .btn-inline:hover span { + margin-left: 8px; } + .btn-inline:focus { + outline: none; + -webkit-animation: pulsate 1s infinite; + animation: pulsate 1s infinite; } + +@-webkit-keyframes pulsate { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + -webkit-box-shadow: none; + box-shadow: none; } + 50% { + -webkit-transform: scale(1.05); + transform: scale(1.05); + -webkit-box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25); + box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + -webkit-box-shadow: none; + box-shadow: none; } } + +@keyframes pulsate { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + -webkit-box-shadow: none; + box-shadow: none; } + 50% { + -webkit-transform: scale(1.05); + transform: scale(1.05); + -webkit-box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25); + box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + -webkit-box-shadow: none; + box-shadow: none; } } + +.paragraph:not(:last-of-type) { + margin-bottom: 2rem; } + +.list { + list-style: none; + margin: 3rem 0; + padding: 3rem 0; + border-top: var(--line); + border-bottom: var(--line); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + .list__item { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + margin-bottom: .7rem; } + .list__item::before { + content: ""; + display: inline-block; + height: 1rem; + width: 1rem; + margin-right: .7rem; + background-image: url(../img/chevron-thin-right.svg); + background-size: cover; } + @supports ((-webkit-mask-image: url()) or (mask-image: url())) { + .list__item::before { + background-color: var(--color-primary); + -webkit-mask-image: url(../img/chevron-thin-right.svg); + -webkit-mask-size: cover; + mask-image: url(../img/chevron-thin-right.svg); + mask-size: cover; + background-image: none; } } + +.recommend { + font-size: 1.3rem; + color: var(--color-grey-dark-3); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .recommend__count { + margin-right: auto; } + .recommend__friends { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .recommend__photo { + -webkit-box-sizing: content-box; + box-sizing: content-box; + height: 4rem; + width: 4rem; + border-radius: 50%; + border: 3px solid #fff; } + .recommend__photo:not(:last-child) { + margin-right: -2rem; } + +.review { + background-color: #fff; + -webkit-box-shadow: var(--shadow-light); + box-shadow: var(--shadow-light); + padding: 3rem; + margin-bottom: 3.5rem; + position: relative; + overflow: hidden; } + @media only screen and (max-width: 56.25em) { + .review { + padding: 2rem; + margin-bottom: 3rem; } } + .review__text { + margin-bottom: 2rem; + z-index: 10; + position: relative; } + .review__user { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .review__photo { + height: 4.5rem; + width: 4.5rem; + border-radius: 50%; + margin-right: 1.5rem; } + .review__user-box { + margin-right: auto; } + .review__user-name { + font-size: 1.1rem; + font-weight: 600; + text-transform: uppercase; + margin-bottom: .4rem; } + .review__user-date { + font-size: 1rem; + color: var(--color-grey-dark-3); } + .review__rating { + color: var(--color-primary); + font-size: 2.2rem; + font-weight: 300; } + .review::before { + content: "\201C"; + position: absolute; + top: -2.75rem; + left: -1rem; + line-height: 1; + font-size: 20rem; + color: var(--color-grey-light-2); + font-family: sans-serif; + z-index: 1; } + +.cta { + padding: 3.5rem 0; + text-align: center; } + @media only screen and (max-width: 56.25em) { + .cta { + padding: 2.5rem 0; } } + .cta__book-now { + font-size: 2rem; + font-weight: 300; + text-transform: uppercase; + margin-bottom: 2.5rem; } + +.btn { + font-size: 1.5rem; + font-weight: 300; + text-transform: uppercase; + border-radius: 100px; + border: none; + background-image: -webkit-gradient(linear, left top, right top, from(var(--color-primary-light)), to(var(--color-primary-dark))); + background-image: linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark)); + color: #fff; + position: relative; + overflow: hidden; + cursor: pointer; } + .btn > * { + display: inline-block; + height: 100%; + width: 100%; + -webkit-transition: all .2s; + transition: all .2s; } + .btn__visible { + padding: 2rem 7.5rem; } + .btn__invisible { + position: absolute; + padding: 2rem 0; + left: 0; + top: -100%; } + .btn:hover { + background-image: -webkit-gradient(linear, right top, left top, from(var(--color-primary-light)), to(var(--color-primary-dark))); + background-image: linear-gradient(to left, var(--color-primary-light), var(--color-primary-dark)); } + .btn:hover .btn__visible { + -webkit-transform: translateY(100%); + transform: translateY(100%); } + .btn:hover .btn__invisible { + top: 0; } + .btn:focus { + outline: none; + -webkit-animation: pulsate 1s infinite; + animation: pulsate 1s infinite; } + +/*# sourceMappingURL=data:application/json;base64,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R0FBbUc7RUFDbkcsWUFBWTtFQUNaLG1CQUFtQjtFQUNuQixpQkFBaUI7RUFDakIsZ0JBQWdCLEVBQUU7RUFDbEI7SUFDRSxzQkFBc0I7SUFDdEIsYUFBYTtJQUNiLFlBQVk7SUFDWiw0QkFBb0I7SUFBcEIsb0JBQW9CLEVBQUU7RUFDeEI7SUFDRSxxQkFBcUIsRUFBRTtFQUN6QjtJQUNFLG1CQUFtQjtJQUNuQixnQkFBZ0I7SUFDaEIsUUFBUTtJQUNSLFdBQVcsRUFBRTtFQUNmO0lBQ0UsaUlBQWtHO0lBQWxHLGtHQUFrRyxFQUFFO0VBQ3RHO0lBQ0Usb0NBQTRCO1lBQTVCLDRCQUE0QixFQUFFO0VBQ2hDO0lBQ0UsT0FBTyxFQUFFO0VBQ1g7SUFDRSxjQUFjO0lBQ2QsdUNBQStCO1lBQS9CLCtCQUErQixFQUFFIiwiZmlsZSI6InN0eWxlLnByZWZpeC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gIC0tY29sb3ItcHJpbWFyeTogI2ViMmY2NDtcbiAgLS1jb2xvci1wcmltYXJ5LWxpZ2h0OiAjRkYzMzY2O1xuICAtLWNvbG9yLXByaW1hcnktZGFyazogI0JBMjY1RDtcbiAgLS1jb2xvci1ncmV5LWxpZ2h0LTE6ICNmYWY5Zjk7XG4gIC0tY29sb3ItZ3JleS1saWdodC0yOiAjZjRmMmYyO1xuICAtLWNvbG9yLWdyZXktbGlnaHQtMzogI2YwZWVlZTtcbiAgLS1jb2xvci1ncmV5LWxpZ2h0LTQ6ICNjY2M7XG4gIC0tY29sb3ItZ3JleS1kYXJrLTE6ICMzMzM7XG4gIC0tY29sb3ItZ3JleS1kYXJrLTI6ICM3Nzc7XG4gIC0tY29sb3ItZ3JleS1kYXJrLTM6ICM5OTk7XG4gIC0tc2hhZG93LWRhcms6IDAgMnJlbSA2cmVtIHJnYmEoMCwgMCwgMCwgMC4zKTtcbiAgLS1zaGFkb3ctbGlnaHQ6IDAgMnJlbSA1cmVtIHJnYmEoMCwgMCwgMCwgMC4wNik7XG4gIC0tbGluZTogMXB4IHNvbGlkIHZhcigtLWNvbG9yLWdyZXktbGlnaHQtMik7IH1cblxuKiB7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDsgfVxuXG4qLFxuKjo6YmVmb3JlLFxuKjo6YWZ0ZXIge1xuICBib3gtc2l6aW5nOiBpbmhlcml0OyB9XG5cbmh0bWwge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBmb250LXNpemU6IDYyLjUlOyB9XG4gIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNjguNzVlbSkge1xuICAgIGh0bWwge1xuICAgICAgZm9udC1zaXplOiA1MCU7IH0gfVxuXG5ib2R5IHtcbiAgZm9udC1mYW1pbHk6ICdPcGVuIFNhbnMnLCBzYW5zLXNlcmlmO1xuICBmb250LXdlaWdodDogNDAwO1xuICBsaW5lLWhlaWdodDogMS42O1xuICBjb2xvcjogdmFyKC0tY29sb3ItZ3JleS1kYXJrLTIpO1xuICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQgYm90dG9tLCB2YXIoLS1jb2xvci1wcmltYXJ5LWxpZ2h0KSwgdmFyKC0tY29sb3ItcHJpbWFyeS1kYXJrKSk7XG4gIGJhY2tncm91bmQtc2l6ZTogY292ZXI7XG4gIGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7XG4gIG1pbi1oZWlnaHQ6IDEwMHZoOyB9XG5cbi5jb250YWluZXIge1xuICBtYXgtd2lkdGg6IDEyMHJlbTtcbiAgbWFyZ2luOiA4cmVtIGF1dG87XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLWdyZXktbGlnaHQtMSk7XG4gIGJveC1zaGFkb3c6IHZhcigtLXNoYWRvdy1kYXJrKTtcbiAgbWluLWhlaWdodDogNTByZW07IH1cbiAgQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NWVtKSB7XG4gICAgLmNvbnRhaW5lciB7XG4gICAgICBtYXJnaW46IDA7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICB3aWR0aDogMTAwJTsgfSB9XG5cbi5oZWFkZXIge1xuICBmb250LXNpemU6IDEuNHJlbTtcbiAgaGVpZ2h0OiA3cmVtO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuICBib3JkZXItYm90dG9tOiB2YXIoLS1saW5lKTtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyOyB9XG4gIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogMzEuMjVlbSkge1xuICAgIC5oZWFkZXIge1xuICAgICAgZmxleC13cmFwOiB3cmFwO1xuICAgICAgYWxpZ24tY29udGVudDogc3BhY2UtYXJvdW5kO1xuICAgICAgaGVpZ2h0OiAxMXJlbTsgfSB9XG5cbi5jb250ZW50IHtcbiAgZGlzcGxheTogZmxleDsgfVxuICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU2LjI1ZW0pIHtcbiAgICAuY29udGVudCB7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOyB9IH1cblxuLnNpZGViYXIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1ncmV5LWRhcmstMSk7XG4gIGZsZXg6IDAgMCAxOCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsgfVxuXG4uaG90ZWwtdmlldyB7XG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gIGZsZXg6IDE7IH1cblxuLmRldGFpbCB7XG4gIGZvbnQtc2l6ZTogMS40cmVtO1xuICBkaXNwbGF5OiBmbGV4O1xuICBwYWRkaW5nOiA0LjVyZW07XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLWdyZXktbGlnaHQtMSk7XG4gIGJvcmRlci1ib3R0b206IHZhcigtLWxpbmUpOyB9XG4gIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNTYuMjVlbSkge1xuICAgIC5kZXRhaWwge1xuICAgICAgcGFkZGluZzogM3JlbTsgfSB9XG4gIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogMzcuNWVtKSB7XG4gICAgLmRldGFpbCB7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOyB9IH1cblxuLmRlc2NyaXB0aW9uIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcbiAgYm94LXNoYWRvdzogdmFyKC0tc2hhZG93LWxpZ2h0KTtcbiAgcGFkZGluZzogM3JlbTtcbiAgZmxleDogMCAwIDYwJTtcbiAgbWFyZ2luLXJpZ2h0OiA0LjVyZW07IH1cbiAgQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1Ni4yNWVtKSB7XG4gICAgLmRlc2NyaXB0aW9uIHtcbiAgICAgIHBhZGRpbmc6IDJyZW07XG4gICAgICBtYXJnaW4tcmlnaHQ6IDNyZW07IH0gfVxuICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDM3LjVlbSkge1xuICAgIC5kZXNjcmlwdGlvbiB7XG4gICAgICBtYXJnaW4tcmlnaHQ6IDA7XG4gICAgICBtYXJnaW4tYm90dG9tOiAzcmVtOyB9IH1cblxuLnVzZXItcmV2aWV3cyB7XG4gIGZsZXg6IDE7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7IH1cblxuLmxvZ28ge1xuICBoZWlnaHQ6IDMuMjVyZW07XG4gIG1hcmdpbi1sZWZ0OiAycmVtOyB9XG5cbi5zZWFyY2gge1xuICBmbGV4OiAwIDAgNDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsgfVxuICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDMxLjI1ZW0pIHtcbiAgICAuc2VhcmNoIHtcbiAgICAgIG9yZGVyOiAxO1xuICAgICAgZmxleDogMCAwIDEwMCU7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1ncmV5LWxpZ2h0LTIpOyB9IH1cbiAgLnNlYXJjaF9faW5wdXQge1xuICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgIGZvbnQtc2l6ZTogaW5oZXJpdDtcbiAgICBjb2xvcjogaW5oZXJpdDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1ncmV5LWxpZ2h0LTIpO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBwYWRkaW5nOiAuN3JlbSAycmVtO1xuICAgIGJvcmRlci1yYWRpdXM6IDEwMHB4O1xuICAgIHdpZHRoOiA5MCU7XG4gICAgdHJhbnNpdGlvbjogYWxsIC4ycztcbiAgICBtYXJnaW4tcmlnaHQ6IC0zLjI1cmVtOyB9XG4gICAgLnNlYXJjaF9faW5wdXQ6Zm9jdXMge1xuICAgICAgb3V0bGluZTogbm9uZTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItZ3JleS1saWdodC0zKTsgfVxuICAgIC5zZWFyY2hfX2lucHV0Ojotd2Via2l0LWlucHV0LXBsYWNlaG9sZGVyIHtcbiAgICAgIGZvbnQtd2VpZ2h0OiAxMDA7XG4gICAgICBjb2xvcjogdmFyKC0tY29sb3ItZ3JleS1saWdodC00KTsgfVxuICAuc2VhcmNoX19pbnB1dDpmb2N1cyArIC5zZWFyY2hfX2J1dHRvbiB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItZ3JleS1saWdodC0zKTsgfVxuICAuc2VhcmNoX19idXR0b24ge1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1ncmV5LWxpZ2h0LTIpOyB9XG4gICAgLnNlYXJjaF9fYnV0dG9uOmZvY3VzIHtcbiAgICAgIG91dGxpbmU6IG5vbmU7IH1cbiAgICAuc2VhcmNoX19idXR0b246YWN0aXZlIHtcbiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgycHgpOyB9XG4gIC5zZWFyY2hfX2ljb24ge1xuICAgIGhlaWdodDogMnJlbTtcbiAgICB3aWR0aDogMnJlbTtcbiAgICBmaWxsOiB2YXIoLS1jb2xvci1ncmV5LWRhcmstMyk7IH1cblxuLnVzZXItbmF2IHtcbiAgYWxpZ24tc2VsZjogc3RyZXRjaDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjsgfVxuICAudXNlci1uYXYgPiAqIHtcbiAgICBwYWRkaW5nOiAwIDJyZW07XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7IH1cbiAgLnVzZXItbmF2ID4gKjpob3ZlciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItZ3JleS1saWdodC0yKTsgfVxuICAudXNlci1uYXZfX2ljb24tYm94IHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7IH1cbiAgLnVzZXItbmF2X19pY29uIHtcbiAgICBoZWlnaHQ6IDIuMjVyZW07XG4gICAgd2lkdGg6IDIuMjVyZW07XG4gICAgZmlsbDogdmFyKC0tY29sb3ItZ3JleS1kYXJrLTIpOyB9XG4gIC51c2VyLW5hdl9fbm90aWZpY2F0aW9uIHtcbiAgICBmb250LXNpemU6IC44cmVtO1xuICAgIGhlaWdodDogMS43NXJlbTtcbiAgICB3aWR0aDogMS43NXJlbTtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItcHJpbWFyeSk7XG4gICAgY29sb3I6ICNmZmY7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMS41cmVtO1xuICAgIHJpZ2h0OiAxLjFyZW07XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyOyB9XG4gIC51c2VyLW5hdl9fdXNlci1waG90byB7XG4gICAgaGVpZ2h0OiAzLjc1cmVtO1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBtYXJnaW4tcmlnaHQ6IDFyZW07IH1cblxuLnNpZGUtbmF2IHtcbiAgZm9udC1zaXplOiAxLjRyZW07XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIG1hcmdpbi10b3A6IDMuNXJlbTsgfVxuICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU2LjI1ZW0pIHtcbiAgICAuc2lkZS1uYXYge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIG1hcmdpbjogMDsgfSB9XG4gIC5zaWRlLW5hdl9faXRlbSB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlOyB9XG4gICAgLnNpZGUtbmF2X19pdGVtOm5vdCg6bGFzdC1jaGlsZCkge1xuICAgICAgbWFyZ2luLWJvdHRvbTogLjVyZW07IH1cbiAgICAgIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNTYuMjVlbSkge1xuICAgICAgICAuc2lkZS1uYXZfX2l0ZW06bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgICAgICAgbWFyZ2luOiAwOyB9IH1cbiAgICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU2LjI1ZW0pIHtcbiAgICAgIC5zaWRlLW5hdl9faXRlbSB7XG4gICAgICAgIGZsZXg6IDE7IH0gfVxuICAuc2lkZS1uYXZfX2l0ZW06OmJlZm9yZSB7XG4gICAgY29udGVudDogXCJcIjtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHdpZHRoOiAzcHg7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItcHJpbWFyeSk7XG4gICAgdHJhbnNmb3JtOiBzY2FsZVkoMCk7XG4gICAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuMnMsIHdpZHRoIDAuNHMgY3ViaWMtYmV6aWVyKDEsIDAsIDAsIDEpIDAuMnMsIGJhY2tncm91bmQtY29sb3IgMC4xczsgfVxuICAuc2lkZS1uYXZfX2l0ZW06aG92ZXI6OmJlZm9yZSwgLnNpZGUtbmF2X19pdGVtLS1hY3RpdmU6OmJlZm9yZSB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZVkoMSk7XG4gICAgd2lkdGg6IDEwMCU7IH1cbiAgLnNpZGUtbmF2X19pdGVtOmFjdGl2ZTo6YmVmb3JlIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1wcmltYXJ5LWxpZ2h0KTsgfVxuICAuc2lkZS1uYXZfX2xpbms6bGluaywgLnNpZGUtbmF2X19saW5rOnZpc2l0ZWQge1xuICAgIGNvbG9yOiB2YXIoLS1jb2xvci1ncmV5LWxpZ2h0LTEpO1xuICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHBhZGRpbmc6IDEuNXJlbSAzcmVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB6LWluZGV4OiAxMDtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7IH1cbiAgICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU2LjI1ZW0pIHtcbiAgICAgIC5zaWRlLW5hdl9fbGluazpsaW5rLCAuc2lkZS1uYXZfX2xpbms6dmlzaXRlZCB7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgICBwYWRkaW5nOiAycmVtOyB9IH1cbiAgICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDM3LjVlbSkge1xuICAgICAgLnNpZGUtbmF2X19saW5rOmxpbmssIC5zaWRlLW5hdl9fbGluazp2aXNpdGVkIHtcbiAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgICAgcGFkZGluZzogMS41cmVtIC41cmVtOyB9IH1cbiAgLnNpZGUtbmF2X19pY29uIHtcbiAgICB3aWR0aDogMS43NXJlbTtcbiAgICBoZWlnaHQ6IDEuNzVyZW07XG4gICAgbWFyZ2luLXJpZ2h0OiAycmVtO1xuICAgIGZpbGw6IGN1cnJlbnRDb2xvcjsgfVxuICAgIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogMzcuNWVtKSB7XG4gICAgICAuc2lkZS1uYXZfX2ljb24ge1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IDA7XG4gICAgICAgIG1hcmdpbi1ib3R0b206IC43cmVtO1xuICAgICAgICB3aWR0aDogMS41cmVtO1xuICAgICAgICBoZWlnaHQ6IDEuNXJlbTsgfSB9XG5cbi5sZWdhbCB7XG4gIGZvbnQtc2l6ZTogMS4ycmVtO1xuICBjb2xvcjogdmFyKC0tY29sb3ItZ3JleS1saWdodC00KTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBwYWRkaW5nOiAyLjVyZW07IH1cbiAgQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1Ni4yNWVtKSB7XG4gICAgLmxlZ2FsIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7IH0gfVxuXG4uZ2FsbGVyeSB7XG4gIGRpc3BsYXk6IGZsZXg7IH1cbiAgLmdhbGxlcnlfX3Bob3RvIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBkaXNwbGF5OiBibG9jazsgfVxuXG4ub3ZlcnZpZXcge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBib3JkZXItYm90dG9tOiB2YXIoLS1saW5lKTsgfVxuICAub3ZlcnZpZXdfX2hlYWRpbmcge1xuICAgIGZvbnQtc2l6ZTogMi4yNXJlbTtcbiAgICBmb250LXdlaWdodDogMzAwO1xuICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgbGV0dGVyLXNwYWNpbmc6IDFweDtcbiAgICBwYWRkaW5nOiAxLjVyZW0gM3JlbTsgfVxuICAgIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogMzcuNWVtKSB7XG4gICAgICAub3ZlcnZpZXdfX2hlYWRpbmcge1xuICAgICAgICBmb250LXNpemU6IDEuOHJlbTtcbiAgICAgICAgcGFkZGluZzogMS4yNXJlbSAycmVtOyB9IH1cbiAgLm92ZXJ2aWV3X19zdGFycyB7XG4gICAgbWFyZ2luLXJpZ2h0OiBhdXRvO1xuICAgIGRpc3BsYXk6IGZsZXg7IH1cbiAgLm92ZXJ2aWV3X19pY29uLXN0YXIsIC5vdmVydmlld19faWNvbi1sb2NhdGlvbiB7XG4gICAgd2lkdGg6IDEuNzVyZW07XG4gICAgaGVpZ2h0OiAxLjc1cmVtO1xuICAgIGZpbGw6IHZhcigtLWNvbG9yLXByaW1hcnkpOyB9XG4gIC5vdmVydmlld19fbG9jYXRpb24ge1xuICAgIGZvbnQtc2l6ZTogMS4ycmVtO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgdmVydGljYWwtYWxpZ246IGNlbnRlcjsgfVxuICAub3ZlcnZpZXdfX2ljb24tbG9jYXRpb24ge1xuICAgIG1hcmdpbi1yaWdodDogLjVyZW07IH1cbiAgLm92ZXJ2aWV3X19yYXRpbmcge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLXByaW1hcnkpO1xuICAgIGNvbG9yOiAjZmZmO1xuICAgIG1hcmdpbi1sZWZ0OiAzcmVtO1xuICAgIHBhZGRpbmc6IDAgMi4yNXJlbTtcbiAgICBhbGlnbi1zZWxmOiBzdHJldGNoO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOyB9XG4gICAgQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAzNy41ZW0pIHtcbiAgICAgIC5vdmVydmlld19fcmF0aW5nIHtcbiAgICAgICAgcGFkZGluZzogMCAxLjVyZW07IH0gfVxuICAub3ZlcnZpZXdfX3JhdGluZy1hdmVyYWdlIHtcbiAgICBmb250LXNpemU6IDIuMjVyZW07XG4gICAgZm9udC13ZWlnaHQ6IDMwMDtcbiAgICBtYXJnaW4tYm90dG9tOiAtM3B4OyB9XG4gICAgQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAzNy41ZW0pIHtcbiAgICAgIC5vdmVydmlld19fcmF0aW5nLWF2ZXJhZ2Uge1xuICAgICAgICBmb250LXNpemU6IDEuOHJlbTsgfSB9XG4gIC5vdmVydmlld19fcmF0aW5nLWNvdW50IHtcbiAgICBmb250LXNpemU6IC44cmVtO1xuICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7IH1cbiAgICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDM3LjVlbSkge1xuICAgICAgLm92ZXJ2aWV3X19yYXRpbmctY291bnQge1xuICAgICAgICBmb250LXNpemU6IC41cmVtOyB9IH1cblxuLmJ0bi1pbmxpbmUge1xuICBib3JkZXI6IG5vbmU7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1wcmltYXJ5KTtcbiAgZm9udC1zaXplOiBpbmhlcml0O1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgY3VycmVudENvbG9yO1xuICBwYWRkaW5nLWJvdHRvbTogMnB4O1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHRyYW5zaXRpb246IGFsbCAuMnM7IH1cbiAgLmJ0bi1pbmxpbmUgc3BhbiB7XG4gICAgbWFyZ2luLWxlZnQ6IDNweDtcbiAgICB0cmFuc2l0aW9uOiBtYXJnaW4tbGVmdCAuMnM7IH1cbiAgLmJ0bi1pbmxpbmU6aG92ZXIge1xuICAgIGNvbG9yOiB2YXIoLS1jb2xvci1ncmV5LWRhcmstMSk7IH1cbiAgICAuYnRuLWlubGluZTpob3ZlciBzcGFuIHtcbiAgICAgIG1hcmdpbi1sZWZ0OiA4cHg7IH1cbiAgLmJ0bi1pbmxpbmU6Zm9jdXMge1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgYW5pbWF0aW9uOiBwdWxzYXRlIDFzIGluZmluaXRlOyB9XG5cbkBrZXlmcmFtZXMgcHVsc2F0ZSB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIGJveC1zaGFkb3c6IG5vbmU7IH1cbiAgNTAlIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDEuMDUpO1xuICAgIGJveC1zaGFkb3c6IDAgMXJlbSA0cmVtIHJnYmEoMCwgMCwgMCwgMC4yNSk7IH1cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICBib3gtc2hhZG93OiBub25lOyB9IH1cblxuLnBhcmFncmFwaDpub3QoOmxhc3Qtb2YtdHlwZSkge1xuICBtYXJnaW4tYm90dG9tOiAycmVtOyB9XG5cbi5saXN0IHtcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgbWFyZ2luOiAzcmVtIDA7XG4gIHBhZGRpbmc6IDNyZW0gMDtcbiAgYm9yZGVyLXRvcDogdmFyKC0tbGluZSk7XG4gIGJvcmRlci1ib3R0b206IHZhcigtLWxpbmUpO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LXdyYXA6IHdyYXA7IH1cbiAgLmxpc3RfX2l0ZW0ge1xuICAgIGZsZXg6IDAgMCA1MCU7XG4gICAgbWFyZ2luLWJvdHRvbTogLjdyZW07IH1cbiAgLmxpc3RfX2l0ZW06OmJlZm9yZSB7XG4gICAgY29udGVudDogXCJcIjtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgaGVpZ2h0OiAxcmVtO1xuICAgIHdpZHRoOiAxcmVtO1xuICAgIG1hcmdpbi1yaWdodDogLjdyZW07XG4gICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKC4uL2ltZy9jaGV2cm9uLXRoaW4tcmlnaHQuc3ZnKTtcbiAgICBiYWNrZ3JvdW5kLXNpemU6IGNvdmVyOyB9XG4gICAgQHN1cHBvcnRzICgtd2Via2l0LW1hc2staW1hZ2U6IHVybCgpKSBvciAobWFzay1pbWFnZTogdXJsKCkpIHtcbiAgICAgIC5saXN0X19pdGVtOjpiZWZvcmUge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1wcmltYXJ5KTtcbiAgICAgICAgLXdlYmtpdC1tYXNrLWltYWdlOiB1cmwoLi4vaW1nL2NoZXZyb24tdGhpbi1yaWdodC5zdmcpO1xuICAgICAgICAtd2Via2l0LW1hc2stc2l6ZTogY292ZXI7XG4gICAgICAgIG1hc2staW1hZ2U6IHVybCguLi9pbWcvY2hldnJvbi10aGluLXJpZ2h0LnN2Zyk7XG4gICAgICAgIG1hc2stc2l6ZTogY292ZXI7XG4gICAgICAgIGJhY2tncm91bmQtaW1hZ2U6IG5vbmU7IH0gfVxuXG4ucmVjb21tZW5kIHtcbiAgZm9udC1zaXplOiAxLjNyZW07XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1ncmV5LWRhcmstMyk7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7IH1cbiAgLnJlY29tbWVuZF9fY291bnQge1xuICAgIG1hcmdpbi1yaWdodDogYXV0bzsgfVxuICAucmVjb21tZW5kX19mcmllbmRzIHtcbiAgICBkaXNwbGF5OiBmbGV4OyB9XG4gIC5yZWNvbW1lbmRfX3Bob3RvIHtcbiAgICBib3gtc2l6aW5nOiBjb250ZW50LWJveDtcbiAgICBoZWlnaHQ6IDRyZW07XG4gICAgd2lkdGg6IDRyZW07XG4gICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgIGJvcmRlcjogM3B4IHNvbGlkICNmZmY7IH1cbiAgICAucmVjb21tZW5kX19waG90bzpub3QoOmxhc3QtY2hpbGQpIHtcbiAgICAgIG1hcmdpbi1yaWdodDogLTJyZW07IH1cblxuLnJldmlldyB7XG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gIGJveC1zaGFkb3c6IHZhcigtLXNoYWRvdy1saWdodCk7XG4gIHBhZGRpbmc6IDNyZW07XG4gIG1hcmdpbi1ib3R0b206IDMuNXJlbTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBvdmVyZmxvdzogaGlkZGVuOyB9XG4gIEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNTYuMjVlbSkge1xuICAgIC5yZXZpZXcge1xuICAgICAgcGFkZGluZzogMnJlbTtcbiAgICAgIG1hcmdpbi1ib3R0b206IDNyZW07IH0gfVxuICAucmV2aWV3X190ZXh0IHtcbiAgICBtYXJnaW4tYm90dG9tOiAycmVtO1xuICAgIHotaW5kZXg6IDEwO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsgfVxuICAucmV2aWV3X191c2VyIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7IH1cbiAgLnJldmlld19fcGhvdG8ge1xuICAgIGhlaWdodDogNC41cmVtO1xuICAgIHdpZHRoOiA0LjVyZW07XG4gICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgIG1hcmdpbi1yaWdodDogMS41cmVtOyB9XG4gIC5yZXZpZXdfX3VzZXItYm94IHtcbiAgICBtYXJnaW4tcmlnaHQ6IGF1dG87IH1cbiAgLnJldmlld19fdXNlci1uYW1lIHtcbiAgICBmb250LXNpemU6IDEuMXJlbTtcbiAgICBmb250LXdlaWdodDogNjAwO1xuICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgbWFyZ2luLWJvdHRvbTogLjRyZW07IH1cbiAgLnJldmlld19fdXNlci1kYXRlIHtcbiAgICBmb250LXNpemU6IDFyZW07XG4gICAgY29sb3I6IHZhcigtLWNvbG9yLWdyZXktZGFyay0zKTsgfVxuICAucmV2aWV3X19yYXRpbmcge1xuICAgIGNvbG9yOiB2YXIoLS1jb2xvci1wcmltYXJ5KTtcbiAgICBmb250LXNpemU6IDIuMnJlbTtcbiAgICBmb250LXdlaWdodDogMzAwOyB9XG4gIC5yZXZpZXc6OmJlZm9yZSB7XG4gICAgY29udGVudDogXCJcXDIwMUNcIjtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAtMi43NXJlbTtcbiAgICBsZWZ0OiAtMXJlbTtcbiAgICBsaW5lLWhlaWdodDogMTtcbiAgICBmb250LXNpemU6IDIwcmVtO1xuICAgIGNvbG9yOiB2YXIoLS1jb2xvci1ncmV5LWxpZ2h0LTIpO1xuICAgIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO1xuICAgIHotaW5kZXg6IDE7IH1cblxuLmN0YSB7XG4gIHBhZGRpbmc6IDMuNXJlbSAwO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7IH1cbiAgQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1Ni4yNWVtKSB7XG4gICAgLmN0YSB7XG4gICAgICBwYWRkaW5nOiAyLjVyZW0gMDsgfSB9XG4gIC5jdGFfX2Jvb2stbm93IHtcbiAgICBmb250LXNpemU6IDJyZW07XG4gICAgZm9udC13ZWlnaHQ6IDMwMDtcbiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgIG1hcmdpbi1ib3R0b206IDIuNXJlbTsgfVxuXG4uYnRuIHtcbiAgZm9udC1zaXplOiAxLjVyZW07XG4gIGZvbnQtd2VpZ2h0OiAzMDA7XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gIGJvcmRlci1yYWRpdXM6IDEwMHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgdmFyKC0tY29sb3ItcHJpbWFyeS1saWdodCksIHZhcigtLWNvbG9yLXByaW1hcnktZGFyaykpO1xuICBjb2xvcjogI2ZmZjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjdXJzb3I6IHBvaW50ZXI7IH1cbiAgLmJ0biA+ICoge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgdHJhbnNpdGlvbjogYWxsIC4yczsgfVxuICAuYnRuX192aXNpYmxlIHtcbiAgICBwYWRkaW5nOiAycmVtIDcuNXJlbTsgfVxuICAuYnRuX19pbnZpc2libGUge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBwYWRkaW5nOiAycmVtIDA7XG4gICAgbGVmdDogMDtcbiAgICB0b3A6IC0xMDAlOyB9XG4gIC5idG46aG92ZXIge1xuICAgIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCh0byBsZWZ0LCB2YXIoLS1jb2xvci1wcmltYXJ5LWxpZ2h0KSwgdmFyKC0tY29sb3ItcHJpbWFyeS1kYXJrKSk7IH1cbiAgLmJ0bjpob3ZlciAuYnRuX192aXNpYmxlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwJSk7IH1cbiAgLmJ0bjpob3ZlciAuYnRuX19pbnZpc2libGUge1xuICAgIHRvcDogMDsgfVxuICAuYnRuOmZvY3VzIHtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGFuaW1hdGlvbjogcHVsc2F0ZSAxcyBpbmZpbml0ZTsgfVxuIl19 */ \ No newline at end of file diff --git a/Trillo/final/img/SVG/aircraft-take-off.svg b/Trillo/final/img/SVG/aircraft-take-off.svg new file mode 100755 index 0000000..5bace1a --- /dev/null +++ b/Trillo/final/img/SVG/aircraft-take-off.svg @@ -0,0 +1,5 @@ + + +aircraft-take-off + + diff --git a/Trillo/final/img/SVG/bookmark.svg b/Trillo/final/img/SVG/bookmark.svg new file mode 100755 index 0000000..e567cdf --- /dev/null +++ b/Trillo/final/img/SVG/bookmark.svg @@ -0,0 +1,5 @@ + + +bookmark + + diff --git a/Trillo/final/img/SVG/chat.svg b/Trillo/final/img/SVG/chat.svg new file mode 100755 index 0000000..cbc3719 --- /dev/null +++ b/Trillo/final/img/SVG/chat.svg @@ -0,0 +1,5 @@ + + +chat + + diff --git a/Trillo/final/img/SVG/chevron-thin-right.svg b/Trillo/final/img/SVG/chevron-thin-right.svg new file mode 100755 index 0000000..c7184e9 --- /dev/null +++ b/Trillo/final/img/SVG/chevron-thin-right.svg @@ -0,0 +1,5 @@ + + +chevron-thin-right + + diff --git a/Trillo/final/img/SVG/home.svg b/Trillo/final/img/SVG/home.svg new file mode 100755 index 0000000..368791d --- /dev/null +++ b/Trillo/final/img/SVG/home.svg @@ -0,0 +1,5 @@ + + +home + + diff --git a/Trillo/final/img/SVG/key.svg b/Trillo/final/img/SVG/key.svg new file mode 100755 index 0000000..63285a8 --- /dev/null +++ b/Trillo/final/img/SVG/key.svg @@ -0,0 +1,5 @@ + + +key + + diff --git a/Trillo/final/img/SVG/location-pin.svg b/Trillo/final/img/SVG/location-pin.svg new file mode 100755 index 0000000..778b2c1 --- /dev/null +++ b/Trillo/final/img/SVG/location-pin.svg @@ -0,0 +1,5 @@ + + +location-pin + + diff --git a/Trillo/final/img/SVG/magnifying-glass.svg b/Trillo/final/img/SVG/magnifying-glass.svg new file mode 100755 index 0000000..1c253da --- /dev/null +++ b/Trillo/final/img/SVG/magnifying-glass.svg @@ -0,0 +1,5 @@ + + +magnifying-glass + + diff --git a/Trillo/final/img/SVG/map.svg b/Trillo/final/img/SVG/map.svg new file mode 100755 index 0000000..d1fdcc7 --- /dev/null +++ b/Trillo/final/img/SVG/map.svg @@ -0,0 +1,5 @@ + + +map + + diff --git a/Trillo/final/img/SVG/star.svg b/Trillo/final/img/SVG/star.svg new file mode 100755 index 0000000..3f20c2a --- /dev/null +++ b/Trillo/final/img/SVG/star.svg @@ -0,0 +1,5 @@ + + +star + + diff --git a/Trillo/final/img/chevron-thin-right.svg b/Trillo/final/img/chevron-thin-right.svg new file mode 100755 index 0000000..20f9fa1 --- /dev/null +++ b/Trillo/final/img/chevron-thin-right.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Trillo/final/img/favicon.png b/Trillo/final/img/favicon.png new file mode 100644 index 0000000..df64b0d Binary files /dev/null and b/Trillo/final/img/favicon.png differ diff --git a/Trillo/final/img/hotel-1.jpg b/Trillo/final/img/hotel-1.jpg new file mode 100644 index 0000000..f35c65c Binary files /dev/null and b/Trillo/final/img/hotel-1.jpg differ diff --git a/Trillo/final/img/hotel-2.jpg b/Trillo/final/img/hotel-2.jpg new file mode 100644 index 0000000..f064720 Binary files /dev/null and b/Trillo/final/img/hotel-2.jpg differ diff --git a/Trillo/final/img/hotel-3.jpg b/Trillo/final/img/hotel-3.jpg new file mode 100644 index 0000000..3b1bcf3 Binary files /dev/null and b/Trillo/final/img/hotel-3.jpg differ diff --git a/Trillo/final/img/logo.png b/Trillo/final/img/logo.png new file mode 100644 index 0000000..029ac70 Binary files /dev/null and b/Trillo/final/img/logo.png differ diff --git a/Trillo/final/img/sprite.svg b/Trillo/final/img/sprite.svg new file mode 100755 index 0000000..f42d66e --- /dev/null +++ b/Trillo/final/img/sprite.svg @@ -0,0 +1,44 @@ + + + +bookmark + + + +chevron-thin-right + + + +aircraft-take-off + + + +chat + + + +home + + + +key + + + +location-pin + + + +magnifying-glass + + + +map + + + +star + + + + diff --git a/Trillo/final/img/text.txt b/Trillo/final/img/text.txt new file mode 100644 index 0000000..9a38ea4 --- /dev/null +++ b/Trillo/final/img/text.txt @@ -0,0 +1,17 @@ +DESCRIPTION TEXT + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi dignissimos debitis ratione sapiente saepe. Accusantium cumque, quas, ut corporis incidunt deserunt quae architecto voluptate. + +Accusantium cumque, quas, ut corporis incidunt deserunt quae architecto voluptate delectus, inventore iure aliquid aliquam. + + + +REVIEW 1 + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi, totam, itaque officia ex. + + + +REVIEW 2 + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi. \ No newline at end of file diff --git a/Trillo/final/img/user-1.jpg b/Trillo/final/img/user-1.jpg new file mode 100644 index 0000000..4fc0e10 Binary files /dev/null and b/Trillo/final/img/user-1.jpg differ diff --git a/Trillo/final/img/user-2.jpg b/Trillo/final/img/user-2.jpg new file mode 100644 index 0000000..160fc64 Binary files /dev/null and b/Trillo/final/img/user-2.jpg differ diff --git a/Trillo/final/img/user-3.jpg b/Trillo/final/img/user-3.jpg new file mode 100644 index 0000000..3e1540b Binary files /dev/null and b/Trillo/final/img/user-3.jpg differ diff --git a/Trillo/final/img/user-4.jpg b/Trillo/final/img/user-4.jpg new file mode 100644 index 0000000..abddef0 Binary files /dev/null and b/Trillo/final/img/user-4.jpg differ diff --git a/Trillo/final/img/user-5.jpg b/Trillo/final/img/user-5.jpg new file mode 100644 index 0000000..0a970ef Binary files /dev/null and b/Trillo/final/img/user-5.jpg differ diff --git a/Trillo/final/img/user-6.jpg b/Trillo/final/img/user-6.jpg new file mode 100644 index 0000000..3391304 Binary files /dev/null and b/Trillo/final/img/user-6.jpg differ diff --git a/Trillo/final/img/user.jpg b/Trillo/final/img/user.jpg new file mode 100644 index 0000000..21e6b83 Binary files /dev/null and b/Trillo/final/img/user.jpg differ diff --git a/Trillo/final/index.html b/Trillo/final/index.html new file mode 100644 index 0000000..9ae2b27 --- /dev/null +++ b/Trillo/final/index.html @@ -0,0 +1,221 @@ + + + + + + + + + + + trillo — Your all-in-one booking app + + +
+
+ + +
+ + +
+ + +
+ + +
+ + + + +
+
+
+ Photo of hotel 1 +
+
+ Photo of hotel 2 +
+
+ Photo of hotel 3 +
+
+ +
+

+ Hotel Las Palmas +

+ +
+ + + + + + + + + + + + + + + +
+ +
+ + + + +
+ +
+
8.6
+
429 votes
+
+
+ +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi dignissimos debitis ratione sapiente saepe. Accusantium cumque, quas, ut corporis incidunt deserunt quae architecto voluptate. +

+

+ Accusantium cumque, quas, ut corporis incidunt deserunt quae architecto voluptate delectus, inventore iure aliquid aliquam. +

+
    +
  • Close to the beach
    • +
  • Breakfast included
    • +
  • Free airport shuttle
    • +
  • Free wifi in all rooms
    • +
  • Air conditioning and heating
    • +
  • Pets allowed
    • +
  • We speak all languages
    • +
  • Perfect for families
    • +
+
+

+ Lucy and 3 other friends recommend this hotel. +

+
+ Friend 1 + Friend 2 + Friend 3 + Friend 4 +
+
+
+ +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi, totam, itaque officia ex. +
+
+ User 1 +
+

Nick Smith

+

Feb 23rd, 2017

+
+
7.8
+
+
+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi. +
+
+ User 1 +
+

Mary Thomas

+

Sept 13th, 2017

+
+
9.3
+
+
+ + +
+ +
+

+ Good news! We have 4 free rooms for your selected dates! +

+ +
+ +
+ + +
+
+
+ + diff --git a/Trillo/final/package.json b/Trillo/final/package.json new file mode 100644 index 0000000..3912dd4 --- /dev/null +++ b/Trillo/final/package.json @@ -0,0 +1,25 @@ +{ + "name": "Trillo", + "version": "1.0.0", + "description": "trillo app", + "main": "index.js", + "scripts": { + "watch:sass": "node-sass sass/main.scss css/style.css -w", + "devserver": "live-server", + "start": "npm-run-all --parallel devserver watch:sass", + + "compile:sass": "node-sass sass/main.scss css/style.comp.css", + "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css", + "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed", + "build:css": "npm-run-all compile:sass prefix:css compress:css" + }, + "author": "Jonas", + "license": "ISC", + "devDependencies": { + "autoprefixer": "^7.1.4", + "concat": "^1.0.3", + "node-sass": "^4.5.3", + "npm-run-all": "^4.1.1", + "postcss-cli": "^4.1.1" + } +} diff --git a/Trillo/final/sass/_base.scss b/Trillo/final/sass/_base.scss new file mode 100644 index 0000000..a4def92 --- /dev/null +++ b/Trillo/final/sass/_base.scss @@ -0,0 +1,57 @@ +:root { + --color-primary: #eb2f64; + --color-primary-light: #FF3366; + --color-primary-dark: #BA265D; + + --color-grey-light-1: #faf9f9; + --color-grey-light-2: #f4f2f2; + --color-grey-light-3: #f0eeee; + --color-grey-light-4: #ccc; + + --color-grey-dark-1: #333; + --color-grey-dark-2: #777; + --color-grey-dark-3: #999; + + --shadow-dark: 0 2rem 6rem rgba(0,0,0,.3); + --shadow-light: 0 2rem 5rem rgba(0,0,0,.06); + + --line: 1px solid var(--color-grey-light-2); +} + +$bp-largest: 75em; // 1200px +$bp-large: 68.75em; // 1100px +$bp-medium: 56.25em; // 900px +$bp-small: 37.5em; // 600px +$bp-smallest: 31.25em; // 500px + +* { + margin: 0; + padding: 0; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + box-sizing: border-box; + font-size: 62.5%; // 1rem = 10px, 10px/16px = 62.5% + + @media only screen and (max-width: $bp-large) { + font-size: 50%; + } +} + +body { + font-family: 'Open Sans', sans-serif; + font-weight: 400; + line-height: 1.6; + color: var(--color-grey-dark-2); + background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark)); + background-size: cover; + background-repeat: no-repeat; + + min-height: 100vh; +} \ No newline at end of file diff --git a/Trillo/final/sass/_components.scss b/Trillo/final/sass/_components.scss new file mode 100644 index 0000000..72aed03 --- /dev/null +++ b/Trillo/final/sass/_components.scss @@ -0,0 +1,594 @@ +//////////////////////////////////////// +// LOGO +.logo { + height: 3.25rem; + margin-left: 2rem; +} + + +//////////////////////////////////////// +// SEARCH +.search { + flex: 0 0 40%; + + display: flex; + align-items: center; + justify-content: center; + + @media only screen and (max-width: $bp-smallest) { + order: 1; + flex: 0 0 100%; + background-color: var(--color-grey-light-2); + } + + &__input { + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: var(--color-grey-light-2); + border: none; + padding: .7rem 2rem; + border-radius: 100px; + width: 90%; + transition: all .2s; + margin-right: -3.25rem; + + &:focus { + outline: none; + width: 100%; + background-color: var(--color-grey-light-3); + } + + &::-webkit-input-placeholder { + font-weight: 100; + color: var(--color-grey-light-4); + } + } + + &__input:focus + &__button { + background-color: var(--color-grey-light-3); + } + + &__button { + border: none; + background-color: var(--color-grey-light-2); + + &:focus { + outline: none; + } + + &:active { + transform: translateY(2px); + } + } + + &__icon { + height: 2rem; + width: 2rem; + fill: var(--color-grey-dark-3); + } +} + + +//////////////////////////////////////// +// USER NAVIGATION +.user-nav { + align-self: stretch; + + display: flex; + align-items: center; + + & > * { + padding: 0 2rem; + cursor: pointer; + height: 100%; + display: flex; + align-items: center; + } + + & > *:hover { + background-color: var(--color-grey-light-2); + } + + &__icon-box { + position: relative; + } + + &__icon { + height: 2.25rem; + width: 2.25rem; + fill: var(--color-grey-dark-2); + } + + &__notification { + font-size: .8rem; + height: 1.75rem; + width: 1.75rem; + border-radius: 50%; + background-color: var(--color-primary); + color: #fff; + position: absolute; + top: 1.5rem; + right: 1.1rem; + + display: flex; + justify-content: center; + align-items: center; + } + + &__user-photo { + height: 3.75rem; + border-radius: 50%; + margin-right: 1rem; + } + +} + + +//////////////////////////////////////// +// SIDE NAVIGATION +.side-nav { + font-size: 1.4rem; + list-style: none; + margin-top: 3.5rem; + + @media only screen and (max-width: $bp-medium) { + display: flex; + margin: 0; + } + + &__item { + position: relative; + + &:not(:last-child) { + margin-bottom: .5rem; + + @media only screen and (max-width: $bp-medium) { + margin: 0; + } + } + + @media only screen and (max-width: $bp-medium) { + flex: 1; + } + } + + &__item::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 3px; + background-color: var(--color-primary); + transform: scaleY(0); + transition: transform .2s, + width .4s cubic-bezier(1,0,0,1) .2s, + background-color .1s; + } + + &__item:hover::before, + &__item--active::before { + transform: scaleY(1); + width: 100%; + } + + &__item:active::before { + background-color: var(--color-primary-light); + } + + &__link:link, + &__link:visited { + color: var(--color-grey-light-1); + text-decoration: none; + text-transform: uppercase; + display: block; + padding: 1.5rem 3rem; + position: relative; + z-index: 10; + + display: flex; + align-items: center; + + @media only screen and (max-width: $bp-medium) { + justify-content: center; + padding: 2rem; + } + + @media only screen and (max-width: $bp-small) { + flex-direction: column; + padding: 1.5rem .5rem; + } + } + + &__icon { + width: 1.75rem; + height: 1.75rem; + margin-right: 2rem; + fill: currentColor; + + @media only screen and (max-width: $bp-small) { + margin-right: 0; + margin-bottom: .7rem; + width: 1.5rem; + height: 1.5rem; + } + } +} + + +//////////////////////////////////////// +// LEGAL TEXT +.legal { + font-size: 1.2rem; + color: var(--color-grey-light-4); + text-align: center; + padding: 2.5rem; + + @media only screen and (max-width: $bp-medium) { + display: none; + } +} + + +//////////////////////////////////////// +// GALLERY +.gallery { + display: flex; + + &__photo { + width: 100%; + display: block; + } +} + + +//////////////////////////////////////// +// HOTEL OVERVIEW +.overview { + display: flex; + align-items: center; + border-bottom: var(--line); + + &__heading { + font-size: 2.25rem; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 1px; + padding: 1.5rem 3rem; + + @media only screen and (max-width: $bp-small) { + font-size: 1.8rem; + padding: 1.25rem 2rem; + } + } + + &__stars { + margin-right: auto; + display: flex; + } + + &__icon-star, + &__icon-location { + width: 1.75rem; + height: 1.75rem; + fill: var(--color-primary); + } + + &__location { + font-size: 1.2rem; + display: flex; + vertical-align: center; + } + + &__icon-location { + margin-right: .5rem; + } + + &__rating { + background-color: var(--color-primary); + color: #fff; + margin-left: 3rem; + padding: 0 2.25rem; + align-self: stretch; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + @media only screen and (max-width: $bp-small) { + padding: 0 1.5rem; + } + } + + &__rating-average { + font-size: 2.25rem; + font-weight: 300; + margin-bottom: -3px; + + @media only screen and (max-width: $bp-small) { + font-size: 1.8rem; + } + } + + &__rating-count { + font-size: .8rem; + text-transform: uppercase; + + @media only screen and (max-width: $bp-small) { + font-size: .5rem; + } + } +} + + + +//////////////////////////////////////// +// BUTTON INLINE +.btn-inline { + border: none; + color: var(--color-primary); + font-size: inherit; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + display: inline-block; + background-color: transparent; + cursor: pointer; + transition: all .2s; + + & span { + margin-left: 3px; + transition: margin-left .2s; + } + + &:hover { + color: var(--color-grey-dark-1); + + span { + margin-left: 8px; + } + } + + &:focus { + outline: none; + animation: pulsate 1s infinite; + } +} + +@keyframes pulsate { + 0% { + transform: scale(1); + box-shadow: none; + } + + 50% { + transform: scale(1.05); + box-shadow: 0 1rem 4rem rgba(0,0,0,.25); + } + + 100% { + transform: scale(1); + box-shadow: none; + } +} + +//////////////////////////////////////// +// PARAGRAPH +.paragraph:not(:last-of-type) { + margin-bottom: 2rem; +} + + + +//////////////////////////////////////// +// LIST +.list { + list-style: none; + margin: 3rem 0; + padding: 3rem 0; + border-top: var(--line); + border-bottom: var(--line); + + display: flex; + flex-wrap: wrap; + + &__item { + flex: 0 0 50%; + margin-bottom: .7rem; + } + + &__item::before { + content: ""; + display: inline-block; + height: 1rem; + width: 1rem; + margin-right: .7rem; + + // Older browsers + background-image: url(../img/chevron-thin-right.svg); + background-size: cover; + + //Newer browsers - masks + @supports (-webkit-mask-image: url()) or (mask-image: url()) { + background-color: var(--color-primary); + -webkit-mask-image: url(../img/chevron-thin-right.svg); + -webkit-mask-size: cover; + mask-image: url(../img/chevron-thin-right.svg); + mask-size: cover; + background-image: none; + } + + } +} + + + +//////////////////////////////////////// +// RECOMMEND +.recommend { + font-size: 1.3rem; + color: var(--color-grey-dark-3); + + display: flex; + align-items: center; + + &__count { + margin-right: auto; + } + + &__friends { + display: flex; + } + + &__photo { + box-sizing: content-box; + height: 4rem; + width: 4rem; + border-radius: 50%; + border: 3px solid #fff; + + &:not(:last-child) { + margin-right: -2rem; + } + } +} + + +//////////////////////////////////////// +// REVIEWS +.review { + background-color: #fff; + box-shadow: var(--shadow-light); + padding: 3rem; + margin-bottom: 3.5rem; + position: relative; + overflow: hidden; + + @media only screen and (max-width: $bp-medium) { + padding: 2rem; + margin-bottom: 3rem; + } + + &__text { + margin-bottom: 2rem; + z-index: 10; + position: relative; + } + + &__user { + display: flex; + align-items: center; + } + + &__photo { + height: 4.5rem; + width: 4.5rem; + border-radius: 50%; + margin-right: 1.5rem; + } + + &__user-box { + margin-right: auto; + } + + &__user-name { + font-size: 1.1rem; + font-weight: 600; + text-transform: uppercase; + margin-bottom: .4rem; + } + + &__user-date { + font-size: 1rem; + color: var(--color-grey-dark-3); + } + + &__rating { + color: var(--color-primary); + font-size: 2.2rem; + font-weight: 300; + } + + &::before { + content: "\201C"; + position: absolute; + top: -2.75rem; + left: -1rem; + line-height: 1; + font-size: 20rem; + color: var(--color-grey-light-2); + font-family: sans-serif; + z-index: 1; + } +} + + +//////////////////////////////////////// +// CALL TO ACTION +.cta { + padding: 3.5rem 0; + text-align: center; + + @media only screen and (max-width: $bp-medium) { + padding: 2.5rem 0; + } + + &__book-now { + font-size: 2rem; + font-weight: 300; + text-transform: uppercase; + margin-bottom: 2.5rem; + } +} + + +//////////////////////////////////////// +// CALL TO ACTION +.btn { + font-size: 1.5rem; + font-weight: 300; + text-transform: uppercase; + border-radius: 100px; + border: none; + background-image: linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark)); + color: #fff; + position: relative; + overflow: hidden; + cursor: pointer; + + & > * { + display: inline-block; + height: 100%; + width: 100%; + transition: all .2s; + } + + &__visible { + padding: 2rem 7.5rem; + } + + &__invisible { + position: absolute; + padding: 2rem 0; + left: 0; + top: -100%; + } + + &:hover { + background-image: linear-gradient(to left, var(--color-primary-light), var(--color-primary-dark)); + } + + &:hover &__visible { + transform: translateY(100%); + } + + &:hover &__invisible { + top: 0; + } + + &:focus { + outline: none; + animation: pulsate 1s infinite; + } +} \ No newline at end of file diff --git a/Trillo/final/sass/_layout.scss b/Trillo/final/sass/_layout.scss new file mode 100644 index 0000000..d6ff4d3 --- /dev/null +++ b/Trillo/final/sass/_layout.scss @@ -0,0 +1,97 @@ +.container { + max-width: 120rem; + margin: 8rem auto; + background-color: var(--color-grey-light-1); + box-shadow: var(--shadow-dark); + + min-height: 50rem; + + @media only screen and (max-width: $bp-largest) { + margin: 0; + max-width: 100%; + width: 100%; + } +} + +.header { + font-size: 1.4rem; + height: 7rem; + background-color: #fff; + border-bottom: var(--line); + + display: flex; + justify-content: space-between; + align-items: center; + + @media only screen and (max-width: $bp-smallest) { + flex-wrap: wrap; + align-content: space-around; + height: 11rem; + } +} + +.content { + display: flex; + + @media only screen and (max-width: $bp-medium) { + flex-direction: column; + } +} + +.sidebar { + background-color: var(--color-grey-dark-1); + + flex: 0 0 18%; + + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.hotel-view { + background-color: #fff; + + flex: 1; +} + +.detail { + font-size: 1.4rem; + display: flex; + padding: 4.5rem; + background-color: var(--color-grey-light-1); + border-bottom: var(--line); + + @media only screen and (max-width: $bp-medium) { + padding: 3rem; + } + + @media only screen and (max-width: $bp-small) { + flex-direction: column; + } +} + +.description { + background-color: #fff; + box-shadow: var(--shadow-light); + padding: 3rem; + flex: 0 0 60%; + margin-right: 4.5rem; + + @media only screen and (max-width: $bp-medium) { + padding: 2rem; + margin-right: 3rem; + } + + @media only screen and (max-width: $bp-small) { + margin-right: 0; + margin-bottom: 3rem; + } +} + +.user-reviews { + flex: 1; + + display: flex; + flex-direction: column; + align-items: center; +} \ No newline at end of file diff --git a/Trillo/final/sass/main.scss b/Trillo/final/sass/main.scss new file mode 100644 index 0000000..15e0ec3 --- /dev/null +++ b/Trillo/final/sass/main.scss @@ -0,0 +1,3 @@ +@import "base"; +@import "layout"; +@import "components"; \ No newline at end of file diff --git a/Trillo/starter/css/style.css b/Trillo/starter/css/style.css new file mode 100644 index 0000000..e69de29 diff --git a/Trillo/starter/img/chevron-thin-right.svg b/Trillo/starter/img/chevron-thin-right.svg new file mode 100755 index 0000000..20f9fa1 --- /dev/null +++ b/Trillo/starter/img/chevron-thin-right.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Trillo/starter/img/favicon.png b/Trillo/starter/img/favicon.png new file mode 100644 index 0000000..df64b0d Binary files /dev/null and b/Trillo/starter/img/favicon.png differ diff --git a/Trillo/starter/img/hotel-1.jpg b/Trillo/starter/img/hotel-1.jpg new file mode 100644 index 0000000..f35c65c Binary files /dev/null and b/Trillo/starter/img/hotel-1.jpg differ diff --git a/Trillo/starter/img/hotel-2.jpg b/Trillo/starter/img/hotel-2.jpg new file mode 100644 index 0000000..f064720 Binary files /dev/null and b/Trillo/starter/img/hotel-2.jpg differ diff --git a/Trillo/starter/img/hotel-3.jpg b/Trillo/starter/img/hotel-3.jpg new file mode 100644 index 0000000..3b1bcf3 Binary files /dev/null and b/Trillo/starter/img/hotel-3.jpg differ diff --git a/Trillo/starter/img/logo.png b/Trillo/starter/img/logo.png new file mode 100644 index 0000000..029ac70 Binary files /dev/null and b/Trillo/starter/img/logo.png differ diff --git a/Trillo/starter/img/sprite.svg b/Trillo/starter/img/sprite.svg new file mode 100755 index 0000000..d1e1f42 --- /dev/null +++ b/Trillo/starter/img/sprite.svg @@ -0,0 +1,120 @@ + + + +bookmark + + + +chevron-down + + + +chevron-left + + + +chevron-right + + + +chevron-thin-down + + + +chevron-thin-left + + + +chevron-thin-right + + + +chevron-thin-up + + + +chevron-up + + + +cloud + + + +aircraft-take-off + + + +bell + + + +calendar + + + +camera + + + +chat + + + +cog + + + +home + + + +key + + + +light-up + + + +location-pin + + + +magnifying-glass + + + +mail + + + +map + + + +squared-cross + + + +star-outlined + + + +star + + + +user + + + +facebook + + + +instagram + + + + diff --git a/Trillo/starter/img/text.txt b/Trillo/starter/img/text.txt new file mode 100644 index 0000000..9a38ea4 --- /dev/null +++ b/Trillo/starter/img/text.txt @@ -0,0 +1,17 @@ +DESCRIPTION TEXT + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi dignissimos debitis ratione sapiente saepe. Accusantium cumque, quas, ut corporis incidunt deserunt quae architecto voluptate. + +Accusantium cumque, quas, ut corporis incidunt deserunt quae architecto voluptate delectus, inventore iure aliquid aliquam. + + + +REVIEW 1 + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi, totam, itaque officia ex. + + + +REVIEW 2 + +Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi. \ No newline at end of file diff --git a/Trillo/starter/img/user-1.jpg b/Trillo/starter/img/user-1.jpg new file mode 100644 index 0000000..4fc0e10 Binary files /dev/null and b/Trillo/starter/img/user-1.jpg differ diff --git a/Trillo/starter/img/user-2.jpg b/Trillo/starter/img/user-2.jpg new file mode 100644 index 0000000..160fc64 Binary files /dev/null and b/Trillo/starter/img/user-2.jpg differ diff --git a/Trillo/starter/img/user-3.jpg b/Trillo/starter/img/user-3.jpg new file mode 100644 index 0000000..3e1540b Binary files /dev/null and b/Trillo/starter/img/user-3.jpg differ diff --git a/Trillo/starter/img/user-4.jpg b/Trillo/starter/img/user-4.jpg new file mode 100644 index 0000000..abddef0 Binary files /dev/null and b/Trillo/starter/img/user-4.jpg differ diff --git a/Trillo/starter/img/user-5.jpg b/Trillo/starter/img/user-5.jpg new file mode 100644 index 0000000..0a970ef Binary files /dev/null and b/Trillo/starter/img/user-5.jpg differ diff --git a/Trillo/starter/img/user-6.jpg b/Trillo/starter/img/user-6.jpg new file mode 100644 index 0000000..3391304 Binary files /dev/null and b/Trillo/starter/img/user-6.jpg differ diff --git a/Trillo/starter/img/user.jpg b/Trillo/starter/img/user.jpg new file mode 100644 index 0000000..21e6b83 Binary files /dev/null and b/Trillo/starter/img/user.jpg differ diff --git a/Trillo/starter/index.html b/Trillo/starter/index.html new file mode 100644 index 0000000..69f8322 --- /dev/null +++ b/Trillo/starter/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + + trillo — Your all-in-one booking app + + + + + \ No newline at end of file diff --git a/Trillo/starter/package.json b/Trillo/starter/package.json new file mode 100644 index 0000000..f02cb65 --- /dev/null +++ b/Trillo/starter/package.json @@ -0,0 +1,26 @@ +{ + "name": "natours", + "version": "1.0.0", + "description": "Landing page for natours", + "main": "index.js", + "scripts": { + "watch:sass": "node-sass sass/main.scss css/style.css -w", + "devserver": "live-server", + "start": "npm-run-all --parallel devserver watch:sass", + + "compile:sass": "node-sass sass/main.scss css/style.comp.css", + "concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css", + "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css", + "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed", + "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css" + }, + "author": "Jonas", + "license": "ISC", + "devDependencies": { + "autoprefixer": "^7.1.4", + "concat": "^1.0.3", + "node-sass": "^4.5.3", + "npm-run-all": "^4.1.1", + "postcss-cli": "^4.1.1" + } +} diff --git a/Trillo/starter/sass/main.scss b/Trillo/starter/sass/main.scss new file mode 100644 index 0000000..3c036e0 --- /dev/null +++ b/Trillo/starter/sass/main.scss @@ -0,0 +1,17 @@ +/* +COLORS + +Primary: #eb2f64 +Primary light: #FF3366 +Primary dark: #BA265D + +Grey light 1: #faf9f9 +Grey light 2: #f4f2f2 +Grey light 3: #f0eeee +Grey light 4: #ccc + +Grey dark 1: #333 +Grey dark 2: #777 +Grey dark 3: #999 + +*/ \ No newline at end of file diff --git a/npm-fixes.md b/npm-fixes.md new file mode 100644 index 0000000..d8cfa7b --- /dev/null +++ b/npm-fixes.md @@ -0,0 +1,54 @@ +# Possible fixes for common problems with NPM packages + +## Q1: My Sass isn't compiling at all or the `-w` flag is not working + +### Solution 1 + +This may be because you're using a different `node-sass` version than the one I use in the videos. Please uninstall `node-sass` with: + +`npm uninstall node-sass --save-dev` + +Then install version `4.5.3` with; + +`npm install node-sass@4.5.3 --save-dev`. + +### Solution 2 + +This is more of a workaround if Solution 1 doesn't work. You can install a package called `nodemon` to run node.js code directly. Install it with: + +`npm install nodemon --save-dev` + +Then in the `package.json` file, add the following tasks: + +``` +"compile:sass": "node-sass sass/main.scss css/style.comp.css" +"watch:sass": "nodemon -e scss -x \"npm run compile:sass\"" +``` + +### Solution 3 + +If you're using VSCode, the defualt autosave setting is that it saves your file each time you stroke a key. This made me run into some errors in the videos. The fix is to change the autosave setting to `onFocusChange`. You can do so by copying the following instruction to the settings (panel on the right side): + +`"files.autoSave": "onFocusChange"` + +## Q2: Autoprefixer isn't working on Windows + +On Windows you will have to escape the `"` in the autoprefixer task, just like this: + +`"prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" css/style.concat.css -o css/style.prefix.css"` + +## Q3: General problems + +If your NPM packages don't work at all, please make sure you have at least node `v6.x.x` installed on your computer. You can check your version with `node -v`. + +You can also try setting all your NPM packages to the same versions used in the videos. It works like described in **Q1** of this document (`node-sass` example). These are the versions I used in the videos: + +``` +"autoprefixer": "^7.1.4", +"concat": "^1.0.3", +"node-sass": "^4.5.3", +"npm-run-all": "^4.1.1", +"postcss-cli": "^4.1.1" +``` + +**I will keep this document updated if more issues arise.** \ No newline at end of file diff --git a/slides-students-C04.pdf b/slides-students-C04.pdf new file mode 100644 index 0000000..5be9823 Binary files /dev/null and b/slides-students-C04.pdf differ diff --git a/vscode-setup.md b/vscode-setup.md new file mode 100644 index 0000000..afa01e7 --- /dev/null +++ b/vscode-setup.md @@ -0,0 +1,52 @@ +# VSCode setup used in the course + +### Theme + +I use the `Oceanic Next` theme with the dimmed bg option. [Link →](https://marketplace.visualstudio.com/items?itemName=naumovs.theme-oceanicnext) + +### Extensions used in course videos + +For each of the extensions, read the overview page in order to learn how to use it. + +`Auto Close Tag` to automatically close HTML tags. [Link →](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) + +`Auto Rename Tag` to automatically change matching HTML tags. [Link →](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) + +`Color Highlight` to, as the name says, highlight colors in CSS. [Link →](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) + +`Paste and Indent` to automatically indent pasted code. [Link →](https://marketplace.visualstudio.com/items?itemName=Rubymaniac.vscode-paste-and-indent) + +`Path Intellisense` to autocomplete filenames. [Link →](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) + +`Prettier` to automatically format code. [Link →](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + +### Other extensions I use (will keep it updated) + +`Project Manager` to easily switch between projects. One of the most useful extensions. [Link →](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) + +### Settings + +If you want your editor to work and look exactly the same way as mine does in the course videos, you can copy these settings to your own settings file. Just go to settings in VSCode, and on the right side, you can paste this code. + +``` +{ + "workbench.colorTheme": "Oceanic Next (dimmed bg)", + "files.autoSave": "onFocusChange", + "editor.minimap.enabled": true, + "workbench.statusBar.visible": true, + "workbench.activityBar.visible": true, + "editor.formatOnSave": false, + + "workbench.colorCustomizations": { + "statusBar.background": "#333333", + "statusBar.noFolderBackground": "#333333", + "statusBar.debuggingBackground": "#263238" + }, + "editor.fontSize": 16, + + "css.validate": false, + "scss.validate": false, + "less.validate": false, + "editor.wordWrap": "on" +} +``` \ No newline at end of file