We Keep Coding

How can I display only one section at a time while scrolling vertically on a page?

I am trying to create an effect on a blog page in which the blog posts are displayed as cards, and whenever one scrolls vertically on the page, a card will fade into view and then fade out when the next card is displayed. Something similar to a carousel/image slider but where only one card is visible at the time. At the same time I want the background image to be fixed. A mix between parallax and carousel.
I have tried to set the cards' container to allow overflow-y so that the cards are scrollable, but I do not want the scrollbar to appear either. Honestly, I have looked everywhere for a similar example, but none are close to what I am trying to achieve.
I have found other examples where I can create a parallax effect, but the thing is I only have one background image. I am not sure if I need to use JavaScript as well to try to implement this design. The closest I have come to is ScrollOut, but I do not know how to make only one card visible at the time.
CodePen
<header>
<div class="logo">
</div>
<div class="title" id='title'>
<h1 data-scroll>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
</ul>
</nav>
</header>
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<section class="section__posts">
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</section>

If I understand what you're going for, you could use position: sticky along with an IntersectionObserver to create fade-in/fade-out effects.
A basic implementation of a position: sticky layout could be something like this:
<div class="section__posts--card">
<!-- **** add inner wrapper **** -->
<div class="inner-el">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</div>
.section__posts {
width: 100vw;
height: 100vh;
position: relative;
}
.section__posts--card {
height: 200vh; // how far the user should scroll before content changes
}
.inner-el {
top: 200px; // how far from the top of the viewport the content should sit
height: auto;
position: sticky;
width: 75vw;
max-width: 50rem;
margin: auto;
}
This is a pretty good 'tutorial' on how to add IntersectionObserver with position: sticky: https://developers.google.com/web/updates/2017/09/sticky-headers

Thanks to organicon's insight about IntersectionObserver I was able to come up with a solution that created the effect exactly as I wanted.
I made the background fixed and turned off overflow for the body.
I wrapped the cards in a container, and turned on the overflow-y BUT I hid the scrollbar using: scrollbar-width: none; -ms-overflow-style:none;
Wrote a script using IntersectionObserver that will track when a card comes into view. When the card appears a CSS animation is applied that fades the card in.
const callback = (entries) => {
entries.forEach(
(entry) => {
if (entry.isIntersecting) {
console.log("the element is intersecting");
entry.target.style.animation = entry.target.dataset.fade;
entry.target.style.opacity = 1;
} else {
entry.target.style.animation = "none";
entry.target.style.opacity = 0;
}
}
);
}
let observer = new IntersectionObserver(callback);
const fadeItems = document.querySelectorAll('.animate');
fadeItems.forEach(item => {
console.log("adding " + fadeItems.length + " cards to the observer");
observer.observe(item)
});
:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--fw-reg: 300;
--fw-bold: 900;
--clr-light: #fff;
--clr-dark: #303030;
--clr-grey: lightgrey;
--clr-accent: #16e0bd;
--clr-danger: tomato;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25), 0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}
#media (min-width: 900px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
html,
body {
margin: 0;
height: 100%;
width: 100%;
}
body {
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
box-sizing: border-box;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
background-repeat: no-repeat;
overflow: hidden;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold)
}
:focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}
/* wrapper */
.wrapper {
height: 100%;
width: 100%;
}
/* header */
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: sticky;
top: 0;
width: 100%;
}
nav {
width: 50%;
background-color: transparent;
border: 2px solid;
border-color: var(--clr-light);
border-radius: 2em;
display: flex;
z-index: 10;
}
/*Styling Links*/
.nav-links {
color: var(--clr-light);
display: flex;
list-style: none;
width: 88vw;
padding: 0 0.7vw;
justify-content: space-evenly;
align-items: center;
text-transform: uppercase;
}
.nav-links li a {
text-decoration: none;
margin: 0 0.7vw;
}
.nav-links li a:hover {
color: #61DAFB;
}
.nav-links li {
position: relative;
}
.nav-links li a::before {
content: "";
display: block;
height: 3px;
width: 0%;
background-color: #61DAFB;
position: absolute;
transition: all ease-in-out 250ms;
margin: 0 0 0 10%;
}
.nav-links li a:hover::before {
width: 80%;
}
.login-button {
color: var(--clr-light);
padding: 0.6rem 0.8rem;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: var(--clr-dark);
background-color: #000;
transition: all ease-in-out 350ms;
}
* site title */
.title h1 {
margin: 1em auto;
text-align: center;
color: transparent;
}
#supports(-webkit-text-stroke: 2px var(--clr-light)) {
.title h1 {
color: transparent;
-webkit-text-stroke: 2px var(--clr-light);
text-shadow: none;
}
}
/* section posts */
.posts {
width: 100vw;
height: 100vh;
position: relative;
overflow-y: scroll;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* Internet Explorer 10+ */
}
.posts::-webkit-scrollbar {
width: 0;
height: 0;
}
.post__card {
height: 50vh;
width: 40rem;
padding: 2rem;
margin: 15rem auto;
background: var(--clr-light);
border-radius: 8px;
opacity: 0;
}
.post__card:first-child {
margin-top: 1rem;
}
.post__card:last-child {
margin-bottom: 22rem;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.blog-image {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}
.blog-title {
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: -6px;
}
.blog-overview {
margin: 10px 0 20px;
line-height: 30px;
}
.section__posts--card--button {
margin: 0 10px;
}
.btn.dark {
background: var(--clr-dark);
color: var(--clr-light);
}
.btn.grey {
background: var(--clr-grey);
color: var(--clr-dark);
}
.btn.danger {
background: var(--clr-danger);
color: var(--clr-dark);
}
#media (max-width: 600x) {
.posts {
padding: 2.4rem;
}
.section__posts--card {
padding: 2.4rem;
}
}
<div class="wrapper">
<div class='stars'></div>
<div class="stars2"></div>
<div class='stars3'></div>
<header>
<div class="title" id='title'>
<h1>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
<li><a class="login-button" href="#">Login</a></li>
</ul>
</nav>
</header>
<div class="posts">
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
</div>
</div>

