FUN TIMES Competition

Developer
Heydon
Size
3,473 Kb
Views
4,048
  1. FUN TIMES Competition Previews
  2. FUN TIMES Competition HTML Codes
  3. FUN TIMES Competition CSS Codes

How do I make an fun times competition?

Enter your black and white Times (New Roman) design.. What is a fun times competition? How do you make a fun times competition? This script and codes were developed by Heydon on 19 December 2022, Monday.

FUN TIMES Competition Previews
IQ Test

FUN TIMES Competition - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FUN TIMES Competition</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1> <em>Fun Times</em> <span><b aria-hidden="true"><i>~</i><i>~</i><i>~</i></b> Competition <b aria-hidden="true"><i>~</i><i>~</i><i>~</i></b></span>
</h1>
<div class="content"> <p>Times is the default typeface of the Web because most people's computers have it installed. But you're not likely to see Times unless a website's CSS has failed. This is largely because the last thing we want is for people to think our website's CSS has indeed failed&hellip;</p> <p>For our work to look <em>designed</em>, one of the first things we'll do is pick out a font to replace Times. But if you try to look at Times with fresh eyes, it's a rather beautiful font — and using it eliminates the cost of loading a web font.</p> <p>As an exercise in working within constraints for the benefit of performance, <strong>Fun Times</strong> asks you to design a web page using only the Times and/or Times New Roman font families. The more inventive and beautiful the design is, the more likely it will win the competition.</p> <h2>Rules</h2> <ul> <li>You can only use the Times and/or Times New Roman fonts (any styles and weights you like)</li> <li>The design must be greyscale or monochrome.</li> <li>It must be entered into the competition as a single CodePen (see below)</li> <li>It must contain at least 250 words. Not all of them have to be legible</li> <li>No raster images, videos, or other linked media allowed</li> <li>Inline SVG and JavaScript are fine</li> </ul> <h2>How to enter</h2> <ul> <li>Save your <strong>Fun Times</strong> codePen with the tag <code>funtimescomp</code> so it can be found easily when it comes to sharing and judging.</li> <li>Tweet a link to your codePen with <code>#funTimesComp</code> as the hashtag.</li> </ul> <h2>Judging and prizes</h2> <p>It will go to a public vote, using a mechanism not settled upon yet (suggestions welcome). I'm putting down <strong>£100</strong> to be donated to one of the following charities / organizations, from which the winner can choose. I welcome any contributions to make the prize money bigger. Entries will be accepted until <strong>December 1st, 2017</strong>.</p> <ul> <li><a href="https://www.aclu.org/">ACLU</a></li> <li><a href="http://www.dsausa.org/">Democratic Socialists of America</a></li> <li><a href="http://hopenothate.org.uk/">Hope Not Hate</a></li> <li><a href="https://www.eff.org/">EFF</a></li> <li><a href="http://blacklivesmatter.com/">Black Lives Matter</a></li> <li><a href="https://www.pdsa.org.uk/?keycode=220320&_$ja=tsid:67827|cid:258761070|agid:20225634390|tid:kwd-90377080|crid:200735535276|nw:g|rnd:10646123559508129781|dvc:c|adp:1t1&gclid=EAIaIQobChMI1OKTza-O1gIVyLztCh03Vw6iEAAYASAAEgJ5HfD_BwE">PDSA</a></li> <li><a href="https://www.splcenter.org/">Southern Poverty Law Center</a></li> <li><a href="https://www.translifeline.org/">Trans Lifeline</a></li> <li><a href="https://www.prembabies.co.uk/">Adapt</a></li> <li><a href="https://www.stjude.org/">St. Jude Children's Research Hospital</a></li> </ul> <p>Good luck! And grab me on Twitter (<a href="https://twitter.com/heydonworks">@heydonworks</a>) if you have any questions.</p>
</div>
</body>
</html>

FUN TIMES Competition - Script Codes CSS Codes

:root { font-family: Times New Roman, Times, serif; line-height: 1.5; font-size: calc(1em + 0.33vw);
}
body { overflow-x: hidden; margin: 0;
}
* { margin: 0;
}
* + *:not(li) { margin-top: 1.5rem;
}
p + p { margin-top: 0.75rem;
}
b { font-weight: normal;
}
h1, h2, h3 { text-align: center; line-height: 1.125;
}
h1 { font-size: 1.5rem; overflow: hidden; padding: 1.5rem 0; border-style: solid; border-width: 2px 0 2px 0; outline: 2px solid; outline-offset: 4px; animation: swell 1s infinite ease-in alternate;
}
h1 span, h1 em { display: block; margin: 0; text-transform: uppercase;
}
h1 em { font-size: 5rem; font-style: normal; line-height: 1; letter-spacing: 2px;
}
h1 span { letter-spacing: 0.25rem; font-weight: normal;
}
h1 i { position: relative; animation: switch 1s infinite ease-in alternate;
}
a { text-decoration-skip: ink; color: inherit;
}
i:first-of-type { animation-delay: 0.25s
}
i:nth-of-type(2) { animation-delay: 0.5s
}
i:nth-of-type(3) { animation-delay: 0.75s
}
@keyframes switch { 0% { top: -2px; } 100% { top: 2px; }
}
@keyframes swell { 0% { outline-width: 2px; } 100% { outline-width: 10px; }
}
.content { max-width: 35em; margin: 2.5rem auto; padding: 0 1.5rem;
}
.content > p:first-child:first-letter { font-size: 3em; line-height: 1; margin-right: 0.125rem; float: left; display: inline-block; height: 2.5rem;
}
FUN TIMES Competition - Script Codes
FUN TIMES Competition - Script Codes
Home Page Home
Developer Heydon
Username heydon
Uploaded December 19, 2022
Rating 3.5
Size 3,473 Kb
Views 4,048
Do you need developer help for FUN TIMES Competition?

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!

Heydon (heydon) Script Codes
Name
CSS only, automated, and accessible external link icon
Accessible, pretty radio controls
Controlled chaos
Fukol
Theme color inverter with filter
File system with nested lists
Current Page Test Case
Vue.js TODO List
4 columns, no single remainder
Ransom Note With Google Font Subsets
Create amazing love letters 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!