diff --git a/css/style.css b/css/style.css index e69de29..ed425d2 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,266 @@ + /* Hero image top*/ +.home-image{ + max-width:100%; + height:auto; + } +html, body, div .home-imge { + height: 100%; +} + /* Checker Board Layout*/ +* { + box-sizing: border-box; +} +.hero-image { + background-image: url("../img/home-yacht-top.jpg"); + background-attachment:fixed; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; +} + +.hero-image2 { + background-image: url("../img/carribean-background.jpg"); + height: 526px; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + display:inline-block; +} + +/* Place text in the middle of the image */ +.hero-text { + text-align: center; + vertical-align: middle; + position: absolute; + top: 47%; + left: 72%; + transform: translate(-50%, -50%); + color: white; + +} +@media only screen and (max-width: 1058px) { .hero-text { + text-align: center; + vertical-align: middle; + position: absolute; + top: 47%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + width: 380px; +} +} +.hero-text2 { + text-align: center; + vertical-align: middle; + position: absolute; + color: white; + width:100%; + top:33% +} +@media only screen and (max-width: 600px) { .hero-text2 { + text-align: center; + vertical-align: middle; + position: absolute; + top: 84%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + width: 380px; +} +} +.button-dark { + background: transparent; + padding: 9px 36px; + border: 2px solid #fff; + color: #ffffff; +} +.button-light { + background: transparent; + padding: 9px 36px; + border: 2px solid #0f5f80; + color: #0f5f80; +} + +article { + position: relative; + top: 50%; + left: 50%; + text-align: center; + transform: translate(-50%, -50%); +} + + + +.left-half { + float:left; + height:680px; + padding: 10%; + background-image: url("../img/compass.png"); + background-repeat:no-repeat; + background-color: #ffffff; +} + +.right-half { + float:right; + height:680px; + padding: 10%; + background-image: url("../img/sailor.jpg"); + background-repeat:no-repeat; + background-color: #ffffff; +} +.left-half-2 { + float:left; + height:680px; + padding: 12%; + background-image: url("../img/sunset-sailing.jpg"); + background-repeat:no-repeat; + background-color: #ffffff; +} +.right-half-2 { + float:right; + height:680px; + padding: 10%; + background-image: url("../img/compass-2.png"); + 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); +} + + +/* Footer */ + +.mfooter { + color:#fff; + background-color: #182532 !important; + padding-bottom:300px; + margin-top:0px; + background-image: url("../img/footer.png"); + padding-top:30px; + border-top: 3px solid #040617; + 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/Thumbs.db b/img/Thumbs.db new file mode 100644 index 0000000..4360831 Binary files /dev/null and b/img/Thumbs.db differ 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/carribean-background.jpg b/img/carribean-background.jpg new file mode 100644 index 0000000..8e462f1 Binary files /dev/null and b/img/carribean-background.jpg differ diff --git a/img/carribean-background.png b/img/carribean-background.png new file mode 100644 index 0000000..ae61b0a Binary files /dev/null and b/img/carribean-background.png differ diff --git a/img/compass-2.png b/img/compass-2.png new file mode 100644 index 0000000..46109ec Binary files /dev/null and b/img/compass-2.png differ diff --git a/img/compass.png b/img/compass.png new file mode 100644 index 0000000..5d336ab Binary files /dev/null and b/img/compass.png 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..f6f4c10 Binary files /dev/null and b/img/footer.png differ diff --git a/img/home-yacht-top.jpg b/img/home-yacht-top.jpg new file mode 100644 index 0000000..d83d3cd Binary files /dev/null and b/img/home-yacht-top.jpg 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/img/sailor.jpg b/img/sailor.jpg new file mode 100644 index 0000000..ae70412 Binary files /dev/null and b/img/sailor.jpg differ diff --git a/img/sunset-sailing.jpg b/img/sunset-sailing.jpg new file mode 100644 index 0000000..f932692 Binary files /dev/null and b/img/sunset-sailing.jpg differ diff --git a/index.html b/index.html index fd12d04..3329018 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,203 @@ Luxury Yachts + + - + + + + + + + + + +
+
+

THIS IS LUXURY

+

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

+ +
+
+ + + + +
+
+

WELCOME

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium eleifend arcu, sed condimentum nibh. Curabitur id elementum justo, sit amet elementum mi. Etiam scelerisque tortor vitae arcu accumsan, vel consequat dolor finibus. Pellentesque ac ante ipsum. Fusce orci risus, congue vitae aliquam at, scelerisque eget neque. Vestibulum ullamcorper placerat mauris non egestas. Nam ultrices semper euismod.

+
+ +
+
+ +
+ +
+ + +
+ +
+
+

OUR YACHTS

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium eleifend arcu, sed condimentum nibh. Curabitur id elementum justo, sit amet elementum mi. Etiam scelerisque tortor vitae arcu accumsan, vel consequat dolor finibus. Pellentesque ac ante ipsum. Fusce orci risus, congue vitae aliquam at, scelerisque eget neque. Vestibulum ullamcorper placerat mauris non egestas. Nam ultrices semper euismod.

+
+ +
+
+ +
+
+

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

+ +
+
+ + +
+
+
+ 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 + +
+ + + + + + + + @@ -24,6 +213,8 @@ + + \ No newline at end of file