A Pen by Simeon Simeonoff

Developer
Simeon Simeonoff
Size
2,602 Kb
Views
38,456
  1. A Pen by Simeon Simeonoff Previews
  2. A Pen by Simeon Simeonoff HTML Codes
  3. A Pen by Simeon Simeonoff CSS Codes
  4. A Pen by Simeon Simeonoff JS Codes

How do I make an a pen by simeon simeonoff?

What is a a pen by simeon simeonoff? How do you make a a pen by simeon simeonoff? This script and codes were developed by Simeon Simeonoff on 17 September 2022, Saturday.

A Pen by Simeon Simeonoff Previews
IQ Test

A Pen by Simeon Simeonoff - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Simeon Simeonoff</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="button" onclick="switchBox()">Apply Active</div>
<div class="wrapper">	<div class="box one active">Box 1</div>	<div class="box two">Box 2</div>	<div class="box three">Box 3</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Simeon Simeonoff - Script Codes CSS Codes

body { font-family: 'Arial', sans-serif;
}
.button { display: inline-block; padding: 8px; border: 2px solid lightblue; border-radius: 4px; color: #444; cursor: pointer; -webkit-transition: background .15s ease-out; transition: background .15s ease-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.button:hover { background: lightblue; color: #FFF;
}
.box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 300px; height: 100px; background: #FFF; margin: 8px 0; border: 2px solid lightblue; border-radius: 4px; -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out;
}
.box.active { background: lightblue; color: #FFF;
}

A Pen by Simeon Simeonoff - Script Codes JS Codes

let box = 0;
function switchBox() {	const boxes = document.querySelectorAll('.box'); // get all boxes	let iter = activateBox(box, boxes); // create itarator to go over boxes	boxes.forEach(el => el.classList.remove('active'));	iter.next(box++).value.classList.add('active'); // add active class to the next box in line	if (box === boxes.length) box = 0; // reset counter if last box reached
}
function* activateBox(i, boxes) {	yield boxes[i];
}
A Pen by Simeon Simeonoff - Script Codes
A Pen by Simeon Simeonoff - Script Codes
Home Page Home
Developer Simeon Simeonoff
Username simeonoff
Uploaded September 17, 2022
Rating 3
Size 2,602 Kb
Views 38,456
Do you need developer help for A Pen by Simeon Simeonoff?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Simeon Simeonoff (simeonoff) Script Codes
Name
Grid Layout
Material Design Calendar
Notification Animation
Notification Animation - Bounce Blur
Material Switches
Flexbox SASS Grid
Bouncy Switch
Material Radio Buttons
Avatar
Toggle Buttons
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!