chore: clean legacy files

This commit is contained in:
Ruidy 2025-09-06 14:49:53 -04:00
parent 18eae7b8ac
commit ba8f3a5065
56 changed files with 78518 additions and 14394 deletions

View file

@ -24,7 +24,7 @@
padding: 4px;
}
.datepicker-dropdown:before {
content: '';
content: "";
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
@ -34,7 +34,7 @@
position: absolute;
}
.datepicker-dropdown:after {
content: '';
content: "";
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
@ -675,4 +675,4 @@ fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {
margin-left: -5px;
margin-right: -5px;
}
/*# sourceMappingURL=bootstrap-datepicker3.css.map */
/*# sourceMappingURL=bootstrap-datepicker3.css.map */

1037
assets/css/bootstrap.css vendored

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

@ -8,7 +8,8 @@
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8; }
opacity: 0.8;
}
.mfp-wrap {
top: 0;
@ -18,7 +19,8 @@
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
-webkit-backface-visibility: hidden;
}
.mfp-container {
text-align: center;
@ -28,16 +30,19 @@
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box; }
box-sizing: border-box;
}
.mfp-container:before {
content: '';
content: "";
display: inline-block;
height: 100%;
vertical-align: middle; }
vertical-align: middle;
}
.mfp-align-top .mfp-container:before {
display: none; }
display: none;
}
.mfp-content {
position: relative;
@ -45,29 +50,36 @@
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
z-index: 1045;
}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
cursor: auto;
}
.mfp-ajax-cur {
cursor: progress; }
cursor: progress;
}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
cursor: zoom-out;
}
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
cursor: auto; }
cursor: auto;
}
.mfp-close,
.mfp-arrow,
@ -75,16 +87,19 @@
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
user-select: none;
}
.mfp-loading.mfp-figure {
display: none; }
display: none;
}
.mfp-hide {
display: none !important; }
display: none !important;
}
.mfp-preloader {
color: #CCC;
color: #ccc;
position: absolute;
top: 50%;
width: auto;
@ -92,17 +107,22 @@
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #CCC; }
.mfp-preloader a:hover {
color: #FFF; }
z-index: 1044;
}
.mfp-preloader a {
color: #ccc;
}
.mfp-preloader a:hover {
color: #fff;
}
.mfp-s-ready .mfp-preloader {
display: none; }
display: none;
}
.mfp-s-error .mfp-content {
display: none; }
display: none;
}
button.mfp-close,
button.mfp-arrow {
@ -116,11 +136,13 @@ button.mfp-arrow {
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation; }
touch-action: manipulation;
}
button::-moz-focus-inner {
padding: 0;
border: 0; }
border: 0;
}
.mfp-close {
width: 44px;
@ -133,35 +155,41 @@ button::-moz-focus-inner {
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: #FFF;
color: #fff;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover,
.mfp-close:focus {
opacity: 1; }
.mfp-close:active {
top: 1px; }
font-family: Arial, Baskerville, monospace;
}
.mfp-close:hover,
.mfp-close:focus {
opacity: 1;
}
.mfp-close:active {
top: 1px;
}
.mfp-close-btn-in .mfp-close {
color: #333; }
color: #333;
}
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
color: #fff;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
width: 100%;
}
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
color: #ccc;
font-size: 12px;
line-height: 18px;
white-space: nowrap; }
white-space: nowrap;
}
.mfp-arrow {
position: absolute;
@ -172,74 +200,91 @@ button::-moz-focus-inner {
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent; }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7; }
-webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
margin-top: -54px;
}
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1;
}
.mfp-arrow:before,
.mfp-arrow:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent;
}
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px;
}
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7;
}
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px; }
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F; }
left: 0;
}
.mfp-arrow-left:after {
border-right: 17px solid #fff;
margin-left: 31px;
}
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3f3f3f;
}
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px; }
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F; }
right: 0;
}
.mfp-arrow-right:after {
border-left: 17px solid #fff;
margin-left: 39px;
}
.mfp-arrow-right:before {
border-left: 27px solid #3f3f3f;
}
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
top: -40px;
}
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000; }
padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000;
}
/* Main image in popup */
img.mfp-img {
@ -250,31 +295,36 @@ img.mfp-img {
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
margin: 0 auto;
}
/* The shadow behind the image */
.mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444; }
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-figure figure {
margin: 0; }
line-height: 0;
}
.mfp-figure:after {
content: "";
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444;
}
.mfp-figure small {
color: #bdbdbd;
display: block;
font-size: 12px;
line-height: 14px;
}
.mfp-figure figure {
margin: 0;
}
.mfp-bottom-bar {
margin-top: -36px;
@ -282,36 +332,45 @@ img.mfp-img {
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
cursor: auto;
}
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
color: #f3f3f3;
word-wrap: break-word;
padding-right: 36px; }
padding-right: 36px;
}
.mfp-image-holder .mfp-content {
max-width: 100%; }
max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
cursor: pointer;
}
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
@media screen and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
padding-right: 0;
}
.mfp-img-mobile img.mfp-img {
padding: 0; }
padding: 0;
}
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
bottom: 0;
}
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; }
margin-left: 5px;
}
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
@ -319,12 +378,15 @@ img.mfp-img {
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
box-sizing: border-box;
}
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0;
}
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
top: 3px;
}
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
@ -334,18 +396,25 @@ img.mfp-img {
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; } }
padding: 0;
}
}
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
transform: scale(0.75);
}
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
transform-origin: 0;
}
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
transform-origin: 100%;
}
.mfp-container {
padding-left: 6px;
padding-right: 6px; } }
padding-right: 6px;
}
}

File diff suppressed because it is too large Load diff

View file

@ -41,7 +41,9 @@
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-property:
transform,
-webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
@ -72,7 +74,9 @@
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-property:
transform,
-webkit-transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
@ -87,11 +91,18 @@
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
-webkit-transition-property:
height,
-webkit-transform;
transition-property:
height,
-webkit-transform;
-o-transition-property: transform, height;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform;
transition-property:
transform,
height,
-webkit-transform;
}
/* 3D Effects */
.swiper-container-3d {
@ -121,28 +132,100 @@
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
right top,
left top,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to left,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
left top,
right top,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
left,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
left,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
left bottom,
left top,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
bottom,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
bottom,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
top,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
top,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
@ -298,48 +381,93 @@ button.swiper-pagination-bullet {
-webkit-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
.swiper-container-vertical
> .swiper-pagination-bullets
.swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
.swiper-container-vertical
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
.swiper-container-vertical
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
display: inline-block;
-webkit-transition: 200ms top, 200ms -webkit-transform;
transition: 200ms top, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top, 200ms -webkit-transform;
-webkit-transition:
200ms top,
200ms -webkit-transform;
transition:
200ms top,
200ms -webkit-transform;
-o-transition:
200ms transform,
200ms top;
transition:
200ms transform,
200ms top;
transition:
200ms transform,
200ms top,
200ms -webkit-transform;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
.swiper-container-horizontal
> .swiper-pagination-bullets
.swiper-pagination-bullet {
margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
.swiper-container-horizontal
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms left, 200ms -webkit-transform;
transition: 200ms left, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left, 200ms -webkit-transform;
.swiper-container-horizontal
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
-webkit-transition:
200ms left,
200ms -webkit-transform;
transition:
200ms left,
200ms -webkit-transform;
-o-transition:
200ms transform,
200ms left;
transition:
200ms transform,
200ms left;
transition:
200ms transform,
200ms left,
200ms -webkit-transform;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms right, 200ms -webkit-transform;
transition: 200ms right, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right, 200ms -webkit-transform;
.swiper-container-horizontal.swiper-container-rtl
> .swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
-webkit-transition:
200ms right,
200ms -webkit-transform;
transition:
200ms right,
200ms -webkit-transform;
-o-transition:
200ms transform,
200ms right;
transition:
200ms transform,
200ms right;
transition:
200ms transform,
200ms right,
200ms -webkit-transform;
}
/* Progress */
.swiper-pagination-progressbar {
@ -360,20 +488,24 @@ button.swiper-pagination-bullet {
-ms-transform-origin: left top;
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
.swiper-container-rtl
.swiper-pagination-progressbar
.swiper-pagination-progressbar-fill {
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
.swiper-container-vertical
> .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
.swiper-container-horizontal
> .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
@ -385,7 +517,8 @@ button.swiper-pagination-bullet {
.swiper-pagination-progressbar.swiper-pagination-white {
background: rgba(255, 255, 255, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
.swiper-pagination-progressbar.swiper-pagination-white
.swiper-pagination-progressbar-fill {
background: #ffffff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
@ -394,7 +527,8 @@ button.swiper-pagination-bullet {
.swiper-pagination-progressbar.swiper-pagination-black {
background: rgba(0, 0, 0, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
.swiper-pagination-progressbar.swiper-pagination-black
.swiper-pagination-progressbar-fill {
background: #000000;
}
.swiper-pagination-lock {
@ -484,7 +618,7 @@ button.swiper-pagination-bullet {
}
.swiper-lazy-preloader:after {
display: block;
content: '';
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -5,40 +5,300 @@
* to offer multiple easing options
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){"use strict";return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){"use strict";return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){"use strict";return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){"use strict";return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){"use strict";return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){"use strict";return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){"use strict";return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){"use strict";return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){"use strict";return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){"use strict";if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){"use strict";return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){"use strict";return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){"use strict";return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){"use strict";if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){"use strict";if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
*/
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
def: "easeOutQuad",
swing: function (e, f, a, h, g) {
"use strict";
return jQuery.easing[jQuery.easing.def](e, f, a, h, g);
},
easeInQuad: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f + a;
},
easeOutQuad: function (e, f, a, h, g) {
"use strict";
return -h * (f /= g) * (f - 2) + a;
},
easeInOutQuad: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f + a;
}
return (-h / 2) * (--f * (f - 2) - 1) + a;
},
easeInCubic: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f * f + a;
},
easeOutCubic: function (e, f, a, h, g) {
"use strict";
return h * ((f = f / g - 1) * f * f + 1) + a;
},
easeInOutCubic: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f * f + a;
}
return (h / 2) * ((f -= 2) * f * f + 2) + a;
},
easeInQuart: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f * f * f + a;
},
easeOutQuart: function (e, f, a, h, g) {
"use strict";
return -h * ((f = f / g - 1) * f * f * f - 1) + a;
},
easeInOutQuart: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f * f * f + a;
}
return (-h / 2) * ((f -= 2) * f * f * f - 2) + a;
},
easeInQuint: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f * f * f * f + a;
},
easeOutQuint: function (e, f, a, h, g) {
"use strict";
return h * ((f = f / g - 1) * f * f * f * f + 1) + a;
},
easeInOutQuint: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f * f * f * f + a;
}
return (h / 2) * ((f -= 2) * f * f * f * f + 2) + a;
},
easeInSine: function (e, f, a, h, g) {
"use strict";
return -h * Math.cos((f / g) * (Math.PI / 2)) + h + a;
},
easeOutSine: function (e, f, a, h, g) {
"use strict";
return h * Math.sin((f / g) * (Math.PI / 2)) + a;
},
easeInOutSine: function (e, f, a, h, g) {
"use strict";
return (-h / 2) * (Math.cos((Math.PI * f) / g) - 1) + a;
},
easeInExpo: function (e, f, a, h, g) {
"use strict";
return f == 0 ? a : h * Math.pow(2, 10 * (f / g - 1)) + a;
},
easeOutExpo: function (e, f, a, h, g) {
"use strict";
return f == g ? a + h : h * (-Math.pow(2, (-10 * f) / g) + 1) + a;
},
easeInOutExpo: function (e, f, a, h, g) {
"use strict";
if (f == 0) {
return a;
}
if (f == g) {
return a + h;
}
if ((f /= g / 2) < 1) {
return (h / 2) * Math.pow(2, 10 * (f - 1)) + a;
}
return (h / 2) * (-Math.pow(2, -10 * --f) + 2) + a;
},
easeInCirc: function (e, f, a, h, g) {
"use strict";
return -h * (Math.sqrt(1 - (f /= g) * f) - 1) + a;
},
easeOutCirc: function (e, f, a, h, g) {
"use strict";
return h * Math.sqrt(1 - (f = f / g - 1) * f) + a;
},
easeInOutCirc: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (-h / 2) * (Math.sqrt(1 - f * f) - 1) + a;
}
return (h / 2) * (Math.sqrt(1 - (f -= 2) * f) + 1) + a;
},
easeInElastic: function (f, h, e, l, k) {
"use strict";
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e;
}
if ((h /= k) == 1) {
return e + l;
}
if (!j) {
j = k * 0.3;
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4;
} else {
var i = (j / (2 * Math.PI)) * Math.asin(l / g);
}
return (
-(
g *
Math.pow(2, 10 * (h -= 1)) *
Math.sin(((h * k - i) * (2 * Math.PI)) / j)
) + e
);
},
easeOutElastic: function (f, h, e, l, k) {
"use strict";
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e;
}
if ((h /= k) == 1) {
return e + l;
}
if (!j) {
j = k * 0.3;
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4;
} else {
var i = (j / (2 * Math.PI)) * Math.asin(l / g);
}
return (
g * Math.pow(2, -10 * h) * Math.sin(((h * k - i) * (2 * Math.PI)) / j) +
l +
e
);
},
easeInOutElastic: function (f, h, e, l, k) {
"use strict";
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e;
}
if ((h /= k / 2) == 2) {
return e + l;
}
if (!j) {
j = k * (0.3 * 1.5);
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4;
} else {
var i = (j / (2 * Math.PI)) * Math.asin(l / g);
}
if (h < 1) {
return (
-0.5 *
(g *
Math.pow(2, 10 * (h -= 1)) *
Math.sin(((h * k - i) * (2 * Math.PI)) / j)) +
e
);
}
return (
g *
Math.pow(2, -10 * (h -= 1)) *
Math.sin(((h * k - i) * (2 * Math.PI)) / j) *
0.5 +
l +
e
);
},
easeInBack: function (e, f, a, i, h, g) {
"use strict";
if (g == undefined) {
g = 1.70158;
}
return i * (f /= h) * f * ((g + 1) * f - g) + a;
},
easeOutBack: function (e, f, a, i, h, g) {
"use strict";
if (g == undefined) {
g = 1.70158;
}
return i * ((f = f / h - 1) * f * ((g + 1) * f + g) + 1) + a;
},
easeInOutBack: function (e, f, a, i, h, g) {
"use strict";
if (g == undefined) {
g = 1.70158;
}
if ((f /= h / 2) < 1) {
return (i / 2) * (f * f * (((g *= 1.525) + 1) * f - g)) + a;
}
return (i / 2) * ((f -= 2) * f * (((g *= 1.525) + 1) * f + g) + 2) + a;
},
easeInBounce: function (e, f, a, h, g) {
"use strict";
return h - jQuery.easing.easeOutBounce(e, g - f, 0, h, g) + a;
},
easeOutBounce: function (e, f, a, h, g) {
"use strict";
if ((f /= g) < 1 / 2.75) {
return h * (7.5625 * f * f) + a;
} else {
if (f < 2 / 2.75) {
return h * (7.5625 * (f -= 1.5 / 2.75) * f + 0.75) + a;
} else {
if (f < 2.5 / 2.75) {
return h * (7.5625 * (f -= 2.25 / 2.75) * f + 0.9375) + a;
} else {
return h * (7.5625 * (f -= 2.625 / 2.75) * f + 0.984375) + a;
}
}
}
},
easeInOutBounce: function (e, f, a, h, g) {
"use strict";
if (f < g / 2) {
return jQuery.easing.easeInBounce(e, f * 2, 0, h, g) * 0.5 + a;
}
return (
jQuery.easing.easeOutBounce(e, f * 2 - g, 0, h, g) * 0.5 + h * 0.5 + a
);
},
});

File diff suppressed because one or more lines are too long

5603
assets/js/jquery.min.js vendored

File diff suppressed because one or more lines are too long

View file

@ -1,208 +1,217 @@
/* Description: Custom JS file */
(function ($) {
"use strict";
(function($) {
"use strict";
/* Navbar Scripts */
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 600, 'easeInOutExpo');
event.preventDefault();
});
/* Navbar Scripts */
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function () {
$(document).on("click", "a.page-scroll", function (event) {
var $anchor = $(this);
$("html, body")
.stop()
.animate(
{
scrollTop: $($anchor.attr("href")).offset().top,
},
600,
"easeInOutExpo",
);
event.preventDefault();
});
});
// offcanvas script from Bootstrap + added element to close menu on click in small viewport
$('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on('click', function () {
$('.offcanvas-collapse').toggleClass('open')
})
// offcanvas script from Bootstrap + added element to close menu on click in small viewport
$('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on(
"click",
function () {
$(".offcanvas-collapse").toggleClass("open");
},
);
// hover in desktop mode
function toggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);
// hover in desktop mode
function toggleDropdown(e) {
const _d = $(e.target).closest(".dropdown"),
_m = $(".dropdown-menu", _d);
setTimeout(
function () {
const shouldOpen = e.type !== "click" && _d.is(":hover");
_m.toggleClass("show", shouldOpen);
_d.toggleClass("show", shouldOpen);
$('[data-toggle="dropdown"]', _d).attr("aria-expanded", shouldOpen);
},
e.type === "mouseleave" ? 300 : 0,
);
}
$("body")
.on("mouseenter mouseleave", ".dropdown", toggleDropdown)
.on("click", ".dropdown-menu a", toggleDropdown);
/* Header Slider - Swiper */
var headerSlider = new Swiper(".header-slider", {
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
loop: true,
effect: "fade",
speed: 700,
});
/* Header Slider - Swiper */
var headerSlider = new Swiper('.header-slider', {
autoplay: {
delay: 3500,
disableOnInteraction: false
},
loop: true,
effect: "fade",
speed: 700
});
/* Image Slider - Swiper */
var imageSlider = new Swiper('.image-slider', {
autoplay: {
delay: 3000,
disableOnInteraction: false
},
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
/* Image Slider - Swiper */
var imageSlider = new Swiper(".image-slider", {
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: false,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 3,
spaceBetween: 20,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1,
},
// when window is <= 991px
991: {
slidesPerView: 2,
spaceBetween: 10,
},
// when window is <= 1199px
1199: {
slidesPerView: 3,
spaceBetween: 20,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1
},
// when window is <= 991px
991: {
slidesPerView: 2,
spaceBetween: 10
},
// when window is <= 1199px
1199: {
slidesPerView: 3,
spaceBetween: 20
},
}
},
},
});
/* Image Slider Room - Swiper */
var imageSlider = new Swiper(".image-slider-room", {
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: false,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
/* Card Slider - Swiper */
var cardSlider = new Swiper(".card-slider", {
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 3,
spaceBetween: 30,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1,
},
// when window is <= 991px
991: {
slidesPerView: 2,
},
},
});
/* Image Lightbox - Magnific Popup */
$(".popup-link").magnificPopup({
removalDelay: 300,
type: "image",
callbacks: {
beforeOpen: function () {
this.st.image.markup = this.st.image.markup.replace(
"mfp-figure",
"mfp-figure " + this.st.el.attr("data-effect"),
);
},
beforeClose: function () {
$(".mfp-figure").addClass("fadeOut");
},
},
gallery: {
enabled: true, //enable gallery mode
},
});
/* Details Lightbox - Magnific Popup */
$(".popup-with-move-anim").magnificPopup({
type: "inline",
fixedContentPos: true,
fixedBgPos: true,
overflowY: "auto",
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: "my-mfp-slide-bottom",
});
/* Move Form Fields Label When User Types */
// for input and textarea fields
$("input, textarea").keyup(function () {
if ($(this).val() != "") {
$(this).addClass("notEmpty");
} else {
$(this).removeClass("notEmpty");
}
});
/* Datepicker - Bootstrap Datepicker */
$("#start").datepicker({
todayHighlight: true,
autoclose: true,
format: "MM/dd/yyyy",
});
// detects change to selected date to keep the label above the value in the input field
$("#start")
.datepicker()
.on("changeDate", function (e) {
$("input[id=start]").addClass("notEmpty");
});
$("#end").datepicker({
autoclose: true,
format: "MM/dd/yyyy",
});
/* Image Slider Room - Swiper */
var imageSlider = new Swiper('.image-slider-room', {
autoplay: {
delay: 3000,
disableOnInteraction: false
},
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
/* Card Slider - Swiper */
var cardSlider = new Swiper('.card-slider', {
autoplay: {
delay: 4000,
disableOnInteraction: false
},
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
slidesPerView: 3,
spaceBetween: 30,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1
},
// when window is <= 991px
991: {
slidesPerView: 2
}
}
// detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
$("#end")
.datepicker()
.on("changeDate", function (e) {
$("input[id=end]").addClass("notEmpty");
});
/* Back To Top Button */
// create the back to top button
$("body").prepend(
'<a href="body" class="back-to-top page-scroll">Back to Top</a>',
);
var amountScrolled = 700;
$(window).scroll(function () {
if ($(window).scrollTop() > amountScrolled) {
$("a.back-to-top").fadeIn("500");
} else {
$("a.back-to-top").fadeOut("500");
}
});
/* Image Lightbox - Magnific Popup */
$('.popup-link').magnificPopup({
removalDelay: 300,
type: 'image',
callbacks: {
beforeOpen: function() {
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure ' + this.st.el.attr('data-effect'));
},
beforeClose: function() {
$('.mfp-figure').addClass('fadeOut');
}
},
gallery:{
enabled:true //enable gallery mode
}
});
/* Details Lightbox - Magnific Popup */
$('.popup-with-move-anim').magnificPopup({
type: 'inline',
fixedContentPos: true,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
/* Move Form Fields Label When User Types */
// for input and textarea fields
$("input, textarea").keyup(function(){
if ($(this).val() != '') {
$(this).addClass('notEmpty');
} else {
$(this).removeClass('notEmpty');
}
});
/* Datepicker - Bootstrap Datepicker */
$('#start').datepicker({
todayHighlight: true,
autoclose: true,
format: 'MM/dd/yyyy',
});
// detects change to selected date to keep the label above the value in the input field
$('#start').datepicker().on('changeDate', function(e) {
$("input[id=start]").addClass('notEmpty');
});
$('#end').datepicker({
autoclose: true,
format: 'MM/dd/yyyy'
});
// detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
$('#end').datepicker().on('changeDate', function(e) {
$("input[id=end]").addClass('notEmpty');
});
/* Back To Top Button */
// create the back to top button
$('body').prepend('<a href="body" class="back-to-top page-scroll">Back to Top</a>');
var amountScrolled = 700;
$(window).scroll(function() {
if ($(window).scrollTop() > amountScrolled) {
$('a.back-to-top').fadeIn('500');
} else {
$('a.back-to-top').fadeOut('500');
}
});
/* Removes Long Focus On Buttons */
$(".button, a, button").mouseup(function() {
$(this).blur();
});
})(jQuery);
/* Removes Long Focus On Buttons */
$(".button, a, button").mouseup(function () {
$(this).blur();
});
})(jQuery);