Why doesn't my accordion toggle when clicking on the heading icons?

Need some assistance with below accordion. When you click on the heading the accordion drops down, which is great and works well. However, when you click on the + / - the accordion doesn't dropdown. Not sure how to fix this and would greatly appreciate if someone to help. Not entirely sure how to amend the before/after so it's clickable.
function initAcc(elem, option){
document.addEventListener('click', function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>

Adding pointer-events:none to your span will work for you like so :-
function initAcc(elem, option){
document.addEventListener('click', function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
pointer-events:none;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>
Explanation - Did this because your e.target needs to match with a specific selector but your e.target will vary based on where you click and it becomes this span when you click on the +/- icons. So I have prevented the pointer-events for that span. I like the closest approach as well by #espascarello.

The target is what you clicked. The + is not the element you are looking for, so you got to see if it is a child. Easiest way is closest.
function initAcc(elem, option){
document.addEventListener('click', function (e) {
const clickedElem = e.target.closest(elem+' .a-btn');
if (!clickedElem) return;
else{
if(!clickedElem.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
clickedElem.parentElement.classList.add('active');
}else{
clickedElem.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>

jQuery mouseenter() function not working as expected

I'm trying to make a div. when hovering on it (I'm using mouseenter and mouseleave jquery function) the div change its size and when click on it it should show an other div. for that i'm using click function. it works some time and some time don't. here is my jquery code.
$(document).ready(function() {
$('.box').mouseenter(function() {
$('.mainBox').css('font-size', '32px');
$('.box').css('overflow', 'auto');
$('.box').click(function(e) {
e.preventDefault();
console.log('clicked');
$('.box2').css('display', 'block');
});
});
$('.mainBox').mouseleave(function() {
$('.mainBox').css('font-size', '16px');
$('.box').css('overflow', 'auto');
$('.box').css('background-color', 'white');
});
}); // End of document ready function
body {
padding: 0;
margin: 0;
background-color: lightgray;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.mainBox {
margin: auto;
margin-top: 20px;
border: 1px solid;
background-color: white;
padding: 10px;
width: 80%;
resize: both;
overflow: auto;
transition: font-size .5s;
}
.dBox {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
width: 80%;
padding: 20px;
background-color: gainsboro;
}
.box {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid white;
padding: 20px;
background-color: gainsboro;
}
.box2 {
border: 1px solid gray;
padding: 20px;
background-color: gainsboro;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainBox">
<div class="box">Vantablack is a material developed by Surrey NanoSystems in the United Kingdom and is one of the darkest substances known, absorbing up to 99.965% of visible light (at 663 nm if the light is perpendicular to the material)</div>
<div class="box2">second box Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore iusto cupiditate nemo.</div>
</div>
<div class="boxOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dolorum alias assumenda enim iusto fugiat hic quis quam vel voluptatem, doloribus amet eveniet sit modi est quia consequatur quaerat nostrum!</div>
<div class="dBox box4 1">British engineering firm Surrey NanoSystems is showing off the latest (and blackest) version of what’s described as the “world’s darkest material,” which it calls Vantablack. The material absorbs up to 99.965 percent of incoming radiation, including visible
light and other common frequencies like microwaves and radio waves. The result is a black so dark that it’s more like a bottomless pit from which no light can emerge. </div>

You are chaining multiple event binding. in your code, every time that the mouseenter is triggered, a new callback is added to the click event.
$(document).ready(function() {
$('.box').mouseenter(function() {
$('.mainBox').css('font-size', '32px');
$('.box').css('overflow', 'auto');
});
$('.mainBox').mouseleave(function() {
$('.mainBox').css('font-size', '16px');
$('.box').css('overflow', 'auto');
$('.box').css('background-color', 'white');
});
$('.box').click(function(e) {
e.preventDefault();
if($('.box2').css('display') === 'block'){
$('.box2').css('display', 'none');
} else {
$('.box2').css('display', 'block');
}
});
}); // End of document ready function
body {
padding: 0;
margin: 0;
background-color: lightgray;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.mainBox {
margin: auto;
margin-top: 20px;
border: 1px solid;
background-color: white;
padding: 10px;
width: 80%;
resize: both;
overflow: auto;
transition: font-size .5s;
}
.dBox {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
width: 80%;
padding: 20px;
background-color: gainsboro;
}
.box {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid white;
padding: 20px;
background-color: gainsboro;
}
.box2 {
border: 1px solid gray;
padding: 20px;
background-color: gainsboro;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainBox">
<div class="box">Vantablack is a material developed by Surrey NanoSystems in the United Kingdom and is one of the darkest substances known, absorbing up to 99.965% of visible light (at 663 nm if the light is perpendicular to the material)</div>
<div class="box2">second box Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore iusto cupiditate nemo.</div>
</div>
<div class="boxOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dolorum alias assumenda enim iusto fugiat hic quis quam vel voluptatem, doloribus amet eveniet sit modi est quia consequatur quaerat nostrum!</div>
<div class="dBox box4 1">British engineering firm Surrey NanoSystems is showing off the latest (and blackest) version of what’s described as the “world’s darkest material,” which it calls Vantablack. The material absorbs up to 99.965 percent of incoming radiation, including visible
light and other common frequencies like microwaves and radio waves. The result is a black so dark that it’s more like a bottomless pit from which no light can emerge. </div>

Why Can't I use array.indexOf(this.innerHTML)?

So I have a list of links in the footer and I want to be able to click on a link and have it swapped out with the link on the top of the list, if it isn't there already. I'm so far able to move the link that is clicked on to the top, but I can't figure out how to move the top link to the position of the one that was clicked? I've tried using indexOf(this.innerHTML) but its saying its not a function.
EDIT: I've also tried nodeList.item() which also didn't work:(
const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = document.querySelectorAll('.links a');
const header = document.querySelector('header');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < footerLinks.length; i++) {
footerLinks[i].addEventListener('click', changePosition);
}
function changeColor() {
header.style.background = 'red';
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function changePosition() {
if(footerLinks[0] !== this) {
footerLinks[0].innerHTML = this.innerHTML;
// this.innerHTML = footerLinks[0].innerHTML;
}
console.log(footerLinks.indexOf(this.innerHTML));
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
/** {
outline: 1px solid red;
}*/
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.brand, .nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
/*background-position: center;
background-size: cover;*/
padding-top: 7%;
padding-bottom: 25%;
transition: all .3s ease;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
margin-left: 10%;
}
header p {
margin: 0;
background-color: rgba(0,0,0,0.6);
padding: 10px 25px;
}
header p:first-child {
padding-top: 25px
}
header p:last-child {
padding-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
}
.col {
flex-basis: 33.33%;
padding: 50px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img, .col-3 h3, .col-3 p {
position: relative;
top: -8px;
}
.col-2 img, .col-2 h3, .col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 20%;
font-size: 1.5rem;
}
a {
text-decoration: none;
margin:2px 0;
color: #fff;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
color: #fff;
}
.links {
font-size: 1.3rem;
display: flex;
flex-direction: column;
}
.form-wrap {
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 80%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<label for="Name">Address</label>
<input type="text" id="Address">
<label for="Name">City</label>
<input type="text" id="City">
<button type="submit">Submit Form</button>
</form>
</footer>
<script src="script.js"></script>
</body>
</html>

querySelectorAll returns a static NodeList, which isn't an array. To convert it to an array, use spreading [...] It is a collection of HTML elements, so you need to use indexOf(this), not indexOf(this.innerHTML) (because it's not an array of strings).
const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = document.querySelectorAll('.links a');
const header = document.querySelector('header');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < footerLinks.length; i++) {
footerLinks[i].addEventListener('click', changePosition);
}
function changeColor() {
header.style.background = 'red';
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function changePosition() {
if (footerLinks[0] !== this) {
footerLinks[0].innerHTML = this.innerHTML;
// this.innerHTML = footerLinks[0].innerHTML;
}
console.log([...footerLinks].indexOf(this));
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
/** {
outline: 1px solid red;
}*/
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.brand,
.nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
/*background-position: center;
background-size: cover;*/
padding-top: 7%;
padding-bottom: 25%;
transition: all .3s ease;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
margin-left: 10%;
}
header p {
margin: 0;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 25px;
}
header p:first-child {
padding-top: 25px
}
header p:last-child {
padding-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
}
.col {
flex-basis: 33.33%;
padding: 50px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img,
.col-3 h3,
.col-3 p {
position: relative;
top: -8px;
}
.col-2 img,
.col-2 h3,
.col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 20%;
font-size: 1.5rem;
}
a {
text-decoration: none;
margin: 2px 0;
color: #fff;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
color: #fff;
}
.links {
font-size: 1.3rem;
display: flex;
flex-direction: column;
}
.form-wrap {
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 80%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<label for="Name">Address</label>
<input type="text" id="Address">
<label for="Name">City</label>
<input type="text" id="City">
<button type="submit">Submit Form</button>
</form>
</footer>
<script src="script.js"></script>
</body>
</html>

Why doesn't this slider work when I insert it on the website?

I've picked a slider from codepen.io to put on my website, and it doesn't work when I embed it... The four slides that should be separated are all together and the buttons don't work... The same happens when I paste the code in JSFiddle... Can anyone help me, please?
Here is the Fiddle: https://jsfiddle.net/swpch979/
And here is the code:
<div class="slider">
<input class="slider__nav" type="radio" name="slider" title="slide1" checked="checked"/>
<input class="slider__nav" type="radio" name="slider" title="slide2"/>
<input class="slider__nav" type="radio" name="slider" title="slide3"/>
<input class="slider__nav" type="radio" name="slider" title="slide4"/>
<div class="slider__inner">
<div class="slider__contents"><i class="slider__image fa fa-codepen"></i>
<h2 class="slider__caption">codepen</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-television"></i>
<h2 class="slider__caption">television</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-diamond"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
$slider-length: 4;
$radioBtn-size: 12px;
$btn-color: #ccc;
$active-color: #333;
//---------------------------------------------------
*, *:before, *:after { box-sizing: border-box;}
html,body { height: 100%;}
body {
color: #444;
font-family: 'Josefin Sans', sans-serif;
font-size: 1rem;
line-height: 1.5;
}
.slider {
height: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
justify-content: center;
&__nav {
width: $radioBtn-size;
height: $radioBtn-size;
margin: 2rem $radioBtn-size;
border-radius: 50%;
z-index: 10;
outline: $radioBtn-size / 2 solid $btn-color;
outline-offset: $radioBtn-size / -2;
box-shadow:
0 0 0 0 $active-color,
0 0 0 0 rgba($active-color,0);
cursor: pointer;
appearance: none;
backface-visibility: hidden;
&:checked {
animation: check 0.5s linear forwards;
#for $i from 0 to $slider-length {
&:nth-of-type(#{$i+1}) {
~ .slider__inner {
transform: translateX((-100% * $i) / $slider-length);
}
}
}
}
}
&__inner {
position: absolute;
top: 0;
left: 0;
width: 100% * $slider-length;
height: 100%;
transition: all 1s ease-out;
display: flex;
flex-flow: row nowrap;
}
&__contents {
height: 100%;
padding: 2rem;
text-align: center;
display: flex;
flex: 1;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
&__image {
font-size: 2.7rem;
}
&__caption {
font-weight: 700;
margin: 2rem 0 1rem;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
text-transform: uppercase;
}
&__txt {
color: #999;
margin-bottom: 3rem;
max-width: 300px;
}
}
// animation ---------------------------
#keyframes check {
50% {
outline-color: $active-color;
box-shadow:
0 0 0 $radioBtn-size $active-color,
0 0 0 $radioBtn-size*3 rgba($active-color,0.2);
}
100% {
outline-color: $active-color;
box-shadow:
0 0 0 0 $active-color,
0 0 0 0 rgba($active-color,0);
}
}
Thanks,
Tom

It's using scss as a preprocessor. Convert to regular CSS and it'll work.
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
color: #444;
font-family: 'Josefin Sans', sans-serif;
font-size: 1rem;
line-height: 1.5;
}
.slider {
height: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
justify-content: center;
}
.slider__nav {
width: 12px;
height: 12px;
margin: 2rem 12px;
border-radius: 50%;
z-index: 10;
outline: 6px solid #ccc;
outline-offset: -6px;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
cursor: pointer;
appearance: none;
backface-visibility: hidden;
}
.slider__nav:checked {
animation: check 0.5s linear forwards;
}
.slider__nav:checked:nth-of-type(1)~.slider__inner {
transform: translateX(0%);
}
.slider__nav:checked:nth-of-type(2)~.slider__inner {
transform: translateX(-25%);
}
.slider__nav:checked:nth-of-type(3)~.slider__inner {
transform: translateX(-50%);
}
.slider__nav:checked:nth-of-type(4)~.slider__inner {
transform: translateX(-75%);
}
.slider__inner {
position: absolute;
top: 0;
left: 0;
width: 400%;
height: 100%;
transition: all 1s ease-out;
display: flex;
flex-flow: row nowrap;
}
.slider__contents {
height: 100%;
padding: 2rem;
text-align: center;
display: flex;
flex: 1;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.slider__image {
font-size: 2.7rem;
}
.slider__caption {
font-weight: 700;
margin: 2rem 0 1rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.slider__txt {
color: #999;
margin-bottom: 3rem;
max-width: 300px;
}
#keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
<div class="slider">
<input class="slider__nav" type="radio" name="slider" title="slide1" checked="checked" />
<input class="slider__nav" type="radio" name="slider" title="slide2" />
<input class="slider__nav" type="radio" name="slider" title="slide3" />
<input class="slider__nav" type="radio" name="slider" title="slide4" />
<div class="slider__inner">
<div class="slider__contents"><i class="slider__image fa fa-codepen"></i>
<h2 class="slider__caption">codepen</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-television"></i>
<h2 class="slider__caption">television</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-diamond"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>