Fantastic Mr. Fox

Developer
Derek Wheelden
Size
7,290 Kb
Views
38,456
  1. Fantastic Mr. Fox Previews
  2. Fantastic Mr. Fox HTML Codes
  3. Fantastic Mr. Fox CSS Codes

How do I make an fantastic mr. fox?

My submission for season 3, week 4 of the CodePen Rodeo.. What is a fantastic mr. fox? How do you make a fantastic mr. fox? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.

Fantastic Mr. Fox Previews
IQ Test

Fantastic Mr. Fox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fantastic Mr. Fox</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ h1,
h2,
h3,
h4 { text-align: center;
}
h1 { margin: 0; font-size: 3em; line-height: 1; text-transform: uppercase; color: #cd8b34;
}
@media screen and (min-width: 30em) { h1 { font-size: 4em; }
}
@media screen and (min-width: 40em) { h1 { font-size: 5em; }
}
@media screen and (min-width: 80em) { h1 { font-size: 6em; }
}
@media screen and (min-width: 90em) { h1 { font-size: 7em; }
}
@media screen and (min-width: 110em) { h1 { font-size: 8em; }
}
h2 { margin-bbttom: 0; line-height: 1; letter-spacing: 0.25em; text-transform: uppercase; color: #e7d2b7;
}
h3 { margin-top: 0; text-transform: uppercase;
}
h4 { margin: 1em -50em; color: #cd8b34; background: #cd8b34; opacity: 0.5;
}
h4 span { display: inline-block; padding: 0 1em; background: #f8e03e;
}
time { display: block; margin: 1em 0; text-align: center; text-transform: lowercase; color: #a45e60;
}
.panel { margin: 0 -50em; padding: 2em 0;
}
.dialog { margin: 1em 0;
}
.dialog:nth-child(even) { opacity: 0.8;
}
.dialog .speaker { width: 7.5em; font-weight: bold; text-transform: uppercase; float: left;
}
.dialog .words { width: calc(100% - 7.5em); float: left;
}
.dialog .words .notes { font-style: italic; opacity: 0.5;
}
.stage-notes { margin: 2em -50em; padding: 0.5em 50em; background: #a45e60; font-style: italic; color: #e7d2b7;
}
.t-centered { text-align: center;
}
.t-upper { text-transform: uppercase;
}
.t-italic { font-style: italic;
}
.c-red { color: #a45e60;
}
.c-tan { color: #e7d2b7;
}
.b-light-brown { background: #cd8b34;
}
.b-red { background: #a45e60;
}
.margin-top { margin-top: 5em;
}
html { font-size: 62.5%; overflow-x: hidden;
}
body { background: #f8e03e; font-family: "futura-pt", sans-serif; font-size: 2em; line-height: 1.5; color: #541f0f;
}
.container { width: 90%; max-width: 35em; margin: 0 auto; padding-bottom: 5em;
}
/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */
.cf:before, .dialog:before,
.cf:after,
.dialog:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after, .dialog:after { clear: both;
}
/** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.cf, .dialog { *zoom: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<script type="text/javascript" src="//use.typekit.net/nry3lxo.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<h1>Fantastic Mr.&nbsp;Fox</h1>
<div class="container"> <div class="t-centered panel b-red"> <h2>Written by</h2> <p class="t-upper c-tan">Roald Dahl, Wes Anderson &amp; Noah Baumbach</p> </div> <time>March 4, 2007</time> <h4><span>1</span></h4> <h3>Ext. Woods. Day</h3> <p class="t-italic"> An apple tree stands alone at the top of a hill. A handsome fox dressed in an Edwardian-style navy velvet suit leans against it with his arms folded and his legs crossed, chewing on a reed of wild grass. He holds an apple core in his paw. He spits out a seed. He looks off across a meadow that descends into the valley below. A female fox strides briskly up the hill. Her coat is a paler, especially beautiful shade of fox-red, and she wears men's trousers and a dark tunic. Fox says as she approaches: <p> <div class="dialog"> <div class="speaker">Fox</div> <div class="words">What'd the doctor say?</div> </div> <div class="dialog"> <div class="speaker">Mrs. Fox</div> <div class="words">Nothing. Supposedly, it's just a twenty- four hour bug. He gave me some pills.</div> </div> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> <span class="notes">(REASSURINGLY)</span> I told you. You probably just ate some bad gristle. </div> </div> <div class="stage-notes"> Fox brushes the fur on Mrs. Fox's ears with his paws. They walk together along the crest of the hill to a fork in the path. Fox points: </div> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> Should we take the short cut or the scenic route? </div> </div> <div class="dialog"> <div class="speaker">Mrs. Fox</div> <div class="words"> Let's take the short cut. </div> </div> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> But the scenic route is so much prettier. </div> </div> <div class="dialog"> <div class="speaker">Mrs. Fox</div> <div class="words"> <span class="notes">(SHRUGS)</span> OK, let's take the scenic route. </div> </div> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> Great. It's actually slightly quicker, anyway. </div> </div> <div class="stage-notes"> Fox throws his apple core away over his shoulder and dances a quick circle around Mrs. Fox, wrapping his arm around her waist extravagantly and making her laugh as they start off down the scenic route. </div> <h4><span>2</span></h4> <h3>EXT. FARM. DAY</h3> <p class="t-italic"> A rustic cottage surrounded by a small barn, a tin silo, and a rickity windmill. There is a sheep in a little pasture. A sign on a rail says Berkus Squab. Fox and Mrs. Fox watch from the bushes outside a fence. </p> <div class="dialog"> <div class="speaker">Mrs. Fox</div> <div class="words"> What is a squab? </div> </div> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> You know what a squab is. It's like a pigeon, I suppose. Anyway, it's a type of bird we can eat. </div> </div> <div class="stage-notes"> Fox motions toward the edge of the property. </div> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> Should we go through the hole under the horse fence or climb the rail over the bridle path? </div> </div> <div class="dialog"> <div class="speaker">Mrs. Fox</div> <div class="words"> Well, I guess the horse fence would be a little safer. </div> </div> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> But the bridle path puts us out right next to the squab shack. </div> </div> <div class="stage-notes"> Mrs. Fox hesitates. She fiddles with her paws. She nods nervously. She shakes slightly. Fox looks at her funny. </div> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> What's wrong? I've never seen you like this. You're acting all skittish. Don't worry. I've been stealing birds for a living since before I could trot. </div> </div> <div class="dialog"> <div class="speaker">Mrs. Fox</div> <div class="words"> <span class="notes">(SHRUGS)</span> OK, let's take the &mdash; </div> </div> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> No, we'll do the horse fence. You gave me the scenic route already. </div> </div> <div class="stage-notes"> Fox flashes a smile. He says suddenly: </div> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> By the way, you look unbelievably beautiful tonight. You're practically glowing. Maybe it's the lighting. </div> </div> <h4><span>3</span></h4> <p class="t-italic"> Mrs. Fox is, in fact, glowing, albeit ever so slightly. She stares at Fox enigmatically. Fox touches his paw to her cheek. (NOTE: an alternate version of Mrs. Fox will be used for this shot which can be literally lit from within.) With the speed, grace, and precision of athletes, Fox and Mrs. Fox: dart through a hole under a painted fence; race along a thin trail next to a garage; crawl beneath a window where a blonde woman serves an early dinner, dealing hamburgers like playing cards to three little, blond children; creep past a doghouse where a golden retriever sleeps with an airline sleeping mask over his eyes; and shimmy over a doorway outside a workshop where a blond, bearded farmer hacks into a stump with a hatchet, completely pulverizing it into sawdust. They arrive in front of a wooden shed. Fox whistles sharply with a half-chirp and performs a rapid reverse-flip with a flourish. Fox lifts a loose board. He looks to Mrs. Fox and puts his finger to his lips for her to be quiet. She shrugs impatiently. They duck inside. They come back out. Each holds a dead, bloody pigeon in his/her teeth. They start to run away. Fox looks up above them. He stops. He frowns. He takes the pigeon out of his mouth and says curiously, pointing toward the sky: </p> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> What's that? I think that's a fox-trap! Look at this. </div> </div> <div class="dialog"> <div class="speaker">Mrs. Fox</div> <div class="words"> Get away from there. </div> </div> <div class="dialog"> <div class="speaker">Fox</div> <div class="words"> Is it spring-loaded? Yeah&hellip; <span class="notes">(pointing to different spots)</span> I guess if you come from over there, and you're standing at the door to the squab shack, this little gadget probably triggers the &mdash; <span class="notes">(gesturing to Mrs. Fox)</span> Move out of the way, darling. That's right where it's going to land. </div> </div> <div class="stage-notes"> Mrs. Fox runs back to Fox and tugs at his arm. </div> <div class="dialog"> <div class="speaker">Mrs. Fox</div> <div class="words"> Come on! Stop it! Let's go! </div> </div> <h4 class="margin-top"><span>FIN</span></h4> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Fantastic Mr. Fox - Script Codes CSS Codes

h1,
h2,
h3,
h4 { text-align: center;
}
h1 { margin: 0; font-size: 3em; line-height: 1; text-transform: uppercase; color: #cd8b34;
}
@media screen and (min-width: 30em) { h1 { font-size: 4em; }
}
@media screen and (min-width: 40em) { h1 { font-size: 5em; }
}
@media screen and (min-width: 80em) { h1 { font-size: 6em; }
}
@media screen and (min-width: 90em) { h1 { font-size: 7em; }
}
@media screen and (min-width: 110em) { h1 { font-size: 8em; }
}
h2 { margin-bbttom: 0; line-height: 1; letter-spacing: 0.25em; text-transform: uppercase; color: #e7d2b7;
}
h3 { margin-top: 0; text-transform: uppercase;
}
h4 { margin: 1em -50em; color: #cd8b34; background: #cd8b34; opacity: 0.5;
}
h4 span { display: inline-block; padding: 0 1em; background: #f8e03e;
}
time { display: block; margin: 1em 0; text-align: center; text-transform: lowercase; color: #a45e60;
}
.panel { margin: 0 -50em; padding: 2em 0;
}
.dialog { margin: 1em 0;
}
.dialog:nth-child(even) { opacity: 0.8;
}
.dialog .speaker { width: 7.5em; font-weight: bold; text-transform: uppercase; float: left;
}
.dialog .words { width: calc(100% - 7.5em); float: left;
}
.dialog .words .notes { font-style: italic; opacity: 0.5;
}
.stage-notes { margin: 2em -50em; padding: 0.5em 50em; background: #a45e60; font-style: italic; color: #e7d2b7;
}
.t-centered { text-align: center;
}
.t-upper { text-transform: uppercase;
}
.t-italic { font-style: italic;
}
.c-red { color: #a45e60;
}
.c-tan { color: #e7d2b7;
}
.b-light-brown { background: #cd8b34;
}
.b-red { background: #a45e60;
}
.margin-top { margin-top: 5em;
}
html { font-size: 62.5%; overflow-x: hidden;
}
body { background: #f8e03e; font-family: "futura-pt", sans-serif; font-size: 2em; line-height: 1.5; color: #541f0f;
}
.container { width: 90%; max-width: 35em; margin: 0 auto; padding-bottom: 5em;
}
/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */
.cf:before, .dialog:before,
.cf:after,
.dialog:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after, .dialog:after { clear: both;
}
/** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.cf, .dialog { *zoom: 1;
}
Fantastic Mr. Fox - Script Codes
Fantastic Mr. Fox - Script Codes
Home Page Home
Developer Derek Wheelden
Username frxnz
Uploaded August 10, 2022
Rating 3.5
Size 7,290 Kb
Views 38,456
Do you need developer help for Fantastic Mr. Fox?

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!

Derek Wheelden (frxnz) Script Codes
Name
Off-Screen Mobile Nav
Dumb Triangle Thing
A Pen by Derek Wheelden
File Browser Mockup
Live LESS Compilation
Drop Caps
Instagram Hover
User Listing
Suck It
Dr. Strangelove
Create amazing SEO 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!