A Pen by James Podles

Developer
James Podles
Size
2,656 Kb
Views
8,096
  1. A Pen by James Podles Previews
  2. A Pen by James Podles HTML Codes
  3. A Pen by James Podles CSS Codes
  4. A Pen by James Podles JS Codes

How do I make an a pen by james podles?

What is a a pen by james podles? How do you make a a pen by james podles? This script and codes were developed by James Podles on 22 November 2022, Tuesday.

A Pen by James Podles Previews
IQ Test

A Pen by James Podles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by James Podles</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> <ul> <li> <div class="numeral"> <span class="number rolldown">01</span> <span class="number hider">01 </span> 01 </div> </li> <li> <div class="numeral"> <span class="number rolldown">02</span> <span class="number hider">02 </span> 02 </div> </li> <li> <div class="numeral"> <span class="number rolldown">03</span> <span class="number hider">03 </span> 03 </div> </li>
</ul> <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 James Podles - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Oswald:300,400);
body { font-family: 'Oswald', sans-serif; font-weight: 300; padding-top: 10em;
}
.numeral { position: relative; font-size: 10em;
}
div span { left: 0; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; -webkit-text-stroke: 1px #fff; border-bottom: 5px solid #fff; height: 51%; display: block; position: absolute; color: #4DEDA7; overflow: hidden; left: 0;
}
.hider { color: #fff;
}
.rolldown { z-index: 999; left: auto; text-align: center; width: 100%;
}
ul { width: 100%;
}
li { width: 33%; float: left; text-align: Center;
}

A Pen by James Podles - Script Codes JS Codes

$('.numeral').mousemove(function(e){
var y = e.pageY - $('.number').offset().top;
$(this).children('span').css('height', y)
});
// Inspired by Michael Sevilla's dribbble shot : https://dribbble.com/shots/1579716-Hyundai-FIFA-World-Cup-Menu
A Pen by James Podles - Script Codes
A Pen by James Podles - Script Codes
Home Page Home
Developer James Podles
Username jpod
Uploaded November 22, 2022
Rating 4
Size 2,656 Kb
Views 8,096
Do you need developer help for A Pen by James Podles?

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!

James Podles (jpod) Script Codes
Name
Stack of Cards
JQuery Cousins Method
Soundcloud music player
JQuery Tooltip Plugin
Scrambled City
Envelope Email Form
SoundCloud CoverFlow
The Safe of Mystery
CSS Bot Confusion
Animated Fonts Awesome
Create amazing art & images 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!