See the post about how I built this -https://link.medium.com/eUbtYTRdr5
A Pen by Studiodews on CodePen.
See the post about how I built this -https://link.medium.com/eUbtYTRdr5
A Pen by Studiodews on CodePen.
<div class="Outerview"> | |
<div class="title-section"> | |
<p class="sub-heading"> | |
Limited time event | |
</p> | |
<p class="main-heading"> | |
Don't miss these gaming events | |
</p> | |
</div> | |
<div class="icon-section"> | |
</div> | |
</div> | |
<i title="Switch Theme" class="fas fa-sun switch" onclick="handleThemeSwitch()"> Switch Theme</i> | |
<!-- <div class="icon-holder"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=123"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=1234"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=234"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=123"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=1234"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=234"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
</div> | |
<div class="icon-holder"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
</div> | |
<div class="icon-holder"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
<img class="icon" src="https://source.unsplash.com/640x480/?nature"> | |
</div> --> |
for (var i = 0; i < 3; i++) { | |
var div = document.createElement("div"); | |
div.setAttribute("class", "icon-holder"); | |
setTimeout(function () {}, 1000); | |
for (var j = 0; j < 15; j++) { | |
var randomNumber = Math.floor(Math.random() * 100); | |
var imageSrc = `https://loremflickr.com/640/480/nature,mountain,river,tree?random=${randomNumber}`; | |
/** | |
* `https://source.unsplash.com/random?mountain?sig=${randomNumber}` | |
*/ | |
var img = document.createElement("img"); | |
img.setAttribute("class", "icon"); | |
img.setAttribute("src", imageSrc); | |
div.appendChild(img); | |
} | |
var innerview = document.getElementsByClassName("icon-section")[0]; | |
innerview.appendChild(div); | |
} | |
var currentTheme = false; // false = "dark"; true = "light" | |
function handleThemeSwitch() { | |
currentTheme = !currentTheme; | |
if (currentTheme) { | |
document.body.style.backgroundColor = "rgba(255, 255, 255,0.9)"; | |
document.body.style.color = "#000"; | |
document.getElementsByClassName("Outerview")[0].style.backgroundColor = | |
"#fff"; | |
document.getElementsByClassName("sub-heading")[0].style.color = | |
"rgba(0,0,0, 0.4)"; | |
} else if (!currentTheme) { | |
document.body.style.backgroundColor = "#000"; | |
document.body.style.color = "#fff"; | |
document.getElementsByClassName("Outerview")[0].style.backgroundColor = | |
"rgba(100,100,100, 0.3)"; | |
document.getElementsByClassName("sub-heading")[0].style.color = | |
"rgba(255, 255, 255, 0.6)"; | |
} | |
} |
* { | |
padding: 0; | |
margin: 0; | |
display: border-box; | |
} | |
html, | |
body { | |
background-color: #000; | |
height: 100%; | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-family: sans-serif; | |
color: #fff; | |
transition: background-color 1s ease; | |
} | |
.Outerview { | |
height: 375px; | |
width: 350px; | |
background: rgba(100,100,100, 0.3); | |
display: flex; | |
align-items: left; | |
flex-direction: column; | |
overflow: hidden; | |
border-radius: 10px; | |
-webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1); | |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); | |
margin: 10px; | |
transition: background-color 1s ease; | |
} | |
.sub-heading { | |
color: rgba(255, 255, 255, 0.6); | |
text-align: left; | |
padding: 15px 15px 5px 15px; | |
font-size: 16px; | |
text-transform: uppercase; | |
font-weight: 600; | |
} | |
.main-heading { | |
text-align: left; | |
padding: 5px 100px 5px 15px; | |
font-size: 28px; | |
font-weight: 600; | |
text-transform: capitalize; | |
} | |
.icon-section div:first-child{ | |
margin-left: -10%; | |
} | |
.icon-section div:last-child{ | |
margin-left: -30%; | |
} | |
.icon-holder { | |
display: flex; | |
justify-content: space-between; | |
overflow: hidden; | |
} | |
.icon { | |
border-radius: 15px; | |
height: 75px; | |
width: 75px; | |
margin: 5px; | |
position: relative; | |
animation: slideShow 50s infinite; | |
-webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1); | |
box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1); | |
} | |
@keyframes slideShow { | |
from {left: 0%;} | |
to {left: -50%;} | |
} | |
.switch{ | |
position: absolute; | |
top: 10px; | |
right: 10px; | |
border-Radius: 3px; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" /> |