6495
assets/js/swiper.min.js vendored

File diff suppressed because one or more lines are too long

View file

@ -1,24 +1,31 @@
# Website Revamp Specification (WIP)
- Branch: `revamp/website-spec`
- Business Goal: Improve design to attract more customers and increase conversion rate.
- Business Goal: Improve design to attract more customers and increase conversion
rate.
- Primary Conversion: Submit a reservation request (inquiry form).
- Secondary Actions: Highlight availability on Booking.com and Airbnb with badges/links.
- Booking.com: https://www.booking.com/hotel/gp/villafleurie.fr.html
- Airbnb (T2): https://airbnb.fr/h/villafleurie-t2
- Airbnb (T3): https://airbnb.fr/h/villafleurie-t3
- Availability Flow: Inquiry form via Netlify Forms; manual confirmation (no live calendar sync).
- Booking.com: <https://www.booking.com/hotel/gp/villafleurie.fr.html>
- Airbnb (T2): <https://airbnb.fr/h/villafleurie-t2>
- Airbnb (T3): <https://airbnb.fr/h/villafleurie-t3>
- Availability Flow: Inquiry form via Netlify Forms; manual confirmation
(no live calendar sync).
- Audience: Small families and couples.
- Languages: French and English (FR/EN).
## Internationalization
- URL structure: folder-based `/fr/...` and `/en/...`.
- Default language: FR. Root `/` redirects to `/fr/`.
- Language toggle: visible in navbar; links to the sibling page (`/fr/x` ↔ `/en/x`), fallback to home if missing.
- SEO: set `<html lang>`, `hreflang` alternates, localized titles/descriptions; separate sitemap entries per locale.
- Tech note: update generator to support nested templates (e.g., `pages/fr/*.html`, `pages/en/*.html`) and preserve subdirectories in `dist/`.
- Language toggle: visible in navbar; links to the sibling page
(`/fr/x` ↔ `/en/x`), fallback to home if missing.
- SEO: set `<html lang>`, `hreflang` alternates, localized titles/descriptions;
separate sitemap entries per locale.
- Tech note: update generator to support nested templates
(e.g., `pages/fr/*.html`, `pages/en/*.html`) and preserve subdirectories in `dist/`.
## Sitemap
- Home: Hero, value proposition, lead form (primary CTA), Booking/Airbnb badges.
- Apartments (overview): Grid of units with quick facts and CTAs.
- T2 Corail: Details, amenities, gallery, inquiry CTA.
@ -32,39 +39,59 @@
- Footer: Language toggle (FR/EN), Privacy, Terms.
## Tech Stack
- Framework: Astro (static output).
- Styling: Tailwind CSS (utility-first); map brand tokens in config.
- JS: Vanilla JS only (no jQuery). Use lightweight, dependency-free components.
- Components: reuse existing HTML/CSS/JS where useful; migrate to `.astro` with Tailwind classes.
- Libraries: no Bootstrap, no Magnific. Static hero (no Swiper). Lightweight lightbox for gallery (vanilla, no jQuery).
- Components: reuse existing HTML/CSS/JS where useful; migrate to `.astro` with
Tailwind classes.
- Libraries: no Bootstrap, no Magnific. Static hero (no Swiper). Lightweight
lightbox for gallery (vanilla, no jQuery).
- Hosting: Netlify (static deploys).
- Forms: Netlify Forms for reservation inquiries.
## Analytics & Events
- Provider: Plausible (domain: `villafleuriegp.com`).
- Primary events: `booking_request_submitted`, `click_airbnb`, `click_booking`.
- Secondary events: `click_call`, `click_email`.
- Event properties: `locale` (fr/en), `page` (e.g., home, apartment), `apartment` (t2/t3/na), `position` (navbar/hero/footer/section).
- Implementation: use `plausible("event", {props})` on CTA clicks and after successful form submit; retain outbound-link tracking for platform links.
- Event properties: `locale` (fr/en), `page` (e.g., home, apartment),
`apartment` (t2/t3/na), `position` (navbar/hero/footer/section).
- Implementation: use `plausible("event", {props})` on CTA clicks and after
successful form submit; retain outbound-link tracking for platform links.
## Release Plan
- Phase 1 (FR Core): Home, Appartements (T2/T3 pages), Reviews, Location & Access, Contact (inquiry form), Rates (flat pricing + links), footer legal links pointing to placeholders.
- Phase 2 (EN + Media): EN translations for all Phase 1 pages, Gallery (standalone + perapartment minigalleries), translated reviews on EN pages.
- Phase 3 (Policies + Analytics + Perf): French policy pages (Terms, Privacy, Cancellation, House Rules), Plausible custom events, image optimizations (WebP/srcset), Lighthouse/perf pass, optional consent banner.
- Phase 1 (FR Core): Home, Appartements (T2/T3 pages), Reviews, Location & Access,
Contact (inquiry form), Rates (flat pricing + links), footer legal links pointing
to placeholders.
- Phase 2 (EN + Media): EN translations for all Phase 1 pages, Gallery (standalone
- perapartment minigalleries), translated reviews on EN pages.
- Phase 3 (Policies + Analytics + Perf): French policy pages (Terms, Privacy,
Cancellation, House Rules), Plausible custom events, image optimizations
(WebP/srcset), Lighthouse/perf pass, optional consent banner.
- Deploy: Netlify with preview deploys per PR; production on main branch.
## Timeline
- Phase 1 target: next week (FR core launch).
- Milestones: content freeze (T3), design QA + accessibility (T2), copy/links final check (T1), deploy + smoke test (T0).
- Milestones: content freeze (T3), design QA + accessibility (T2), copy/links
final check (T1), deploy + smoke test (T0).
## Branding
- Logo: `/assets/images/logo.png`
- Primary color: `#1EBBCE`
- Fonts: `/assets/webfonts` (use existing webfonts; confirm final pairing). Current template references Open Sans + PT Serif.
- Fonts: `/assets/webfonts` (use existing webfonts; confirm final pairing). Current
template references Open Sans + PT Serif.
- Secondary color: `#138A9A`
- Border radius: `rounded-lg` (0.5rem)
## Contact & CTAs
- Phone: `+33 6 58 96 12 79` (clicktocall link).
- Email: `location.villafleurie@gmail.com` (sitewide contact and form notifications).
- Navbar: show a prominent call button (icon + number) on mobile/desktop.
@ -74,7 +101,9 @@
- EN: "Send a Request"
## Apartments
### T2 Corail
- Max occupancy: 23 guests
- Ideal for: couples and small families (23)
- Size: 45 m²
@ -84,10 +113,13 @@
- Minimum stay: 3 nights
- Check-in/out: 14:00 / 11:00
- Highlight photos: TBD (610 featured images) — use placeholders until final selection
- Description FR: Idéal pour les couples, appartement chaleureux et cosy, à proximité des plages et des commerces.
- Description EN: Ideal for couples, a cozy and warm apartment close to beaches and shops.
- Description FR: Idéal pour les couples, appartement chaleureux et cosy, à
proximité des plages et des commerces.
- Description EN: Ideal for couples, a cozy and warm apartment close to beaches
and shops.
### T3 Azur
- Max occupancy: up to 4 guests
- Ideal for: couples and small families (up to 4)
- Size: 55 m²
@ -96,26 +128,38 @@
- House rules: same as T2 Corail
- Minimum stay: 3 nights
- Check-in/out: 14:00 / 11:00
- Highlight photos: TBD (610 featured images) — use placeholders until final selection
- Description FR: Idéal pour les familles, appartement spacieux avec deux lits queen, proche des plages et des commerces.
- Description EN: Perfect for families, a spacious apartment with two queen beds, close to beaches and shops.
- Highlight photos: TBD (610 featured images) — use placeholders until final
selection
- Description FR: Idéal pour les familles, appartement spacieux avec deux lits
queen, proche des plages et des commerces.
- Description EN: Perfect for families, a spacious apartment with two queen beds,
close to beaches and shops.
## Reservation Inquiry Form
- Required fields: full_name, email, arrival_date, departure_date, apartment (T2/T3), guests_adults, guests_children, consent_privacy.
- Required fields: full_name, email, arrival_date, departure_date, apartment (T2/T3),
guests_adults, guests_children, consent_privacy.
- Optional fields: phone, message.
- Validation: basic required checks, email format, arrival < departure.
- i18n: localized field labels and validation messages (FR/EN).
## Form Notifications & Auto-Reply
- Owner notifications: send all submissions to `location.villafleurie@gmail.com`.
- Auto-reply: enabled; send localized confirmation (FR/EN based on page locale).
- Auto-reply content: brief thank you, submitted details (dates, apartment, guests), expected reply time, and links to Booking.com/Airbnb for instant booking.
- Implementation: Netlify Forms + serverless email (provider TBD, recommendation: Resend) via submission-created function.
- Email details (TBD): sender name, from address (e.g., `noreply@villafleuriegp.com`), subject lines per locale.
- Post-submit redirect: Yes — `/fr/merci` and `/en/thank-you` with confirmation and next steps (Booking/Airbnb CTAs).
- Auto-reply content: brief thank you, submitted details (dates, apartment, guests),
expected reply time, and links to Booking.com/Airbnb for instant booking.
- Implementation: Netlify Forms + serverless email (provider TBD, recommendation:
Resend) via submission-created function.
- Email details (TBD): sender name, from address (e.g., `noreply@villafleuriegp.com`),
subject lines per locale.
- Post-submit redirect: Yes — `/fr/merci` and `/en/thank-you` with confirmation
and next steps (Booking/Airbnb CTAs).
## Booking Description / Rates Page
- Purpose: explain pricing model and availability options, then drive inquiry or instant booking.
- Purpose: explain pricing model and availability options, then drive inquiry or
instant booking.
- Content blocks:
- Pricing explainer (flat nightly rate per apartment; no seasonal pricing).
- Secondary CTAs: Booking.com and Airbnb links.
@ -124,86 +168,113 @@
- Privacy Policy (FR)
- Cancellation Policy (FR)
- House Rules (FR)
- Placement: terms section appears below pricing and CTAs as a concise block with 1line summaries + links.
- Placement: terms section appears below pricing and CTAs as a concise block with
1line summaries + links.
- URLs: TBD — define `/fr/...` pages only; English will link to the French policies.
### Pricing Details
- Model: Flat nightly rate per apartment (no seasonal pricing).
- T2 Corail nightly rate: 59 €.
- T3 Azur nightly rate: 79 €.
- Cleaning fee: 20 € if left dirty; free otherwise (per stay).
- Security deposit: none.
- Cancellation summary: 50% late cancellation fee (define late window in policy); link to full French policy.
- Cancellation summary: 50% fee for cancellations within 14 days of checkin; link to full French policy. Noshow treated as late cancellation.
- Cancellation summary: 50% late cancellation fee (define late window in policy);
link to full French policy.
- Cancellation summary: 50% fee for cancellations within 14 days of checkin;
link to full French policy. Noshow treated as late cancellation.
## Legal & Policies (FR only)
- Pages to create under FR namespace:
- Conditions Générales dUtilisation (CGU) / de Vente (CGV) — Terms
- Politique de Confidentialité — Privacy
- Politique dAnnulation — Cancellation
- Règlement Intérieur — House Rules
- Links: from Rates page and footer.
- Include: owner/legal entity details, address, contact email/phone, hosting provider (Netlify), analytics (Plausible) note, data rights (RGPD), and effective date.
- Drafting: assistant to provide concise templates tailored to current rules once legal details are confirmed.
- Include: owner/legal entity details, address, contact email/phone, hosting provider
(Netlify), analytics (Plausible) note, data rights (RGPD), and effective date.
- Drafting: assistant to provide concise templates tailored to current rules once
legal details are confirmed.
### Legal Entity Details
- Legal name: VillaFleurie (Jacques Gordien)
- Contact: location.villafleurie@gmail.com, +33 6 58 96 12 79
- Contact: <location.villafleurie@gmail.com>, +33 6 58 96 12 79
- Jurisdiction: France
- Hosting provider: Netlify
- Analytics: Plausible (privacyfriendly, no cookies by default)
- Company ID: SIRET/SIREN — TBD (provide if applicable)
## Home Page Copy (Initial)
- FR Headline: Séjours confortables au Gosier pour couples et petites familles
- FR Subheadline: Deux appartements lumineux, près des plages. Envoyez une demande ou réservez instantanément.
- FR Subheadline: Deux appartements lumineux, près des plages. Envoyez une demande
ou réservez instantanément.
- EN Headline: Comfortable stays in Le Gosier for couples and small families
- EN Subheadline: Two bright apartments near the beaches. Send a request or book instantly.
- EN Subheadline: Two bright apartments near the beaches. Send a request or book
instantly.
## Home Description Copy
- FR: Villa est un lieu de vacances unique situé sur le magnifique archipel de la Guadeloupe, prête à accueillir des touristes en quête de tranquillité tout au long de l'année.
- EN: Villa is a unique holiday retreat in the beautiful Guadeloupe archipelago, ready to welcome tranquilityseeking guests all year round.
- Images: `/assets/images/villafleurie_t2_salon_1_wl81yXI.jpg`, `/assets/images/villafleurie_t3_chambre.jpg`, `/assets/images/villafleurie_t2_terrasse.jpg`.
- FR: Villa est un lieu de vacances unique situé sur le magnifique archipel de
la Guadeloupe, prête à accueillir des touristes en quête de tranquillité
tout au long de l'année.
- EN: Villa is a unique holiday retreat in the beautiful Guadeloupe archipelago,
ready to welcome tranquilityseeking guests all year round.
- Images: `/assets/images/villafleurie_t2_salon_1_wl81yXI.jpg`,
`/assets/images/villafleurie_t3_chambre.jpg`, `/assets/images/villafleurie_t2_terrasse.jpg`.
## Home Hero
- Type: static image (no carousel).
- Image: `/assets/images/villafleurie_t2_salon_1_wl81yXI.jpg` (shared FR/EN).
- Overlay: localized headline, subheadline, primary CTA (inquiry), secondary Booking/Airbnb badges.
- Overlay: localized headline, subheadline, primary CTA (inquiry), secondary
Booking/Airbnb badges.
- Performance: responsive sizes, WebP preferred, lazyload below the fold.
## Home Page Sections (Order)
1) Description: brief intro copy (FR/EN) and 23 supporting images.
2) Facilities: showcase key amenities (icons + short labels).
3) Rooms Overview: cards for T2 Corail and T3 Azur with quick facts and CTAs.
4) Reviews: 68 curated quotes with star ratings and attribution.
5) Location & Access: map embed + address/GPS + parking note.
6) Footer: contact, quick links, legal.
1. Description: brief intro copy (FR/EN) and 23 supporting images.
2. Facilities: showcase key amenities (icons + short labels).
3. Rooms Overview: cards for T2 Corail and T3 Azur with quick facts and CTAs.
4. Reviews: 68 curated quotes with star ratings and attribution.
5. Location & Access: map embed + address/GPS + parking note.
6. Footer: contact, quick links, legal.
## Navigation
- Language toggle in navbar; legal links in footer.
- FR order: Accueil, Appartements, Galerie, Avis, Accès, Tarifs & Disponibilités, FAQ, Contact
- EN order: Home, Apartments, Gallery, Reviews, Location & Access, Rates & Availability, FAQ, Contact
- FR order: Accueil, Appartements, Galerie, Avis, Accès, Tarifs & Disponibilités,
FAQ, Contact
- EN order: Home, Apartments, Gallery, Reviews, Location & Access, Rates & Availability,
FAQ, Contact
## SEO
- Title format: "[Page Title] · VillaFleurie" (localized).
- Meta descriptions: custom per page (120160 chars), localized FR/EN.
- Open Graph/Twitter: default OG image at `/assets/images/og-default.jpg`; custom OG for Home and each Apartment.
- Open Graph/Twitter: default OG image at `/assets/images/og-default.jpg`; custom
OG for Home and each Apartment.
- Hreflang: cross-link FR/EN counterparts; `<html lang>` set per locale.
- Sitemap: include both locales; mark FR as default.
## Gallery
- Standalone page: lightbox grid of curated photos (2030 images max).
- Perapartment minigalleries: 610 highlight photos on each apartment page.
- Captions: Yes — localized FR/EN; concise (36 words), only when helpful.
- Attribution: optional small note when photos feature platform badges.
## Images & Performance
- Formats: generate WebP with JPG fallback.
- Responsive: provide `srcset` and appropriate `sizes` for hero, cards, and lightbox.
- Hero: prefetch/prioritize hero image; lazyload belowthefold assets.
- Naming: keep existing filenames; add `-webp` variants on build if we add a pipeline.
## FAQ
- Format: concise Q&A; FR primary, EN translated.
- Items (FR → EN to translate):
- Parking: « Parking gratuit et sécurisé sur place. »
@ -218,6 +289,7 @@
- Annulation: « Annulation tardive: 50% dans les 14 jours avant larrivée. »
### FAQ — EN Translations
- Parking: Free and secure parking on site.
- Beach: Beach 10 minutes' walk away.
- Rules: No smoking, no parties, no pets.
@ -228,7 +300,9 @@
- Minimum stay: 3 nights minimum.
- WiFi: Fast, reliable WiFi.
- Cancellation: Late cancellation: 50% fee within 14 days of arrival.
## Facilities (Icons & Labels)
- AC
- Icon: `fa-solid fa-snowflake`
- FR: "Climatisation"
@ -263,25 +337,31 @@
- EN: "Familyfriendly"
## Location & Access
- Map: Google Maps embed iframe using provided URL.
- Embed src: https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3831.2598078323063!2d-61.48991482394046!3d16.20707768449259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c134f148764f5d5%3A0x981bb218cee8b16c!2sVillaFleurie!5e0!3m2!1sfr!2sde!4v1685258248016!5m2!1sfr!2sde
- Embed src: <https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3831.2598078323063!2d-61.48991482394046!3d16.20707768449259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c134f148764f5d5%3A0x981bb218cee8b16c!2sVillaFleurie!5e0!3m2!1sfr!2sde!4v1685258248016!5m2!1sfr!2sde>
- Address: 4 rue Gerty Archimède, 97190 Le Gosier (localized FR/EN label).
- GPS: 16.207078, -61.489915 (rounded from embed URL) — display optionally.
- Parking: secured onsite parking (align copy with amenities).
### Badge Labels
- FR: "Réserver sur Booking.com", "Réserver sur Airbnb (T2)", "Réserver sur Airbnb (T3)"
- EN: "Book on Booking.com", "Book on Airbnb (T2)", "Book on Airbnb (T3)"
## Notes
- Keep one primary CTA per page; Booking/Airbnb links as secondary actions.
- This document will evolve iteratively as we refine requirements.
## Reviews
- Source: curated from Booking.com; raw dataset captured at `docs/spec/data/reviews-raw.txt`.
- Display: show 610 highlight quotes with name, country, date, rating (converted to 5-star), short excerpt, and “from Booking.com” attribution.
- i18n: Translate reviews on EN pages; show originals on FR pages. Include a small “translated from {language}” note where applicable. Prefer curated/manual translations for accuracy.
- i18n: Translate reviews on EN pages; show originals on FR pages. Include a small “translated from {language}” note where applicable. Prefer curated/manual translations for accuracy.
## Apartments Overview Cards
- Each card shows: size (m²), max guests, bed setup, 34 key amenity icons, nightly rate (shown), and primary CTA.
- Currency: EUR (€).
- T2 Corail quick facts: 45 m²; 23 guests; 1 queen + sofabed; AC, WiFi, kitchen, parking; 59 €/night.

View file

@ -6,7 +6,8 @@
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
"astro": "astro",
"format": "prettier -wl ."
},
"dependencies": {
"@tailwindcss/vite": "^4.1.13",
@ -14,5 +15,9 @@
"lucide-astro": "^0.542.0",
"tailwindcss": "^4.1.13"
},
"packageManager": "pnpm@10.15.1"
"packageManager": "pnpm@10.15.1",
"devDependencies": {
"prettier": "^3.6.2",
"prettier-plugin-tailwindcss": "^0.6.14"
}
}

View file

