Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
247 changes: 87 additions & 160 deletions index.html → about-us.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/about.css">
<link rel="stylesheet" href="css/mq.css">
</head>

<body>
<body id="about_page">
<!-- Top navbar -->
<div class="nav-top fixed-top">
<div class="container">
Expand Down Expand Up @@ -80,167 +81,64 @@
</nav>

<!-- Content -->

<div class="hero-image col-md-12">
<div class="hero-text ">
<h1>THIS IS LUXURY</h1>
<p>Welcome to the most luxurious selection of hi-end yachts on the market.<br>Feel free to take a tour of our catalogue and make you <br>dreams a reality </p>
<button class="button-dark">FIND OUT MORE</button>
<div class="row about-image col-md-12">
<div class="hero-text about-text">
<h1>The Yacht Charter Specialists</h1>
<hr>
<p class="subheading">Bringing you closer to the drama</p>
<button class="button-dark">FIND OUT MORE</button>
</div>
</div>
</div>




<div class="left-half col-md-6">
<article>
<h1>WELCOME</h1>
<p>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.</p>
<br>
<button class="button-light">FIND OUT MORE</button>
</article>
</div><div class="right-half col-md-6">

</div>

<div class="left-half-2 col-md-6">
<section>
<div class="row col-md-12">
<div class="left-half1 col-md-6">
<article>
<h1>What we do</h1>
<p>Lux Yachts provide high quality charters, both sailing yachts and motor yachts, including super yachts.
<br>We have a highly professional team, and we invite you to browse our range of yachts. If you need more assistance or information, please don't hesitate to contact us.
<br>
<button class="button-light">FIND OUT MORE</button>
</article>
</div>
<div class="right-half1 col-md-6">
<!-- Intentionally left empty -->
</div>
</div>
</section>
<section>
<div class="row col-md-12">
<div class="left-half2 col-md-6">
<!-- Intentionally left empty -->
</div>
<div class="right-half2 col-md-6">
<div class="article">
<h1>Our Specialities</h1>
<p>You can charter our Motor Yachts from about EUR&nbsp;280,000/week or if you prefer the excitement of sailing, try one of our 54 metre Sailing Yachts.
<br>The price for our sailing yachts starts from about EUR&nbsp;60,000/week to about EUR&nbsp;180,000/week when you want real class.</p>
<br>
<button class="button-light">FIND OUT MORE</button>
</div>
</div>
</div>
</section>

<!-- Second Hero Image -->
<section>
<div class="row hero-image-about col-md-12">

<div class="hero-text2 about-text2">
<h1>Explore the Caribbean</h1>
<p>Welcome to the most luxurious selection of hi-end yachts on the market.
<br>Feel free to take a tour of our catalogue and make you
<br>dreams a reality </p>
<button class="button-dark">FIND OUT MORE</button>
</div>
</div>

</section>


</div>

<div class="right-half-2 col-md-6">
<article>
<h1>OUR YACHTS</h1>
<p>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.</p>
<br>
<button class="button-light">FIND OUT MORE</button>
</article>
</div>
<!-- Second Hero Image -->
<div class="hero-image2 col-md-12">
<div class="hero-text2">
<h1>Explore the Caribbean</h1>
<p>Welcome to the most luxurious selection of hi-end yachts on the market.<br>Feel free to take a tour of our catalogue and make you <br>dreams a reality </p>
<button class="button-dark">FIND OUT MORE</button>
</div>
</div>

<!-- Slideshow container -->
<div class="slideshow-container col-md-12">
<h3 style="text-align:center; padding-top:20px; color:#0f5f80">TESTIMONIALS</h3>

<!-- Full-width slides/quotes -->
<div class="mySlides">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- Rob Gaughan</p>
</div>

<div class="mySlides">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Gerry T</p>
</div>

<div class="mySlides">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Antonijo G</p>
</div>

<!-- Next/prev buttons -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<!-- Dots/bullets/indicators -->
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>


<!-- Bottom Blocks -->
<div class="row block-row crew">
<div class="col-md-4 crew">
<div class="hovereffect">
<img class="img-responsive" src="img/our-yachts.jpg" alt="yachts">
<div class="overlay crew">
<h1>OUR YACHTS</h1>
<p>
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.
<br>
<br>
<a href="#">READ MORE</a>
</p>
</div>
</div>
</div>
<div class="col-md-4 crew">
<div class="hovereffect">
<img class="img-responsive" src="img/about-us.jpg" alt="yacht company">
<div class="overlay crew">
<h1>ABOUT US</h1>
<p>
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.
<br>
<br>
<a href="#">READ MORE</a>
</p>
</div>
</div>
</div>
<div class="col-md-4 crew">
<div class="hovereffect">
<img class="img-responsive" src="img/yacht-crew.jpg" alt="yacht crew">
<div class="overlay crew">
<h1>OUR CREW</h1>
<p>
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.
<br>
<br>
<a href="#">READ MORE</a>
</p>
</div>
</div>
</div>


<!-- Footer -->

<!--Footer-->
<footer>
<div class="row col-md-12 mfooter">
<div class="col-sm-4 footer-nav "><h4>NAVIGATION</H4>
<br>
Expand Down Expand Up @@ -292,7 +190,36 @@ <h1>OUR CREW</h1>
</footer>
<!--/.Footer-->



<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>



Expand Down
Loading