Skip to content

Instantly share code, notes, and snippets.

@BarryBlack

BarryBlack/index.html

Created March 27, 2019 02:10
Show Gist options
  • Save BarryBlack/d7baecc6058a36940b06e5c8e38f1f2c to your computer and use it in GitHub Desktop.
Save BarryBlack/d7baecc6058a36940b06e5c8e38f1f2c to your computer and use it in GitHub Desktop.
Download ZIP
Surf Website
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Full Screen Slider</title>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="custom-padding">
<nav>
<div class="logo">Logo</div>
<ul class="menu-area">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<!--- ignore the code below-->
<div class="link-area">
<a href="https://www.youtube.com/channel/UCki4IDK86E6_pDtptmsslow" target="_blank">Click for More</a>
</div>
<div class="slider">
<div class="slide current">
<div class="content">
<h1>Slide One</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
maxime, voluptatibus labore doloremque vero!
</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Two</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
maxime, voluptatibus labore doloremque vero!
</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Three</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
maxime, voluptatibus labore doloremque vero!
</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Four</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
maxime, voluptatibus labore doloremque vero!
</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Five</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
maxime, voluptatibus labore doloremque vero!
</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Six</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
maxime, voluptatibus labore doloremque vero!
</p>
</div>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fas fa-arrow-left"></i></button>
<button id="next"><i class="fas fa-arrow-right"></i></button>
</div>
<div class="grid">
<div class="span-col-4">Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per. 1</div>
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per. 2</div>
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per. 3</div>
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per. 4</div>
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per. 5</div>
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per. 6</div>
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per. 7</div>
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per. 8</div>
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per. 9</div>
<div class="span-col-2">Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per. 10</div>
<div class="span-col-2">Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per. 11</div>
</div>
<script src="main.js"></script>
</body>
</html>
Raw
script.js
const slides = document.querySelectorAll('.slide');
const next = document.querySelector('#next');
const prev = document.querySelector('#prev');
const auto = false; // Auto scroll
const intervalTime = 5000;
let slideInterval;
const nextSlide = () => {
// Get current class
const current = document.querySelector('.current');
// Remove current class
current.classList.remove('current');
// Check for next slide
if (current.nextElementSibling) {
// Add current to next sibling
current.nextElementSibling.classList.add('current');
} else {
// Add current to start
slides[0].classList.add('current');
}
setTimeout(() => current.classList.remove('current'));
};
const prevSlide = () => {
// Get current class
const current = document.querySelector('.current');
// Remove current class
current.classList.remove('current');
// Check for prev slide
if (current.previousElementSibling) {
// Add current to prev sibling
current.previousElementSibling.classList.add('current');
} else {
// Add current to last
slides[slides.length - 1].classList.add('current');
}
setTimeout(() => current.classList.remove('current'));
};
// Button events
next.addEventListener('click', e => {
nextSlide();
if (auto) {
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide, intervalTime);
}
});
prev.addEventListener('click', e => {
prevSlide();
if (auto) {
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide, intervalTime);
}
});
// Auto slide
if (auto) {
// Run next slide at interval time
slideInterval = setInterval(nextSlide, intervalTime);
}
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
background: #333;
color: #fff;
line-height: 1.6;
}
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
background: #000;
-webkit-background-size:cover;
background-size:cover;
background-position: center center;
height: 100vh;
}
.menu-area li a {
text-decoration: none;
}
.menu-area li {
list-style-type: none;
}
.custom-padding{
padding-top: 25px;
}
nav {
position: relative;
width: calc(100% - 60px);
margin: 0 auto;
padding: 10px 0;
background: #333;
z-index: 1;
text-align: right;
padding-right: 2%;
}
.logo {
width: 15%;
float: left;
text-transform: uppercase;
color: #fff;
font-size: 25px;
text-align: left;
padding-left: 2%;
}
.menu-area li {
display: inline-block;
}
.menu-area a {
color: #fff;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
padding: 0 25px;
font-size: 14px;
line-height: 30px;
position: relative;
z-index: 1;
}
.menu-area a:hover {
background: tomato;
color: #fff;
}
.menu-area a:hover:after {
transform: translateY(-50%) rotate(-35deg);
}
nav:before {
position: absolute;
content: '';
border-top: 10px solid #333;
border-right: 10px solid #333;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
top: 100%;
left: 0;
}
nav:after {
position: absolute;
content: '';
border-top: 10px solid #333;
border-left: 10px solid #333;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
top: 100%;
right: 0;
}
/* ignore the code below */
.link-area
{
position:fixed;
bottom:20px;
left:20px;
padding:15px;
border-radius:40px;
background:tomato;
}
.link-area a
{
text-decoration:none;
color:#fff;
font-size:25px;
}
.slider {
position: relative;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.slide.current {
opacity: 1;
}
.slide .content {
position: absolute;
bottom: 70px;
left: -600px;
opacity: 0;
width: 600px;
background-color: rgba(255, 255, 255, 0.8);
color: #333;
padding: 35px;
}
.slide .content h1 {
margin-bottom: 10px;
}
.slide.current .content {
opacity: 1;
transform: translateX(600px);
transition: all 0.7s ease-in-out 0.3s;
}
.buttons button#next {
position: absolute;
top: 40%;
right: 15px;
}
.buttons button#prev {
position: absolute;
top: 40%;
left: 15px;
}
.buttons button {
border: 2px solid #fff;
background-color: transparent;
color: #fff;
cursor: pointer;
padding: 13px 15px;
border-radius: 50%;
outline: none;
}
.buttons button:hover {
background-color: #fff;
color: #333;
}
@media (max-width: 500px) {
.slide .content {
bottom: -300px;
left: 0;
width: 100%;
}
.slide.current .content {
transform: translateY(-300px);
}
}
/* Backgorund Images */
.slide:first-child {
background: url('https://res.cloudinary.com/webdevnz2018/image/upload/c_scale,h_900,w_1600/v1553571032/surf/marvin-meyer-206816-unsplash.jpg') no-repeat
center top/cover;
}
.slide:nth-child(2) {
background: url('https://res.cloudinary.com/webdevnz2018/image/upload/c_scale,h_900,w_1600/v1553571034/surf/linus-nylund-437333-unsplash.jpg') no-repeat
center top/cover;
}
.slide:nth-child(3) {
background: url('https://res.cloudinary.com/webdevnz2018/image/upload/c_scale,h_900,w_1600/v1553571028/surf/jeremy-bishop-123457-unsplash.jpg') no-repeat
center top/cover;
}
.slide:nth-child(4) {
background: url('https://res.cloudinary.com/webdevnz2018/image/upload/c_scale,h_900,w_1600/v1553573563/surf/tim-marshall-140944-unsplash.jpg') no-repeat
center top/cover;
}
.slide:nth-child(5) {
background: url('https://res.cloudinary.com/webdevnz2018/image/upload/c_scale,h_900,w_1600/v1553573563/surf/robert-bye-43801-unsplash_1.jpg') no-repeat
center top/cover;
}
.slide:nth-child(6) {
background: url('https://res.cloudinary.com/webdevnz2018/image/upload/c_scale,h_900,w_1600/v1553573570/surf/frank-mckenna-117054-unsplash.jpg') no-repeat
center center/cover;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.span-col-4{grid-column: span 4 / auto;}
.span-col-2{grid-column: span 2 / auto;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment