653 lines
14 KiB
CSS
Executable File
653 lines
14 KiB
CSS
Executable File
/*
|
|
|
|
Journey Template
|
|
http://www.templatemo.com/tm-511-journey
|
|
|
|
Primary color (light blue) : #69c6ba
|
|
Highlight color (pink) : #c66995
|
|
--------------------------------------
|
|
|
|
*/
|
|
|
|
.tm-page-wrap {
|
|
max-width: 1400px;
|
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
|
background: white;
|
|
}
|
|
|
|
.tm-container-outer {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tm-content-box { box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); }
|
|
.tm-text-gray { color: #787676; }
|
|
|
|
.tm-text-highlight {
|
|
color: #c66995;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tm-bg-primary { background: #69c6ba; }
|
|
.tm-bg-highlight { background: #c66995; }
|
|
|
|
.btn-primary {
|
|
background: #69c6ba;
|
|
border: none;
|
|
border-radius: 0;
|
|
outline: none;
|
|
}
|
|
|
|
.btn-primary:hover { background: #c66995; }
|
|
.tm-top-bar .navbar-expand-lg .navbar-nav .nav-link { padding: 50px 35px; }
|
|
|
|
.tm-top-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 0;
|
|
z-index: 10000;
|
|
transition: all 0.2s ease-in-out;
|
|
height: 119px;
|
|
|
|
/* Navigation bar BG color */
|
|
background: #212329;
|
|
}
|
|
|
|
.tm-top-bar.active {
|
|
height: 60px;
|
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.tm-top-bar.active .navbar-expand-lg .navbar-nav .nav-link { padding: 20px 35px; }
|
|
.tm-top-bar.active .navbar-brand { font-size: 1.4rem; }
|
|
|
|
.tm-top-bar .navbar-brand img {
|
|
width: 60px;
|
|
height: auto;
|
|
}
|
|
|
|
.tm-top-bar.active .navbar-brand img { width: 40px; }
|
|
.tm-top-bar-bg { height: 119px; }
|
|
.tm-top-bar a { color: rgb(255,255,255); }
|
|
|
|
.navbar-brand {
|
|
font-size: 2.2rem;
|
|
/*text-transform: uppercase; */
|
|
}
|
|
|
|
.navbar {
|
|
font-weight: 700;
|
|
width: 100%;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* TODO : change color here! */
|
|
.nav-link.active, .nav-link:hover { color: rgb(102,219,249); }
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.navbar-toggler {
|
|
border-color: rgb(255,255,255);/*rgb(104, 199, 187);*/
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tm-banner-title {
|
|
font-size: 2rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
.tm-banner-subtitle {
|
|
font-size: 1.5rem;
|
|
margin-top: 10px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.tm-banner-header { color: white; }
|
|
.tm-banner-overlay {
|
|
z-index: 1;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
overflow: auto;
|
|
top: 0px;
|
|
left: 0px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
.tm-banner-bg {
|
|
background: url(../img/banner.jpg) center top no-repeat;
|
|
min-height: 720px;
|
|
position: relative;
|
|
}
|
|
.tm-banner-row {
|
|
position: relative;
|
|
z-index: 100;
|
|
justify-content: center;
|
|
padding-top: 100px;
|
|
}
|
|
.tm-banner-row-header { text-align: center; }
|
|
.tm-down-arrow-link {
|
|
color: white;
|
|
background-color: #69c6ba;
|
|
border-radius: 50%;
|
|
padding: 10px 15px;
|
|
margin-top: 0px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tm-down-arrow-link:hover,
|
|
.tm-down-arrow-link:focus {
|
|
color: white;
|
|
background-color: #c66995;
|
|
}
|
|
|
|
/* Search form */
|
|
select.tm-select.form-control:not([size]):not([multiple]) { height: 45px; }
|
|
.form-control {
|
|
font-size: 0.8rem;
|
|
padding: .75rem;
|
|
}
|
|
label { font-weight: 700; }
|
|
.tm-search-form {
|
|
background-color: #f5f6f6;
|
|
padding: 25px 25px 15px;
|
|
width: 100%;
|
|
max-width: 830px;
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.tm-form-group { float: left; }
|
|
.tm-form-group-pad { padding: 0 8px; }
|
|
.tm-form-group-1 { width: 50%; }
|
|
.tm-form-group-2 { width: 50%; }
|
|
.tm-form-group-3 { width: 25%; }
|
|
.form-control { border-radius: 0; }
|
|
|
|
.tm-btn {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-size: 0.85rem;
|
|
font-weight: 400;
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.tm-btn-white { background: white; }
|
|
.tm-btn-white-primary { color: #69c6ba; }
|
|
.tm-btn-white-highlight { color: #c66995; }
|
|
|
|
.tm-btn-white-primary:hover,
|
|
.tm-btn-white-primary:focus,
|
|
.tm-btn-white-primary:active {
|
|
background: #c66995;
|
|
color: white;
|
|
}
|
|
|
|
.tm-btn-white-highlight:hover,
|
|
.tm-btn-white-highlight:focus,
|
|
.tm-btn-white-highlight:active {
|
|
background: #69c6ba;
|
|
color: white;
|
|
}
|
|
|
|
.tm-btn-search { width: 100%; }
|
|
|
|
.tm-btn-search:hover,
|
|
.tm-btn-search:active,
|
|
.tm-btn-search:focus {
|
|
background: #c66995;
|
|
}
|
|
|
|
.tm-bg-gray { background-color: #efefef; }
|
|
.tm-about-text-wrap { max-width: 830px; }
|
|
|
|
.tm-right {
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
|
|
.tm-slideshow-section {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.tm-slideshow-section-reverse {
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: reverse;
|
|
-webkit-flex-direction: row-reverse;
|
|
-ms-flex-direction: row-reverse;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.tm-slideshow { width: 50%; }
|
|
|
|
.tm-slideshow-description {
|
|
padding: 50px;
|
|
color: white;
|
|
width: 48%;
|
|
z-index: 100;
|
|
margin-left: -42px;
|
|
}
|
|
|
|
.tm-slideshow-description-left {
|
|
margin-left: auto;
|
|
margin-right: -42px;
|
|
}
|
|
|
|
.tm-position-relative { position: relative; }
|
|
|
|
.slick-prev, .slick-next {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.slick-prev, .slick-next,
|
|
.slick-prev:focus,
|
|
.slick-prev:active,
|
|
.slick-next:focus,
|
|
.slick-next:active {
|
|
background: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.slick-prev:before, .slick-next:before { font-size: 22px; }
|
|
|
|
.slick-prev:hover,
|
|
.slick-next:hover {
|
|
background: #69c6ba;
|
|
}
|
|
|
|
.tm-slideshow-highlight .slick-prev:hover,
|
|
.tm-slideshow-highlight .slick-next:hover {
|
|
background: #c66995;
|
|
}
|
|
|
|
.slick-prev {
|
|
left: auto;
|
|
right: 95px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.tm-right .slick-prev {
|
|
left: 42px;
|
|
right: auto;
|
|
}
|
|
|
|
.slick-next { right: 42px; }
|
|
|
|
.tm-right .slick-next {
|
|
right: auto;
|
|
left: 94px;
|
|
}
|
|
|
|
/* Tabs */
|
|
.tm-tabs-links {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: stretch;
|
|
-webkit-align-items: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
-webkit-box-pack: space-evenly;
|
|
-webkit-justify-content: space-evenly;
|
|
-ms-flex-pack: space-evenly;
|
|
justify-content: space-evenly;
|
|
background: #69c6ba;
|
|
}
|
|
|
|
.tm-tab-link {
|
|
padding: 30px 25px;
|
|
text-align: center;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-webkit-justify-content: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
text-transform: uppercase;
|
|
color: white;
|
|
font-weight: 400;
|
|
font-size: 0.9rem;
|
|
height: 100%;
|
|
}
|
|
|
|
.tm-tab-link:hover { color: white; }
|
|
|
|
.tm-tab-link-li {
|
|
background: transparent;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1 1 auto;
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tm-tab-link:hover,
|
|
.tm-tab-link.active {
|
|
background: #c66995;
|
|
}
|
|
|
|
.tab-pane {
|
|
max-width: 970px;
|
|
margin: 60px auto;
|
|
}
|
|
|
|
.tm-recommended-place {
|
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: space-around;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.tm-recommended-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tm-recommended-img { width: 270px; }
|
|
|
|
.tm-recommended-description-box {
|
|
padding: 30px;
|
|
width: 500px;
|
|
}
|
|
|
|
.tm-recommended-price-box {
|
|
background-color: #69c6ba;
|
|
background-image: url(../img/button-curve.png);
|
|
background-repeat: no-repeat;
|
|
background-size: auto 100%;
|
|
font-weight: 400;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-webkit-justify-content: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
padding-left: 20px;
|
|
width: 200px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tm-recommended-price-box:hover { background-color: #c66995; }
|
|
|
|
.tm-recommended-price {
|
|
color: white;
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tm-recommended-price-link {
|
|
color: white;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tm-d-table { display: table; }
|
|
|
|
footer {
|
|
background: #69c6ba;
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
text-align: center;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
footer a { color: #fff; }
|
|
|
|
footer a:hover { color: #900; }
|
|
|
|
footer p { color: white; }
|
|
|
|
.tm-footer-text-highlight {
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tm-footer-text-highlight:hover { color: #c66995; }
|
|
|
|
.tm-contact-form {
|
|
background: white;
|
|
width: 470px;
|
|
position: absolute;
|
|
top: 100px;
|
|
right: 100px;
|
|
padding: 20px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.form-control {
|
|
background-color: #f5f5f5;
|
|
border: none;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #69c6ba;
|
|
box-shadow: 0 0 0 0.1rem #69c6babf;
|
|
}
|
|
|
|
.tm-name-container,
|
|
.tm-email-container {
|
|
width: 210px;
|
|
float: left;
|
|
}
|
|
|
|
.tm-email-container { margin-left: 10px; }
|
|
|
|
.tm-btn-send {
|
|
width: 100%;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#google-map { height: 600px; }
|
|
|
|
@media screen and (max-width: 1080px) {
|
|
.tm-tab-link-li { width: 25%; }
|
|
}
|
|
|
|
@media screen and (max-width: 1033px) {
|
|
.tm-slideshow-description { width: 55%; }
|
|
}
|
|
|
|
/* TODO */
|
|
@media screen and (max-width: 991px) {
|
|
.tm-top-bar .navbar-expand-lg .navbar-nav .nav-link {
|
|
padding: 15px 20px;
|
|
background: rgb(33,36,41);
|
|
}
|
|
|
|
.tm-top-bar, .tm-top-bar-bg { height: auto; }
|
|
|
|
#mainNav {
|
|
width: 250px;
|
|
position: absolute;
|
|
top: 53px;
|
|
right: 15px;
|
|
}
|
|
|
|
.tm-top-bar {
|
|
height: 60px;
|
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tm-top-bar.active .navbar-expand-lg .navbar-nav .nav-link,
|
|
.tm-top-bar .navbar-expand-lg .navbar-nav .nav-link { padding: 15px; }
|
|
|
|
.tm-top-bar .navbar-brand { font-size: 1.4rem; }
|
|
|
|
.tm-top-bar .navbar-brand img {
|
|
width: 60px;
|
|
height: auto;
|
|
}
|
|
|
|
.tm-top-bar .navbar-brand img { width: 40px; }
|
|
|
|
.tab-pane {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.tm-recommended-description-box { width: 450px; }
|
|
}
|
|
|
|
@media screen and (max-width: 986px) {
|
|
.tm-slideshow-section { flex-direction: column; }
|
|
|
|
.tm-slideshow,
|
|
.tm-slideshow-description {
|
|
width: 100%;
|
|
max-width: 700px;
|
|
}
|
|
|
|
.tm-slideshow-description {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.slick-prev, .slick-next {
|
|
bottom: 0;
|
|
top: auto;
|
|
}
|
|
|
|
.tm-contact-form {
|
|
position: static;
|
|
width: 100%;
|
|
}
|
|
|
|
.tm-name-container,
|
|
.tm-email-container {
|
|
width: 49%;
|
|
}
|
|
|
|
.tm-email-container {
|
|
margin-left: 0;
|
|
float: right;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 860px) {
|
|
.tm-recommended-description-box { width: 350px; }
|
|
}
|
|
|
|
@media screen and (max-width: 826px) {
|
|
|
|
.body {
|
|
padding-top: 300px;
|
|
content: "test\nsdfg\nsdfg\nsdfg\nsfg\n";
|
|
}
|
|
|
|
.tm-banner-row-header { padding-top: 120px; }
|
|
|
|
.tm-recommended-place-wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
max-width: 600px;
|
|
margin: 0 auto 15px;
|
|
}
|
|
|
|
.tm-recommended-place {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 270px;
|
|
}
|
|
|
|
.tm-recommended-price,
|
|
.tm-recommended-price-link {
|
|
position: relative;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.tm-recommended-price { padding-top: 50px; }
|
|
|
|
.tm-recommended-price-box {
|
|
width: 270px;
|
|
height: 180px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding-left: 0;
|
|
background-image: none;
|
|
}
|
|
|
|
.tm-recommended-price-box:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 180px;
|
|
height: 270px;
|
|
top: -45px;
|
|
left: 45px;
|
|
z-index: 27;
|
|
background: url(../img/button-curve.png) 0 0 no-repeat;
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
background-size: auto 100%;
|
|
}
|
|
|
|
.tm-recommended-price-box,
|
|
.tm-recommended-price-box:hover {
|
|
background-size: cover;
|
|
}
|
|
|
|
.tm-recommended-description-box { width: 270px; }
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.tm-banner-row {
|
|
padding-top: 80px;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
.tm-banner-header { margin-top: 100px; }
|
|
|
|
.tm-form-group-1,
|
|
.tm-form-group-2,
|
|
.tm-form-group-3 {
|
|
width: 100%;
|
|
}
|
|
}
|