dqnid/advanced-css
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first 2 lectures

Browse Source
This commit is contained in:
dqnid committed 2023-07-11 00:11:30 +02:00
1 parent 2cf84f4efd
commit 98a7c96117
289 files changed
+14886
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Trillo/final/css/style.comp.css
+505
View File
@@ -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; }
Trillo/final/css/style.css
+1
View File
@@ -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
Trillo/final/css/style.prefix.css
+667
View File
@@ -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
Trillo/final/img/SVG/aircraft-take-off.svg
Executable
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 666 B

Trillo/final/img/SVG/bookmark.svg
Executable
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 253 B

Trillo/final/img/SVG/chat.svg
Executable
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 384 B

Trillo/final/img/SVG/chevron-thin-right.svg
Executable
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 395 B

Trillo/final/img/SVG/home.svg
Executable
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 426 B

Trillo/final/img/SVG/key.svg
Executable
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 694 B

Trillo/final/img/SVG/location-pin.svg
Executable
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 379 B

Trillo/final/img/SVG/magnifying-glass.svg
Executable
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 587 B

Trillo/final/img/SVG/map.svg
Executable
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 642 B

Trillo/final/img/SVG/star.svg
Executable
+5
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 293 B

Trillo/final/img/chevron-thin-right.svg
Executable
+6
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 542 B

Trillo/final/img/favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

Trillo/final/img/hotel-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

Trillo/final/img/hotel-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

Trillo/final/img/hotel-3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

Trillo/final/img/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

Trillo/final/img/sprite.svg
Executable
+44
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

Trillo/final/img/text.txt
+17
View File
@@ -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.
Trillo/final/img/user-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

Trillo/final/img/user-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

Trillo/final/img/user-3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

Trillo/final/img/user-4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

Trillo/final/img/user-5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

Trillo/final/img/user-6.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

Trillo/final/img/user.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

Trillo/final/index.html
+221
View File
@@ -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 &mdash; 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">
&copy; 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>&rarr;</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>
Trillo/final/package.json
+25
View File
@@ -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"
}
}
Trillo/final/sass/_base.scss
+57
View File
@@ -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;
}
Trillo/final/sass/_components.scss
+594
View File
@@ -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;
}
}
Trillo/final/sass/_layout.scss
+97
View File
@@ -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;
}
Trillo/final/sass/main.scss
+3
View File
@@ -0,0 +1,3 @@
@import "base";
@import "layout";
@import "components";