first 2 lectures
This commit is contained in:
dqnid committed
1 parent
2cf84f4efd
commit
98a7c96117
289 files changed
+14886
No files matched your search
@@ -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; }
|
||||
@@ -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{backgrLine truncated
|
||||
@@ -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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 truncated
|
||||
Executable
+5
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>aircraft-take-off</title>
|
||||
<path d="M19.87 6.453c0.119 0.257 0.127 1.29-4.884 3.642l-4.913 2.306c-1.71 0.803-4.191 1.859-5.285 2.151-0.766 0.204-1.497-0.316-1.497-0.316s-2.206-1.975-2.792-2.419c-0.585-0.444-0.535-0.67 0.215-0.91 0.467-0.149 3.13 0.493 4.265 0.78 1.339-0.8 2.562-1.486 3.141-1.798-1.396-1.033-4.008-2.962-4.841-3.55-0.799-0.565 0.010-0.768 0.010-0.768 0.368-0.099 1.162-0.228 1.562-0.144 2.721 0.569 7.263 2.071 7.611 2.186 0.832-0.436 2.128-1.092 2.922-1.465 2.075-0.974 4.327-0.037 4.486 0.305z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 666 B |
Executable
+5
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>bookmark</title>
|
||||
<path d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 253 B |
Executable
+5
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>chat</title>
|
||||
<path d="M5.8 12.2v-6.2h-3.8c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h1v3l3-3h5c1.1 0 2-0.9 2-2v-1.82c-0.064 0.014-0.132 0.021-0.2 0.021l-7-0.001zM18 1h-9c-1.1 0-2 0.9-2 2v8h7l3 3v-3h1c1.1 0 2-0.899 2-2v-6c0-1.1-0.9-2-2-2z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 384 B |
Executable
+5
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-right</title>
|
||||
<path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 395 B |
Executable
+5
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>home</title>
|
||||
<path d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 426 B |
Executable
+5
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>key</title>
|
||||
<path d="M17.691 4.725c-0.503-2.977-3.22-4.967-6.069-4.441s-5.256 2.816-4.753 5.795c0.107 0.641 0.408 1.644 0.763 2.365l-5.175 7.723c-0.191 0.285-0.299 0.799-0.242 1.141l0.333 1.971c0.058 0.342 0.372 0.572 0.7 0.514l1.516-0.281c0.328-0.059 0.744-0.348 0.924-0.639l2.047-3.311 0.018-0.022 1.386-0.256 2.39-3.879c0.785 0.139 1.912 0.092 2.578-0.031 2.848-0.526 4.087-3.67 3.584-6.649zM15.166 6.252c-0.784 1.17-1.584 0.346-2.703-0.475-1.119-0.818-2.135-1.322-1.352-2.492s2.326-1.455 3.447-0.635c1.12 0.819 1.391 2.432 0.608 3.602z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 694 B |
Executable
+5
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>location-pin</title>
|
||||
<path d="M10 2.009c-2.762 0-5 2.229-5 4.99 0 4.774 5 11 5 11s5-6.227 5-11c0-2.76-2.238-4.99-5-4.99zM10 9.76c-1.492 0-2.7-1.209-2.7-2.7s1.208-2.7 2.7-2.7c1.49 0 2.699 1.209 2.699 2.7s-1.209 2.7-2.699 2.7z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 379 B |
Executable
+5
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>magnifying-glass</title>
|
||||
<path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 587 B |
Executable
+5
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>map</title>
|
||||
<path d="M19.447 3.718l-6-3c-0.281-0.141-0.613-0.141-0.895 0l-5.63 2.815-5.606-1.869c-0.306-0.102-0.64-0.051-0.901 0.138s-0.415 0.49-0.415 0.811v13.001c0 0.379 0.214 0.725 0.553 0.894l6 3c0.141 0.070 0.294 0.106 0.447 0.106s0.307-0.035 0.447-0.106l5.63-2.814 5.606 1.869c0.305 0.1 0.64 0.049 0.901-0.139s0.415-0.49 0.415-0.81v-13.002c0.001-0.379-0.213-0.725-0.552-0.894zM8 5.231l4-2v11.763l-4 2v-11.763zM2 4l4 1.333v11.661l-4-2v-10.994zM18 16.227l-4-1.334v-11.662l4 2v10.996z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 642 B |
Executable
+5
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>star</title>
|
||||
<path d="M10 1.3l2.388 6.722h6.412l-5.232 3.948 1.871 6.928-5.439-4.154-5.438 4.154 1.87-6.928-5.233-3.948h6.412l2.389-6.722z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 293 B |
Executable
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
|
||||
<path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 542 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Executable
+44
@@ -0,0 +1,44 @@
|
||||
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<symbol id="icon-bookmark" viewBox="0 0 20 20">
|
||||
<title>bookmark</title>
|
||||
<path d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-right" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-right</title>
|
||||
<path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-aircraft-take-off" viewBox="0 0 20 20">
|
||||
<title>aircraft-take-off</title>
|
||||
<path d="M19.87 6.453c0.119 0.257 0.127 1.29-4.884 3.642l-4.913 2.306c-1.71 0.803-4.191 1.859-5.285 2.151-0.766 0.204-1.497-0.316-1.497-0.316s-2.206-1.975-2.792-2.419c-0.585-0.444-0.535-0.67 0.215-0.91 0.467-0.149 3.13 0.493 4.265 0.78 1.339-0.8 2.562-1.486 3.141-1.798-1.396-1.033-4.008-2.962-4.841-3.55-0.799-0.565 0.010-0.768 0.010-0.768 0.368-0.099 1.162-0.228 1.562-0.144 2.721 0.569 7.263 2.071 7.611 2.186 0.832-0.436 2.128-1.092 2.922-1.465 2.075-0.974 4.327-0.037 4.486 0.305z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chat" viewBox="0 0 20 20">
|
||||
<title>chat</title>
|
||||
<path d="M5.8 12.2v-6.2h-3.8c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h1v3l3-3h5c1.1 0 2-0.9 2-2v-1.82c-0.064 0.014-0.132 0.021-0.2 0.021l-7-0.001zM18 1h-9c-1.1 0-2 0.9-2 2v8h7l3 3v-3h1c1.1 0 2-0.899 2-2v-6c0-1.1-0.9-2-2-2z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-home" viewBox="0 0 20 20">
|
||||
<title>home</title>
|
||||
<path d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-key" viewBox="0 0 20 20">
|
||||
<title>key</title>
|
||||
<path d="M17.691 4.725c-0.503-2.977-3.22-4.967-6.069-4.441s-5.256 2.816-4.753 5.795c0.107 0.641 0.408 1.644 0.763 2.365l-5.175 7.723c-0.191 0.285-0.299 0.799-0.242 1.141l0.333 1.971c0.058 0.342 0.372 0.572 0.7 0.514l1.516-0.281c0.328-0.059 0.744-0.348 0.924-0.639l2.047-3.311 0.018-0.022 1.386-0.256 2.39-3.879c0.785 0.139 1.912 0.092 2.578-0.031 2.848-0.526 4.087-3.67 3.584-6.649zM15.166 6.252c-0.784 1.17-1.584 0.346-2.703-0.475-1.119-0.818-2.135-1.322-1.352-2.492s2.326-1.455 3.447-0.635c1.12 0.819 1.391 2.432 0.608 3.602z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-location-pin" viewBox="0 0 20 20">
|
||||
<title>location-pin</title>
|
||||
<path d="M10 2.009c-2.762 0-5 2.229-5 4.99 0 4.774 5 11 5 11s5-6.227 5-11c0-2.76-2.238-4.99-5-4.99zM10 9.76c-1.492 0-2.7-1.209-2.7-2.7s1.208-2.7 2.7-2.7c1.49 0 2.699 1.209 2.699 2.7s-1.209 2.7-2.699 2.7z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-magnifying-glass" viewBox="0 0 20 20">
|
||||
<title>magnifying-glass</title>
|
||||
<path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-map" viewBox="0 0 20 20">
|
||||
<title>map</title>
|
||||
<path d="M19.447 3.718l-6-3c-0.281-0.141-0.613-0.141-0.895 0l-5.63 2.815-5.606-1.869c-0.306-0.102-0.64-0.051-0.901 0.138s-0.415 0.49-0.415 0.811v13.001c0 0.379 0.214 0.725 0.553 0.894l6 3c0.141 0.070 0.294 0.106 0.447 0.106s0.307-0.035 0.447-0.106l5.63-2.814 5.606 1.869c0.305 0.1 0.64 0.049 0.901-0.139s0.415-0.49 0.415-0.81v-13.002c0.001-0.379-0.213-0.725-0.552-0.894zM8 5.231l4-2v11.763l-4 2v-11.763zM2 4l4 1.333v11.661l-4-2v-10.994zM18 16.227l-4-1.334v-11.662l4 2v10.996z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-star" viewBox="0 0 20 20">
|
||||
<title>star</title>
|
||||
<path d="M10 1.3l2.388 6.722h6.412l-5.232 3.948 1.871 6.928-5.439-4.154-5.438 4.154 1.87-6.928-5.233-3.948h6.412l2.389-6.722z"></path>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -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.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
@@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
|
||||
|
||||
<title>trillo — Your all-in-one booking app</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<img src="img/logo.png" alt="trillo logo" class="logo">
|
||||
|
||||
<form action="#" class="search">
|
||||
<input type="text" class="search__input" placeholder="Search hotels">
|
||||
<button class="search__button">
|
||||
<svg class="search__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<nav class="user-nav">
|
||||
<div class="user-nav__icon-box">
|
||||
<svg class="user-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-bookmark"></use>
|
||||
</svg>
|
||||
<span class="user-nav__notification">7</span>
|
||||
</div>
|
||||
<div class="user-nav__icon-box">
|
||||
<svg class="user-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-chat"></use>
|
||||
</svg>
|
||||
<span class="user-nav__notification">13</span>
|
||||
</div>
|
||||
<div class="user-nav__user">
|
||||
<img src="img/user.jpg" alt="User photo" class="user-nav__user-photo">
|
||||
<span class="user-nav__user-name">Jonas</span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<nav class="sidebar">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav__item side-nav__item--active">
|
||||
<a href="#" class="side-nav__link">
|
||||
<svg class="side-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-home"></use>
|
||||
</svg>
|
||||
<span>Hotel</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-nav__item">
|
||||
<a href="#" class="side-nav__link">
|
||||
<svg class="side-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-aircraft-take-off"></use>
|
||||
</svg>
|
||||
<span>Flight</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-nav__item">
|
||||
<a href="#" class="side-nav__link">
|
||||
<svg class="side-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-key"></use>
|
||||
</svg>
|
||||
<span>Car rental</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-nav__item">
|
||||
<a href="#" class="side-nav__link">
|
||||
<svg class="side-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-map"></use>
|
||||
</svg>
|
||||
<span>Tours</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="legal">
|
||||
© 2017 by trillo. All rights reserved.
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<main class="hotel-view">
|
||||
<div class="gallery">
|
||||
<figure class="gallery__item">
|
||||
<img src="img/hotel-1.jpg" alt="Photo of hotel 1" class="gallery__photo">
|
||||
</figure>
|
||||
<figure class="gallery__item">
|
||||
<img src="img/hotel-2.jpg" alt="Photo of hotel 2" class="gallery__photo">
|
||||
</figure>
|
||||
<figure class="gallery__item">
|
||||
<img src="img/hotel-3.jpg" alt="Photo of hotel 3" class="gallery__photo">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="overview">
|
||||
<h1 class="overview__heading">
|
||||
Hotel Las Palmas
|
||||
</h1>
|
||||
|
||||
<div class="overview__stars">
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="overview__location">
|
||||
<svg class="overview__icon-location">
|
||||
<use xlink:href="img/sprite.svg#icon-location-pin"></use>
|
||||
</svg>
|
||||
<button class="btn-inline">Albufeira, Portugal</button>
|
||||
</div>
|
||||
|
||||
<div class="overview__rating">
|
||||
<div class="overview__rating-average">8.6</div>
|
||||
<div class="overview__rating-count">429 votes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
<div class="description">
|
||||
<p class="paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p class="paragraph">
|
||||
Accusantium cumque, quas, ut corporis incidunt deserunt quae architecto voluptate delectus, inventore iure aliquid aliquam.
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li class="list__item">Close to the beach</li>
|
||||
<li class="list__item">Breakfast included</li>
|
||||
<li class="list__item">Free airport shuttle</li>
|
||||
<li class="list__item">Free wifi in all rooms</li>
|
||||
<li class="list__item">Air conditioning and heating</li>
|
||||
<li class="list__item">Pets allowed</li>
|
||||
<li class="list__item">We speak all languages</li>
|
||||
<li class="list__item">Perfect for families</li>
|
||||
</ul>
|
||||
<div class="recommend">
|
||||
<p class="recommend__count">
|
||||
Lucy and 3 other friends recommend this hotel.
|
||||
</p>
|
||||
<div class="recommend__friends">
|
||||
<img src="img/user-3.jpg" alt="Friend 1" class="recommend__photo">
|
||||
<img src="img/user-4.jpg" alt="Friend 2" class="recommend__photo">
|
||||
<img src="img/user-5.jpg" alt="Friend 3" class="recommend__photo">
|
||||
<img src="img/user-6.jpg" alt="Friend 4" class="recommend__photo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-reviews">
|
||||
<figure class="review">
|
||||
<blockquote class="review__text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi, totam, itaque officia ex.
|
||||
</blockquote>
|
||||
<figcaption class="review__user">
|
||||
<img src="img/user-1.jpg" alt="User 1" class="review__photo">
|
||||
<div class="review__user-box">
|
||||
<p class="review__user-name">Nick Smith</p>
|
||||
<p class="review__user-date">Feb 23rd, 2017</p>
|
||||
</div>
|
||||
<div class="review__rating">7.8</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="review">
|
||||
<blockquote class="review__text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi.
|
||||
</blockquote>
|
||||
<figcaption class="review__user">
|
||||
<img src="img/user-2.jpg" alt="User 1" class="review__photo">
|
||||
<div class="review__user-box">
|
||||
<p class="review__user-name">Mary Thomas</p>
|
||||
<p class="review__user-date">Sept 13th, 2017</p>
|
||||
</div>
|
||||
<div class="review__rating">9.3</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<button class="btn-inline">Show all <span>→</span></button>
|
||||
</div>
|
||||
|
||||
<div class="cta">
|
||||
<h2 class="cta__book-now">
|
||||
Good news! We have 4 free rooms for your selected dates!
|
||||
</h2>
|
||||
<button class="btn">
|
||||
<span class="btn__visible">Book now</span>
|
||||
<span class="btn__invisible">Only 4 rooms left</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "base";
|
||||
@import "layout";
|
||||
@import "components";
|
||||
Whitespace-only changes.
Executable
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
|
||||
<path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 542 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Executable
+120
@@ -0,0 +1,120 @@
|
||||
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<symbol id="icon-bookmark" viewBox="0 0 20 20">
|
||||
<title>bookmark</title>
|
||||
<path class="path1" d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-down" viewBox="0 0 20 20">
|
||||
<title>chevron-down</title>
|
||||
<path class="path1" d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-left" viewBox="0 0 20 20">
|
||||
<title>chevron-left</title>
|
||||
<path class="path1" d="M12.452 4.516c0.446 0.436 0.481 1.043 0 1.576l-3.747 3.908 3.747 3.908c0.481 0.533 0.446 1.141 0 1.574-0.445 0.436-1.197 0.408-1.615 0-0.418-0.406-4.502-4.695-4.502-4.695-0.223-0.217-0.335-0.502-0.335-0.787s0.112-0.57 0.335-0.789c0 0 4.084-4.287 4.502-4.695s1.17-0.436 1.615 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-right" viewBox="0 0 20 20">
|
||||
<title>chevron-right</title>
|
||||
<path class="path1" d="M9.163 4.516c0.418 0.408 4.502 4.695 4.502 4.695 0.223 0.219 0.335 0.504 0.335 0.789s-0.112 0.57-0.335 0.787c0 0-4.084 4.289-4.502 4.695-0.418 0.408-1.17 0.436-1.615 0-0.446-0.434-0.481-1.041 0-1.574l3.747-3.908-3.747-3.908c-0.481-0.533-0.446-1.141 0-1.576s1.197-0.409 1.615 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-down" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-down</title>
|
||||
<path class="path1" d="M17.418 6.109c0.272-0.268 0.709-0.268 0.979 0s0.271 0.701 0 0.969l-7.908 7.83c-0.27 0.268-0.707 0.268-0.979 0l-7.908-7.83c-0.27-0.268-0.27-0.701 0-0.969s0.709-0.268 0.979 0l7.419 7.141 7.418-7.141z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-left" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-left</title>
|
||||
<path class="path1" d="M13.891 17.418c0.268 0.272 0.268 0.709 0 0.979s-0.701 0.271-0.969 0l-7.83-7.908c-0.268-0.27-0.268-0.707 0-0.979l7.83-7.908c0.268-0.27 0.701-0.27 0.969 0s0.268 0.709 0 0.979l-7.141 7.419 7.141 7.418z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-right" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-right</title>
|
||||
<path class="path1" d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-up" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-up</title>
|
||||
<path class="path1" d="M2.582 13.891c-0.272 0.268-0.709 0.268-0.979 0s-0.271-0.701 0-0.969l7.908-7.83c0.27-0.268 0.707-0.268 0.979 0l7.908 7.83c0.27 0.268 0.27 0.701 0 0.969s-0.709 0.268-0.978 0l-7.42-7.141-7.418 7.141z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-up" viewBox="0 0 20 20">
|
||||
<title>chevron-up</title>
|
||||
<path class="path1" d="M15.484 12.452c-0.436 0.446-1.043 0.481-1.576 0l-3.908-3.747-3.908 3.747c-0.533 0.481-1.141 0.446-1.574 0-0.436-0.445-0.408-1.197 0-1.615 0.406-0.418 4.695-4.502 4.695-4.502 0.217-0.223 0.502-0.335 0.787-0.335s0.57 0.112 0.789 0.335c0 0 4.287 4.084 4.695 4.502s0.436 1.17 0 1.615z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-cloud" viewBox="0 0 20 20">
|
||||
<title>cloud</title>
|
||||
<path class="path1" d="M20 11.32c0 2.584-2.144 4.68-4.787 4.68h-11.596c-1.998 0-3.617-1.584-3.617-3.537 0-1.951 1.619-3.535 3.617-3.535 0.146 0 0.288 0.012 0.429 0.027-0.037-0.246-0.057-0.498-0.057-0.756 0-2.871 2.381-5.199 5.32-5.199 2.407 0 4.439 1.562 5.096 3.707 0.263-0.043 0.532-0.066 0.809-0.066 2.642 0 4.786 2.093 4.786 4.679z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-aircraft-take-off" viewBox="0 0 20 20">
|
||||
<title>aircraft-take-off</title>
|
||||
<path class="path1" d="M19.87 6.453c0.119 0.257 0.127 1.29-4.884 3.642l-4.913 2.306c-1.71 0.803-4.191 1.859-5.285 2.151-0.766 0.204-1.497-0.316-1.497-0.316s-2.206-1.975-2.792-2.419c-0.585-0.444-0.535-0.67 0.215-0.91 0.467-0.149 3.13 0.493 4.265 0.78 1.339-0.8 2.562-1.486 3.141-1.798-1.396-1.033-4.008-2.962-4.841-3.55-0.799-0.565 0.010-0.768 0.010-0.768 0.368-0.099 1.162-0.228 1.562-0.144 2.721 0.569 7.263 2.071 7.611 2.186 0.832-0.436 2.128-1.092 2.922-1.465 2.075-0.974 4.327-0.037 4.486 0.305z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-bell" viewBox="0 0 20 20">
|
||||
<title>bell</title>
|
||||
<path class="path1" d="M14.65 8.512c-2.28-4.907-3.466-6.771-7.191-6.693-1.327 0.027-1.009-0.962-2.021-0.587-1.010 0.375-0.143 0.924-1.177 1.773-2.902 2.383-2.635 4.587-1.289 9.84 0.567 2.213-1.367 2.321-0.602 4.465 0.559 1.564 4.679 2.219 9.025 0.607s7.086-4.814 6.527-6.378c-0.765-2.145-2.311-0.961-3.272-3.027zM10.924 16.595c-3.882 1.44-7.072 0.594-7.207 0.217-0.232-0.65 1.253-2.816 5.691-4.463s6.915-1.036 7.174-0.311c0.153 0.429-1.775 3.116-5.658 4.557zM9.676 13.101c-2.029 0.753-3.439 1.614-4.353 2.389 0.643 0.584 1.847 0.726 3.046 0.281 1.527-0.565 2.466-1.866 2.095-2.904-0.005-0.013-0.011-0.023-0.016-0.036-0.251 0.082-0.508 0.171-0.772 0.27z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-calendar" viewBox="0 0 20 20">
|
||||
<title>calendar</title>
|
||||
<path class="path1" d="M17 3h-1v2h-3v-2h-6v2h-3v-2h-1c-1.101 0-2 0.9-2 2v12c0 1.1 0.899 2 2 2h14c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM17 17h-14v-8h14v8zM6.5 1h-2v3.5h2v-3.5zM15.5 1h-2v3.5h2v-3.5z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-camera" viewBox="0 0 20 20">
|
||||
<title>camera</title>
|
||||
<path class="path1" d="M10 8c-1.657 0-3 1.344-3 3s1.343 3 3 3c1.656 0 3-1.344 3-3s-1.344-3-3-3zM18 5h-2.4c-0.33 0-0.686-0.256-0.789-0.57l-0.621-1.861c-0.105-0.313-0.459-0.569-0.79-0.569h-6.8c-0.33 0-0.686 0.256-0.789 0.568l-0.622 1.862c-0.104 0.314-0.459 0.57-0.789 0.57h-2.4c-1.1 0-2 0.9-2 2v9c0 1.1 0.9 2 2 2h16c1.1 0 2-0.9 2-2v-9c0-1.1-0.9-2-2-2zM10 16c-2.762 0-5-2.238-5-5s2.238-5 5-5c2.761 0 5 2.238 5 5s-2.239 5-5 5zM17.5 8.2c-0.387 0-0.7-0.314-0.7-0.701 0-0.385 0.313-0.7 0.7-0.7s0.7 0.314 0.7 0.7c0 0.387-0.313 0.701-0.7 0.701z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chat" viewBox="0 0 20 20">
|
||||
<title>chat</title>
|
||||
<path class="path1" d="M5.8 12.2v-6.2h-3.8c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h1v3l3-3h5c1.1 0 2-0.9 2-2v-1.82c-0.064 0.014-0.132 0.021-0.2 0.021l-7-0.001zM18 1h-9c-1.1 0-2 0.9-2 2v8h7l3 3v-3h1c1.1 0 2-0.899 2-2v-6c0-1.1-0.9-2-2-2z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-cog" viewBox="0 0 20 20">
|
||||
<title>cog</title>
|
||||
<path class="path1" d="M16.783 10c0-1.049 0.646-1.875 1.617-2.443-0.176-0.584-0.407-1.145-0.692-1.672-1.089 0.285-1.97-0.141-2.711-0.883-0.741-0.74-0.968-1.621-0.683-2.711-0.527-0.285-1.088-0.518-1.672-0.691-0.568 0.97-1.595 1.615-2.642 1.615-1.048 0-2.074-0.645-2.643-1.615-0.585 0.173-1.144 0.406-1.671 0.691 0.285 1.090 0.059 1.971-0.684 2.711-0.74 0.742-1.621 1.168-2.711 0.883-0.285 0.527-0.517 1.088-0.691 1.672 0.97 0.568 1.615 1.394 1.615 2.443 0 1.047-0.645 2.074-1.615 2.643 0.175 0.584 0.406 1.144 0.691 1.672 1.090-0.285 1.971-0.059 2.711 0.682s0.969 1.623 0.684 2.711c0.527 0.285 1.087 0.518 1.672 0.693 0.568-0.973 1.595-1.617 2.643-1.617 1.047 0 2.074 0.645 2.643 1.617 0.584-0.176 1.144-0.408 1.672-0.693-0.285-1.088-0.059-1.969 0.683-2.711 0.741-0.74 1.622-1.166 2.711-0.883 0.285-0.527 0.517-1.086 0.692-1.672-0.973-0.569-1.619-1.395-1.619-2.442zM10 13.652c-2.018 0-3.653-1.635-3.653-3.652 0-2.018 1.636-3.654 3.653-3.654s3.652 1.637 3.652 3.654c0 2.018-1.634 3.652-3.652 3.652z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-home" viewBox="0 0 20 20">
|
||||
<title>home</title>
|
||||
<path class="path1" d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-key" viewBox="0 0 20 20">
|
||||
<title>key</title>
|
||||
<path class="path1" d="M17.691 4.725c-0.503-2.977-3.22-4.967-6.069-4.441s-5.256 2.816-4.753 5.795c0.107 0.641 0.408 1.644 0.763 2.365l-5.175 7.723c-0.191 0.285-0.299 0.799-0.242 1.141l0.333 1.971c0.058 0.342 0.372 0.572 0.7 0.514l1.516-0.281c0.328-0.059 0.744-0.348 0.924-0.639l2.047-3.311 0.018-0.022 1.386-0.256 2.39-3.879c0.785 0.139 1.912 0.092 2.578-0.031 2.848-0.526 4.087-3.67 3.584-6.649zM15.166 6.252c-0.784 1.17-1.584 0.346-2.703-0.475-1.119-0.818-2.135-1.322-1.352-2.492s2.326-1.455 3.447-0.635c1.12 0.819 1.391 2.432 0.608 3.602z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-light-up" viewBox="0 0 20 20">
|
||||
<title>light-up</title>
|
||||
<path class="path1" d="M19 9.199c-0.182 0-0.799 0-0.98 0-0.553 0-1 0.359-1 0.801s0.447 0.799 1 0.799c0.182 0 0.799 0 0.98 0 0.552 0 1-0.357 1-0.799 0-0.441-0.449-0.801-1-0.801zM10 4.5c-3.051 0-5.5 2.449-5.5 5.5s2.449 5.5 5.5 5.5c3.050 0 5.5-2.449 5.5-5.5s-2.451-5.5-5.5-5.5zM10 14c-2.211 0-4-1.791-4-4 0-2.211 1.789-4 4-4 2.209 0 4 1.789 4 4 0 2.209-1.791 4-4 4zM3 10c0-0.441-0.449-0.801-1-0.801-0.185 0-0.816 0-1 0-0.553 0-1 0.359-1 0.801s0.447 0.799 1 0.799c0.184 0 0.815 0 1 0 0.551 0 1-0.358 1-0.799zM10 3c0.441 0 0.799-0.447 0.799-1 0-0.184 0-0.816 0-1 0-0.553-0.358-1-0.799-1s-0.801 0.447-0.801 1c0 0.184 0 0.816 0 1 0 0.553 0.359 1 0.801 1zM10 17c-0.442 0-0.801 0.447-0.801 1 0 0.184 0 0.816 0 1 0 0.553 0.359 1 0.801 1s0.799-0.447 0.799-1c0-0.184 0-0.816 0-1 0-0.553-0.358-1-0.799-1zM17.365 3.766c0.391-0.391 0.454-0.961 0.142-1.273s-0.883-0.248-1.272 0.143c-0.108 0.107-0.593 0.592-0.7 0.699-0.391 0.391-0.454 0.961-0.142 1.273s0.883 0.248 1.273-0.143c0.107-0.108 0.591-0.592 0.699-0.699zM3.334 15.533c-0.108 0.109-0.593 0.594-0.7 0.701-0.391 0.391-0.454 0.959-0.142 1.271s0.883 0.25 1.272-0.141c0.108-0.107 0.593-0.592 0.7-0.699 0.391-0.391 0.454-0.961 0.142-1.274s-0.883-0.247-1.272 0.142zM3.765 2.635c-0.39-0.391-0.961-0.455-1.273-0.143s-0.248 0.883 0.141 1.274c0.108 0.107 0.593 0.592 0.7 0.699 0.391 0.391 0.96 0.455 1.272 0.143s0.249-0.883-0.141-1.273c-0.107-0.108-0.591-0.593-0.699-0.7zM15.534 16.666c0.108 0.107 0.593 0.592 0.7 0.699 0.391 0.391 0.96 0.453 1.272 0.143 0.312-0.312 0.249-0.883-0.142-1.273-0.107-0.107-0.592-0.592-0.699-0.699-0.391-0.391-0.961-0.455-1.274-0.143s-0.248 0.882 0.143 1.273z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-location-pin" viewBox="0 0 20 20">
|
||||
<title>location-pin</title>
|
||||
<path class="path1" d="M10 2.009c-2.762 0-5 2.229-5 4.99 0 4.774 5 11 5 11s5-6.227 5-11c0-2.76-2.238-4.99-5-4.99zM10 9.76c-1.492 0-2.7-1.209-2.7-2.7s1.208-2.7 2.7-2.7c1.49 0 2.699 1.209 2.699 2.7s-1.209 2.7-2.699 2.7z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-magnifying-glass" viewBox="0 0 20 20">
|
||||
<title>magnifying-glass</title>
|
||||
<path class="path1" d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-mail" viewBox="0 0 20 20">
|
||||
<title>mail</title>
|
||||
<path class="path1" d="M1.574 5.286c0.488 0.262 7.248 3.894 7.5 4.029s0.578 0.199 0.906 0.199c0.328 0 0.654-0.064 0.906-0.199s7.012-3.767 7.5-4.029c0.489-0.263 0.951-1.286 0.054-1.286h-16.919c-0.897 0-0.435 1.023 0.053 1.286zM18.613 7.489c-0.555 0.289-7.387 3.849-7.727 4.027s-0.578 0.199-0.906 0.199-0.566-0.021-0.906-0.199-7.133-3.739-7.688-4.028c-0.39-0.204-0.386 0.035-0.386 0.219s0 7.293 0 7.293c0 0.42 0.566 1 1 1h16c0.434 0 1-0.58 1-1 0 0 0-7.108 0-7.292s0.004-0.423-0.387-0.219z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-map" viewBox="0 0 20 20">
|
||||
<title>map</title>
|
||||
<path class="path1" d="M19.447 3.718l-6-3c-0.281-0.141-0.613-0.141-0.895 0l-5.63 2.815-5.606-1.869c-0.306-0.102-0.64-0.051-0.901 0.138s-0.415 0.49-0.415 0.811v13.001c0 0.379 0.214 0.725 0.553 0.894l6 3c0.141 0.070 0.294 0.106 0.447 0.106s0.307-0.035 0.447-0.106l5.63-2.814 5.606 1.869c0.305 0.1 0.64 0.049 0.901-0.139s0.415-0.49 0.415-0.81v-13.002c0.001-0.379-0.213-0.725-0.552-0.894zM8 5.231l4-2v11.763l-4 2v-11.763zM2 4l4 1.333v11.661l-4-2v-10.994zM18 16.227l-4-1.334v-11.662l4 2v10.996z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-squared-cross" viewBox="0 0 20 20">
|
||||
<title>squared-cross</title>
|
||||
<path class="path1" d="M16 2h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM13.061 14.789l-3.061-3.060-3.061 3.060-1.729-1.728 3.061-3.061-3.060-3.061 1.729-1.729 3.060 3.061 3.059-3.061 1.729 1.729-3.059 3.061 3.060 3.061-1.728 1.728z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-star-outlined" viewBox="0 0 20 20">
|
||||
<title>star-outlined</title>
|
||||
<path class="path1" d="M18.8 8.022h-6.413l-2.387-6.722-2.389 6.722h-6.412l5.232 3.947-1.871 6.929 5.44-4.154 5.438 4.154-1.869-6.929 5.231-3.947zM10 12.783l-3.014 2.5 1.243-3.562-2.851-2.3 3.522 0.101 1.1-4.040 1.099 4.040 3.521-0.101-2.851 2.3 1.243 3.562-3.012-2.5z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-star" viewBox="0 0 20 20">
|
||||
<title>star</title>
|
||||
<path class="path1" d="M10 1.3l2.388 6.722h6.412l-5.232 3.948 1.871 6.928-5.439-4.154-5.438 4.154 1.87-6.928-5.233-3.948h6.412l2.389-6.722z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-user" viewBox="0 0 20 20">
|
||||
<title>user</title>
|
||||
<path class="path1" d="M7.725 2.146c-1.016 0.756-1.289 1.953-1.239 2.59 0.064 0.779 0.222 1.793 0.222 1.793s-0.313 0.17-0.313 0.854c0.109 1.717 0.683 0.976 0.801 1.729 0.284 1.814 0.933 1.491 0.933 2.481 0 1.649-0.68 2.42-2.803 3.334-2.13 0.918-4.326 2.073-4.326 4.073v1h18v-1c0-2-2.197-3.155-4.328-4.072-2.123-0.914-2.801-1.684-2.801-3.334 0-0.99 0.647-0.667 0.932-2.481 0.119-0.753 0.692-0.012 0.803-1.729 0-0.684-0.314-0.854-0.314-0.854s0.158-1.014 0.221-1.793c0.065-0.817-0.398-2.561-2.3-3.096-0.333-0.34-0.558-0.881 0.466-1.424-2.24-0.105-2.761 1.067-3.954 1.929z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-facebook" viewBox="0 0 20 20">
|
||||
<title>facebook</title>
|
||||
<path class="path1" d="M17 1h-14c-1.1 0-2 0.9-2 2v14c0 1.101 0.9 2 2 2h7v-7h-2v-2.475h2v-2.050c0-2.164 1.212-3.684 3.766-3.684l1.803 0.002v2.605h-1.197c-0.994 0-1.372 0.746-1.372 1.438v1.69h2.568l-0.568 2.474h-2v7h4c1.1 0 2-0.899 2-2v-14c0-1.1-0.9-2-2-2z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-instagram" viewBox="0 0 20 20">
|
||||
<title>instagram</title>
|
||||
<path class="path1" d="M17 1h-14c-1.1 0-2 0.9-2 2v14c0 1.101 0.9 2 2 2h14c1.1 0 2-0.899 2-2v-14c0-1.1-0.9-2-2-2zM9.984 15.523c3.059 0 5.538-2.481 5.538-5.539 0-0.338-0.043-0.664-0.103-0.984h1.581v7.216c0 0.382-0.31 0.69-0.693 0.69h-12.614c-0.383 0-0.693-0.308-0.693-0.69v-7.216h1.549c-0.061 0.32-0.104 0.646-0.104 0.984 0 3.059 2.481 5.539 5.539 5.539zM6.523 9.984c0-1.912 1.55-3.461 3.462-3.461s3.462 1.549 3.462 3.461-1.551 3.462-3.462 3.462c-1.913 0-3.462-1.55-3.462-3.462zM16.307 6h-1.615c-0.382 0-0.692-0.312-0.692-0.692v-1.617c0-0.382 0.31-0.691 0.691-0.691h1.615c0.384 0 0.694 0.309 0.694 0.691v1.616c0 0.381-0.31 0.693-0.693 0.693z"></path>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
@@ -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.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
|
||||
|
||||
<title>trillo — Your all-in-one booking app</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
*/
|
||||
Reference in new issue
Block a user