A Pen by Cory

Developer
Cory
Size
3,306 Kb
Views
14,168
  1. A Pen by Cory Previews
  2. A Pen by Cory HTML Codes
  3. A Pen by Cory CSS Codes
  4. A Pen by Cory JS Codes

How do I make an a pen by cory?

What is a a pen by cory? How do you make a a pen by cory? This script and codes were developed by Cory on 13 December 2022, Tuesday.

A Pen by Cory Previews
IQ Test

A Pen by Cory - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Cory</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrap">	<h1>How to make a Mojito</h1>	<div id="buttons">	<div id="left-arrow"></div>	<div id="step-text">	Step 1 of 6	</div>	<div id="right-arrow"></div>	</div> <div id="image"></div> <div id="text">	Inspired by a South Beach sunset, this rum sparkler with a mint infusion is perfect for slow sipping while watching the sun go down — no matter where you live.	</div> </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 Cory - Script Codes CSS Codes

@charset "UTF-8";
/* CSS Document */
* { margin: 0; padding: 0; border: none; }
#wrap {	width: 650px;	margin: 60px auto 0px auto;	}
h1 {	text-align: center;	}
#buttons {	width: 325px;	height: 32px;	margin-left: 40px;	}
#left-arrow,
#right-arrow {	float: left;	width: 32px;	height: 32px;	}
#left-arrow:before,
#right-arrow:before{ display: block; border-radius: 50%; background-color: #999; width: 2em; height: 2em; text-align: center; color: #fff	}
#left-arrow:before { content: '<';
}
#right-arrow:before { content: '>';
}
#left-arrow:hover:before, #right-arrow:hover:before { background-color: #666	}
#step-text {	float: left;	width: 180px;	height: 32px;	font-size: 0.8em;	line-height: 24px;	font-family: Verdana, sans-serif;	color: #aaa;	text-align: center;	}
#image {	float: left;	width: 325px;	height: 325px;	background-image: url("http://slowcocktails.squarespace.com/storage/mojito1.jpg"); background-position: bottom center;	}
#text {	float: left;	width: 285px;	height: 285px;	padding: 20px;	background-color: #eee;	}

A Pen by Cory - Script Codes JS Codes

// JavaScript Document
// Store the current step in the instructions, and an array to hold each corresponding step's instruction
var images = ['http://slowcocktails.squarespace.com/storage/mojito1.jpg', 'http://rock-ur-party.tablespoon.com/files/2013/04/2013-04-30-mint-julep-jelly-shots-mint-580x400.jpg', 'http://res.mindbodygreen.com/img/ftr/sugar-dumb.jpg', 'http://image.shutterstock.com/display_pic_with_logo/56233/56233,1174940759,7/stock-photo-pure-natural-lime-juice-pouring-straight-from-the-lime-into-the-glass-2952975.jpg', 'http://img.foodnetwork.com/FOOD/2011/05/03/CC_Michael-Chiarello-Mojitos_s4x3_lg.jpg', ] step = 0, instructions = [
"Inspired by a South Beach sunset, this rum sparkler with a mint infusion is perfect for slow sipping while watching the sun go down — no matter where you live.",
"Remove the leaves from 8 sprigs of fresh mint and add them to a blender.",
"Next add 1/2 cup sugar.",
"Add 1/4 cup fresh lime juice.",
"Finally, add the skin of a grated lime and 2 cups ice cubes. Pulse until the mint is chopped.",
"Fill a pitcher with 2 cups of ice and add the mint mixture. Then pour in a cup or so of golden rum. For a virgin mojito, you can skip this step and instead add a couple cups of soda water, and stir.",
"Pour into a glass, relax, and enjoy."
];
// Respond to user clicking the right arrow:
// Update step, check boundary condition first
// Change the content
function nextStep() { step++; if (step > instructions.length) { step = 1; } changeContent();
}
// Respond to user clicking the left arrow:
// Update step, check boundary condition first
// Change the content
function prevStep() { step--; if (step < 1) { step = instructions.length; } changeContent();
}
// Update the content for the current step
function changeContent() { //Update the instructions //get the instruction at index step //replace the content in #text with the new content $('#text').html(instructions[step]); //Update the image //get the image at index step //replace the content in #image with the new image $('#image').css({ backgroundImage: 'url(' + images[step] + ')' }); //Update the step text $('#step-text').html('step ' + (step + 1) + ' of ' + instructions.length)
}
$('#right-arrow').on('click', function () { nextStep();
});
$('#left-arrow').on('click', function () { prevStep();
});
A Pen by Cory - Script Codes
A Pen by Cory - Script Codes
Home Page Home
Developer Cory
Username uniqname
Uploaded December 13, 2022
Rating 3
Size 3,306 Kb
Views 14,168
Do you need developer help for A Pen by Cory?

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!

Cory (uniqname) Script Codes
Name
CSA-React POC
Hover activated accordian with default state
React Carousel POC
PictureTime
Floating Labels
A content slider
Javascript Digital Clock Example
X-Picture tag
Memory Leak Demo
Digital Clock
Create amazing video scripts 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!