A Pen by Anthony Keithley

Developer
Anthony Keithley
Size
3,400 Kb
Views
4,048
  1. A Pen by Anthony Keithley Previews
  2. A Pen by Anthony Keithley HTML Codes
  3. A Pen by Anthony Keithley CSS Codes
  4. A Pen by Anthony Keithley JS Codes

How do I make an a pen by anthony keithley?

What is a a pen by anthony keithley? How do you make a a pen by anthony keithley? This script and codes were developed by Anthony Keithley on 24 December 2022, Saturday.

A Pen by Anthony Keithley Previews
IQ Test

A Pen by Anthony Keithley - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Anthony Keithley</title> <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Farsan|Francois+One" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="titlebar"> <h1>How to 360 Flip</h1>
</div>
<div id="heading"> <h1 id="mainTitle">How to 360 Flip</h1> <h2 id="mainSubtitle">Want people to think you're cool?</h2> <h2>Learn this one trick.</h2>
</div>
<div id="materials"> <h1>Materials Needed:</h1> <ul> <li>Skateboard</li> <li>Shoes</li> <li>Feet (not 100% necessary - see <a href="https://www.youtube.com/watch?v=F9n65C0yGcw" target="_blank">Jon Comer</a>)</li> <li>Attitude</li> </ul> <img id="coolGuy" src="https://s16.postimg.org/jom2uwbk5/guy5.png" width="200px">
</div>
<div id="procedure"> <h1 class="hSteps">Step 1: Foot Position</h1> <p class="pSteps">Foot position is key. Your back foot should be on the opposite end of the tail, toes on the board only. Your front foot should be just behind the front bolts. If you point your the toes of your front foot more forward, the board will flip and spin faster, but if you point them more inward, you can get higher pop.</p> <img src="https://s27.postimg.org/p1eneifw3/Foot_Position.jpg" width="100%"> <h1 class="hSteps">Step 2: The Pop and Scoop</h1> <p class="pSteps">Unlike other tricks, your back foot does most of the work. As you pop your tail down, scoop your back foot in the direction of rotation, which will spin the 360 part of the 360 flip.</p> <img src="https://s27.postimg.org/s9j4rk25v/from_behind.png" width="100%"> <img src="https://s27.postimg.org/k6kyg8hkj/pop.png" width="100%"> <img src="https://s27.postimg.org/wzdntwik3/scoop.png" width="100%"> <h1 class="hSteps">Step 3: The Flick</h1> <p class="pSteps">Flick your front foot slightly up and out. This should be a very light. It's just there to do the flip, not the spin. The back foot will handle that.</p> <img src="https://s27.postimg.org/misydtu5v/flick.png" width="100%"> <h1 class="hSteps">Step 4: Chill</h1> <p class="pSteps">There's a lot of flipping and spinning going on. Make sure you've jumped up and out of the way. Now it's just time to chill in the air while your board does its thang. If you want to be really cool, dangle that back foot out real far.</p> <img src="https://s27.postimg.org/t7zhtufhv/dangle.png" width="100%"> <h1 class="hSteps">Step 5: The Catch</h1> <p class="pSteps">When the board is approaching its original upright, forward-pointing state, bring your front foot down a bit to catch it. For extra style points, keep dangling that back foot for a little while, then bring it back onto the board and brace for impact.</p> <img src="https://s30.postimg.org/zct42tjo1/front_Foot_Catch.png" width="100%"> <h1 class="hSteps">Step 6: Land and Roll Away</h1> <p class="pSteps">Land it, bend those knees, and roll away looking cool.</p> <img src="https://s16.postimg.org/jom2uwbk5/guy5.png" width="100%">
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Anthony Keithley - Script Codes CSS Codes

#coolGuy { position: absolute; right: 30px; bottom: 30px; z-index: 0;
}
#mainTitle { font-size: 100px; font-family: Francois One;
}
#heading { background-color: rgba(100, 100, 255, 0.5); text-align: center; color: white; padding-top: 60px; width: 100%;
}
#materials { padding: 20px; background-color: rgba(200, 200, 255, 0.8); width: 80%; margin: 0 auto; position: relative;
}
li { background: url("https://images.vexels.com/media/users/3/132149/isolated/lists/26dccfa755e98f224218aa6c2b36b923-skateboard-sport-silhouette.png") no-repeat left; background-size: 30px 30px; height:30px; padding-left: 40px; padding-top: 10px; list-style: none; font-size: 1.5em;
}
#procedure { width: 80%; margin-left: auto; margin-right: auto;
}
.hSteps:hover { background-color: rgba(30, 144, 255, 0.5); color: white;
}
.hSteps { cursor: pointer; font-family: Francois One; background-color: white; border-style: solid; border-width: 1px; padding: 1px 10px;
}
.pSteps { padding: 5px 10px; border-radius: 10px; color: white; background-color: #bada55; font-family: Farsan; font-size: 1.5em;
}
body { background: radial-gradient(black, white); margin: 0;
}
#titlebar { height: 60px; text-align: center; color: white; Background-color: dodgerblue; position: fixed; width: 100%; z-index: 9999;
}

A Pen by Anthony Keithley - Script Codes JS Codes

$(document).ready(function(){ $("#procedure").on("click",".hSteps",function(){ $(this).next().slideToggle(); });
});
A Pen by Anthony Keithley - Script Codes
A Pen by Anthony Keithley - Script Codes
Home Page Home
Developer Anthony Keithley
Username KeithleySLHS
Uploaded December 24, 2022
Rating 3
Size 3,400 Kb
Views 4,048
Do you need developer help for A Pen by Anthony Keithley?

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!

Anthony Keithley (KeithleySLHS) Script Codes
Name
Keyframes May 4
Rectangle Creator
Dashboard
Portfolio
Input and Output Test
Animations Practice
JS One
Nav Bar
CSS Borders
Linear Equations
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!