@ -1,85 +1,136 @@
{% extends "layouts/layout.html" %}
{% block content %}
{% extends "layouts/layout.html" %} {% block content %}
<!-- Header -->
<header class="ex-header bg-gray">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Nous contacter</h1>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</header> <!-- end of ex-header -->
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Nous contacter</h1>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</header>
<!-- end of ex-header -->
<!-- end of header -->
<!-- Form -->
<div class="ex-form-1 bg-gray pb-6">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<p class="mb-5">Voici l'occasion de nous contacter si vous êtes à la recherche d'une location capable
d'offrir une expérience étonnante en termes de confort et de détente <a
href="mailto:location.villafleurie@gmail.com">location.villafleurie@gmail.com</a> ou
appelez-nous quand vous le pouvez <a href="tel:+33658961279">+33 6 58 96 12 79</a>.</p>
<p>
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<p class="mb-5">
Voici l'occasion de nous contacter si vous êtes à la recherche d'une
location capable d'offrir une expérience étonnante en termes de
confort et de détente
<a href="mailto:location.villafleurie@gmail.com"
>location.villafleurie@gmail.com</a
>
ou appelez-nous quand vous le pouvez
<a href="tel:+33658961279">+33 6 58 96 12 79</a>.
</p>
<p>
<!-- Contact Form -->
</p>
<!-- Contact Form -->
<form id="contactForm" name="contactForm" data-toggle="validator" data-focus="false" method="post"
action="/reservation.html" netlify>
<div class="form-group">
<input type="text" class="form-control-input" id="cname" name="name" required>
<label class="label-control" for="cname">Nom complet</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input type="email" class="form-control-input" id="cemail" name="email" required>
<label class="label-control" for="cemail">Email</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<textarea class="form-control-textarea" id="cmessage" name="message" required></textarea>
<label class="label-control" for="cmessage">Votre message</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="form-control-submit-button">Envoyer</button>
</div>
<div class="form-message">
<div id="cmsgSubmit" class="h3 text-center hidden"></div>
</div>
</form>
<!-- end of contact form -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-form-1 -->
<form
id="contactForm"
name="contactForm"
data-toggle="validator"
data-focus="false"
method="post"
action="/reservation.html"
netlify
>
<div class="form-group">
<input
type="text"
class="form-control-input"
id="cname"
name="name"
required
/>
<label class="label-control" for="cname">Nom complet</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input
type="email"
class="form-control-input"
id="cemail"
name="email"
required
/>
<label class="label-control" for="cemail">Email</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<textarea
class="form-control-textarea"
id="cmessage"
name="message"
required
></textarea>
<label class="label-control" for="cmessage">Votre message</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="form-control-submit-button">
Envoyer
</button>
</div>
<div class="form-message">
<div id="cmsgSubmit" class="h3 text-center hidden"></div>
</div>
</form>
<!-- end of contact form -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-form-1 -->
<!-- end of form -->
<!-- Basic -->
<div class="ex-basic-1 pt-5">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Où nous trouver</h2>
<p class="mb-5">Notre mission à VillaFleurie est de nous concentrer sur tous les détails pour faire de
votre séjour une expérience extraordinaire. une expérience inoubliable. Nous avons formé notre
personnel pour qu'il réponde à vos attentes et les dépasse, afin que votre expérience à la
VillaFleurie ne soit pas un simple souvenir, mais l'un de vos meilleurs souvenirs.
Nous sommes passionnés et nous ne vous décevrons pas.</p>
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Où nous trouver</h2>
<p class="mb-5">
Notre mission à VillaFleurie est de nous concentrer sur tous les
détails pour faire de votre séjour une expérience extraordinaire. une
expérience inoubliable. Nous avons formé notre personnel pour qu'il
réponde à vos attentes et les dépasse, afin que votre expérience à la
VillaFleurie ne soit pas un simple souvenir, mais l'un de vos
meilleurs souvenirs. Nous sommes passionnés et nous ne vous décevrons
pas.
</p>
<div class="map-responsive mb-5">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3831.2598078323063!2d-61.48991482394046!3d16.20707768449259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c134f148764f5d5%3A0x981bb218cee8b16c!2sVillaFleurie!5e0!3m2!1sfr!2sde!4v1685258248016!5m2!1sfr!2sde"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="map-responsive mb-5">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3831.2598078323063!2d-61.48991482394046!3d16.20707768449259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c134f148764f5d5%3A0x981bb218cee8b16c!2sVillaFleurie!5e0!3m2!1sfr!2sde!4v1685258248016!5m2!1sfr!2sde"
width="600"
height="450"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</div>
<a class="btn-solid-reg mb-6" href="index.html#header">Réserver</a>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<a class="btn-solid-reg mb-6" href="index.html#header">Réserver</a>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
{% endblock %}

File diff suppressed because it is too large Load diff

View file

@ -239,4 +239,3 @@
<!-- Custom scripts -->
</body>
</html>

View file

@ -1,14 +1,19 @@
{% extends "layouts/layout.html" %}
{% block content %}
{% extends "layouts/layout.html" %} {% block content %}
<!-- Header -->
<header class="ex-header bg-gray">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Merci pour votre message. Nous vous recontactons dès que possible.</h1>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</header> <!-- end of ex-header -->
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">
Merci pour votre message. Nous vous recontactons dès que possible.
</h1>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</header>
<!-- end of ex-header -->
<!-- end of header -->
{% endblock %}

View file

@ -1,163 +1,216 @@
{% extends "layouts/layout.html" %}
{% block content %}
{% extends "layouts/layout.html" %} {% block content %}
<!-- Header -->
<header class="ex-header bg-gray">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">T2 Corail - 59€/nuit</h1>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</header> <!-- end of ex-header -->
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">T2 Corail - 59€/nuit</h1>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</header>
<!-- end of ex-header -->
<!-- end of header -->
<!-- Basic -->
<div class="ex-basic-1 bg-gray pb-6">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Image Slider Room -->
<div class="slider-container">
<div class="swiper-container image-slider-room">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="../images/villafleurie_t2_chambre.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="../images/villafleurie_t2_chambre.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
<!-- Image Slider Room -->
<div class="slider-container">
<div class="swiper-container image-slider-room">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="../images/villafleurie_t2_chambre_2.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="../images/villafleurie_t2_chambre_2.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="../images/villafleurie_t2_chambre.jpg"
data-effect="fadeIn"><img
class="img-fluid" src="../images/villafleurie_t2_chambre.jpg"
alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="../images/villafleurie_t2_salon_1_wl81yXI.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="../images/villafleurie_t2_salon_1_wl81yXI.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="../images/villafleurie_t2_salon_2.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="../images/villafleurie_t2_salon_2.jpg"
alt="alternative"
/></a>
</div>
</div>
</div>
<!-- end of swiper-wrapper -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="../images/villafleurie_t2_chambre_2.jpg"
data-effect="fadeIn"><img
class="img-fluid" src="../images/villafleurie_t2_chambre_2.jpg"
alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="../images/villafleurie_t2_salon_1_wl81yXI.jpg"
data-effect="fadeIn"><img
class="img-fluid" src="../images/villafleurie_t2_salon_1_wl81yXI.jpg"
alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="../images/villafleurie_t2_salon_2.jpg"
data-effect="fadeIn"><img
class="img-fluid" src="../images/villafleurie_t2_salon_2.jpg"
alt="alternative"></a>
</div>
</div>
</div> <!-- end of swiper-wrapper -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- end of add arrows -->
</div> <!-- end of swiper container -->
</div> <!-- end of slider-container -->
<!-- end of image slider -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- end of add arrows -->
</div>
<!-- end of swiper container -->
</div>
<!-- end of slider-container -->
<!-- end of image slider -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Basic -->
<div class="ex-basic-1 pt-5">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Description</h2>
<p class="mb-5">Chacune des chambres de la VillaFleurie a été conçue pour offrir la meilleure expérience
possible à de nombreux voyageurs, qu'ils soient à la recherche d'aventure ou qu'ils apprécient le
confort. Nous avons conçu les chambres en nous appuyant sur plus de 10 ans d'expérience et toute
l'équipe est très fière de ce que nous avons réalisé.</p>
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Description</h2>
<p class="mb-5">
Chacune des chambres de la VillaFleurie a été conçue pour offrir la
meilleure expérience possible à de nombreux voyageurs, qu'ils soient à
la recherche d'aventure ou qu'ils apprécient le confort. Nous avons
conçu les chambres en nous appuyant sur plus de 10 ans d'expérience et
toute l'équipe est très fière de ce que nous avons réalisé.
</p>
<div class="text-box mb-6">
<h3>Des chambres conçues pour le confort et la détente</h3>
<p>Les chambres sont conçues pour offrir les meilleurs niveaux possibles de confort et de
relaxation. Le design contemporain est basé sur des couleurs réconfortantes et parvient à plaire
à de nombreux types de personnalités. Les matériaux utilisés sont modernes et durables.</p>
</div> <!-- end of text-box -->
<div class="text-box mb-6">
<h3>Des chambres conçues pour le confort et la détente</h3>
<p>
Les chambres sont conçues pour offrir les meilleurs niveaux
possibles de confort et de relaxation. Le design contemporain est
basé sur des couleurs réconfortantes et parvient à plaire à de
nombreux types de personnalités. Les matériaux utilisés sont
modernes et durables.
</p>
</div>
<!-- end of text-box -->
<ul class="list-unstyled list-icon-lg mb-5">
<li class="media">
<div class="list-icon bg-1">
<i class="fas fa-shower"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Aménagements modernes</h3>
<p class="list-item-text">Les équipements et les chambres de VillaFleurie sont conçus pour
offrir les meilleurs niveaux possibles de confort et de relaxation. Le design est
contemporain, basé sur des couleurs réconfortantes, et parvient à séduire de nombreux
types de personnalités et de goûts. Les matériaux utilisés dans la
construction de VillaFleurie proviennent des meilleurs fournisseurs.</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-2">
<i class="fas fa-tv"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Appareils électroménagers de qualité</h3>
<p class="list-item-text">Toute l'électronique est fonctionnelle et conçue pour offrir les
meilleurs niveaux de confort et de relaxation. Le design est contemporain, basé sur des
couleurs réconfortantes et parvient à séduire de nombreux types de personnalités et de
goûts. L'objectif principal de tous les appareils est d'offrir un grand confort à
l'intérieur.</p>
</div>
</li>
</ul> <!-- end of list-unstyled -->
<ul class="list-unstyled list-icon-lg mb-5">
<li class="media">
<div class="list-icon bg-1">
<i class="fas fa-shower"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Aménagements modernes</h3>
<p class="list-item-text">
Les équipements et les chambres de VillaFleurie sont conçus pour
offrir les meilleurs niveaux possibles de confort et de
relaxation. Le design est contemporain, basé sur des couleurs
réconfortantes, et parvient à séduire de nombreux types de
personnalités et de goûts. Les matériaux utilisés dans la
construction de VillaFleurie proviennent des meilleurs
fournisseurs.
</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-2">
<i class="fas fa-tv"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">
Appareils électroménagers de qualité
</h3>
<p class="list-item-text">
Toute l'électronique est fonctionnelle et conçue pour offrir les
meilleurs niveaux de confort et de relaxation. Le design est
contemporain, basé sur des couleurs réconfortantes et parvient à
séduire de nombreux types de personnalités et de goûts.
L'objectif principal de tous les appareils est d'offrir un grand
confort à l'intérieur.
</p>
</div>
</li>
</ul>
<!-- end of list-unstyled -->
<p class="mb-4">D'autres caractéristiques ont été conçues pour offrir les meilleurs niveaux possibles de
confort et de relaxation. Le design contemporain basé sur des couleurs réconfortantes et parvient à
séduire de nombreux types de personnalités et de goûts. Les matériaux utilisés dans la
construction de la villa sont modernes et durables.</p>
<p class="mb-4">
D'autres caractéristiques ont été conçues pour offrir les meilleurs
niveaux possibles de confort et de relaxation. Le design contemporain
basé sur des couleurs réconfortantes et parvient à séduire de nombreux
types de personnalités et de goûts. Les matériaux utilisés dans la
construction de la villa sont modernes et durables.
</p>
<ul class="list-unstyled li-space-lg amenities mb-5">
<li class="media">
<i class="fas fa-shower"></i>
<div class="media-body"><strong>Réserve d'eau</strong> VillaFleurie est équipée d'une réserve
d'eau permettant de ne pas se soucier des éventuelles coupures d'eau
</div>
</li>
<li class="media">
<i class="fas fa-tv"></i>
<div class="media-body"><strong>TV LCD moderne</strong> pour les jours de pluie qu'il faut
passer à l'intérieur.
</div>
</li>
<li class="media">
<i class="fas fa-snowflake"></i>
<div class="media-body"><strong>Climatisation</strong> de pointe spécialement conçue pour créer
une température optimale
</div>
</li>
</ul>
<a class="btn-solid-reg mb-6" href="index.html">Réserver</a>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<ul class="list-unstyled li-space-lg amenities mb-5">
<li class="media">
<i class="fas fa-shower"></i>
<div class="media-body">
<strong>Réserve d'eau</strong> VillaFleurie est équipée d'une
réserve d'eau permettant de ne pas se soucier des éventuelles
coupures d'eau
</div>
</li>
<li class="media">
<i class="fas fa-tv"></i>
<div class="media-body">
<strong>TV LCD moderne</strong> pour les jours de pluie qu'il faut
passer à l'intérieur.
</div>
</li>
<li class="media">
<i class="fas fa-snowflake"></i>
<div class="media-body">
<strong>Climatisation</strong> de pointe spécialement conçue pour
créer une température optimale
</div>
</li>
</ul>
<a class="btn-solid-reg mb-6" href="index.html">Réserver</a>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
{% endblock %}

View file

@ -1,156 +1,203 @@
{% extends "layouts/layout.html" %}
{% block content %}
{% extends "layouts/layout.html" %} {% block content %}
<!-- Header -->
<header class="ex-header bg-gray">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">T3 Azur - 79€/nuit</h1>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</header> <!-- end of ex-header -->
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">T3 Azur - 79€/nuit</h1>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</header>
<!-- end of ex-header -->
<!-- end of header -->
<!-- Basic -->
<div class="ex-basic-1 bg-gray pb-6">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Image Slider Room -->
<div class="slider-container">
<div class="swiper-container image-slider-room">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="../images/villafleurie_t3_chambre.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="../images/villafleurie_t3_chambre.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
<!-- Image Slider Room -->
<div class="slider-container">
<div class="swiper-container image-slider-room">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="../images/villafleurie_t3_salon.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="../images/villafleurie_t3_salon.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="../images/villafleurie_t3_chambre.jpg"
data-effect="fadeIn"><img class="img-fluid"
src="../images/villafleurie_t3_chambre.jpg"
alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="../images/villafleurie_t3_cuisine.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="../images/villafleurie_t3_cuisine.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
</div>
<!-- end of swiper-wrapper -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="../images/villafleurie_t3_salon.jpg"
data-effect="fadeIn"><img class="img-fluid"
src="../images/villafleurie_t3_salon.jpg"
alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="../images/villafleurie_t3_cuisine.jpg"
data-effect="fadeIn"><img class="img-fluid"
src="../images/villafleurie_t3_cuisine.jpg"
alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
</div> <!-- end of swiper-wrapper -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- end of add arrows -->
</div> <!-- end of swiper container -->
</div> <!-- end of slider-container -->
<!-- end of image slider -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- end of add arrows -->
</div>
<!-- end of swiper container -->
</div>
<!-- end of slider-container -->
<!-- end of image slider -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Basic -->
<div class="ex-basic-1 pt-5">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Description</h2>
<p class="mb-5">Chacune des chambres de la VillaFleurie a été conçue pour offrir la meilleure expérience
possible à de nombreux voyageurs, qu'ils soient à la recherche d'aventure ou qu'ils apprécient le
confort. Nous avons conçu les chambres en nous appuyant sur plus de 10 ans d'expérience et toute
l'équipe est très fière de ce que nous avons réalisé.</p>
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Description</h2>
<p class="mb-5">
Chacune des chambres de la VillaFleurie a été conçue pour offrir la
meilleure expérience possible à de nombreux voyageurs, qu'ils soient à
la recherche d'aventure ou qu'ils apprécient le confort. Nous avons
conçu les chambres en nous appuyant sur plus de 10 ans d'expérience et
toute l'équipe est très fière de ce que nous avons réalisé.
</p>
<div class="text-box mb-6">
<h3>Des chambres conçues pour le confort et la détente</h3>
<p>Les chambres sont conçues pour offrir les meilleurs niveaux possibles de confort et de
relaxation. Le design contemporain est basé sur des couleurs réconfortantes et parvient à plaire
à de nombreux types de personnalités. Les matériaux utilisés sont modernes et durables.</p>
</div> <!-- end of text-box -->
<div class="text-box mb-6">
<h3>Des chambres conçues pour le confort et la détente</h3>
<p>
Les chambres sont conçues pour offrir les meilleurs niveaux
possibles de confort et de relaxation. Le design contemporain est
basé sur des couleurs réconfortantes et parvient à plaire à de
nombreux types de personnalités. Les matériaux utilisés sont
modernes et durables.
</p>
</div>
<!-- end of text-box -->
<ul class="list-unstyled list-icon-lg mb-5">
<li class="media">
<div class="list-icon bg-1">
<i class="fas fa-shower"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Aménagements modernes</h3>
<p class="list-item-text">Les équipements et les chambres de VillaFleurie sont conçus pour
offrir les meilleurs niveaux possibles de confort et de relaxation. Le design est
contemporain, basé sur des couleurs réconfortantes, et parvient à séduire de nombreux
types de personnalités et de goûts. Les matériaux utilisés dans la
construction de VillaFleurie proviennent des meilleurs fournisseurs.</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-2">
<i class="fas fa-tv"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Appareils électroménagers de qualité</h3>
<p class="list-item-text">Toute l'électronique est fonctionnelle et conçue pour offrir les
meilleurs niveaux de confort et de relaxation. Le design est contemporain, basé sur des
couleurs réconfortantes et parvient à séduire de nombreux types de personnalités et de
goûts. L'objectif principal de tous les appareils est d'offrir un grand confort à
l'intérieur.</p>
</div>
</li>
</ul> <!-- end of list-unstyled -->
<ul class="list-unstyled list-icon-lg mb-5">
<li class="media">
<div class="list-icon bg-1">
<i class="fas fa-shower"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Aménagements modernes</h3>
<p class="list-item-text">
Les équipements et les chambres de VillaFleurie sont conçus pour
offrir les meilleurs niveaux possibles de confort et de
relaxation. Le design est contemporain, basé sur des couleurs
réconfortantes, et parvient à séduire de nombreux types de
personnalités et de goûts. Les matériaux utilisés dans la
construction de VillaFleurie proviennent des meilleurs
fournisseurs.
</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-2">
<i class="fas fa-tv"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">
Appareils électroménagers de qualité
</h3>
<p class="list-item-text">
Toute l'électronique est fonctionnelle et conçue pour offrir les
meilleurs niveaux de confort et de relaxation. Le design est
contemporain, basé sur des couleurs réconfortantes et parvient à
séduire de nombreux types de personnalités et de goûts.
L'objectif principal de tous les appareils est d'offrir un grand
confort à l'intérieur.
</p>
</div>
</li>
</ul>
<!-- end of list-unstyled -->
<p class="mb-4">D'autres caractéristiques ont été conçues pour offrir les meilleurs niveaux possibles de
confort et de relaxation. Le design contemporain basé sur des couleurs réconfortantes et parvient à
séduire de nombreux types de personnalités et de goûts. Les matériaux utilisés dans la
construction de la villa sont modernes et durables.</p>
<p class="mb-4">
D'autres caractéristiques ont été conçues pour offrir les meilleurs
niveaux possibles de confort et de relaxation. Le design contemporain
basé sur des couleurs réconfortantes et parvient à séduire de nombreux
types de personnalités et de goûts. Les matériaux utilisés dans la
construction de la villa sont modernes et durables.
</p>
<ul class="list-unstyled li-space-lg amenities mb-5">
<li class="media">
<i class="fas fa-shower"></i>
<div class="media-body"><strong>Réserve d'eau</strong> VillaFleurie est équipée d'une réserve
d'eau permettant de ne pas se soucier des éventuelles coupures d'eau
</div>
</li>
<li class="media">
<i class="fas fa-tv"></i>
<div class="media-body"><strong>TV LCD moderne</strong> pour les jours de pluie qu'il faut
passer à l'intérieur.
</div>
</li>
<li class="media">
<i class="fas fa-snowflake"></i>
<div class="media-body"><strong>Climatisation</strong> de pointe spécialement conçue pour créer
une température optimale
</div>
</li>
</ul>
<a class="btn-solid-reg mb-6" href="index.html">Réserver</a>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<ul class="list-unstyled li-space-lg amenities mb-5">
<li class="media">
<i class="fas fa-shower"></i>
<div class="media-body">
<strong>Réserve d'eau</strong> VillaFleurie est équipée d'une
réserve d'eau permettant de ne pas se soucier des éventuelles
coupures d'eau
</div>
</li>
<li class="media">
<i class="fas fa-tv"></i>
<div class="media-body">
<strong>TV LCD moderne</strong> pour les jours de pluie qu'il faut
passer à l'intérieur.
</div>
</li>
<li class="media">
<i class="fas fa-snowflake"></i>
<div class="media-body">
<strong>Climatisation</strong> de pointe spécialement conçue pour
créer une température optimale
</div>
</li>
</ul>
<a class="btn-solid-reg mb-6" href="index.html">Réserver</a>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
{% endblock %}

File diff suppressed because it is too large Load diff

View file

@ -1,4 +1,4 @@
onlyBuiltDependencies:
- '@tailwindcss/oxide'
- "@tailwindcss/oxide"
- esbuild
- sharp

View file

