<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- A good example of a layered web design. This site is essentially a one page website that has been made to fit the screen with no screen scrolling. However, when the content is too long, the user can scroll to read all of the content. As the user clicks the links in the nav bar, sections are shown on the page. The HTML content for this page has been loaded on page load, but this could be adapted to bring in the content on an AJAX call.-->
<header class="masthead">
<div class="logo"><img src="https://www.indior.tours/images/indior_transperent%20cropped.ae58292c.png"/></div>
<nav class="nav__main">
<ul><a href="#" data-nav="intro">
<li>Intro</li></a><a href="#" data-nav="about">
<li>About</li></a><a href="#" data-nav="brands">
<li>Brands</li></a><a href="#" data-nav="contact">
<li>Contact</li></a></ul>
</nav>
</header>
<!-- Optional text content over the image. Could be good with the right image. Uncomment to view.-->
<section class="intro" id="intro">
<br>
<h1>Intro ipsum dolor sit amet, consectetur adipisicing elit aliquam, impedit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque placeat pariatur, eos rem, magni nobis ex unde qui repellat aliquam ipsam. Quaerat ratione ullam odio perspiciatis, velit. Vel accusantium ducimus animi dolores aperiam consequatur a quis, voluptate autem sed possimus expedita esse aliquid quibusdam cupiditate debitis ratione quod temporibus nam.</p>
</section>
<section class="about" id="about">
<header class="section-header">
<br>
<h2>About</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos optio a quam, aperiam ea nisi aspernatur deleniti cumque nam maxime, saepe ut eligendi excepturi impedit earum dolorum, dolorem numquam ullam asperiores quia id fuga eveniet vero. Eius, cumque. Dicta cumque laborum natus facilis labore incidunt qui in inventore saepe cupiditate.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos optio a quam, aperiam ea nisi aspernatur deleniti cumque nam maxime, saepe ut eligendi excepturi impedit earum dolorum, dolorem numquam ullam asperiores quia id fuga eveniet vero. Eius, cumque. Dicta cumque laborum natus facilis labore incidunt qui in inventore saepe cupiditate.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos optio a quam, aperiam ea nisi aspernatur deleniti cumque nam maxime, saepe ut eligendi excepturi impedit earum dolorum, dolorem numquam ullam asperiores quia id fuga eveniet vero. Eius, cumque. Dicta cumque laborum natus facilis labore incidunt qui in inventore saepe cupiditate.</p>
</section>
<section class="brands" id="brands">
<header class="section-header">
<br>
<h2>Brands</h2>
</header>
<article class="brands__icons">
<div class="brands__item">
<p><i class="fa fa-balance-scale" aria-hidden="true"></i></p>
<p class="brnads__item--header">
<h3>Lorem ipsum dolor sit</h3>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis architecto amet ab totam, neque dignissimos expedita ad, officia quae tenetur.</p>
</div>
<div class="brands__item">
<p><i class="fa fa-calendar" aria-hidden="true"></i></p>
<p class="brnads__item--header">
<h3>Lorem ipsum dolor sit</h3>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis architecto amet ab totam, neque dignissimos expedita ad, officia quae tenetur.</p>
</div>
<div class="brands__item">
<p><i class="fa fa-bullseye" aria-hidden="true"></i></p>
<p class="brnads__item--header">
<h3>Lorem ipsum dolor sit</h3>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis architecto amet ab totam, neque dignissimos expedita ad, officia quae tenetur.</p>
</div>
<div class="brands__item">
<p><i class="fa fa-commenting" aria-hidden="true"></i></p>
<p class="brnads__item--header">
<h3>Lorem ipsum dolor sit</h3>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis architecto amet ab totam, neque dignissimos expedita ad, officia quae tenetur.</p>
</div>
</article>
</section>
<section class="contact" id="contact">
<header class="section-header">
<br>
<h2>Contact</h2>
</header>
<p>(123) 456-7890</p>
<p>help@thisaddress.com</p>
<p>123 Somewhere St.<br>This Place, NY 12345</p>
</section>
body {
margin: 0;
font-family: "Rubik", sans-serif;
background-image: url(http://highwaywebconsulting.com/wp-content/uploads/2016/12/173659917.jpg);
background-size: cover;
background-position: center 80px;
background-repeat: no-repeat;
height: 100vh;
z-index: 1;
}
.overlay {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://highwaywebconsulting.com/wp-content/uploads/2016/12/173659917.jpg);
background-size: cover;
background-position: center 80px;
background-repeat: no-repeat;
}
p {
font-weight: 300;
line-height: 1.5;
font-size: 1.1rem;
}
h1,
h2,
h3,
h4 {
font-weight: 300;
}
section,
.lead {
padding: 7rem 1rem 1rem;
height: 80vh;
overflow: auto;
}
section,
ul {
color: white;
}
section {
position: relative;
z-index: 50;
}
.masthead {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
.logo {
text-align: center;
background: white;
cursor: pointer;
}
.logo img {
width: 100px;
padding: 0.5rem;
}
nav {
position: relative;
z-index: 60;
}
.nav__main {
background-color: #1B5E20;
color: white;
font-size: 0.8rem;
text-transform: uppercase;
}
.nav__main ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
.nav__main ul a {
text-decoration: none;
color: inherit;
padding: 1rem;
}
.section-header {
font-size: 2rem;
}
.lead {
position: absolute;
right: 0;
max-width: 200px;
text-align: right;
}
.lead h1 {
font-size: 1.2rem;
font-weight: 500;
color: #1B5E20;
}
@media (min-width: 600px) {
.lead {
max-width: 400px;
}
.lead h1 {
font-size: 2rem;
}
}
@media (min-width: 900px) {
.lead {
max-width: 450px;
}
}
@media (min-width: 1368px) {
.lead {
max-width: 600px;
}
.lead h1 {
font-size: 2.5rem;
}
}
.brands {
text-align: center;
height: 80vh;
overflow: auto;
}
@media (min-width: 600px) {
.brands {
margin: auto;
}
}
@media (min-width: 900px) {
.brands {
text-align: right;
}
}
@media (min-width: 1368px) {
.brands {
max-width: 600px;
}
}
.brands__icons {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@media (min-width: 900px) {
.brands__icons {
justify-content: flex-end;
}
}
.brands__item {
margin: 1rem;
flex: 0 1 250px;
}
.brands__item i {
font-size: 2rem;
}
@media (min-width: 900px) {
.brands__item {
margin: 1rem;
}
}
@media (min-width: 900px) {
.about,
.intro,
.brands {
position: absolute;
right: 0;
max-width: 600px;
text-align: right;
}
}
.contact {
text-align: right;
}
// hide these elements on page load
$("section, .overlay").hide();
// show sections on click
$(".nav__main a").on("click", function() {
// get link attribute
var navID = $(this).attr("data-nav");
// $('.lead').hide(); // hides the splash text. uncomment if you're using the .lead text
$("section").hide(); // hide all sections
$("body").addClass("overlay"); // add dark overlay to splash image
$("#" + navID).slideDown(); // slide down the appropriate section
});
// reset page back to 'home' on logo click
$(".logo").on("click", function() {
$("body").removeClass("overlay"); // remove the dark overlay
$("section").hide(); // hide all sections
$(".lead").show(); // shows the splash text. uncomment this if you're using the .lead text
});
