Rodeo S03, Round 1 - Chili Recipe
How do I make an rodeo s03, round 1 - chili recipe?
Thought this contest could use a nice, sematically accurate, vintage themed typography entry :)Edit: Added some user interaction. Go click ingredients and stuff.. What is a rodeo s03, round 1 - chili recipe? How do you make a rodeo s03, round 1 - chili recipe? This script and codes were developed by ZeroSpree on 13 July 2022, Wednesday.
Rodeo S03, Round 1 - Chili Recipe Previews
Rodeo S03, Round 1 - Chili Recipe - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rodeo S03, Round 1 - Chili Recipe</title> <link href='http://fonts.googleapis.com/css?family=Fjalla+One|Lovers+Quarrel|Passion+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ html,body{background:#456270;font-family:'Fjalla One', arial, helvetica, sans-serif;text-transform:uppercase;overflow-y:scroll;}
body{width:500px;padding:30px 50px;margin:100px auto;overflow:hidden;border:10px solid #000}
body,
.entry-badge::after,
.entry-badge::before{background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60583/bg.jpg') #E5D8C7;}
.red{color:#700000}
/*Header*/
header::before{content:'"With a squeeze of scorpion venom"';font-size:11px;text-align:center;background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60583/sc.png') center 55px no-repeat;width:215px;height:221px;position:absolute;opacity:.15;border:14px double #000;border-radius:100%;padding:34px;margin:6px 0 0 95px}
.entry-badge{text-align:center;font:italic normal 19px/38px 'Fjalla One';letter-spacing:5px;background:#525D63;overflow:hidden;color:#F0E7D6;margin:0;position:relative;text-shadow:3px 3px rgba(0,0,0, .4);}
.entry-badge::before,
.entry-badge::after{content:'';width:265px;height:265px;border-radius:100%;position:absolute;left:-211px;top:-201px}
.entry-badge::after{left:auto;right:-211px}
h2{font:60px/60px 'Lovers Quarrel', cursive;text-transform:none;transform:skew(-14deg) rotate(-14deg);
display:block;margin:100px 0 -10px 1px;color:#F0E7D6;padding-left:13px;text-shadow: 1px 2px 0 rgba(0,0,0, .2);}
h2::before{content:'';border:40px solid transparent;border-left:250px solid #525D63;position:absolute;transform:rotate(9deg) skew(9deg);margin-left:-8px;z-index:-1;}
h1{font-size:73px;transform:skew(-14deg) rotate(-14deg);color:#525D63;text-align:center;border-top:8px solid #525D63;border-bottom:8px solid #525D63;margin:0 0 10px 8px;line-height:130px;width:484px;text-shadow:4px 5px #F0E7D6, 6px 7px #c6a39a;}
blockquote{font:bold 13px/18px Courier;color:#C3B7A9;transform:rotate(-13deg) skew(-13deg);display:block;overflow:hidden;margin:0 0 80px;text-align:center;}
blockquote::before,
blockquote::after{content:' == '}
/*Ingredients list*/
.ingredients-title{font:bold 20px/12px Courier;letter-spacing:1.5px;position:relative;z-index:1;color:#F0E7D6;text-align:center;}
.ingredients-title::before,
.ingredients-title::after{content: '·';font-size:40px;vertical-align:middle;display:inline-block;padding-right:8px;margin-top:4px;}
ul{border:4px solid #525D63;list-style:none;color:#525D63;position:relative}
ul::before{content: '';border:150px solid transparent;border-bottom:34px solid #525D63;border-top-width:0;margin:-38px 0 0 100px;position:absolute;z-index:0;}
ul::after{content:'';width:100%;height:100%;position:absolute;top:0;z-index:0;display:block;-webkit-filter:sepia(80%);opacity:.1;pointer-events:none;
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/chili.jpg) center center no-repeat fixed;background-size:cover;}
ul li{border-bottom:2px solid #525D63;transform:skew(-2deg);font:19px/40px 'Passion One';vertical-align:middle;text-shadow:1px 1px #D8D2C1, 2px 2px #AF9284;cursor:pointer;transition:all 200ms}
ul li:nth-child(even){transform:skew(2deg);}
ul li:last-child{border-bottom:0}
ul li::before{content:attr(data-count);float:left;width:40px;text-align:center;font-size:27px;line-height:40px;vertical-align:top;transition:width 200ms;}
ul li::after{content:attr(data-unit);float:left;text-shadow:none;line-height:40px;color:#E5D8C7;background:#525D63;width:40px;text-align:center;margin-right:10px;vertical-align:top;text-transform:none;font-size:12px;font-family:'Fjalla One';}
ul li:hover{color:#700000}
ul li.checked{text-decoration:line-through;color:#CDAF9F;text-shadow:0 1px 0 rgba(0,0,0, .3)}
ul li.checked::before{width:0}
ul li.checked::after{content:'✓';font-size:14px;font-weight:bold;}
ul li.checked:hover::after{content:'×';font-size:30px}
button{margin:0;height:44px;border:0;background:#525D63;color:#E5D8C7;cursor:pointer;font-family:'Fjalla One';box-shadow:2px 2px 0 1px #C3B7A9;width:100%;text-align:center;transition:height 200ms;padding:0}
button:focus{outline:none}
button:hover::before{content:'✓';margin-right:10px}
button:active{margin-top:2px;margin-bottom:-2px;box-shadow:none}
ul.complete ~ button{height:0;overflow:hidden;box-shadow:none}
/*Directions*/
.directions-title{font-family:Courier;transform:rotate(-10deg) skew(3deg);text-align:center;margin:50px 0;color:#C3B7A9;font-size:28px;font-weight:bold;text-decoration:line-through;opacity:.4;transition:opacity 400ms}
ol{text-transform:none;list-style:upper-alpha;color:#525D63;padding-left:40px;font-weight:bold;font-family:Courier;font-size:18px;opacity:.2;transition:opacity 400ms;text-decoration: line-through;}
ol li{margin:10px 0}
ol li::after{content:';'}
ol li:last-child::after{content:'.'}
ul.complete ~ ol{opacity:1;text-decoration:none}
ul.complete ~ .directions-title{text-decoration:underline;opacity:1} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Don't you just love pretty code? -->
<header> <h3 class="entry-badge">- Semantically accurate recipe -</h3> <h2>Chris'</h2> <h1>Four-Bean <span class="red">Chili</span></h1> <blockquote>My grandpappy used to make this chili over the campfire under the Texas stars. The secret ingredient was a little squeeze of scorpion venom in the pot.</blockquote>
</header>
<h3 class="ingredients-title">Prepare</h3>
<ul> <li data-count="1" data-unit="lb">ground bison</li> <li data-count="1" data-unit="cup">diced onion</li> <li data-count="4" data-unit="-">diced jalepeños</li> <li data-count="1" data-unit="cup">black beans</li> <li data-count="1" data-unit="cup">great northern beans</li> <li data-count="1" data-unit="cup">kidney beans</li> <li data-count="1" data-unit="cup">pinto beans</li> <li data-count="4" data-unit="cloves">garlic</li> <li data-count="2" data-unit="Tbsp">mexican chili powder</li> <li data-count="2" data-unit="tsp">salt</li> <li data-count="2" data-unit="tsp">ground pepper</li> <li data-count="1" data-unit="tsp">cayenne</li> <li data-count="28" data-unit="oz">smushed tomatoes</li> <li data-count="3" data-unit="cups">beef broth</li>
</ul>
<button>Think you've got what it takes?</button>
<h3 class="directions-title">You're all set!</h3>
<ol> <li>Get your filthiest campfire-scorched Dutch oven over the fire the best you can situate it</li> <li>Brown the bison. Add the diced onion and spices, sautee until soft</li> <li>Add tomatoes and broth and bring to a simmer for 40 minutes</li> <li>Add beans and cook another 30 minutes</li> <li>Serve with Tabasco and a giant spoon</li>
</ol> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Rodeo S03, Round 1 - Chili Recipe - Script Codes CSS Codes
html,body{background:#456270;font-family:'Fjalla One', arial, helvetica, sans-serif;text-transform:uppercase;overflow-y:scroll;}
body{width:500px;padding:30px 50px;margin:100px auto;overflow:hidden;border:10px solid #000}
body,
.entry-badge::after,
.entry-badge::before{background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60583/bg.jpg') #E5D8C7;}
.red{color:#700000}
/*Header*/
header::before{content:'"With a squeeze of scorpion venom"';font-size:11px;text-align:center;background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60583/sc.png') center 55px no-repeat;width:215px;height:221px;position:absolute;opacity:.15;border:14px double #000;border-radius:100%;padding:34px;margin:6px 0 0 95px}
.entry-badge{text-align:center;font:italic normal 19px/38px 'Fjalla One';letter-spacing:5px;background:#525D63;overflow:hidden;color:#F0E7D6;margin:0;position:relative;text-shadow:3px 3px rgba(0,0,0, .4);}
.entry-badge::before,
.entry-badge::after{content:'';width:265px;height:265px;border-radius:100%;position:absolute;left:-211px;top:-201px}
.entry-badge::after{left:auto;right:-211px}
h2{font:60px/60px 'Lovers Quarrel', cursive;text-transform:none;transform:skew(-14deg) rotate(-14deg);
display:block;margin:100px 0 -10px 1px;color:#F0E7D6;padding-left:13px;text-shadow: 1px 2px 0 rgba(0,0,0, .2);}
h2::before{content:'';border:40px solid transparent;border-left:250px solid #525D63;position:absolute;transform:rotate(9deg) skew(9deg);margin-left:-8px;z-index:-1;}
h1{font-size:73px;transform:skew(-14deg) rotate(-14deg);color:#525D63;text-align:center;border-top:8px solid #525D63;border-bottom:8px solid #525D63;margin:0 0 10px 8px;line-height:130px;width:484px;text-shadow:4px 5px #F0E7D6, 6px 7px #c6a39a;}
blockquote{font:bold 13px/18px Courier;color:#C3B7A9;transform:rotate(-13deg) skew(-13deg);display:block;overflow:hidden;margin:0 0 80px;text-align:center;}
blockquote::before,
blockquote::after{content:' == '}
/*Ingredients list*/
.ingredients-title{font:bold 20px/12px Courier;letter-spacing:1.5px;position:relative;z-index:1;color:#F0E7D6;text-align:center;}
.ingredients-title::before,
.ingredients-title::after{content: '·';font-size:40px;vertical-align:middle;display:inline-block;padding-right:8px;margin-top:4px;}
ul{border:4px solid #525D63;list-style:none;color:#525D63;position:relative}
ul::before{content: '';border:150px solid transparent;border-bottom:34px solid #525D63;border-top-width:0;margin:-38px 0 0 100px;position:absolute;z-index:0;}
ul::after{content:'';width:100%;height:100%;position:absolute;top:0;z-index:0;display:block;-webkit-filter:sepia(80%);opacity:.1;pointer-events:none;
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/chili.jpg) center center no-repeat fixed;background-size:cover;}
ul li{border-bottom:2px solid #525D63;transform:skew(-2deg);font:19px/40px 'Passion One';vertical-align:middle;text-shadow:1px 1px #D8D2C1, 2px 2px #AF9284;cursor:pointer;transition:all 200ms}
ul li:nth-child(even){transform:skew(2deg);}
ul li:last-child{border-bottom:0}
ul li::before{content:attr(data-count);float:left;width:40px;text-align:center;font-size:27px;line-height:40px;vertical-align:top;transition:width 200ms;}
ul li::after{content:attr(data-unit);float:left;text-shadow:none;line-height:40px;color:#E5D8C7;background:#525D63;width:40px;text-align:center;margin-right:10px;vertical-align:top;text-transform:none;font-size:12px;font-family:'Fjalla One';}
ul li:hover{color:#700000}
ul li.checked{text-decoration:line-through;color:#CDAF9F;text-shadow:0 1px 0 rgba(0,0,0, .3)}
ul li.checked::before{width:0}
ul li.checked::after{content:'✓';font-size:14px;font-weight:bold;}
ul li.checked:hover::after{content:'×';font-size:30px}
button{margin:0;height:44px;border:0;background:#525D63;color:#E5D8C7;cursor:pointer;font-family:'Fjalla One';box-shadow:2px 2px 0 1px #C3B7A9;width:100%;text-align:center;transition:height 200ms;padding:0}
button:focus{outline:none}
button:hover::before{content:'✓';margin-right:10px}
button:active{margin-top:2px;margin-bottom:-2px;box-shadow:none}
ul.complete ~ button{height:0;overflow:hidden;box-shadow:none}
/*Directions*/
.directions-title{font-family:Courier;transform:rotate(-10deg) skew(3deg);text-align:center;margin:50px 0;color:#C3B7A9;font-size:28px;font-weight:bold;text-decoration:line-through;opacity:.4;transition:opacity 400ms}
ol{text-transform:none;list-style:upper-alpha;color:#525D63;padding-left:40px;font-weight:bold;font-family:Courier;font-size:18px;opacity:.2;transition:opacity 400ms;text-decoration: line-through;}
ol li{margin:10px 0}
ol li::after{content:';'}
ol li:last-child::after{content:'.'}
ul.complete ~ ol{opacity:1;text-decoration:none}
ul.complete ~ .directions-title{text-decoration:underline;opacity:1}Rodeo S03, Round 1 - Chili Recipe - Script Codes JS Codes
// Because everyone screams! user interaction
$(function(){ var list = $('ul'), listItem = list.find('li'); listItem.on('click', function(){ $(this).toggleClass('checked'); listItem.not('.checked').length ? list.removeClass('complete') : list.addClass('complete'); }); $('button').on('click', function(){ listItem.addClass('checked'); list.addClass('complete'); });
});
| Developer | ZeroSpree |
| Username | zerospree |
| Uploaded | July 13, 2022 |
| Rating | 4.5 |
| Size | 5,919 Kb |
| Views | 40,480 |
Do you need developer help for Rodeo S03, Round 1 - Chili Recipe?
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!
ZeroSpree (zerospree) Script Codes
| Name | Size |
| Hexagon exercise. | 2,615 Kb |
| Suspecting Minion | 4,555 Kb |
| Red - Supergiant Games | 4,518 Kb |
| RIP flashdrives | 3,657 Kb |
| CodePen Stats Checker | 9,083 Kb |
| Steve Jobs | 4,968 Kb |
| CSS Coordinates | 3,589 Kb |
| CSS3 Shadows Darth Vader | 4,472 Kb |
| Flip - card memory game. | 7,947 Kb |
| Waving Santa | 4,614 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
| Count up | Alanshortis | 2,391 Kb |
| Portfolio Landing Page | FDfranklin | 3,585 Kb |
| Particle Motion trajectories | Sniejadlik | 5,899 Kb |
| Bootstrap 3 Price Table | Honglio | 2,655 Kb |
| A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
| Fullscreen Parallax | Bassta | 3,313 Kb |
| Sticky footer testing | 75th | 1,649 Kb |
| A Pen by Theun | Tjoen | 6,152 Kb |
| Masonry | Uriuriuriu | 5,005 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!