@ -24,7 +24,7 @@
padding: 4px;
}
.datepicker-dropdown:before {
content: '';
content: "";
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
@ -34,7 +34,7 @@
position: absolute;
}
.datepicker-dropdown:after {
content: '';
content: "";
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
@ -675,4 +675,4 @@ fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {
margin-left: -5px;
margin-right: -5px;
}
/*# sourceMappingURL=bootstrap-datepicker3.css.map */
/*# sourceMappingURL=bootstrap-datepicker3.css.map */

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

@ -8,7 +8,8 @@
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8; }
opacity: 0.8;
}
.mfp-wrap {
top: 0;
@ -18,7 +19,8 @@
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
-webkit-backface-visibility: hidden;
}
.mfp-container {
text-align: center;
@ -28,16 +30,19 @@
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box; }
box-sizing: border-box;
}
.mfp-container:before {
content: '';
content: "";
display: inline-block;
height: 100%;
vertical-align: middle; }
vertical-align: middle;
}
.mfp-align-top .mfp-container:before {
display: none; }
display: none;
}
.mfp-content {
position: relative;
@ -45,29 +50,36 @@
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
z-index: 1045;
}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
cursor: auto;
}
.mfp-ajax-cur {
cursor: progress; }
cursor: progress;
}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
cursor: zoom-out;
}
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
cursor: auto; }
cursor: auto;
}
.mfp-close,
.mfp-arrow,
@ -75,16 +87,19 @@
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
user-select: none;
}
.mfp-loading.mfp-figure {
display: none; }
display: none;
}
.mfp-hide {
display: none !important; }
display: none !important;
}
.mfp-preloader {
color: #CCC;
color: #ccc;
position: absolute;
top: 50%;
width: auto;
@ -92,17 +107,22 @@
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #CCC; }
.mfp-preloader a:hover {
color: #FFF; }
z-index: 1044;
}
.mfp-preloader a {
color: #ccc;
}
.mfp-preloader a:hover {
color: #fff;
}
.mfp-s-ready .mfp-preloader {
display: none; }
display: none;
}
.mfp-s-error .mfp-content {
display: none; }
display: none;
}
button.mfp-close,
button.mfp-arrow {
@ -116,11 +136,13 @@ button.mfp-arrow {
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation; }
touch-action: manipulation;
}
button::-moz-focus-inner {
padding: 0;
border: 0; }
border: 0;
}
.mfp-close {
width: 44px;
@ -133,35 +155,41 @@ button::-moz-focus-inner {
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: #FFF;
color: #fff;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover,
.mfp-close:focus {
opacity: 1; }
.mfp-close:active {
top: 1px; }
font-family: Arial, Baskerville, monospace;
}
.mfp-close:hover,
.mfp-close:focus {
opacity: 1;
}
.mfp-close:active {
top: 1px;
}
.mfp-close-btn-in .mfp-close {
color: #333; }
color: #333;
}
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
color: #fff;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
width: 100%;
}
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
color: #ccc;
font-size: 12px;
line-height: 18px;
white-space: nowrap; }
white-space: nowrap;
}
.mfp-arrow {
position: absolute;
@ -172,74 +200,91 @@ button::-moz-focus-inner {
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent; }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7; }
-webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
margin-top: -54px;
}
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1;
}
.mfp-arrow:before,
.mfp-arrow:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent;
}
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px;
}
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7;
}
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px; }
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F; }
left: 0;
}
.mfp-arrow-left:after {
border-right: 17px solid #fff;
margin-left: 31px;
}
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3f3f3f;
}
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px; }
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F; }
right: 0;
}
.mfp-arrow-right:after {
border-left: 17px solid #fff;
margin-left: 39px;
}
.mfp-arrow-right:before {
border-left: 27px solid #3f3f3f;
}
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
top: -40px;
}
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000; }
padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000;
}
/* Main image in popup */
img.mfp-img {
@ -250,31 +295,36 @@ img.mfp-img {
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
margin: 0 auto;
}
/* The shadow behind the image */
.mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444; }
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-figure figure {
margin: 0; }
line-height: 0;
}
.mfp-figure:after {
content: "";
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444;
}
.mfp-figure small {
color: #bdbdbd;
display: block;
font-size: 12px;
line-height: 14px;
}
.mfp-figure figure {
margin: 0;
}
.mfp-bottom-bar {
margin-top: -36px;
@ -282,36 +332,45 @@ img.mfp-img {
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
cursor: auto;
}
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
color: #f3f3f3;
word-wrap: break-word;
padding-right: 36px; }
padding-right: 36px;
}
.mfp-image-holder .mfp-content {
max-width: 100%; }
max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
cursor: pointer;
}
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
@media screen and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
padding-right: 0;
}
.mfp-img-mobile img.mfp-img {
padding: 0; }
padding: 0;
}
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
bottom: 0;
}
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; }
margin-left: 5px;
}
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
@ -319,12 +378,15 @@ img.mfp-img {
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
box-sizing: border-box;
}
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0;
}
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
top: 3px;
}
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
@ -334,18 +396,25 @@ img.mfp-img {
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; } }
padding: 0;
}
}
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
transform: scale(0.75);
}
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
transform-origin: 0;
}
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
transform-origin: 100%;
}
.mfp-container {
padding-left: 6px;
padding-right: 6px; } }
padding-right: 6px;
}
}

File diff suppressed because it is too large Load diff

View file

@ -41,7 +41,9 @@
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-property:
transform,
-webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
@ -72,7 +74,9 @@
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-property:
transform,
-webkit-transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
@ -87,11 +91,18 @@
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
-webkit-transition-property:
height,
-webkit-transform;
transition-property:
height,
-webkit-transform;
-o-transition-property: transform, height;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform;
transition-property:
transform,
height,
-webkit-transform;
}
/* 3D Effects */
.swiper-container-3d {
@ -121,28 +132,100 @@
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
right top,
left top,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to left,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
left top,
right top,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
left,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
left,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
left bottom,
left top,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
bottom,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
bottom,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
top,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
top,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
@ -298,48 +381,93 @@ button.swiper-pagination-bullet {
-webkit-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
.swiper-container-vertical
> .swiper-pagination-bullets
.swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
.swiper-container-vertical
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
.swiper-container-vertical
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
display: inline-block;
-webkit-transition: 200ms top, 200ms -webkit-transform;
transition: 200ms top, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top, 200ms -webkit-transform;
-webkit-transition:
200ms top,
200ms -webkit-transform;
transition:
200ms top,
200ms -webkit-transform;
-o-transition:
200ms transform,
200ms top;
transition:
200ms transform,
200ms top;
transition:
200ms transform,
200ms top,
200ms -webkit-transform;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
.swiper-container-horizontal
> .swiper-pagination-bullets
.swiper-pagination-bullet {
margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
.swiper-container-horizontal
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms left, 200ms -webkit-transform;
transition: 200ms left, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left, 200ms -webkit-transform;
.swiper-container-horizontal
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
-webkit-transition:
200ms left,
200ms -webkit-transform;
transition:
200ms left,
200ms -webkit-transform;
-o-transition:
200ms transform,
200ms left;
transition:
200ms transform,
200ms left;
transition:
200ms transform,
200ms left,
200ms -webkit-transform;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms right, 200ms -webkit-transform;
transition: 200ms right, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right, 200ms -webkit-transform;
.swiper-container-horizontal.swiper-container-rtl
> .swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
-webkit-transition:
200ms right,
200ms -webkit-transform;
transition:
200ms right,
200ms -webkit-transform;
-o-transition:
200ms transform,
200ms right;
transition:
200ms transform,
200ms right;
transition:
200ms transform,
200ms right,
200ms -webkit-transform;
}
/* Progress */
.swiper-pagination-progressbar {
@ -360,20 +488,24 @@ button.swiper-pagination-bullet {
-ms-transform-origin: left top;
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
.swiper-container-rtl
.swiper-pagination-progressbar
.swiper-pagination-progressbar-fill {
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
.swiper-container-vertical
> .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
.swiper-container-horizontal
> .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
@ -385,7 +517,8 @@ button.swiper-pagination-bullet {
.swiper-pagination-progressbar.swiper-pagination-white {
background: rgba(255, 255, 255, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
.swiper-pagination-progressbar.swiper-pagination-white
.swiper-pagination-progressbar-fill {
background: #ffffff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
@ -394,7 +527,8 @@ button.swiper-pagination-bullet {
.swiper-pagination-progressbar.swiper-pagination-black {
background: rgba(0, 0, 0, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
.swiper-pagination-progressbar.swiper-pagination-black
.swiper-pagination-progressbar-fill {
background: #000000;
}
.swiper-pagination-lock {
@ -484,7 +618,7 @@ button.swiper-pagination-bullet {
}
.swiper-lazy-preloader:after {
display: block;
content: '';
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -5,40 +5,300 @@
* to offer multiple easing options
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){"use strict";return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){"use strict";return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){"use strict";return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){"use strict";return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){"use strict";return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){"use strict";return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){"use strict";return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){"use strict";return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){"use strict";return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){"use strict";if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){"use strict";return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){"use strict";return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){"use strict";return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){"use strict";if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){"use strict";if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
*/
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
def: "easeOutQuad",
swing: function (e, f, a, h, g) {
"use strict";
return jQuery.easing[jQuery.easing.def](e, f, a, h, g);
},
easeInQuad: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f + a;
},
easeOutQuad: function (e, f, a, h, g) {
"use strict";
return -h * (f /= g) * (f - 2) + a;
},
easeInOutQuad: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f + a;
}
return (-h / 2) * (--f * (f - 2) - 1) + a;
},
easeInCubic: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f * f + a;
},
easeOutCubic: function (e, f, a, h, g) {
"use strict";
return h * ((f = f / g - 1) * f * f + 1) + a;
},
easeInOutCubic: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f * f + a;
}
return (h / 2) * ((f -= 2) * f * f + 2) + a;
},
easeInQuart: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f * f * f + a;
},
easeOutQuart: function (e, f, a, h, g) {
"use strict";
return -h * ((f = f / g - 1) * f * f * f - 1) + a;
},
easeInOutQuart: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f * f * f + a;
}
return (-h / 2) * ((f -= 2) * f * f * f - 2) + a;
},
easeInQuint: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f * f * f * f + a;
},
easeOutQuint: function (e, f, a, h, g) {
"use strict";
return h * ((f = f / g - 1) * f * f * f * f + 1) + a;
},
easeInOutQuint: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f * f * f * f + a;
}
return (h / 2) * ((f -= 2) * f * f * f * f + 2) + a;
},
easeInSine: function (e, f, a, h, g) {
"use strict";
return -h * Math.cos((f / g) * (Math.PI / 2)) + h + a;
},
easeOutSine: function (e, f, a, h, g) {
"use strict";
return h * Math.sin((f / g) * (Math.PI / 2)) + a;
},
easeInOutSine: function (e, f, a, h, g) {
"use strict";
return (-h / 2) * (Math.cos((Math.PI * f) / g) - 1) + a;
},
easeInExpo: function (e, f, a, h, g) {
"use strict";
return f == 0 ? a : h * Math.pow(2, 10 * (f / g - 1)) + a;
},
easeOutExpo: function (e, f, a, h, g) {
"use strict";
return f == g ? a + h : h * (-Math.pow(2, (-10 * f) / g) + 1) + a;
},
easeInOutExpo: function (e, f, a, h, g) {
"use strict";
if (f == 0) {
return a;
}
if (f == g) {
return a + h;
}
if ((f /= g / 2) < 1) {
return (h / 2) * Math.pow(2, 10 * (f - 1)) + a;
}
return (h / 2) * (-Math.pow(2, -10 * --f) + 2) + a;
},
easeInCirc: function (e, f, a, h, g) {
"use strict";
return -h * (Math.sqrt(1 - (f /= g) * f) - 1) + a;
},
easeOutCirc: function (e, f, a, h, g) {
"use strict";
return h * Math.sqrt(1 - (f = f / g - 1) * f) + a;
},
easeInOutCirc: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (-h / 2) * (Math.sqrt(1 - f * f) - 1) + a;
}
return (h / 2) * (Math.sqrt(1 - (f -= 2) * f) + 1) + a;
},
easeInElastic: function (f, h, e, l, k) {
"use strict";
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e;
}
if ((h /= k) == 1) {
return e + l;
}
if (!j) {
j = k * 0.3;
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4;
} else {
var i = (j / (2 * Math.PI)) * Math.asin(l / g);
}
return (
-(
g *
Math.pow(2, 10 * (h -= 1)) *
Math.sin(((h * k - i) * (2 * Math.PI)) / j)
) + e
);
},
easeOutElastic: function (f, h, e, l, k) {
"use strict";
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e;
}
if ((h /= k) == 1) {
return e + l;
}
if (!j) {
j = k * 0.3;
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4;
} else {
var i = (j / (2 * Math.PI)) * Math.asin(l / g);
}
return (
g * Math.pow(2, -10 * h) * Math.sin(((h * k - i) * (2 * Math.PI)) / j) +
l +
e
);
},
easeInOutElastic: function (f, h, e, l, k) {
"use strict";
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e;
}
if ((h /= k / 2) == 2) {
return e + l;
}
if (!j) {
j = k * (0.3 * 1.5);
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4;
} else {
var i = (j / (2 * Math.PI)) * Math.asin(l / g);
}
if (h < 1) {
return (
-0.5 *
(g *
Math.pow(2, 10 * (h -= 1)) *
Math.sin(((h * k - i) * (2 * Math.PI)) / j)) +
e
);
}
return (
g *
Math.pow(2, -10 * (h -= 1)) *
Math.sin(((h * k - i) * (2 * Math.PI)) / j) *
0.5 +
l +
e
);
},
easeInBack: function (e, f, a, i, h, g) {
"use strict";
if (g == undefined) {
g = 1.70158;
}
return i * (f /= h) * f * ((g + 1) * f - g) + a;
},
easeOutBack: function (e, f, a, i, h, g) {
"use strict";
if (g == undefined) {
g = 1.70158;
}
return i * ((f = f / h - 1) * f * ((g + 1) * f + g) + 1) + a;
},
easeInOutBack: function (e, f, a, i, h, g) {
"use strict";
if (g == undefined) {
g = 1.70158;
}
if ((f /= h / 2) < 1) {
return (i / 2) * (f * f * (((g *= 1.525) + 1) * f - g)) + a;
}
return (i / 2) * ((f -= 2) * f * (((g *= 1.525) + 1) * f + g) + 2) + a;
},
easeInBounce: function (e, f, a, h, g) {
"use strict";
return h - jQuery.easing.easeOutBounce(e, g - f, 0, h, g) + a;
},
easeOutBounce: function (e, f, a, h, g) {
"use strict";
if ((f /= g) < 1 / 2.75) {
return h * (7.5625 * f * f) + a;
} else {
if (f < 2 / 2.75) {
return h * (7.5625 * (f -= 1.5 / 2.75) * f + 0.75) + a;
} else {
if (f < 2.5 / 2.75) {
return h * (7.5625 * (f -= 2.25 / 2.75) * f + 0.9375) + a;
} else {
return h * (7.5625 * (f -= 2.625 / 2.75) * f + 0.984375) + a;
}
}
}
},
easeInOutBounce: function (e, f, a, h, g) {
"use strict";
if (f < g / 2) {
return jQuery.easing.easeInBounce(e, f * 2, 0, h, g) * 0.5 + a;
}
return (
jQuery.easing.easeOutBounce(e, f * 2 - g, 0, h, g) * 0.5 + h * 0.5 + a
);
},
});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,208 +1,217 @@
/* Description: Custom JS file */
(function ($) {
"use strict";
(function($) {
"use strict";
/* Navbar Scripts */
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 600, 'easeInOutExpo');
event.preventDefault();
});
/* Navbar Scripts */
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function () {
$(document).on("click", "a.page-scroll", function (event) {
var $anchor = $(this);
$("html, body")
.stop()
.animate(
{
scrollTop: $($anchor.attr("href")).offset().top,
},
600,
"easeInOutExpo",
);
event.preventDefault();
});
});
// offcanvas script from Bootstrap + added element to close menu on click in small viewport
$('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on('click', function () {
$('.offcanvas-collapse').toggleClass('open')
})
// offcanvas script from Bootstrap + added element to close menu on click in small viewport
$('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on(
"click",
function () {
$(".offcanvas-collapse").toggleClass("open");
},
);
// hover in desktop mode
function toggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);
// hover in desktop mode
function toggleDropdown(e) {
const _d = $(e.target).closest(".dropdown"),
_m = $(".dropdown-menu", _d);
setTimeout(
function () {
const shouldOpen = e.type !== "click" && _d.is(":hover");
_m.toggleClass("show", shouldOpen);
_d.toggleClass("show", shouldOpen);
$('[data-toggle="dropdown"]', _d).attr("aria-expanded", shouldOpen);
},
e.type === "mouseleave" ? 300 : 0,
);
}
$("body")
.on("mouseenter mouseleave", ".dropdown", toggleDropdown)
.on("click", ".dropdown-menu a", toggleDropdown);
/* Header Slider - Swiper */
var headerSlider = new Swiper(".header-slider", {
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
loop: true,
effect: "fade",
speed: 700,
});
/* Header Slider - Swiper */
var headerSlider = new Swiper('.header-slider', {
autoplay: {
delay: 3500,
disableOnInteraction: false
},
loop: true,
effect: "fade",
speed: 700
});
/* Image Slider - Swiper */
var imageSlider = new Swiper('.image-slider', {
autoplay: {
delay: 3000,
disableOnInteraction: false
},
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
/* Image Slider - Swiper */
var imageSlider = new Swiper(".image-slider", {
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: false,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 3,
spaceBetween: 20,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1,
},
// when window is <= 991px
991: {
slidesPerView: 2,
spaceBetween: 10,
},
// when window is <= 1199px
1199: {
slidesPerView: 3,
spaceBetween: 20,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1
},
// when window is <= 991px
991: {
slidesPerView: 2,
spaceBetween: 10
},
// when window is <= 1199px
1199: {
slidesPerView: 3,
spaceBetween: 20
},
}
},
},
});
/* Image Slider Room - Swiper */
var imageSlider = new Swiper(".image-slider-room", {
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: false,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
/* Card Slider - Swiper */
var cardSlider = new Swiper(".card-slider", {
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 3,
spaceBetween: 30,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1,
},
// when window is <= 991px
991: {
slidesPerView: 2,
},
},
});
/* Image Lightbox - Magnific Popup */
$(".popup-link").magnificPopup({
removalDelay: 300,
type: "image",
callbacks: {
beforeOpen: function () {
this.st.image.markup = this.st.image.markup.replace(
"mfp-figure",
"mfp-figure " + this.st.el.attr("data-effect"),
);
},
beforeClose: function () {
$(".mfp-figure").addClass("fadeOut");
},
},
gallery: {
enabled: true, //enable gallery mode
},
});
/* Details Lightbox - Magnific Popup */
$(".popup-with-move-anim").magnificPopup({
type: "inline",
fixedContentPos: true,
fixedBgPos: true,
overflowY: "auto",
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: "my-mfp-slide-bottom",
});
/* Move Form Fields Label When User Types */
// for input and textarea fields
$("input, textarea").keyup(function () {
if ($(this).val() != "") {
$(this).addClass("notEmpty");
} else {
$(this).removeClass("notEmpty");
}
});
/* Datepicker - Bootstrap Datepicker */
$("#start").datepicker({
todayHighlight: true,
autoclose: true,
format: "MM/dd/yyyy",
});
// detects change to selected date to keep the label above the value in the input field
$("#start")
.datepicker()
.on("changeDate", function (e) {
$("input[id=start]").addClass("notEmpty");
});
$("#end").datepicker({
autoclose: true,
format: "MM/dd/yyyy",
});
/* Image Slider Room - Swiper */
var imageSlider = new Swiper('.image-slider-room', {
autoplay: {
delay: 3000,
disableOnInteraction: false
},
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
/* Card Slider - Swiper */
var cardSlider = new Swiper('.card-slider', {
autoplay: {
delay: 4000,
disableOnInteraction: false
},
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
slidesPerView: 3,
spaceBetween: 30,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1
},
// when window is <= 991px
991: {
slidesPerView: 2
}
}
// detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
$("#end")
.datepicker()
.on("changeDate", function (e) {
$("input[id=end]").addClass("notEmpty");
});
/* Back To Top Button */
// create the back to top button
$("body").prepend(
'<a href="body" class="back-to-top page-scroll">Back to Top</a>',
);
var amountScrolled = 700;
$(window).scroll(function () {
if ($(window).scrollTop() > amountScrolled) {
$("a.back-to-top").fadeIn("500");
} else {
$("a.back-to-top").fadeOut("500");
}
});
/* Image Lightbox - Magnific Popup */
$('.popup-link').magnificPopup({
removalDelay: 300,
type: 'image',
callbacks: {
beforeOpen: function() {
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure ' + this.st.el.attr('data-effect'));
},
beforeClose: function() {
$('.mfp-figure').addClass('fadeOut');
}
},
gallery:{
enabled:true //enable gallery mode
}
});
/* Details Lightbox - Magnific Popup */
$('.popup-with-move-anim').magnificPopup({
type: 'inline',
fixedContentPos: true,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
/* Move Form Fields Label When User Types */
// for input and textarea fields
$("input, textarea").keyup(function(){
if ($(this).val() != '') {
$(this).addClass('notEmpty');
} else {
$(this).removeClass('notEmpty');
}
});
/* Datepicker - Bootstrap Datepicker */
$('#start').datepicker({
todayHighlight: true,
autoclose: true,
format: 'MM/dd/yyyy',
});
// detects change to selected date to keep the label above the value in the input field
$('#start').datepicker().on('changeDate', function(e) {
$("input[id=start]").addClass('notEmpty');
});
$('#end').datepicker({
autoclose: true,
format: 'MM/dd/yyyy'
});
// detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
$('#end').datepicker().on('changeDate', function(e) {
$("input[id=end]").addClass('notEmpty');
});
/* Back To Top Button */
// create the back to top button
$('body').prepend('<a href="body" class="back-to-top page-scroll">Back to Top</a>');
var amountScrolled = 700;
$(window).scroll(function() {
if ($(window).scrollTop() > amountScrolled) {
$('a.back-to-top').fadeIn('500');
} else {
$('a.back-to-top').fadeOut('500');
}
});
/* Removes Long Focus On Buttons */
$(".button, a, button").mouseup(function() {
$(this).blur();
});
})(jQuery);
/* Removes Long Focus On Buttons */
$(".button, a, button").mouseup(function () {
$(this).blur();
});
})(jQuery);

File diff suppressed because one or more lines are too long

View file

@ -6,5 +6,7 @@
}
@layer base {
body { @apply antialiased; }
body {
@apply antialiased;
}
}

View file

