A Pen by Nick Walsh

Developer
Nick Walsh
Size
3,581 Kb
Views
16,192
  1. A Pen by Nick Walsh Previews
  2. A Pen by Nick Walsh HTML Codes
  3. A Pen by Nick Walsh CSS Codes
  4. A Pen by Nick Walsh JS Codes

How do I make an a pen by nick walsh?

What is a a pen by nick walsh? How do you make a a pen by nick walsh? This script and codes were developed by Nick Walsh on 06 November 2022, Sunday.

A Pen by Nick Walsh Previews
IQ Test

A Pen by Nick Walsh - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Nick Walsh</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .wrap { overflow: hidden;
}
.carousel { display: flex; left: -100%; list-style: none; margin: 0; padding: 0; position: relative;
}
.carousel-seat { background: #ddd; flex: 1 0 100%; order: 2;
}
.carousel-seat:nth-child(even) { background: #d5d5d5;
}
.carousel-seat.is-ref { order: 1;
}
h2 { color: #aaa; font-size: 7em; font-weight: normal; margin: 0; padding: 0.6em 0; text-align: center;
}
.controls { padding: 2em; text-align: center;
}
.controls button { background: #aaa; border: 0; border-radius: 0.25em; color: #eee; padding: 0.5em 1em;
}
.controls button:hover, .controls button:focus { background: magenta;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='wrap'> <ul class='carousel'> <li class='carousel-seat'> <h2>1</h2> </li> <li class='carousel-seat'> <h2>2</h2> </li> <li class='carousel-seat'> <h2>3</h2> </li> <li class='carousel-seat'> <h2>4</h2> </li> <li class='carousel-seat'> <h2>5</h2> </li> <li class='carousel-seat is-ref'> <h2>6</h2> </li> </ul>
</div>
<div class='controls'> <button class='toggle'>Next</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Nick Walsh - Script Codes CSS Codes

.wrap { overflow: hidden;
}
.carousel { display: flex; left: -100%; list-style: none; margin: 0; padding: 0; position: relative;
}
.carousel-seat { background: #ddd; flex: 1 0 100%; order: 2;
}
.carousel-seat:nth-child(even) { background: #d5d5d5;
}
.carousel-seat.is-ref { order: 1;
}
h2 { color: #aaa; font-size: 7em; font-weight: normal; margin: 0; padding: 0.6em 0; text-align: center;
}
.controls { padding: 2em; text-align: center;
}
.controls button { background: #aaa; border: 0; border-radius: 0.25em; color: #eee; padding: 0.5em 1em;
}
.controls button:hover, .controls button:focus { background: magenta;
}

A Pen by Nick Walsh - Script Codes JS Codes

(function() { var carousel, next, seats; carousel = $('.carousel'); seats = $('.carousel-seat'); next = function(el) { if (el.next().length > 0) { return el.next(); } else { return seats.first(); } }; $('.toggle').on('click', function(e) { var el, i, j, new_seat, ref, results; el = $('.is-ref').removeClass('is-ref'); new_seat = next(el); new_seat.addClass('is-ref').css('order', 1); results = []; for (i = j = 2, ref = seats.length; 2 <= ref ? j <= ref : j >= ref; i = 2 <= ref ? ++j : --j) { results.push(new_seat = next(new_seat).css('order', i)); } return results; });
}).call(this);
A Pen by Nick Walsh - Script Codes
A Pen by Nick Walsh - Script Codes
Home Page Home
Developer Nick Walsh
Username nickawalsh
Uploaded November 06, 2022
Rating 3
Size 3,581 Kb
Views 16,192
Do you need developer help for A Pen by Nick Walsh?

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!

Nick Walsh (nickawalsh) Script Codes
Name
Swan
Mapping - 3
Random Geometries
Mapping - Final
Constellations
Animations without d3-timer
Citrus Bowl
Airline Noise
Radar
Diagram
Create amazing love letters 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!