I have a one page design that is essentially
Header
Content
Footer
This page uses parallax and everything works the way I want it to but I see a small sliver of the footer in between the header and content. I am not sure why this is the case. I am not that efficient with code and just trying to learn and experiment. Here is my code.
HTML
<body>
<header class="alaska-box">
<div class="logo"></div>
<div class="hiker"></div>
</header>
<div class="content">
<article>
<h1>Summer Collection</h1>
<hr>
<p>This is our summer collection, for the real inner survivor in you. This summer collection has a stealth theme for you.
This is a great series of apparel and accesories to help you travel <strong>INTO THE WILD</strong>. </p>
<hr>
<div class="summer-collection">
<ul class="product-grid">
<li><img src="assets/collection/jacket.jpg" alt="Summer Collection Jacket" /><p class="caption">
Into the Wild Jacket <strong>$120</strong>
</p></li><!--
--><li><img src="assets/collection/shorts.jpg" alt="Summer Collection Shorts" /><p class="caption">
Into the Wild Jacket <strong>$120</strong>
</p></li><!--
--><li><img src="assets/collection/hat.jpg" alt="Summer Collection Hat" /><p class="caption">
Into the Wild Hat <strong>$60</strong>
</p></li>
<li><img src="assets/collection/backpack.jpg" alt="Summer Collection Backpack" /><p class="caption">
Into the Wild Backpack <strong>$235</strong>
</p></li><!--
--><li><img src="assets/collection/boot.jpg" alt="Summer Collection Boot" /><p class="caption">
Into the Wild Boot <strong>$100</strong>
</p></li><!--
--><li><img src="assets/collection/gloves.jpg" alt="Summer Collection Gloves" /><p class="caption">
Into the Wild Gloves <strong>$45</strong>
</p></li>
<li><img src="assets/collection/hammock.jpg" alt="Summer Collection Hammock" /><p class="caption">
Into the Wild Hammock <strong>$175</strong>
</p></li><!--
--><li><img src="assets/collection/tent.jpg" alt="Summer Collection Tent" /><p class="caption">
Into the Wild Tent <strong>$290</strong>
</p></li><!--
--><li><img src="assets/collection/knife.jpg" alt="Summer Collection Knife" /><p class="caption">
Into the Wild Knife <strong>$75</strong>
</p></li>
</ul>
</div>
<h1>Summer Collection</h1>
<hr>
<p>This is our summer collection, for the real inner survivor in you. This summer collection has a stealth theme for you.
This is a great series of apparel and accesories to help you travel <strong>INTO THE WILD</strong>. </p>
<hr>
<div class="large-window">
<div class="window-tint">
<div class="summer-promo"> Summer Collection <strong>$1,000</strong><a href="" class="window-cta">Buy Now</a></div>
</div>
</div>
<h1>Our History</h1>
<hr>
<p>This is our summer collection, for the real inner survivor in you. This summer collection has a stealth theme for you.
This is a great series of apparel and accesories to help you travel <strong>INTO THE WILD</strong>. </p>
</article>
</div>
</div>
<footer>
<div class="footer-stuff">
<div class="columns three b">
<strong>FIND US ON!</strong>
<ul>
<li><a href="">Facebook</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Instagram</a></li>
</ul>
</div>
<div class="columns three">
<strong>CHRIS MCCANDLESS</strong>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
</p>
</div>
<div class="columns six">
<p>
<strong>GET DISCOUNTS</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<form class="row">
<div class="columns eight">
<input type="email" placeholder="Your Email" class="u-full-width">
</div>
<div class="four columns">
<input type="submit" class="button-primary">
</div>
</form>
</div>
</div>
</footer>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/functions.js"></script>
</body>
CSS
/* Base */
body {
font-family: "Open Sans", sans-serif;
}
h1 {
color: #e5cb22;
padding-top: 30px;
font-weight: 500;
}
article {
max-width: 600px;
overflow: hidden;
text-align: center;
margin: auto;
}
.content {
position: relative;
background-color: white;
margin-bottom: 400px;
overflow: hidden;
z-index: 2
}
/* Parralax Stuff */
.alaska-box {
position: relative;
height: 600px;
background-image: url(assets/header.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
overflow: hidden;
margin: auto;
top: -8px;
left: -8px
right: -8px;
z-index: 3;
}
.logo {
height: 200px;
width: 100%;
background-image: url(assets/logo-1.png);
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 2;
top: 50%;
margin-top: -50px;
}
.hiker {
width: 416px;
height: 600px;
background-image: url(assets/hiker.png);
background-repeat: no-repeat;
background-position: right, bottom;
position: absolute;
right: 50%;
top: 100px;
margin-right: 100px;
}
/*Product Grid*/
.summer-collection {
margin-bottom: 50px;
text-align: center;
flex-wrap: wrap;
justify-content: space-between;
top: auto;
}
.caption {
font-size: 12px;
position: absolute;
bottom: 0px;
left: -100%;
background-color: black;
color: white;
padding: 2px 8px;
transition: all 0.3s ease-in-out;
}
.summer-collection li:hover p {
left: 0%; }
.summer-collection li.is-showing {
opacity: 1;
transform: translateX(0px);
}
.summer-collection li img {
display: block;
transform: scale(1);
transition: all 0.3s ease-in-out;
}
.summer-collection li:hover img {
transform: scale(1.1);
}
.is-showing {
opacity: 1;
transform: translateX(0px);
}
.summer-collection li{
margin-bottom: 20px;
position: relative;
opacity: 0;
transform: translateX(30px);
transition: all 0.4s ease-in-out;
overflow: hidden;
cursor: pointer;
}
.product-grid {
padding: 0;
}
ul.product.grid {
display: inline-table;
list-style: none;
font-size: 0px;
padding: 0;
margin-bottom: 0px;
margin-left: -2.5%;
}
ul.product-grid li {
display: inline-block;
width: 30.83%;
margin: 1%;
background: #fff;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.product-grid li img {
max-width: 100%;
height: auto;
margin: 0 0 10px;
}
/*Media Queries for Grid*/
@media (max-width: 480px) {
ul.grid-nav li {
display: block;
margin: 0 0 5px;
}
ul.grid-nav li a {
display: block;
}
ul.product-grid {
margin-left: 0;
}
ul.product-grid li {
width: 100% !important;
margin: 0 0 20px;
}
}
/*Periscope*/
.large-window {
height: 640px;
background-image: url(assets/collection/large-window-img.jpg);
background-position: top;
background-position: center;
background-attachment: fixed;
margin-top: 100px;
border-radius: 50%;
position: relative;
}
.window-tint {
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.summer-promo {
color: #e5cb22;
font-weight: 300;
font-size: 50px;
line-height: 1.2;
}
.window-cta {
font-size: 20px;
text-decoration: none;
color: #e5cb22;
border: 2px solid #e5cb22;
padding: 5px 10px;
line-height: 3;
border-radius: 5px;
transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.window-cta:hover{
background-color: #e5cb22;
color: white;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.summer-promo strong {
display: block;
font-size: 40px;
}
/* Footer */
footer {
background: black;
color: white;
padding: 20px 0;
position: fixed;
bottom: 0;
width: 100%;
z-index: 1; }
footer .footer-stuff {
max-width: 640px;
margin: 0 auto; }
footer a {
color: white; }
footer input {
color: #666; }