@ -1,319 +1,507 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- SEO Meta Tags -->
<meta name="description" content="Description">
<meta name="author" content="Author">
<meta name="description" content="Description" />
<meta name="author" content="Author" />
<!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
<meta property="og:site_name" content="" /> <!-- website name -->
<meta property="og:site" content="" /> <!-- website link -->
<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
<meta name="twitter:card" content="summary_large_image"> <!-- to have large image post format in Twitter -->
<meta property="og:site_name" content="" />
<!-- website name -->
<meta property="og:site" content="" />
<!-- website link -->
<meta property="og:title" content="" />
<!-- title shown in the actual shared post -->
<meta property="og:description" content="" />
<!-- description shown in the actual shared post -->
<meta property="og:image" content="" />
<!-- image link, make sure it's jpg -->
<meta property="og:url" content="" />
<!-- where do you want your post to link to -->
<meta name="twitter:card" content="summary_large_image" />
<!-- to have large image post format in Twitter -->
<!-- Webpage Title -->
<title>Article Details - Villa</title>
<!-- Styles -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="css/bootstrap-datepicker3.css" rel="stylesheet">
<link href="css/swiper.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="images/favicon.png">
</head>
<body data-spy="scroll" data-target=".fixed-top">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap"
rel="stylesheet"
/>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/fontawesome-all.css" rel="stylesheet" />
<link href="css/bootstrap-datepicker3.css" rel="stylesheet" />
<link href="css/swiper.css" rel="stylesheet" />
<link href="css/magnific-popup.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<!-- Favicon -->
<link rel="icon" href="images/favicon.png" />
</head>
<body data-spy="scroll" data-target=".fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"
><img src="images/logo.svg" alt="alternative"
/></a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<button
class="navbar-toggler p-0 border-0"
type="button"
data-toggle="offcanvas"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="article.html">Article <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rooms</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="balcony-room.html">Balcony Room</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="panoramic-room.html">Panoramic Room</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="presidential-room.html">Presidential Room</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<span class="nav-item ml-auto">
<a class="btn-outline-sm" href="tel:1-800-324-9832"><i class="fas fa-phone-alt"></i>1-800-324-9832</a>
</span>
<span class="nav-item lang-switch">
<a class="lang-item no-line active" href="index.html"><img src="images/language-en.jpg" alt="alternative">EN</a> &nbsp;|&nbsp; <a class="lang-item no-line" href="index.html"><img src="images/language-it.jpg" alt="alternative">IT</a>
</span>
</div> <!-- end of navbar-collapse -->
</div> <!-- end of container -->
</nav> <!-- end of navbar -->
<div
class="navbar-collapse offcanvas-collapse"
id="navbarsExampleDefault"
>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="article.html"
>Article <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="dropdown01"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>Rooms</a
>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="balcony-room.html"
>Balcony Room</a
>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="panoramic-room.html"
>Panoramic Room</a
>
<div class="dropdown-divider"></div>
<a
class="dropdown-item page-scroll"
href="presidential-room.html"
>Presidential Room</a
>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<span class="nav-item ml-auto">
<a class="btn-outline-sm" href="tel:1-800-324-9832"
><i class="fas fa-phone-alt"></i>1-800-324-9832</a
>
</span>
<span class="nav-item lang-switch">
<a class="lang-item no-line active" href="index.html"
><img src="images/language-en.jpg" alt="alternative" />EN</a
>
&nbsp;|&nbsp;
<a class="lang-item no-line" href="index.html"
><img src="images/language-it.jpg" alt="alternative" />IT</a
>
</span>
</div>
<!-- end of navbar-collapse -->
</div>
<!-- end of container -->
</nav>
<!-- end of navbar -->
<!-- end of navigation -->
<!-- Header -->
<header class="ex-header bg-gray">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Popular Tourist Attraction Near Villa</h1>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</header> <!-- end of ex-header -->
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Popular Tourist Attraction Near Villa</h1>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</header>
<!-- end of ex-header -->
<!-- end of header -->
<!-- Basic -->
<div class="ex-basic-1 bg-gray pb-6">
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-fluid" src="images/article-details-large.jpg" alt="alternative">
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<img
class="img-fluid"
src="images/article-details-large.jpg"
alt="alternative"
/>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Basic -->
<div class="ex-basic-1 pt-5">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<p class="mt-3">Are you looking for a relaxing experience in a wonderful Mediterranean setting? Then Villa is the right answer for romantic couples and fun families. You will find everything you need for a great holiday at Villa, from clean rooms with beautiful views to wonderful cuisine and friendly staff which will go out of their way to serve you.</p>
<p class="mb-6">You can have a good time indoors but the most exciting things await you outside in close proximity of the Villa or further way as tourist attractions. We have our own very large pool for you to enjoy but Villa's position close to the sea shore provides access to wonderful sandy beaches with restricted access only for Villa customers.</p>
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<p class="mt-3">
Are you looking for a relaxing experience in a wonderful
Mediterranean setting? Then Villa is the right answer for romantic
couples and fun families. You will find everything you need for a
great holiday at Villa, from clean rooms with beautiful views to
wonderful cuisine and friendly staff which will go out of their
way to serve you.
</p>
<p class="mb-6">
You can have a good time indoors but the most exciting things
await you outside in close proximity of the Villa or further way
as tourist attractions. We have our own very large pool for you to
enjoy but Villa's position close to the sea shore provides access
to wonderful sandy beaches with restricted access only for Villa
customers.
</p>
<h2 class="mb-4">Enjoy The Mediterranean Experience</h2>
<p>Our mission at Villa is to focus an all the details to make your stay an amazing experience. We've trained our staff to meet your expectations and exceed them so that your Villa experience becomes not just a regular memory but one of the best memories you have. We're passionate about this stuff and we will not let you down.</p>
<p class="mb-5">You can enjoy our clean spacious rooms, the splendid gardens, beautiful sea views and well thought out amenities. Villa's restaurant is famous for the fine cuisine created with only the freshest of local ingredients, cooked by famous chefs and served by our polite staff. The establishment's only purpose is to make you feel comfortable and relaxed.</p>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<h2 class="mb-4">Enjoy The Mediterranean Experience</h2>
<p>
Our mission at Villa is to focus an all the details to make your
stay an amazing experience. We've trained our staff to meet your
expectations and exceed them so that your Villa experience becomes
not just a regular memory but one of the best memories you have.
We're passionate about this stuff and we will not let you down.
</p>
<p class="mb-5">
You can enjoy our clean spacious rooms, the splendid gardens,
beautiful sea views and well thought out amenities. Villa's
restaurant is famous for the fine cuisine created with only the
freshest of local ingredients, cooked by famous chefs and served
by our polite staff. The establishment's only purpose is to make
you feel comfortable and relaxed.
</p>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Cards -->
<div class="ex-cards-1 mb-4">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Card -->
<div class="card">
<ul class="list-unstyled">
<li class="media">
<span class="fa-stack">
<span class="fas fa-circle fa-stack-2x"></span>
<span class="fa-stack-1x">1</span>
</span>
<div class="media-body">
<h4>Beautiful Location</h4>
<p>Villa is located at the Mediterranean sea and offers easy access to historical towns and tourist attractions</p>
</div>
</li>
</ul>
</div> <!-- end of card -->
<!-- end of card -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Card -->
<div class="card">
<ul class="list-unstyled">
<li class="media">
<span class="fa-stack">
<span class="fas fa-circle fa-stack-2x"></span>
<span class="fa-stack-1x">1</span>
</span>
<div class="media-body">
<h4>Beautiful Location</h4>
<p>
Villa is located at the Mediterranean sea and offers easy
access to historical towns and tourist attractions
</p>
</div>
</li>
</ul>
</div>
<!-- end of card -->
<!-- end of card -->
<!-- Card -->
<div class="card">
<ul class="list-unstyled">
<li class="media">
<span class="fa-stack">
<span class="fas fa-circle fa-stack-2x"></span>
<span class="fa-stack-1x">2</span>
</span>
<div class="media-body">
<h4>Great Amenities</h4>
<p>You have complete unrestricted access to our restaurant, private pool, beautiful gardens and sunny terrace</p>
</div>
</li>
</ul>
</div> <!-- end of card -->
<!-- end of card -->
<!-- Card -->
<div class="card">
<ul class="list-unstyled">
<li class="media">
<span class="fa-stack">
<span class="fas fa-circle fa-stack-2x"></span>
<span class="fa-stack-1x">2</span>
</span>
<div class="media-body">
<h4>Great Amenities</h4>
<p>
You have complete unrestricted access to our restaurant,
private pool, beautiful gardens and sunny terrace
</p>
</div>
</li>
</ul>
</div>
<!-- end of card -->
<!-- end of card -->
<!-- Card -->
<div class="card">
<ul class="list-unstyled">
<li class="media">
<span class="fa-stack">
<span class="fas fa-circle fa-stack-2x"></span>
<span class="fa-stack-1x">3</span>
</span>
<div class="media-body">
<h4>Awesome Restaurant</h4>
<p>Taste our delicious food made from fresh local ingredients that will delight meat lovers and vegetarians</p>
</div>
</li>
</ul>
</div> <!-- end of card -->
<!-- end of card -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-cards-1 -->
<!-- Card -->
<div class="card">
<ul class="list-unstyled">
<li class="media">
<span class="fa-stack">
<span class="fas fa-circle fa-stack-2x"></span>
<span class="fa-stack-1x">3</span>
</span>
<div class="media-body">
<h4>Awesome Restaurant</h4>
<p>
Taste our delicious food made from fresh local ingredients
that will delight meat lovers and vegetarians
</p>
</div>
</li>
</ul>
</div>
<!-- end of card -->
<!-- end of card -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-cards-1 -->
<!-- end of cards -->
<!-- Basic -->
<div class="ex-basic-1">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<p class="mb-6">Each of Villa's rooms was designed to offer the best possible experience for many types of travelers from the adventure seekers to those who value comfort. We've designed the rooms based on more than 10 years of experience in the hospitality business and the entire team is very proud of what we achieved with Villa.</p>
<h2 class="mb-4">Popular Tourist Attractions</h2>
<img class="img-fluid mb-5" src="images/article-details-small.jpg" alt="alternative">
<p>The rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
<p class="mb-5">Villa's amenities and rooms rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are provided by top suppliers.</p>
<div class="text-box mb-5">
<h3>Wonderful Experience At The Mediterranean Sea</h3>
<p>Enjoy the sun, the cool water and the benefits of fresh air by booking Villa the wonderful experience at the Mediterranean sea. It's the perfect holiday location for both tranquility seeking couples and fun families. Villa's amenities and rooms rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and relaxing patterns.</p>
</div> <!-- end of text-box -->
<p class="mb-4">You can enjoy our clean spacious rooms, the splendid gardens, beautiful sea views and well thought out amenities. Villa's restaurant is famous for the fine cuisine created with only the freshest of local ingredients, cooked by famous chefs and served by our polite staff. The establishment's only purpose is to make you feel comfortable and relaxed.</p>
<ul class="list-unstyled li-space-lg mb-5">
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body"><strong>Warm shower</strong> for those early spring and late autumn days. Showers are also available at the beach</div>
</li>
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body"><strong>Modern LCD TV</strong> for rainy days that have to be spent inside. You can event connect the gaming console</div>
</li>
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body"><strong>Air conditioning</strong> that is state of the art technology specially designed to create the optimum temperature</div>
</li>
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body"><strong>Beautiful views</strong> from any window. Enjoy them from inside the room or sitting outside on the large balcony</div>
</li>
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body"><strong>Packed minibar</strong> loaded with goodies so you can enjoy some treats if you forget to shop in town</div>
</li>
</ul>
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<p class="mb-6">
Each of Villa's rooms was designed to offer the best possible
experience for many types of travelers from the adventure seekers
to those who value comfort. We've designed the rooms based on more
than 10 years of experience in the hospitality business and the
entire team is very proud of what we achieved with Villa.
</p>
<a class="btn-solid-reg mb-6" href="index.html">Home</a>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<h2 class="mb-4">Popular Tourist Attractions</h2>
<img
class="img-fluid mb-5"
src="images/article-details-small.jpg"
alt="alternative"
/>
<p>
The rooms are designed to offer the best possible levels of
comfort and relaxation. The design is contemporary based on
comforting colors and manages to appeal to many types of
personalities and tastes. The materials used in Villa's
construction are modern and durable, offering warm temperatures in
the winter and cooler summer days.
</p>
<p class="mb-5">
Villa's amenities and rooms rooms are designed to offer the best
possible levels of comfort and relaxation. The design is
contemporary based on comforting colors and manages to appeal to
many types of personalities and tastes. The materials used in
Villa's construction are provided by top suppliers.
</p>
<div class="text-box mb-5">
<h3>Wonderful Experience At The Mediterranean Sea</h3>
<p>
Enjoy the sun, the cool water and the benefits of fresh air by
booking Villa the wonderful experience at the Mediterranean sea.
It's the perfect holiday location for both tranquility seeking
couples and fun families. Villa's amenities and rooms rooms are
designed to offer the best possible levels of comfort and
relaxation. The design is contemporary based on comforting
colors and relaxing patterns.
</p>
</div>
<!-- end of text-box -->
<p class="mb-4">
You can enjoy our clean spacious rooms, the splendid gardens,
beautiful sea views and well thought out amenities. Villa's
restaurant is famous for the fine cuisine created with only the
freshest of local ingredients, cooked by famous chefs and served
by our polite staff. The establishment's only purpose is to make
you feel comfortable and relaxed.
</p>
<ul class="list-unstyled li-space-lg mb-5">
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body">
<strong>Warm shower</strong> for those early spring and late
autumn days. Showers are also available at the beach
</div>
</li>
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body">
<strong>Modern LCD TV</strong> for rainy days that have to be
spent inside. You can event connect the gaming console
</div>
</li>
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body">
<strong>Air conditioning</strong> that is state of the art
technology specially designed to create the optimum
temperature
</div>
</li>
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body">
<strong>Beautiful views</strong> from any window. Enjoy them
from inside the room or sitting outside on the large balcony
</div>
</li>
<li class="media">
<i class="fas fa-square"></i>
<div class="media-body">
<strong>Packed minibar</strong> loaded with goodies so you can
enjoy some treats if you forget to shop in town
</div>
</li>
</ul>
<a class="btn-solid-reg mb-6" href="index.html">Home</a>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>If you are looking too have a comfortable and relaxing time then you should get in touch with us using <a class="green" href="mailto:reception@villa.com">reception@villa.com</a></h3>
<div class="social-container">
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-pinterest-p fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x"></i>
</a>
</span>
</div> <!-- end of social-container -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of footer -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>
If you are looking too have a comfortable and relaxing time then
you should get in touch with us using
<a class="green" href="mailto:reception@villa.com"
>reception@villa.com</a
>
</h3>
<div class="social-container">
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-pinterest-p fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x"></i>
</a>
</span>
</div>
<!-- end of social-container -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of footer -->
<!-- end of footer -->
<!-- Copyright -->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="divider">
</div> <!-- end of col -->
</div> <!-- end of row -->
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled li-space-lg p-small">
<li><a href="article.html">Article</a></li>
<li><a href="balcony-room.html">Balcony Room</a></li>
<li><a href="panoramic-room.html">Panoramic Room</a></li>
<li><a href="presidential-room.html">Presidential Room</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> <!-- end of list-unstyled -->
</div> <!-- end of col -->
<div class="col-lg-6">
<p class="p-small statement">Copyright © <a href="#your-link">Name</a></p>
</div> <!-- end of col -->
</div> <!-- enf of row -->
</div> <!-- end of container -->
</div> <!-- end of copyright -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="divider" />
</div>
<!-- end of col -->
</div>
<!-- end of row -->
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled li-space-lg p-small">
<li><a href="article.html">Article</a></li>
<li><a href="balcony-room.html">Balcony Room</a></li>
<li><a href="panoramic-room.html">Panoramic Room</a></li>
<li><a href="presidential-room.html">Presidential Room</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- end of list-unstyled -->
</div>
<!-- end of col -->
<div class="col-lg-6">
<p class="p-small statement">
Copyright © <a href="#your-link">Name</a>
</p>
</div>
<!-- end of col -->
</div>
<!-- enf of row -->
</div>
<!-- end of container -->
</div>
<!-- end of copyright -->
<!-- end of copyright -->
<!-- Scripts -->
<script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
<script src="js/bootstrap-datepicker.min.js"></script> <!-- Datepicker for Bootstrap -->
<script src="js/scripts.js"></script> <!-- Custom scripts -->
</body>
</html>
<script src="js/jquery.min.js"></script>
<!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script>
<!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script>
<!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script>
<!-- Magnific Popup for lightboxes -->
<script src="js/bootstrap-datepicker.min.js"></script>
<!-- Datepicker for Bootstrap -->
<script src="js/scripts.js"></script>
<!-- Custom scripts -->
</body>
</html>

View file

