diff --git a/css/style.css b/css/style.css index f6cee13..e439188 100644 --- a/css/style.css +++ b/css/style.css @@ -1,17 +1,15 @@ + /* Hero image top*/ .home-image{ max-width:100%; height:auto; } - +html, body, div .home-imge { + height: 100%; +} /* Checker Board Layout*/ * { box-sizing: border-box; } - -html, body, div { - height: 100%; -} - .hero-image { background-image: url("../img/home-yacht-top.jpg"); background-attachment:fixed; @@ -37,7 +35,7 @@ html, body, div { text-align: center; vertical-align: middle; position: absolute; - top: 84%; + top: 47%; left: 72%; transform: translate(-50%, -50%); color: white; @@ -47,7 +45,7 @@ html, body, div { text-align: center; vertical-align: middle; position: absolute; - top: 84%; + top: 47%; left: 50%; transform: translate(-50%, -50%); color: white; @@ -129,4 +127,215 @@ article { background-repeat:no-repeat; background-position:right; background-color: #ffffff; +} + +.crew { + height:70%; + max-height:100%; + padding-left:0px; + padding-right:0px; +} +.about { + height:400px; + width:400px; + padding: 12%; +} +.yachts { + float:left; + height:400px; + width:400px; + padding: 12%; + background-image: url("../img/crew.jpg"); + background-repeat:no-repeat; + background-color: #ffffff; +} +.block-row { + margin-top: -7px; + margin-bottom: 0px; + +} +/* Image Hover */ +.hovereffect { + width: 100%; + height: 500px; + max-height: 100%; + float: left; + overflow: hidden; + position: relative; + text-align: center; + cursor: default; + background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%); + background: linear-gradient(45deg, #0f5f80 0%,#05abe0 100%); +} + +.hovereffect .overlay { + width: 100%; + height: 500px; + position: absolute; + overflow: hidden; + top: 0; + left: 0; + padding: 3em; + text-align: left; +} + +.hovereffect img { + display: block; + position: relative; + max-width: none; + width: calc(100% + 60px); + -webkit-transition: opacity 0.35s, -webkit-transform 0.45s; + transition: opacity 0.35s, transform 0.45s; + -webkit-transform: translate3d(-40px,0,0); + transform: translate3d(-40px,0,0); +} + +.hovereffect h1 { + text-transform: uppercase; + color: #fff; + position: relative; + font-size: 27px; + background-color: transparent; + text-align: left; +} + +.hovereffect .overlay:before { + position: absolute; + top: 20px; + right: 20px; + bottom: 20px; + left: 20px; + border: 1px solid #fff; + content: ''; + opacity: 0; + filter: alpha(opacity=0); + -webkit-transition: opacity 0.35s, -webkit-transform 0.45s; + transition: opacity 0.35s, transform 0.45s; + -webkit-transform: translate3d(-20px,0,0); + transform: translate3d(-20px,0,0); +} + +.hovereffect a, .hovereffect p { + color: #FFF; + opacity: 0; + filter: alpha(opacity=0); + -webkit-transition: opacity 0.35s, -webkit-transform 0.45s; + transition: opacity 0.35s, transform 0.45s; + -webkit-transform: translate3d(-10px,0,0); + transform: translate3d(-10px,0,0); +} + +.hovereffect:hover img { + opacity: 0.6; + filter: alpha(opacity=60); + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); +} + +.hovereffect:hover .overlay:before, +.hovereffect:hover a, .hovereffect:hover p { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); +} + +/* Testimonials */ +/* Slideshow container */ +.slideshow-container { + position: relative; +} + +/* Slides */ +.mySlides { + display:none; + padding: 80px; + text-align: center; + font-size:20px +} + +/* Next & previous buttons */ +.prev, .next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + margin-top: -30px; + padding: 16px; + color: #888; + font-weight: bold; + font-size: 20px; + border-radius: 0 3px 3px 0; + user-select: none; +} + +/* Position the "next button" to the right */ +.next { + position: absolute; + right: 0; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, .next:hover { + background-color: rgba(0,0,0,0.8); + color: white; +} + +/* The dot/bullet/indicator container */ +.dot-container { + text-align: center; + padding: 20px; + background: #ddd; +} + +/* The dots/bullets/indicators */ +.dot { + cursor: pointer; + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; + transition: background-color 0.6s ease; +} + +/* Add a background color to the active dot/circle */ +.active, .dot:hover { + background-color: #0f5f80; +} + +/* Add an italic font style to all quotes */ +q {font-style: italic;} + +/* Add a blue color to the author */ +.author {color: cornflowerblue;} + + + +/* Footer */ + +.mfooter { + color:#fff; + background-color: #182532 !important; + padding-bottom:300px; + margin-top:0px; + background-image: url("../img/footer.png"); + background-attachment:fixed; + background-repeat:no-repeat; + vertical-align:bottom; + padding-top:30px; + height: 333px; +} + +.mcopyright { + color:#fff; + background-color: #0a1621; +} + +.footer-nav { +text-align: left; +padding-left:60px; +color:#f4f4f4 !important; } \ No newline at end of file diff --git a/img/about-us.jpg b/img/about-us.jpg new file mode 100644 index 0000000..c9308c7 Binary files /dev/null and b/img/about-us.jpg differ diff --git a/img/crew.jpg b/img/crew.jpg new file mode 100644 index 0000000..77fc2a3 Binary files /dev/null and b/img/crew.jpg differ diff --git a/img/footer-map.png b/img/footer-map.png new file mode 100644 index 0000000..91dac6f Binary files /dev/null and b/img/footer-map.png differ diff --git a/img/footer.png b/img/footer.png new file mode 100644 index 0000000..909790c Binary files /dev/null and b/img/footer.png differ diff --git a/img/lux-yacht-logo-footer.png b/img/lux-yacht-logo-footer.png new file mode 100644 index 0000000..f20c05c Binary files /dev/null and b/img/lux-yacht-logo-footer.png differ diff --git a/img/lux-yacht-logo.png b/img/lux-yacht-logo.png new file mode 100644 index 0000000..a4fbf61 Binary files /dev/null and b/img/lux-yacht-logo.png differ diff --git a/img/our-yachts.jpg b/img/our-yachts.jpg new file mode 100644 index 0000000..fb54a82 Binary files /dev/null and b/img/our-yachts.jpg differ diff --git a/index.html b/index.html index 8cf2b1b..6db1bc0 100644 --- a/index.html +++ b/index.html @@ -14,34 +14,6 @@ - - @@ -84,15 +56,186 @@

OUR YACHTS

- +

Explore the Caribbean

Welcome to the most luxurious selection of hi-end yachts on the market.
Feel free to take a tour of our catalogue and make you
dreams a reality

+
+ + +
+

TESTIMONIALS

+ + +
+ I love you the more in that I believe you had liked me for my own sake and for nothing else +

- John Keats

+
+
+ But man is not made for defeat. A man can be destroyed but not defeated. +

- Ernest Hemingway

+
+ +
+ I have not failed. I've just found 10,000 ways that won't work. +

- Thomas A. Edison

+
+ + + +
+ + +
+ + + +
+ + + + +
+
+
+ yachts +
+

OUR YACHTS

+

+ Welcome to the most luxurious selection of hi-end yachts on the market. +Feel free to take a tour of our catalogue and make you +dreams a reality. +
+
+ READ MORE +

+
+
+
+
+
+ yacht company +
+

ABOUT US

+

+ Welcome to the most luxurious selection of hi-end yachts on the market. +Feel free to take a tour of our catalogue and make you +dreams a reality. +
+
+ READ MORE +

+
+
+
+
+
+ yacht crew +
+

OUR CREW

+

+ Welcome to the most luxurious selection of hi-end yachts on the market. +Feel free to take a tour of our catalogue and make you +dreams a reality. +
+
+ READ MORE +

+
+
+
+ + + + + +
+

NAVIGATION

+
+ +
+
yacht logo +
+
+

+ Welcome to the most luxurious selection of hi-end yachts on the market. +Feel free to take a tour of our catalogue and make you +dreams a reality. +

+
+ + + +
+
+

LOCATION

+ yacht logo +
+
+ +
+ © 2018 Copyright: + + LUXURY YACHTS + +
+ + + + + + + + +