@ -1,305 +1,471 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- SEO Meta Tags -->
<meta name="description" content="Description">
<meta name="author" content="Author">
<meta name="description" content="Description" />
<meta name="author" content="Author" />
<!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
<meta property="og:site_name" content="" /> <!-- website name -->
<meta property="og:site" content="" /> <!-- website link -->
<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
<meta name="twitter:card" content="summary_large_image"> <!-- to have large image post format in Twitter -->
<meta property="og:site_name" content="" />
<!-- website name -->
<meta property="og:site" content="" />
<!-- website link -->
<meta property="og:title" content="" />
<!-- title shown in the actual shared post -->
<meta property="og:description" content="" />
<!-- description shown in the actual shared post -->
<meta property="og:image" content="" />
<!-- image link, make sure it's jpg -->
<meta property="og:url" content="" />
<!-- where do you want your post to link to -->
<meta name="twitter:card" content="summary_large_image" />
<!-- to have large image post format in Twitter -->
<!-- Webpage Title -->
<title>Balcony Room - Villa</title>
<!-- Styles -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="css/bootstrap-datepicker3.css" rel="stylesheet">
<link href="css/swiper.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="images/favicon.png">
</head>
<body data-spy="scroll" data-target=".fixed-top">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap"
rel="stylesheet"
/>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/fontawesome-all.css" rel="stylesheet" />
<link href="css/bootstrap-datepicker3.css" rel="stylesheet" />
<link href="css/swiper.css" rel="stylesheet" />
<link href="css/magnific-popup.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<!-- Favicon -->
<link rel="icon" href="images/favicon.png" />
</head>
<body data-spy="scroll" data-target=".fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"
><img src="images/logo.svg" alt="alternative"
/></a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<button
class="navbar-toggler p-0 border-0"
type="button"
data-toggle="offcanvas"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="article.html">Article <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rooms</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="balcony-room.html">Balcony Room</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="panoramic-room.html">Panoramic Room</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="presidential-room.html">Presidential Room</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<span class="nav-item ml-auto">
<a class="btn-outline-sm" href="tel:1-800-324-9832"><i class="fas fa-phone-alt"></i>1-800-324-9832</a>
</span>
<span class="nav-item lang-switch">
<a class="lang-item no-line active" href="index.html"><img src="images/language-en.jpg" alt="alternative">EN</a> &nbsp;|&nbsp; <a class="lang-item no-line" href="index.html"><img src="images/language-it.jpg" alt="alternative">IT</a>
</span>
</div> <!-- end of navbar-collapse -->
</div> <!-- end of container -->
</nav> <!-- end of navbar -->
<div
class="navbar-collapse offcanvas-collapse"
id="navbarsExampleDefault"
>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="article.html"
>Article <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="dropdown01"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>Rooms</a
>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="balcony-room.html"
>Balcony Room</a
>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="panoramic-room.html"
>Panoramic Room</a
>
<div class="dropdown-divider"></div>
<a
class="dropdown-item page-scroll"
href="presidential-room.html"
>Presidential Room</a
>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<span class="nav-item ml-auto">
<a class="btn-outline-sm" href="tel:1-800-324-9832"
><i class="fas fa-phone-alt"></i>1-800-324-9832</a
>
</span>
<span class="nav-item lang-switch">
<a class="lang-item no-line active" href="index.html"
><img src="images/language-en.jpg" alt="alternative" />EN</a
>
&nbsp;|&nbsp;
<a class="lang-item no-line" href="index.html"
><img src="images/language-it.jpg" alt="alternative" />IT</a
>
</span>
</div>
<!-- end of navbar-collapse -->
</div>
<!-- end of container -->
</nav>
<!-- end of navbar -->
<!-- end of navigation -->
<!-- Header -->
<header class="ex-header bg-gray">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Balcony Room - $59/day</h1>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</header> <!-- end of ex-header -->
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Balcony Room - $59/day</h1>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</header>
<!-- end of ex-header -->
<!-- end of header -->
<!-- Basic -->
<div class="ex-basic-1 bg-gray pb-6">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Image Slider Room -->
<div class="slider-container">
<div class="swiper-container image-slider-room">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="images/room-balcony-1.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="images/room-balcony-1.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
<!-- Image Slider Room -->
<div class="slider-container">
<div class="swiper-container image-slider-room">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="images/room-balcony-2.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="images/room-balcony-2.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="images/room-balcony-1.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-balcony-1.jpg" alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="images/room-balcony-3.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="images/room-balcony-3.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
</div>
<!-- end of swiper-wrapper -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="images/room-balcony-2.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-balcony-2.jpg" alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="images/room-balcony-3.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-balcony-3.jpg" alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
</div> <!-- end of swiper-wrapper -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- end of add arrows -->
</div> <!-- end of swiper container -->
</div> <!-- end of slider-container -->
<!-- end of image slider -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- end of add arrows -->
</div>
<!-- end of swiper container -->
</div>
<!-- end of slider-container -->
<!-- end of image slider -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Basic -->
<div class="ex-basic-1 pt-5">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Description</h2>
<p class="mb-5">Each of Villa's rooms was designed to offer the best possible experience for many types of travelers from the adventure seekers to those who value comfort. We've designed the rooms based on more than 10 years of experience in the hospitality business and the entire team is very proud of what we achieved with Villa.</p>
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Description</h2>
<p class="mb-5">
Each of Villa's rooms was designed to offer the best possible
experience for many types of travelers from the adventure seekers
to those who value comfort. We've designed the rooms based on more
than 10 years of experience in the hospitality business and the
entire team is very proud of what we achieved with Villa.
</p>
<div class="text-box mb-6">
<h3>Rooms Designed For Comfort And Relaxation</h3>
<p>The rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
</div> <!-- end of text-box -->
<div class="text-box mb-6">
<h3>Rooms Designed For Comfort And Relaxation</h3>
<p>
The rooms are designed to offer the best possible levels of
comfort and relaxation. The design is contemporary based on
comforting colors and manages to appeal to many types of
personalities and tastes. The materials used in Villa's
construction are modern and durable, offering warm temperatures
in the winter and cooler summer days.
</p>
</div>
<!-- end of text-box -->
<ul class="list-unstyled list-icon-lg mb-5">
<li class="media">
<div class="list-icon bg-1">
<i class="fas fa-shower"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Modern Amenities</h3>
<p class="list-item-text">Villa's amenities and rooms rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are provided by top suppliers.</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-2">
<i class="fas fa-tv"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Brand Name Appliances</h3>
<p class="list-item-text">All the electronics are functional and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The main focus of all appliances is to offer a great vacation time while indoors.</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-3">
<i class="fas fa-wine-bottle"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Packed Minibar</h3>
<p class="list-item-text">The minibar is packed with goodie and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal. The main focus of the minibar is to offer a great vacation time while you are in the room.</p>
</div>
</li>
</ul> <!-- end of list-unstyled -->
<ul class="list-unstyled list-icon-lg mb-5">
<li class="media">
<div class="list-icon bg-1">
<i class="fas fa-shower"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Modern Amenities</h3>
<p class="list-item-text">
Villa's amenities and rooms rooms are designed to offer the
best possible levels of comfort and relaxation. The design
is contemporary based on comforting colors and manages to
appeal to many types of personalities and tastes. The
materials used in Villa's construction are provided by top
suppliers.
</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-2">
<i class="fas fa-tv"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Brand Name Appliances</h3>
<p class="list-item-text">
All the electronics are functional and designed to offer the
best possible levels of comfort and relaxation. The design
is contemporary based on comforting colors and manages to
appeal to many types of personalities and tastes. The main
focus of all appliances is to offer a great vacation time
while indoors.
</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-3">
<i class="fas fa-wine-bottle"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Packed Minibar</h3>
<p class="list-item-text">
The minibar is packed with goodie and designed to offer the
best possible levels of comfort and relaxation. The design
is contemporary based on comforting colors and manages to
appeal. The main focus of the minibar is to offer a great
vacation time while you are in the room.
</p>
</div>
</li>
</ul>
<!-- end of list-unstyled -->
<p class="mb-4">Other features designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
<p class="mb-4">
Other features designed to offer the best possible levels of
comfort and relaxation. The design is contemporary based on
comforting colors and manages to appeal to many types of
personalities and tastes. The materials used in Villa's
construction are modern and durable, offering warm temperatures in
the winter and cooler summer days.
</p>
<ul class="list-unstyled li-space-lg amenities mb-5">
<li class="media">
<i class="fas fa-shower"></i>
<div class="media-body"><strong>Warm shower</strong> for those early spring and late autumn days. Showers are also available at the beach</div>
</li>
<li class="media">
<i class="fas fa-tv"></i>
<div class="media-body"><strong>Modern LCD tv</strong> for rainy days that have to be spent inside. You can event connect the gaming console</div>
</li>
<li class="media">
<i class="fas fa-snowflake"></i>
<div class="media-body"><strong>Air conditioning</strong> that is state of the art technology specially designed to create the optimum temperature</div>
</li>
<li class="media">
<i class="fas fa-image"></i>
<div class="media-body"><strong>Beautiful views</strong> from any window. Enjoy them from inside the room or sitting outside on the large balcony</div>
</li>
<li class="media">
<i class="fas fa-wine-bottle"></i>
<div class="media-body"><strong>Packed minibar</strong> loaded with goodies so you can enjoy some treats if you forget to shop in town</div>
</li>
</ul>
<a class="btn-solid-reg mb-6" href="index.html">Home</a>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<ul class="list-unstyled li-space-lg amenities mb-5">
<li class="media">
<i class="fas fa-shower"></i>
<div class="media-body">
<strong>Warm shower</strong> for those early spring and late
autumn days. Showers are also available at the beach
</div>
</li>
<li class="media">
<i class="fas fa-tv"></i>
<div class="media-body">
<strong>Modern LCD tv</strong> for rainy days that have to be
spent inside. You can event connect the gaming console
</div>
</li>
<li class="media">
<i class="fas fa-snowflake"></i>
<div class="media-body">
<strong>Air conditioning</strong> that is state of the art
technology specially designed to create the optimum
temperature
</div>
</li>
<li class="media">
<i class="fas fa-image"></i>
<div class="media-body">
<strong>Beautiful views</strong> from any window. Enjoy them
from inside the room or sitting outside on the large balcony
</div>
</li>
<li class="media">
<i class="fas fa-wine-bottle"></i>
<div class="media-body">
<strong>Packed minibar</strong> loaded with goodies so you can
enjoy some treats if you forget to shop in town
</div>
</li>
</ul>
<a class="btn-solid-reg mb-6" href="index.html">Home</a>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>If you are looking too have a comfortable and relaxing time then you should get in touch with us using <a class="green" href="mailto:reception@villa.com">reception@villa.com</a></h3>
<div class="social-container">
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-pinterest-p fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x"></i>
</a>
</span>
</div> <!-- end of social-container -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of footer -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>
If you are looking too have a comfortable and relaxing time then
you should get in touch with us using
<a class="green" href="mailto:reception@villa.com"
>reception@villa.com</a
>
</h3>
<div class="social-container">
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-pinterest-p fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x"></i>
</a>
</span>
</div>
<!-- end of social-container -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of footer -->
<!-- end of footer -->
<!-- Copyright -->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="divider">
</div> <!-- end of col -->
</div> <!-- end of row -->
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled li-space-lg p-small">
<li><a href="article.html">Article</a></li>
<li><a href="balcony-room.html">Balcony Room</a></li>
<li><a href="panoramic-room.html">Panoramic Room</a></li>
<li><a href="presidential-room.html">Presidential Room</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> <!-- end of list-unstyled -->
</div> <!-- end of col -->
<div class="col-lg-6">
<p class="p-small statement">Copyright © <a href="#your-link">Name</a></p>
</div> <!-- end of col -->
</div> <!-- enf of row -->
</div> <!-- end of container -->
</div> <!-- end of copyright -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="divider" />
</div>
<!-- end of col -->
</div>
<!-- end of row -->
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled li-space-lg p-small">
<li><a href="article.html">Article</a></li>
<li><a href="balcony-room.html">Balcony Room</a></li>
<li><a href="panoramic-room.html">Panoramic Room</a></li>
<li><a href="presidential-room.html">Presidential Room</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- end of list-unstyled -->
</div>
<!-- end of col -->
<div class="col-lg-6">
<p class="p-small statement">
Copyright © <a href="#your-link">Name</a>
</p>
</div>
<!-- end of col -->
</div>
<!-- enf of row -->
</div>
<!-- end of container -->
</div>
<!-- end of copyright -->
<!-- end of copyright -->
<!-- Scripts -->
<script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
<script src="js/bootstrap-datepicker.min.js"></script> <!-- Datepicker for Bootstrap -->
<script src="js/scripts.js"></script> <!-- Custom scripts -->
</body>
</html>
<script src="js/jquery.min.js"></script>
<!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script>
<!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script>
<!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script>
<!-- Magnific Popup for lightboxes -->
<script src="js/bootstrap-datepicker.min.js"></script>
<!-- Datepicker for Bootstrap -->
<script src="js/scripts.js"></script>
<!-- Custom scripts -->
</body>
</html>

View file

@ -1,237 +1,354 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- SEO Meta Tags -->
<meta name="description" content="Description">
<meta name="author" content="Author">
<meta name="description" content="Description" />
<meta name="author" content="Author" />
<!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
<meta property="og:site_name" content="" /> <!-- website name -->
<meta property="og:site" content="" /> <!-- website link -->
<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
<meta name="twitter:card" content="summary_large_image"> <!-- to have large image post format in Twitter -->
<meta property="og:site_name" content="" />
<!-- website name -->
<meta property="og:site" content="" />
<!-- website link -->
<meta property="og:title" content="" />
<!-- title shown in the actual shared post -->
<meta property="og:description" content="" />
<!-- description shown in the actual shared post -->
<meta property="og:image" content="" />
<!-- image link, make sure it's jpg -->
<meta property="og:url" content="" />
<!-- where do you want your post to link to -->
<meta name="twitter:card" content="summary_large_image" />
<!-- to have large image post format in Twitter -->
<!-- Webpage Title -->
<title>Contact Details - Villa</title>
<!-- Styles -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="css/bootstrap-datepicker3.css" rel="stylesheet">
<link href="css/swiper.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="images/favicon.png">
</head>
<body data-spy="scroll" data-target=".fixed-top">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap"
rel="stylesheet"
/>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/fontawesome-all.css" rel="stylesheet" />
<link href="css/bootstrap-datepicker3.css" rel="stylesheet" />
<link href="css/swiper.css" rel="stylesheet" />
<link href="css/magnific-popup.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<!-- Favicon -->
<link rel="icon" href="images/favicon.png" />
</head>
<body data-spy="scroll" data-target=".fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"
><img src="images/logo.svg" alt="alternative"
/></a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<button
class="navbar-toggler p-0 border-0"
type="button"
data-toggle="offcanvas"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="article.html">Article <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rooms</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="balcony-room.html">Balcony Room</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="panoramic-room.html">Panoramic Room</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="presidential-room.html">Presidential Room</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<span class="nav-item ml-auto">
<a class="btn-outline-sm" href="tel:1-800-324-9832"><i class="fas fa-phone-alt"></i>1-800-324-9832</a>
</span>
<span class="nav-item lang-switch">
<a class="lang-item no-line active" href="index.html"><img src="images/language-en.jpg" alt="alternative">EN</a> &nbsp;|&nbsp; <a class="lang-item no-line" href="index.html"><img src="images/language-it.jpg" alt="alternative">IT</a>
</span>
</div> <!-- end of navbar-collapse -->
</div> <!-- end of container -->
</nav> <!-- end of navbar -->
<div
class="navbar-collapse offcanvas-collapse"
id="navbarsExampleDefault"
>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="article.html"
>Article <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="dropdown01"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>Rooms</a
>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="balcony-room.html"
>Balcony Room</a
>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="panoramic-room.html"
>Panoramic Room</a
>
<div class="dropdown-divider"></div>
<a
class="dropdown-item page-scroll"
href="presidential-room.html"
>Presidential Room</a
>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<span class="nav-item ml-auto">
<a class="btn-outline-sm" href="tel:1-800-324-9832"
><i class="fas fa-phone-alt"></i>1-800-324-9832</a
>
</span>
<span class="nav-item lang-switch">
<a class="lang-item no-line active" href="index.html"
><img src="images/language-en.jpg" alt="alternative" />EN</a
>
&nbsp;|&nbsp;
<a class="lang-item no-line" href="index.html"
><img src="images/language-it.jpg" alt="alternative" />IT</a
>
</span>
</div>
<!-- end of navbar-collapse -->
</div>
<!-- end of container -->
</nav>
<!-- end of navbar -->
<!-- end of navigation -->
<!-- Header -->
<header class="ex-header bg-gray">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Contact Us</h1>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</header> <!-- end of ex-header -->
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Contact Us</h1>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</header>
<!-- end of ex-header -->
<!-- end of header -->
<!-- Form -->
<div class="ex-form-1 bg-gray pb-6">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<p class="mb-5">Here is your opportunity to get in touch with us if you are looking for a B&B capable of offering an amazing experience both in terms of comfort and relaxation <a href="mailto:reception@villa.com">reception@villa.com</a> or just give us a call whenever you can <a href="tel:1-800-324-9832">1-800-324-9832</a></p>
<!-- Contact Form -->
<form id="contactForm" data-toggle="validator" data-focus="false">
<div class="form-group">
<input type="text" class="form-control-input" id="cname" required>
<label class="label-control" for="cname">Name</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input type="email" class="form-control-input" id="cemail" required>
<label class="label-control" for="cemail">Email</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<textarea class="form-control-textarea" id="cmessage" required></textarea>
<label class="label-control" for="cmessage">Your message</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="form-control-submit-button">Submit</button>
</div>
<div class="form-message">
<div id="cmsgSubmit" class="h3 text-center hidden"></div>
</div>
</form>
<!-- end of contact form -->
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<p class="mb-5">
Here is your opportunity to get in touch with us if you are
looking for a B&B capable of offering an amazing experience both
in terms of comfort and relaxation
<a href="mailto:reception@villa.com">reception@villa.com</a> or
just give us a call whenever you can
<a href="tel:1-800-324-9832">1-800-324-9832</a>
</p>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-form-1 -->
<!-- Contact Form -->
<form id="contactForm" data-toggle="validator" data-focus="false">
<div class="form-group">
<input
type="text"
class="form-control-input"
id="cname"
required
/>
<label class="label-control" for="cname">Name</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input
type="email"
class="form-control-input"
id="cemail"
required
/>
<label class="label-control" for="cemail">Email</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<textarea
class="form-control-textarea"
id="cmessage"
required
></textarea>
<label class="label-control" for="cmessage">Your message</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="form-control-submit-button">
Submit
</button>
</div>
<div class="form-message">
<div id="cmsgSubmit" class="h3 text-center hidden"></div>
</div>
</form>
<!-- end of contact form -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-form-1 -->
<!-- end of form -->
<!-- Basic -->
<div class="ex-basic-1 pt-5">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Location Information</h2>
<p class="mb-5">Our mission at Villa is to focus an all the details to make your stay an amazing experience. We've trained our staff to meet your expectations and exceed them so that your Villa experience becomes not just a regular memory but one of the best memories you have. We're passionate about this stuff and we will not let you down.</p>
<div class="map-responsive mb-5">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6423.841890375458!2d25.435475745356655!3d36.386907765681734!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1499ce86adfd9ff7%3A0xb2a761f740d68afc!2sSantorini!5e0!3m2!1sen!2sro!4v1596106317886!5m2!1sen!2sro" allowfullscreen></iframe>
</div>
<a class="btn-solid-reg mb-6" href="index.html#header">Home</a>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<!-- end of basic -->
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Location Information</h2>
<p class="mb-5">
Our mission at Villa is to focus an all the details to make your
stay an amazing experience. We've trained our staff to meet your
expectations and exceed them so that your Villa experience becomes
not just a regular memory but one of the best memories you have.
We're passionate about this stuff and we will not let you down.
</p>
<div class="map-responsive mb-5">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6423.841890375458!2d25.435475745356655!3d36.386907765681734!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1499ce86adfd9ff7%3A0xb2a761f740d68afc!2sSantorini!5e0!3m2!1sen!2sro!4v1596106317886!5m2!1sen!2sro"
allowfullscreen
></iframe>
</div>
<a class="btn-solid-reg mb-6" href="index.html#header">Home</a>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>If you are looking too have a comfortable and relaxing time then you should get in touch with us using <a class="green" href="mailto:reception@villa.com">reception@villa.com</a></h3>
<div class="social-container">
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-pinterest-p fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x"></i>
</a>
</span>
</div> <!-- end of social-container -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of footer -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>
If you are looking too have a comfortable and relaxing time then
you should get in touch with us using
<a class="green" href="mailto:reception@villa.com"
>reception@villa.com</a
>
</h3>
<div class="social-container">
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-pinterest-p fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x"></i>
</a>
</span>
</div>
<!-- end of social-container -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of footer -->
<!-- end of footer -->
<!-- Copyright -->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="divider">
</div> <!-- end of col -->
</div> <!-- end of row -->
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled li-space-lg p-small">
<li><a href="article.html">Article</a></li>
<li><a href="balcony-room.html">Balcony Room</a></li>
<li><a href="panoramic-room.html">Panoramic Room</a></li>
<li><a href="presidential-room.html">Presidential Room</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> <!-- end of list-unstyled -->
</div> <!-- end of col -->
<div class="col-lg-6">
<p class="p-small statement">Copyright © <a href="#your-link">Name</a></p>
</div> <!-- end of col -->
</div> <!-- enf of row -->
</div> <!-- end of container -->
</div> <!-- end of copyright -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="divider" />
</div>
<!-- end of col -->
</div>
<!-- end of row -->
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled li-space-lg p-small">
<li><a href="article.html">Article</a></li>
<li><a href="balcony-room.html">Balcony Room</a></li>
<li><a href="panoramic-room.html">Panoramic Room</a></li>
<li><a href="presidential-room.html">Presidential Room</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- end of list-unstyled -->
</div>
<!-- end of col -->
<div class="col-lg-6">
<p class="p-small statement">
Copyright © <a href="#your-link">Name</a>
</p>
</div>
<!-- end of col -->
</div>
<!-- enf of row -->
</div>
<!-- end of container -->
</div>
<!-- end of copyright -->
<!-- end of copyright -->
<!-- Scripts -->
<script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
<script src="js/bootstrap-datepicker.min.js"></script> <!-- Datepicker for Bootstrap -->
<script src="js/scripts.js"></script> <!-- Custom scripts -->
</body>
</html>
<script src="js/jquery.min.js"></script>
<!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script>
<!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script>
<!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script>
<!-- Magnific Popup for lightboxes -->
<script src="js/bootstrap-datepicker.min.js"></script>
<!-- Datepicker for Bootstrap -->
<script src="js/scripts.js"></script>
<!-- Custom scripts -->
</body>
</html>

View file

@ -24,7 +24,7 @@
padding: 4px;
}
.datepicker-dropdown:before {
content: '';
content: "";
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
@ -34,7 +34,7 @@
position: absolute;
}
.datepicker-dropdown:after {
content: '';
content: "";
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
@ -675,4 +675,4 @@ fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {
margin-left: -5px;
margin-right: -5px;
}
/*# sourceMappingURL=bootstrap-datepicker3.css.map */
/*# sourceMappingURL=bootstrap-datepicker3.css.map */

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

@ -8,7 +8,8 @@
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8; }
opacity: 0.8;
}
.mfp-wrap {
top: 0;
@ -18,7 +19,8 @@
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
-webkit-backface-visibility: hidden;
}
.mfp-container {
text-align: center;
@ -28,16 +30,19 @@
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box; }
box-sizing: border-box;
}
.mfp-container:before {
content: '';
content: "";
display: inline-block;
height: 100%;
vertical-align: middle; }
vertical-align: middle;
}
.mfp-align-top .mfp-container:before {
display: none; }
display: none;
}
.mfp-content {
position: relative;
@ -45,29 +50,36 @@
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
z-index: 1045;
}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
cursor: auto;
}
.mfp-ajax-cur {
cursor: progress; }
cursor: progress;
}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
cursor: zoom-out;
}
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
cursor: auto; }
cursor: auto;
}
.mfp-close,
.mfp-arrow,
@ -75,16 +87,19 @@
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
user-select: none;
}
.mfp-loading.mfp-figure {
display: none; }
display: none;
}
.mfp-hide {
display: none !important; }
display: none !important;
}
.mfp-preloader {
color: #CCC;
color: #ccc;
position: absolute;
top: 50%;
width: auto;
@ -92,17 +107,22 @@
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #CCC; }
.mfp-preloader a:hover {
color: #FFF; }
z-index: 1044;
}
.mfp-preloader a {
color: #ccc;
}
.mfp-preloader a:hover {
color: #fff;
}
.mfp-s-ready .mfp-preloader {
display: none; }
display: none;
}
.mfp-s-error .mfp-content {
display: none; }
display: none;
}
button.mfp-close,
button.mfp-arrow {
@ -116,11 +136,13 @@ button.mfp-arrow {
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation; }
touch-action: manipulation;
}
button::-moz-focus-inner {
padding: 0;
border: 0; }
border: 0;
}
.mfp-close {
width: 44px;
@ -133,35 +155,41 @@ button::-moz-focus-inner {
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: #FFF;
color: #fff;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover,
.mfp-close:focus {
opacity: 1; }
.mfp-close:active {
top: 1px; }
font-family: Arial, Baskerville, monospace;
}
.mfp-close:hover,
.mfp-close:focus {
opacity: 1;
}
.mfp-close:active {
top: 1px;
}
.mfp-close-btn-in .mfp-close {
color: #333; }
color: #333;
}
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
color: #fff;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
width: 100%;
}
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
color: #ccc;
font-size: 12px;
line-height: 18px;
white-space: nowrap; }
white-space: nowrap;
}
.mfp-arrow {
position: absolute;
@ -172,74 +200,91 @@ button::-moz-focus-inner {
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent; }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7; }
-webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
margin-top: -54px;
}
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1;
}
.mfp-arrow:before,
.mfp-arrow:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent;
}
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px;
}
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7;
}
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px; }
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F; }
left: 0;
}
.mfp-arrow-left:after {
border-right: 17px solid #fff;
margin-left: 31px;
}
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3f3f3f;
}
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px; }
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F; }
right: 0;
}
.mfp-arrow-right:after {
border-left: 17px solid #fff;
margin-left: 39px;
}
.mfp-arrow-right:before {
border-left: 27px solid #3f3f3f;
}
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
top: -40px;
}
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000; }
padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000;
}
/* Main image in popup */
img.mfp-img {
@ -250,31 +295,36 @@ img.mfp-img {
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
margin: 0 auto;
}
/* The shadow behind the image */
.mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444; }
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-figure figure {
margin: 0; }
line-height: 0;
}
.mfp-figure:after {
content: "";
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444;
}
.mfp-figure small {
color: #bdbdbd;
display: block;
font-size: 12px;
line-height: 14px;
}
.mfp-figure figure {
margin: 0;
}
.mfp-bottom-bar {
margin-top: -36px;
@ -282,36 +332,45 @@ img.mfp-img {
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
cursor: auto;
}
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
color: #f3f3f3;
word-wrap: break-word;
padding-right: 36px; }
padding-right: 36px;
}
.mfp-image-holder .mfp-content {
max-width: 100%; }
max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
cursor: pointer;
}
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
@media screen and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
padding-right: 0;
}
.mfp-img-mobile img.mfp-img {
padding: 0; }
padding: 0;
}
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
bottom: 0;
}
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; }
margin-left: 5px;
}
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
@ -319,12 +378,15 @@ img.mfp-img {
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
box-sizing: border-box;
}
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0;
}
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
top: 3px;
}
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
@ -334,18 +396,25 @@ img.mfp-img {
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; } }
padding: 0;
}
}
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
transform: scale(0.75);
}
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
transform-origin: 0;
}
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
transform-origin: 100%;
}
.mfp-container {
padding-left: 6px;
padding-right: 6px; } }
padding-right: 6px;
}
}

File diff suppressed because it is too large Load diff

View file

@ -41,7 +41,9 @@
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-property:
transform,
-webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
@ -72,7 +74,9 @@
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-property:
transform,
-webkit-transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
@ -87,11 +91,18 @@
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
-webkit-transition-property:
height,
-webkit-transform;
transition-property:
height,
-webkit-transform;
-o-transition-property: transform, height;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform;
transition-property:
transform,
height,
-webkit-transform;
}
/* 3D Effects */
.swiper-container-3d {
@ -121,28 +132,100 @@
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
right top,
left top,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to left,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
left top,
right top,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
left,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
left,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
left bottom,
left top,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
bottom,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
bottom,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
background-image: -webkit-linear-gradient(
top,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: -o-linear-gradient(
top,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
@ -298,48 +381,93 @@ button.swiper-pagination-bullet {
-webkit-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
.swiper-container-vertical
> .swiper-pagination-bullets
.swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
.swiper-container-vertical
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
.swiper-container-vertical
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
display: inline-block;
-webkit-transition: 200ms top, 200ms -webkit-transform;
transition: 200ms top, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top, 200ms -webkit-transform;
-webkit-transition:
200ms top,
200ms -webkit-transform;
transition:
200ms top,
200ms -webkit-transform;
-o-transition:
200ms transform,
200ms top;
transition:
200ms transform,
200ms top;
transition:
200ms transform,
200ms top,
200ms -webkit-transform;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
.swiper-container-horizontal
> .swiper-pagination-bullets
.swiper-pagination-bullet {
margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
.swiper-container-horizontal
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms left, 200ms -webkit-transform;
transition: 200ms left, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left, 200ms -webkit-transform;
.swiper-container-horizontal
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
-webkit-transition:
200ms left,
200ms -webkit-transform;
transition:
200ms left,
200ms -webkit-transform;
-o-transition:
200ms transform,
200ms left;
transition:
200ms transform,
200ms left;
transition:
200ms transform,
200ms left,
200ms -webkit-transform;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms right, 200ms -webkit-transform;
transition: 200ms right, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right, 200ms -webkit-transform;
.swiper-container-horizontal.swiper-container-rtl
> .swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
-webkit-transition:
200ms right,
200ms -webkit-transform;
transition:
200ms right,
200ms -webkit-transform;
-o-transition:
200ms transform,
200ms right;
transition:
200ms transform,
200ms right;
transition:
200ms transform,
200ms right,
200ms -webkit-transform;
}
/* Progress */
.swiper-pagination-progressbar {
@ -360,20 +488,24 @@ button.swiper-pagination-bullet {
-ms-transform-origin: left top;
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
.swiper-container-rtl
.swiper-pagination-progressbar
.swiper-pagination-progressbar-fill {
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
.swiper-container-vertical
> .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
.swiper-container-horizontal
> .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
@ -385,7 +517,8 @@ button.swiper-pagination-bullet {
.swiper-pagination-progressbar.swiper-pagination-white {
background: rgba(255, 255, 255, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
.swiper-pagination-progressbar.swiper-pagination-white
.swiper-pagination-progressbar-fill {
background: #ffffff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
@ -394,7 +527,8 @@ button.swiper-pagination-bullet {
.swiper-pagination-progressbar.swiper-pagination-black {
background: rgba(0, 0, 0, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
.swiper-pagination-progressbar.swiper-pagination-black
.swiper-pagination-progressbar-fill {
background: #000000;
}
.swiper-pagination-lock {
@ -484,7 +618,7 @@ button.swiper-pagination-bullet {
}
.swiper-lazy-preloader:after {
display: block;
content: '';
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -5,40 +5,300 @@
* to offer multiple easing options
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){"use strict";return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){"use strict";return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){"use strict";return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){"use strict";return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){"use strict";return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){"use strict";return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){"use strict";return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){"use strict";return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){"use strict";return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){"use strict";if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){"use strict";return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){"use strict";return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){"use strict";return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){"use strict";if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){"use strict";if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
*/
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
def: "easeOutQuad",
swing: function (e, f, a, h, g) {
"use strict";
return jQuery.easing[jQuery.easing.def](e, f, a, h, g);
},
easeInQuad: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f + a;
},
easeOutQuad: function (e, f, a, h, g) {
"use strict";
return -h * (f /= g) * (f - 2) + a;
},
easeInOutQuad: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f + a;
}
return (-h / 2) * (--f * (f - 2) - 1) + a;
},
easeInCubic: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f * f + a;
},
easeOutCubic: function (e, f, a, h, g) {
"use strict";
return h * ((f = f / g - 1) * f * f + 1) + a;
},
easeInOutCubic: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f * f + a;
}
return (h / 2) * ((f -= 2) * f * f + 2) + a;
},
easeInQuart: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f * f * f + a;
},
easeOutQuart: function (e, f, a, h, g) {
"use strict";
return -h * ((f = f / g - 1) * f * f * f - 1) + a;
},
easeInOutQuart: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f * f * f + a;
}
return (-h / 2) * ((f -= 2) * f * f * f - 2) + a;
},
easeInQuint: function (e, f, a, h, g) {
"use strict";
return h * (f /= g) * f * f * f * f + a;
},
easeOutQuint: function (e, f, a, h, g) {
"use strict";
return h * ((f = f / g - 1) * f * f * f * f + 1) + a;
},
easeInOutQuint: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (h / 2) * f * f * f * f * f + a;
}
return (h / 2) * ((f -= 2) * f * f * f * f + 2) + a;
},
easeInSine: function (e, f, a, h, g) {
"use strict";
return -h * Math.cos((f / g) * (Math.PI / 2)) + h + a;
},
easeOutSine: function (e, f, a, h, g) {
"use strict";
return h * Math.sin((f / g) * (Math.PI / 2)) + a;
},
easeInOutSine: function (e, f, a, h, g) {
"use strict";
return (-h / 2) * (Math.cos((Math.PI * f) / g) - 1) + a;
},
easeInExpo: function (e, f, a, h, g) {
"use strict";
return f == 0 ? a : h * Math.pow(2, 10 * (f / g - 1)) + a;
},
easeOutExpo: function (e, f, a, h, g) {
"use strict";
return f == g ? a + h : h * (-Math.pow(2, (-10 * f) / g) + 1) + a;
},
easeInOutExpo: function (e, f, a, h, g) {
"use strict";
if (f == 0) {
return a;
}
if (f == g) {
return a + h;
}
if ((f /= g / 2) < 1) {
return (h / 2) * Math.pow(2, 10 * (f - 1)) + a;
}
return (h / 2) * (-Math.pow(2, -10 * --f) + 2) + a;
},
easeInCirc: function (e, f, a, h, g) {
"use strict";
return -h * (Math.sqrt(1 - (f /= g) * f) - 1) + a;
},
easeOutCirc: function (e, f, a, h, g) {
"use strict";
return h * Math.sqrt(1 - (f = f / g - 1) * f) + a;
},
easeInOutCirc: function (e, f, a, h, g) {
"use strict";
if ((f /= g / 2) < 1) {
return (-h / 2) * (Math.sqrt(1 - f * f) - 1) + a;
}
return (h / 2) * (Math.sqrt(1 - (f -= 2) * f) + 1) + a;
},
easeInElastic: function (f, h, e, l, k) {
"use strict";
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e;
}
if ((h /= k) == 1) {
return e + l;
}
if (!j) {
j = k * 0.3;
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4;
} else {
var i = (j / (2 * Math.PI)) * Math.asin(l / g);
}
return (
-(
g *
Math.pow(2, 10 * (h -= 1)) *
Math.sin(((h * k - i) * (2 * Math.PI)) / j)
) + e
);
},
easeOutElastic: function (f, h, e, l, k) {
"use strict";
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e;
}
if ((h /= k) == 1) {
return e + l;
}
if (!j) {
j = k * 0.3;
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4;
} else {
var i = (j / (2 * Math.PI)) * Math.asin(l / g);
}
return (
g * Math.pow(2, -10 * h) * Math.sin(((h * k - i) * (2 * Math.PI)) / j) +
l +
e
);
},
easeInOutElastic: function (f, h, e, l, k) {
"use strict";
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e;
}
if ((h /= k / 2) == 2) {
return e + l;
}
if (!j) {
j = k * (0.3 * 1.5);
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4;
} else {
var i = (j / (2 * Math.PI)) * Math.asin(l / g);
}
if (h < 1) {
return (
-0.5 *
(g *
Math.pow(2, 10 * (h -= 1)) *
Math.sin(((h * k - i) * (2 * Math.PI)) / j)) +
e
);
}
return (
g *
Math.pow(2, -10 * (h -= 1)) *
Math.sin(((h * k - i) * (2 * Math.PI)) / j) *
0.5 +
l +
e
);
},
easeInBack: function (e, f, a, i, h, g) {
"use strict";
if (g == undefined) {
g = 1.70158;
}
return i * (f /= h) * f * ((g + 1) * f - g) + a;
},
easeOutBack: function (e, f, a, i, h, g) {
"use strict";
if (g == undefined) {
g = 1.70158;
}
return i * ((f = f / h - 1) * f * ((g + 1) * f + g) + 1) + a;
},
easeInOutBack: function (e, f, a, i, h, g) {
"use strict";
if (g == undefined) {
g = 1.70158;
}
if ((f /= h / 2) < 1) {
return (i / 2) * (f * f * (((g *= 1.525) + 1) * f - g)) + a;
}
return (i / 2) * ((f -= 2) * f * (((g *= 1.525) + 1) * f + g) + 2) + a;
},
easeInBounce: function (e, f, a, h, g) {
"use strict";
return h - jQuery.easing.easeOutBounce(e, g - f, 0, h, g) + a;
},
easeOutBounce: function (e, f, a, h, g) {
"use strict";
if ((f /= g) < 1 / 2.75) {
return h * (7.5625 * f * f) + a;
} else {
if (f < 2 / 2.75) {
return h * (7.5625 * (f -= 1.5 / 2.75) * f + 0.75) + a;
} else {
if (f < 2.5 / 2.75) {
return h * (7.5625 * (f -= 2.25 / 2.75) * f + 0.9375) + a;
} else {
return h * (7.5625 * (f -= 2.625 / 2.75) * f + 0.984375) + a;
}
}
}
},
easeInOutBounce: function (e, f, a, h, g) {
"use strict";
if (f < g / 2) {
return jQuery.easing.easeInBounce(e, f * 2, 0, h, g) * 0.5 + a;
}
return (
jQuery.easing.easeOutBounce(e, f * 2 - g, 0, h, g) * 0.5 + h * 0.5 + a
);
},
});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,208 +1,217 @@
/* Description: Custom JS file */
(function ($) {
"use strict";
(function($) {
"use strict";
/* Navbar Scripts */
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 600, 'easeInOutExpo');
event.preventDefault();
});
/* Navbar Scripts */
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function () {
$(document).on("click", "a.page-scroll", function (event) {
var $anchor = $(this);
$("html, body")
.stop()
.animate(
{
scrollTop: $($anchor.attr("href")).offset().top,
},
600,
"easeInOutExpo",
);
event.preventDefault();
});
});
// offcanvas script from Bootstrap + added element to close menu on click in small viewport
$('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on('click', function () {
$('.offcanvas-collapse').toggleClass('open')
})
// offcanvas script from Bootstrap + added element to close menu on click in small viewport
$('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on(
"click",
function () {
$(".offcanvas-collapse").toggleClass("open");
},
);
// hover in desktop mode
function toggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);
// hover in desktop mode
function toggleDropdown(e) {
const _d = $(e.target).closest(".dropdown"),
_m = $(".dropdown-menu", _d);
setTimeout(
function () {
const shouldOpen = e.type !== "click" && _d.is(":hover");
_m.toggleClass("show", shouldOpen);
_d.toggleClass("show", shouldOpen);
$('[data-toggle="dropdown"]', _d).attr("aria-expanded", shouldOpen);
},
e.type === "mouseleave" ? 300 : 0,
);
}
$("body")
.on("mouseenter mouseleave", ".dropdown", toggleDropdown)
.on("click", ".dropdown-menu a", toggleDropdown);
/* Header Slider - Swiper */
var headerSlider = new Swiper(".header-slider", {
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
loop: true,
effect: "fade",
speed: 700,
});
/* Header Slider - Swiper */
var headerSlider = new Swiper('.header-slider', {
autoplay: {
delay: 3500,
disableOnInteraction: false
},
loop: true,
effect: "fade",
speed: 700
});
/* Image Slider - Swiper */
var imageSlider = new Swiper('.image-slider', {
autoplay: {
delay: 3000,
disableOnInteraction: false
},
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
/* Image Slider - Swiper */
var imageSlider = new Swiper(".image-slider", {
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: false,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 3,
spaceBetween: 20,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1,
},
// when window is <= 991px
991: {
slidesPerView: 2,
spaceBetween: 10,
},
// when window is <= 1199px
1199: {
slidesPerView: 3,
spaceBetween: 20,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1
},
// when window is <= 991px
991: {
slidesPerView: 2,
spaceBetween: 10
},
// when window is <= 1199px
1199: {
slidesPerView: 3,
spaceBetween: 20
},
}
},
},
});
/* Image Slider Room - Swiper */
var imageSlider = new Swiper(".image-slider-room", {
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: false,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
/* Card Slider - Swiper */
var cardSlider = new Swiper(".card-slider", {
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 3,
spaceBetween: 30,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1,
},
// when window is <= 991px
991: {
slidesPerView: 2,
},
},
});
/* Image Lightbox - Magnific Popup */
$(".popup-link").magnificPopup({
removalDelay: 300,
type: "image",
callbacks: {
beforeOpen: function () {
this.st.image.markup = this.st.image.markup.replace(
"mfp-figure",
"mfp-figure " + this.st.el.attr("data-effect"),
);
},
beforeClose: function () {
$(".mfp-figure").addClass("fadeOut");
},
},
gallery: {
enabled: true, //enable gallery mode
},
});
/* Details Lightbox - Magnific Popup */
$(".popup-with-move-anim").magnificPopup({
type: "inline",
fixedContentPos: true,
fixedBgPos: true,
overflowY: "auto",
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: "my-mfp-slide-bottom",
});
/* Move Form Fields Label When User Types */
// for input and textarea fields
$("input, textarea").keyup(function () {
if ($(this).val() != "") {
$(this).addClass("notEmpty");
} else {
$(this).removeClass("notEmpty");
}
});
/* Datepicker - Bootstrap Datepicker */
$("#start").datepicker({
todayHighlight: true,
autoclose: true,
format: "MM/dd/yyyy",
});
// detects change to selected date to keep the label above the value in the input field
$("#start")
.datepicker()
.on("changeDate", function (e) {
$("input[id=start]").addClass("notEmpty");
});
$("#end").datepicker({
autoclose: true,
format: "MM/dd/yyyy",
});
/* Image Slider Room - Swiper */
var imageSlider = new Swiper('.image-slider-room', {
autoplay: {
delay: 3000,
disableOnInteraction: false
},
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
/* Card Slider - Swiper */
var cardSlider = new Swiper('.card-slider', {
autoplay: {
delay: 4000,
disableOnInteraction: false
},
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
slidesPerView: 3,
spaceBetween: 30,
breakpoints: {
// when window is <= 767px
767: {
slidesPerView: 1
},
// when window is <= 991px
991: {
slidesPerView: 2
}
}
// detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
$("#end")
.datepicker()
.on("changeDate", function (e) {
$("input[id=end]").addClass("notEmpty");
});
/* Back To Top Button */
// create the back to top button
$("body").prepend(
'<a href="body" class="back-to-top page-scroll">Back to Top</a>',
);
var amountScrolled = 700;
$(window).scroll(function () {
if ($(window).scrollTop() > amountScrolled) {
$("a.back-to-top").fadeIn("500");
} else {
$("a.back-to-top").fadeOut("500");
}
});
/* Image Lightbox - Magnific Popup */
$('.popup-link').magnificPopup({
removalDelay: 300,
type: 'image',
callbacks: {
beforeOpen: function() {
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure ' + this.st.el.attr('data-effect'));
},
beforeClose: function() {
$('.mfp-figure').addClass('fadeOut');
}
},
gallery:{
enabled:true //enable gallery mode
}
});
/* Details Lightbox - Magnific Popup */
$('.popup-with-move-anim').magnificPopup({
type: 'inline',
fixedContentPos: true,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
/* Move Form Fields Label When User Types */
// for input and textarea fields
$("input, textarea").keyup(function(){
if ($(this).val() != '') {
$(this).addClass('notEmpty');
} else {
$(this).removeClass('notEmpty');
}
});
/* Datepicker - Bootstrap Datepicker */
$('#start').datepicker({
todayHighlight: true,
autoclose: true,
format: 'MM/dd/yyyy',
});
// detects change to selected date to keep the label above the value in the input field
$('#start').datepicker().on('changeDate', function(e) {
$("input[id=start]").addClass('notEmpty');
});
$('#end').datepicker({
autoclose: true,
format: 'MM/dd/yyyy'
});
// detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
$('#end').datepicker().on('changeDate', function(e) {
$("input[id=end]").addClass('notEmpty');
});
/* Back To Top Button */
// create the back to top button
$('body').prepend('<a href="body" class="back-to-top page-scroll">Back to Top</a>');
var amountScrolled = 700;
$(window).scroll(function() {
if ($(window).scrollTop() > amountScrolled) {
$('a.back-to-top').fadeIn('500');
} else {
$('a.back-to-top').fadeOut('500');
}
});
/* Removes Long Focus On Buttons */
$(".button, a, button").mouseup(function() {
$(this).blur();
});
})(jQuery);
/* Removes Long Focus On Buttons */
$(".button, a, button").mouseup(function () {
$(this).blur();
});
})(jQuery);

File diff suppressed because one or more lines are too long

View file

@ -1,305 +1,471 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- SEO Meta Tags -->
<meta name="description" content="Author">
<meta name="author" content="Name">
<meta name="description" content="Author" />
<meta name="author" content="Name" />
<!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
<meta property="og:site_name" content="" /> <!-- website name -->
<meta property="og:site" content="" /> <!-- website link -->
<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
<meta name="twitter:card" content="summary_large_image"> <!-- to have large image post format in Twitter -->
<meta property="og:site_name" content="" />
<!-- website name -->
<meta property="og:site" content="" />
<!-- website link -->
<meta property="og:title" content="" />
<!-- title shown in the actual shared post -->
<meta property="og:description" content="" />
<!-- description shown in the actual shared post -->
<meta property="og:image" content="" />
<!-- image link, make sure it's jpg -->
<meta property="og:url" content="" />
<!-- where do you want your post to link to -->
<meta name="twitter:card" content="summary_large_image" />
<!-- to have large image post format in Twitter -->
<!-- Webpage Title -->
<title>Panoramic Room - Villa</title>
<!-- Styles -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="css/bootstrap-datepicker3.css" rel="stylesheet">
<link href="css/swiper.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="images/favicon.png">
</head>
<body data-spy="scroll" data-target=".fixed-top">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap"
rel="stylesheet"
/>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/fontawesome-all.css" rel="stylesheet" />
<link href="css/bootstrap-datepicker3.css" rel="stylesheet" />
<link href="css/swiper.css" rel="stylesheet" />
<link href="css/magnific-popup.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<!-- Favicon -->
<link rel="icon" href="images/favicon.png" />
</head>
<body data-spy="scroll" data-target=".fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"
><img src="images/logo.svg" alt="alternative"
/></a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<button
class="navbar-toggler p-0 border-0"
type="button"
data-toggle="offcanvas"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="article.html">Article <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rooms</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="balcony-room.html">Balcony Room</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="panoramic-room.html">Panoramic Room</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="presidential-room.html">Presidential Room</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<span class="nav-item ml-auto">
<a class="btn-outline-sm" href="tel:1-800-324-9832"><i class="fas fa-phone-alt"></i>1-800-324-9832</a>
</span>
<span class="nav-item lang-switch">
<a class="lang-item no-line active" href="index.html"><img src="images/language-en.jpg" alt="alternative">EN</a> &nbsp;|&nbsp; <a class="lang-item no-line" href="index.html"><img src="images/language-it.jpg" alt="alternative">IT</a>
</span>
</div> <!-- end of navbar-collapse -->
</div> <!-- end of container -->
</nav> <!-- end of navbar -->
<div
class="navbar-collapse offcanvas-collapse"
id="navbarsExampleDefault"
>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="article.html"
>Article <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="dropdown01"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>Rooms</a
>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="balcony-room.html"
>Balcony Room</a
>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="panoramic-room.html"
>Panoramic Room</a
>
<div class="dropdown-divider"></div>
<a
class="dropdown-item page-scroll"
href="presidential-room.html"
>Presidential Room</a
>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<span class="nav-item ml-auto">
<a class="btn-outline-sm" href="tel:1-800-324-9832"
><i class="fas fa-phone-alt"></i>1-800-324-9832</a
>
</span>
<span class="nav-item lang-switch">
<a class="lang-item no-line active" href="index.html"
><img src="images/language-en.jpg" alt="alternative" />EN</a
>
&nbsp;|&nbsp;
<a class="lang-item no-line" href="index.html"
><img src="images/language-it.jpg" alt="alternative" />IT</a
>
</span>
</div>
<!-- end of navbar-collapse -->
</div>
<!-- end of container -->
</nav>
<!-- end of navbar -->
<!-- end of navigation -->
<!-- Header -->
<header class="ex-header bg-gray">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Panoramic Room - $79/day</h1>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</header> <!-- end of ex-header -->
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Panoramic Room - $79/day</h1>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</header>
<!-- end of ex-header -->
<!-- end of header -->
<!-- Basic -->
<div class="ex-basic-1 bg-gray pb-6">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Image Slider Room -->
<div class="slider-container">
<div class="swiper-container image-slider-room">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="images/room-panoramic-1.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="images/room-panoramic-1.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
<!-- Image Slider Room -->
<div class="slider-container">
<div class="swiper-container image-slider-room">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="images/room-panoramic-2.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="images/room-panoramic-2.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="images/room-panoramic-1.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-panoramic-1.jpg" alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="images/room-panoramic-3.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="images/room-panoramic-3.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
</div>
<!-- end of swiper-wrapper -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="images/room-panoramic-2.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-panoramic-2.jpg" alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="images/room-panoramic-3.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-panoramic-3.jpg" alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
</div> <!-- end of swiper-wrapper -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- end of add arrows -->
</div> <!-- end of swiper container -->
</div> <!-- end of slider-container -->
<!-- end of image slider -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- end of add arrows -->
</div>
<!-- end of swiper container -->
</div>
<!-- end of slider-container -->
<!-- end of image slider -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Basic -->
<div class="ex-basic-1 pt-5">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Description</h2>
<p class="mb-5">Each of Villa's rooms was designed to offer the best possible experience for many types of travelers from the adventure seekers to those who value comfort. We've designed the rooms based on more than 10 years of experience in the hospitality business and the entire team is very proud of what we achieved with Villa.</p>
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Description</h2>
<p class="mb-5">
Each of Villa's rooms was designed to offer the best possible
experience for many types of travelers from the adventure seekers
to those who value comfort. We've designed the rooms based on more
than 10 years of experience in the hospitality business and the
entire team is very proud of what we achieved with Villa.
</p>
<div class="text-box mb-6">
<h3>Rooms Designed For Comfort And Relaxation</h3>
<p>The rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
</div> <!-- end of text-box -->
<div class="text-box mb-6">
<h3>Rooms Designed For Comfort And Relaxation</h3>
<p>
The rooms are designed to offer the best possible levels of
comfort and relaxation. The design is contemporary based on
comforting colors and manages to appeal to many types of
personalities and tastes. The materials used in Villa's
construction are modern and durable, offering warm temperatures
in the winter and cooler summer days.
</p>
</div>
<!-- end of text-box -->
<ul class="list-unstyled list-icon-lg mb-5">
<li class="media">
<div class="list-icon bg-1">
<i class="fas fa-shower"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Modern Amenities</h3>
<p class="list-item-text">Villa's amenities and rooms rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are provided by top suppliers.</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-2">
<i class="fas fa-tv"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Brand Name Appliances</h3>
<p class="list-item-text">All the electronics are functional and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The main focus of all appliances is to offer a great vacation time while indoors.</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-3">
<i class="fas fa-wine-bottle"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Packed Minibar</h3>
<p class="list-item-text">The minibar is packed with goodie and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal. The main focus of the minibar is to offer a great vacation time while you are in the room.</p>
</div>
</li>
</ul> <!-- end of list-unstyled -->
<ul class="list-unstyled list-icon-lg mb-5">
<li class="media">
<div class="list-icon bg-1">
<i class="fas fa-shower"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Modern Amenities</h3>
<p class="list-item-text">
Villa's amenities and rooms rooms are designed to offer the
best possible levels of comfort and relaxation. The design
is contemporary based on comforting colors and manages to
appeal to many types of personalities and tastes. The
materials used in Villa's construction are provided by top
suppliers.
</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-2">
<i class="fas fa-tv"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Brand Name Appliances</h3>
<p class="list-item-text">
All the electronics are functional and designed to offer the
best possible levels of comfort and relaxation. The design
is contemporary based on comforting colors and manages to
appeal to many types of personalities and tastes. The main
focus of all appliances is to offer a great vacation time
while indoors.
</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-3">
<i class="fas fa-wine-bottle"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Packed Minibar</h3>
<p class="list-item-text">
The minibar is packed with goodie and designed to offer the
best possible levels of comfort and relaxation. The design
is contemporary based on comforting colors and manages to
appeal. The main focus of the minibar is to offer a great
vacation time while you are in the room.
</p>
</div>
</li>
</ul>
<!-- end of list-unstyled -->
<p class="mb-4">Other features designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
<p class="mb-4">
Other features designed to offer the best possible levels of
comfort and relaxation. The design is contemporary based on
comforting colors and manages to appeal to many types of
personalities and tastes. The materials used in Villa's
construction are modern and durable, offering warm temperatures in
the winter and cooler summer days.
</p>
<ul class="list-unstyled li-space-lg amenities mb-5">
<li class="media">
<i class="fas fa-shower"></i>
<div class="media-body"><strong>Warm shower</strong> for those early spring and late autumn days. Showers are also available at the beach</div>
</li>
<li class="media">
<i class="fas fa-tv"></i>
<div class="media-body"><strong>Modern LCD tv</strong> for rainy days that have to be spent inside. You can event connect the gaming console</div>
</li>
<li class="media">
<i class="fas fa-snowflake"></i>
<div class="media-body"><strong>Air conditioning</strong> that is state of the art technology specially designed to create the optimum temperature</div>
</li>
<li class="media">
<i class="fas fa-image"></i>
<div class="media-body"><strong>Beautiful views</strong> from any window. Enjoy them from inside the room or sitting outside on the large balcony</div>
</li>
<li class="media">
<i class="fas fa-wine-bottle"></i>
<div class="media-body"><strong>Packed minibar</strong> loaded with goodies so you can enjoy some treats if you forget to shop in town</div>
</li>
</ul>
<a class="btn-solid-reg mb-6" href="index.html">Home</a>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<ul class="list-unstyled li-space-lg amenities mb-5">
<li class="media">
<i class="fas fa-shower"></i>
<div class="media-body">
<strong>Warm shower</strong> for those early spring and late
autumn days. Showers are also available at the beach
</div>
</li>
<li class="media">
<i class="fas fa-tv"></i>
<div class="media-body">
<strong>Modern LCD tv</strong> for rainy days that have to be
spent inside. You can event connect the gaming console
</div>
</li>
<li class="media">
<i class="fas fa-snowflake"></i>
<div class="media-body">
<strong>Air conditioning</strong> that is state of the art
technology specially designed to create the optimum
temperature
</div>
</li>
<li class="media">
<i class="fas fa-image"></i>
<div class="media-body">
<strong>Beautiful views</strong> from any window. Enjoy them
from inside the room or sitting outside on the large balcony
</div>
</li>
<li class="media">
<i class="fas fa-wine-bottle"></i>
<div class="media-body">
<strong>Packed minibar</strong> loaded with goodies so you can
enjoy some treats if you forget to shop in town
</div>
</li>
</ul>
<a class="btn-solid-reg mb-6" href="index.html">Home</a>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>If you are looking too have a comfortable and relaxing time then you should get in touch with us using <a class="green" href="mailto:reception@villa.com">reception@villa.com</a></h3>
<div class="social-container">
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-pinterest-p fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x"></i>
</a>
</span>
</div> <!-- end of social-container -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of footer -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>
If you are looking too have a comfortable and relaxing time then
you should get in touch with us using
<a class="green" href="mailto:reception@villa.com"
>reception@villa.com</a
>
</h3>
<div class="social-container">
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-pinterest-p fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x"></i>
</a>
</span>
</div>
<!-- end of social-container -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of footer -->
<!-- end of footer -->
<!-- Copyright -->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="divider">
</div> <!-- end of col -->
</div> <!-- end of row -->
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled li-space-lg p-small">
<li><a href="article.html">Article</a></li>
<li><a href="balcony-room.html">Balcony Room</a></li>
<li><a href="panoramic-room.html">Panoramic Room</a></li>
<li><a href="presidential-room.html">Presidential Room</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> <!-- end of list-unstyled -->
</div> <!-- end of col -->
<div class="col-lg-6">
<p class="p-small statement">Copyright © <a href="#your-link">Name</a></p>
</div> <!-- end of col -->
</div> <!-- enf of row -->
</div> <!-- end of container -->
</div> <!-- end of copyright -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="divider" />
</div>
<!-- end of col -->
</div>
<!-- end of row -->
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled li-space-lg p-small">
<li><a href="article.html">Article</a></li>
<li><a href="balcony-room.html">Balcony Room</a></li>
<li><a href="panoramic-room.html">Panoramic Room</a></li>
<li><a href="presidential-room.html">Presidential Room</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- end of list-unstyled -->
</div>
<!-- end of col -->
<div class="col-lg-6">
<p class="p-small statement">
Copyright © <a href="#your-link">Name</a>
</p>
</div>
<!-- end of col -->
</div>
<!-- enf of row -->
</div>
<!-- end of container -->
</div>
<!-- end of copyright -->
<!-- end of copyright -->
<!-- Scripts -->
<script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
<script src="js/bootstrap-datepicker.min.js"></script> <!-- Datepicker for Bootstrap -->
<script src="js/scripts.js"></script> <!-- Custom scripts -->
</body>
</html>
<script src="js/jquery.min.js"></script>
<!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script>
<!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script>
<!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script>
<!-- Magnific Popup for lightboxes -->
<script src="js/bootstrap-datepicker.min.js"></script>
<!-- Datepicker for Bootstrap -->
<script src="js/scripts.js"></script>
<!-- Custom scripts -->
</body>
</html>

View file

@ -1,305 +1,471 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- SEO Meta Tags -->
<meta name="description" content="Description">
<meta name="author" content="Author">
<meta name="description" content="Description" />
<meta name="author" content="Author" />
<!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
<meta property="og:site_name" content="" /> <!-- website name -->
<meta property="og:site" content="" /> <!-- website link -->
<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
<meta name="twitter:card" content="summary_large_image"> <!-- to have large image post format in Twitter -->
<meta property="og:site_name" content="" />
<!-- website name -->
<meta property="og:site" content="" />
<!-- website link -->
<meta property="og:title" content="" />
<!-- title shown in the actual shared post -->
<meta property="og:description" content="" />
<!-- description shown in the actual shared post -->
<meta property="og:image" content="" />
<!-- image link, make sure it's jpg -->
<meta property="og:url" content="" />
<!-- where do you want your post to link to -->
<meta name="twitter:card" content="summary_large_image" />
<!-- to have large image post format in Twitter -->
<!-- Webpage Title -->
<title>Presidential Room - Villa</title>
<!-- Styles -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="css/bootstrap-datepicker3.css" rel="stylesheet">
<link href="css/swiper.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="images/favicon.png">
</head>
<body data-spy="scroll" data-target=".fixed-top">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap"
rel="stylesheet"
/>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/fontawesome-all.css" rel="stylesheet" />
<link href="css/bootstrap-datepicker3.css" rel="stylesheet" />
<link href="css/swiper.css" rel="stylesheet" />
<link href="css/magnific-popup.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<!-- Favicon -->
<link rel="icon" href="images/favicon.png" />
</head>
<body data-spy="scroll" data-target=".fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"
><img src="images/logo.svg" alt="alternative"
/></a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<button
class="navbar-toggler p-0 border-0"
type="button"
data-toggle="offcanvas"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="article.html">Article <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rooms</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="balcony-room.html">Balcony Room</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="panoramic-room.html">Panoramic Room</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="presidential-room.html">Presidential Room</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<span class="nav-item ml-auto">
<a class="btn-outline-sm" href="tel:1-800-324-9832"><i class="fas fa-phone-alt"></i>1-800-324-9832</a>
</span>
<span class="nav-item lang-switch">
<a class="lang-item no-line active" href="index.html"><img src="images/language-en.jpg" alt="alternative">EN</a> &nbsp;|&nbsp; <a class="lang-item no-line" href="index.html"><img src="images/language-it.jpg" alt="alternative">IT</a>
</span>
</div> <!-- end of navbar-collapse -->
</div> <!-- end of container -->
</nav> <!-- end of navbar -->
<div
class="navbar-collapse offcanvas-collapse"
id="navbarsExampleDefault"
>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="article.html"
>Article <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="dropdown01"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>Rooms</a
>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="balcony-room.html"
>Balcony Room</a
>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="panoramic-room.html"
>Panoramic Room</a
>
<div class="dropdown-divider"></div>
<a
class="dropdown-item page-scroll"
href="presidential-room.html"
>Presidential Room</a
>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<span class="nav-item ml-auto">
<a class="btn-outline-sm" href="tel:1-800-324-9832"
><i class="fas fa-phone-alt"></i>1-800-324-9832</a
>
</span>
<span class="nav-item lang-switch">
<a class="lang-item no-line active" href="index.html"
><img src="images/language-en.jpg" alt="alternative" />EN</a
>
&nbsp;|&nbsp;
<a class="lang-item no-line" href="index.html"
><img src="images/language-it.jpg" alt="alternative" />IT</a
>
</span>
</div>
<!-- end of navbar-collapse -->
</div>
<!-- end of container -->
</nav>
<!-- end of navbar -->
<!-- end of navigation -->
<!-- Header -->
<header class="ex-header bg-gray">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Presidential Room - $99/day</h1>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</header> <!-- end of ex-header -->
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h1 class="green">Presidential Room - $99/day</h1>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</header>
<!-- end of ex-header -->
<!-- end of header -->
<!-- Basic -->
<div class="ex-basic-1 bg-gray pb-6">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Image Slider Room -->
<div class="slider-container">
<div class="swiper-container image-slider-room">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="images/room-presidential-1.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="images/room-presidential-1.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
<!-- Image Slider Room -->
<div class="slider-container">
<div class="swiper-container image-slider-room">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="images/room-presidential-2.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="images/room-presidential-2.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="images/room-presidential-1.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-presidential-1.jpg" alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a
class="popup-link"
href="images/room-presidential-3.jpg"
data-effect="fadeIn"
><img
class="img-fluid"
src="images/room-presidential-3.jpg"
alt="alternative"
/></a>
</div>
</div>
<!-- end of slide -->
</div>
<!-- end of swiper-wrapper -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="images/room-presidential-2.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-presidential-2.jpg" alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="image-container">
<a class="popup-link" href="images/room-presidential-3.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-presidential-3.jpg" alt="alternative"></a>
</div>
</div>
<!-- end of slide -->
</div> <!-- end of swiper-wrapper -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- end of add arrows -->
</div> <!-- end of swiper container -->
</div> <!-- end of slider-container -->
<!-- end of image slider -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- end of add arrows -->
</div>
<!-- end of swiper container -->
</div>
<!-- end of slider-container -->
<!-- end of image slider -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Basic -->
<div class="ex-basic-1 pt-5">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Description</h2>
<p class="mb-5">Each of Villa's rooms was designed to offer the best possible experience for many types of travelers from the adventure seekers to those who value comfort. We've designed the rooms based on more than 10 years of experience in the hospitality business and the entire team is very proud of what we achieved with Villa.</p>
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<h2 class="mt-3 mb-4">Description</h2>
<p class="mb-5">
Each of Villa's rooms was designed to offer the best possible
experience for many types of travelers from the adventure seekers
to those who value comfort. We've designed the rooms based on more
than 10 years of experience in the hospitality business and the
entire team is very proud of what we achieved with Villa.
</p>
<div class="text-box mb-6">
<h3>Rooms Designed For Comfort And Relaxation</h3>
<p>The rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
</div> <!-- end of text-box -->
<div class="text-box mb-6">
<h3>Rooms Designed For Comfort And Relaxation</h3>
<p>
The rooms are designed to offer the best possible levels of
comfort and relaxation. The design is contemporary based on
comforting colors and manages to appeal to many types of
personalities and tastes. The materials used in Villa's
construction are modern and durable, offering warm temperatures
in the winter and cooler summer days.
</p>
</div>
<!-- end of text-box -->
<ul class="list-unstyled list-icon-lg mb-5">
<li class="media">
<div class="list-icon bg-1">
<i class="fas fa-shower"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Modern Amenities</h3>
<p class="list-item-text">Villa's amenities and rooms rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are provided by top suppliers.</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-2">
<i class="fas fa-tv"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Brand Name Appliances</h3>
<p class="list-item-text">All the electronics are functional and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The main focus of all appliances is to offer a great vacation time while indoors.</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-3">
<i class="fas fa-wine-bottle"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Packed Minibar</h3>
<p class="list-item-text">The minibar is packed with goodie and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal. The main focus of the minibar is to offer a great vacation time while you are in the room.</p>
</div>
</li>
</ul> <!-- end of list-unstyled -->
<ul class="list-unstyled list-icon-lg mb-5">
<li class="media">
<div class="list-icon bg-1">
<i class="fas fa-shower"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Modern Amenities</h3>
<p class="list-item-text">
Villa's amenities and rooms rooms are designed to offer the
best possible levels of comfort and relaxation. The design
is contemporary based on comforting colors and manages to
appeal to many types of personalities and tastes. The
materials used in Villa's construction are provided by top
suppliers.
</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-2">
<i class="fas fa-tv"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Brand Name Appliances</h3>
<p class="list-item-text">
All the electronics are functional and designed to offer the
best possible levels of comfort and relaxation. The design
is contemporary based on comforting colors and manages to
appeal to many types of personalities and tastes. The main
focus of all appliances is to offer a great vacation time
while indoors.
</p>
</div>
</li>
<li class="media">
<div class="list-icon bg-3">
<i class="fas fa-wine-bottle"></i>
</div>
<div class="media-body">
<h3 class="list-item-title">Packed Minibar</h3>
<p class="list-item-text">
The minibar is packed with goodie and designed to offer the
best possible levels of comfort and relaxation. The design
is contemporary based on comforting colors and manages to
appeal. The main focus of the minibar is to offer a great
vacation time while you are in the room.
</p>
</div>
</li>
</ul>
<!-- end of list-unstyled -->
<p class="mb-4">Other features designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
<p class="mb-4">
Other features designed to offer the best possible levels of
comfort and relaxation. The design is contemporary based on
comforting colors and manages to appeal to many types of
personalities and tastes. The materials used in Villa's
construction are modern and durable, offering warm temperatures in
the winter and cooler summer days.
</p>
<ul class="list-unstyled li-space-lg amenities mb-5">
<li class="media">
<i class="fas fa-shower"></i>
<div class="media-body"><strong>Warm shower</strong> for those early spring and late autumn days. Showers are also available at the beach</div>
</li>
<li class="media">
<i class="fas fa-tv"></i>
<div class="media-body"><strong>Modern LCD tv</strong> for rainy days that have to be spent inside. You can event connect the gaming console</div>
</li>
<li class="media">
<i class="fas fa-snowflake"></i>
<div class="media-body"><strong>Air conditioning</strong> that is state of the art technology specially designed to create the optimum temperature</div>
</li>
<li class="media">
<i class="fas fa-image"></i>
<div class="media-body"><strong>Beautiful views</strong> from any window. Enjoy them from inside the room or sitting outside on the large balcony</div>
</li>
<li class="media">
<i class="fas fa-wine-bottle"></i>
<div class="media-body"><strong>Packed minibar</strong> loaded with goodies so you can enjoy some treats if you forget to shop in town</div>
</li>
</ul>
<a class="btn-solid-reg mb-6" href="index.html">Home</a>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of ex-basic-1 -->
<ul class="list-unstyled li-space-lg amenities mb-5">
<li class="media">
<i class="fas fa-shower"></i>
<div class="media-body">
<strong>Warm shower</strong> for those early spring and late
autumn days. Showers are also available at the beach
</div>
</li>
<li class="media">
<i class="fas fa-tv"></i>
<div class="media-body">
<strong>Modern LCD tv</strong> for rainy days that have to be
spent inside. You can event connect the gaming console
</div>
</li>
<li class="media">
<i class="fas fa-snowflake"></i>
<div class="media-body">
<strong>Air conditioning</strong> that is state of the art
technology specially designed to create the optimum
temperature
</div>
</li>
<li class="media">
<i class="fas fa-image"></i>
<div class="media-body">
<strong>Beautiful views</strong> from any window. Enjoy them
from inside the room or sitting outside on the large balcony
</div>
</li>
<li class="media">
<i class="fas fa-wine-bottle"></i>
<div class="media-body">
<strong>Packed minibar</strong> loaded with goodies so you can
enjoy some treats if you forget to shop in town
</div>
</li>
</ul>
<a class="btn-solid-reg mb-6" href="index.html">Home</a>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
<!-- Footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>If you are looking too have a comfortable and relaxing time then you should get in touch with us using <a class="green" href="mailto:reception@villa.com">reception@villa.com</a></h3>
<div class="social-container">
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-pinterest-p fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x"></i>
</a>
</span>
</div> <!-- end of social-container -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of footer -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>
If you are looking too have a comfortable and relaxing time then
you should get in touch with us using
<a class="green" href="mailto:reception@villa.com"
>reception@villa.com</a
>
</h3>
<div class="social-container">
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-pinterest-p fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="#your-link">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x"></i>
</a>
</span>
</div>
<!-- end of social-container -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of footer -->
<!-- end of footer -->
<!-- Copyright -->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="divider">
</div> <!-- end of col -->
</div> <!-- end of row -->
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled li-space-lg p-small">
<li><a href="article.html">Article</a></li>
<li><a href="balcony-room.html">Balcony Room</a></li>
<li><a href="panoramic-room.html">Panoramic Room</a></li>
<li><a href="presidential-room.html">Presidential Room</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> <!-- end of list-unstyled -->
</div> <!-- end of col -->
<div class="col-lg-6">
<p class="p-small statement">Copyright © <a href="#your-link">Name</a></p>
</div> <!-- end of col -->
</div> <!-- enf of row -->
</div> <!-- end of container -->
</div> <!-- end of copyright -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="divider" />
</div>
<!-- end of col -->
</div>
<!-- end of row -->
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled li-space-lg p-small">
<li><a href="article.html">Article</a></li>
<li><a href="balcony-room.html">Balcony Room</a></li>
<li><a href="panoramic-room.html">Panoramic Room</a></li>
<li><a href="presidential-room.html">Presidential Room</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- end of list-unstyled -->
</div>
<!-- end of col -->
<div class="col-lg-6">
<p class="p-small statement">
Copyright © <a href="#your-link">Name</a>
</p>
</div>
<!-- end of col -->
</div>
<!-- enf of row -->
</div>
<!-- end of container -->
</div>
<!-- end of copyright -->
<!-- end of copyright -->
<!-- Scripts -->
<script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
<script src="js/bootstrap-datepicker.min.js"></script> <!-- Datepicker for Bootstrap -->
<script src="js/scripts.js"></script> <!-- Custom scripts -->
</body>
</html>
<script src="js/jquery.min.js"></script>
<!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script>
<!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script>
<!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script>
<!-- Magnific Popup for lightboxes -->
<script src="js/bootstrap-datepicker.min.js"></script>
<!-- Datepicker for Bootstrap -->
<script src="js/scripts.js"></script>
<!-- Custom scripts -->
</body>
</html>