The 100

Developer
Jakob-e
Size
5,082 Kb
Views
42,504
  1. The 100 Previews
  2. The 100 HTML Codes
  3. The 100 CSS Codes

How do I make an the 100?

100 followers deserves a thank you so much :-). What is a the 100? How do you make a the 100? This script and codes were developed by Jakob-e on 04 July 2022, Monday.

The 100 Previews
IQ Test

The 100 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The 100</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1><span>The</span>1<span>OO</span></h1> <div> <a href="/team/css-tricks" target="_blank">CSS-Tricks</a> <a href="/quezo" target="_blank">Alex Vazquez</a> <a href="/tholman" target="_blank">Tim Holman</a> <a href="/keithwyland" target="_blank">Keith Wyland</a> <a href="/mariemosley" target="_blank">Marie Mosley</a> <a href="/akhbar" target="_blank">Akhbar</a> <a href="/mnich" target="_blank">arturlesniewski</a> <a href="/cesardanielhg" target="_blank">Cesar Hernández</a> <a href="/visualcookie" target="_blank">Dean Hidri</a> <a href="/riogrande" target="_blank">Mario Loncarek</a> <a href="/jakealbaugh" target="_blank">Jake Albaugh</a> <a href="/nobo-dies" target="_blank">Benjamin</a> <a href="/iremlopsum" target="_blank">Irem Lopsum</a> <a href="http://codepen.io/ge1doot/" target="_blank">Gerard Ferrandez</a> <a href="/cathbailh" target="_blank">Bailh</a> <a href="/maheshambure21" target="_blank">Mahesh</a> <a href="/dicson" target="_blank">Dicson</a> <a href="/mathiasha" target="_blank">Mathias Hansted</a> <a href="/Naito" target="_blank">Adam Dorling</a> <a href="/ShanKris" target="_blank">Shan Kris</a> <a href="/AgentRR007" target="_blank">Robert</a> <a href="/Intooo" target="_blank">Arminas</a> <a href="/enero_forte" target="_blank">enero_forte</a> <a href="/kil9ntz" target="_blank">Dölles Krisztián</a> <a href="/playmore" target="_blank">HyoHun Lee</a> <a href="/ZiiX" target="_blank">ZiiX</a> <a href="/dsgnrktme" target="_blank">Florian Boehm</a> <a href="/ZzozZ" target="_blank">Rado</a> <a href="/jorgenirva" target="_blank">jorge andres</a> <a href="/davidpanzarella" target="_blank">David Panzarella</a> <a href="/ndarville" target="_blank">ndarville</a> <a href="/joeyhoer" target="_blank">Joey Hoer</a> <a href="/aynatutancocuk" target="_blank">aynatutancocuk</a> <a href="/casperudesen" target="_blank">casperudesen</a> <a href="/unavezfui" target="_blank">Manu Morante</a> <a href="/landrik" target="_blank">Landrik</a> <a href="/nicolasjengler" target="_blank">Nicolás J. Engler</a> <a href="/HerrSerker" target="_blank">Guido Jansen</a> <a href="/JoeSchmoe09" target="_blank">Joe Schmoe</a> <a href="/jakealbaugh" target="_blank">Jake Albaugh</a> <a href="/Vince_Brown" target="_blank">Vince Brown</a> <a href="/fusco" target="_blank">Joseph Fusco</a> <a href="/ljuboja" target="_blank">Ljubisa Djordjevic</a> <a href="/tigt" target="_blank">Taylor Hunt</a> <a href="/mcurren" target="_blank">Michael Curren</a> <a href="/truongoi" target="_blank">Truong Nguyen</a> <a href="/amcharts" target="_blank">amCharts</a> <a href="/jasen1" target="_blank">Jasen</a> <a href="/enxaneta" target="_blank">Gabi</a> <a href="/e36" target="_blank">SrN</a> <a href="/Hydrojaime" target="_blank">Jairo Jaime</a> <a href="/thrifus" target="_blank">Patrick Hart</a> <a href="/stormymcstorm" target="_blank">Carson Storm</a> <a href="/mayhammf" target="_blank">Ayham Fakihani</a> <a href="/Willpatterson" target="_blank">Will Patterson</a> <a href="/praffn" target="_blank">Phillip</a> <a href="/mikkov" target="_blank">Mikko Vartio</a> <a href="/indyplanets" target="_blank">Jason Weaver</a> <a href="/brownerd" target="_blank">BROWNERD</a> <a href="/rgfx" target="_blank">Revolution Graphics</a> <a href="/joshsmith01" target="_blank">joshsmith01</a> <a href="/noahblon" target="_blank">Noah Blon</a> <a href="/benkadev" target="_blank">Omar Benka</a> <a href="/modaloda" target="_blank">mahmoud Elghandour</a> <a href="/enfinduc" target="_blank">enfinduc</a> <a href="/geoffyuen" target="_blank">Geoff Yuen</a> <a href="/natewiley" target="_blank">Nate Wiley</a> <a href="/sethkontny" target="_blank">seth kontny</a> <a href="/jhawes" target="_blank">Jeremy Hawes</a> <a href="/kaltoft" target="_blank">Morten</a> <a href="/ProfessorSamoff" target="_blank">Tim Samoff</a> <a href="/necu" target="_blank">necu</a> <a href="/sergiohidalgo" target="_blank">sergio hidalgo</a> <a href="/tmrDevelops" target="_blank">Tiffany Rayside</a> <a href="/willmcneilly" target="_blank">Will McNeilly</a> <a href="/N00R_alhassan1" target="_blank">Noor AL-Hassan</a> <a href="/lawlladin" target="_blank">Dave</a> <a href="/Varo" target="_blank">Varo</a> <a href="/automatic" target="_blank">automatic</a> <a href="/tigt" target="_blank">Taylor Hunt</a> <a href="/wardpenney" target="_blank">Ward Penney</a> <a href="/jjoubert12" target="_blank">Jeff Joubert</a> <a href="/xlinx69" target="_blank">chris dens</a> <a href="/lorenzodianni" target="_blank">Lorenzo D'Ianni</a> <a href="/piyamarco" target="_blank">piyamarco</a> <a href="/chriscoyier" target="_blank">Chris Coyier</a> <a href="/HugoGiraudel" target="_blank">Hugo Giraudel</a> <a href="/ice-horse" target="_blank">ice-horse</a> <a href="/helloTDF" target="_blank">Tristan Damien F.</a> <a href="/mouly" target="_blank">mouly</a> <a href="/DELAN" target="_blank">DELAN</a> <a href="/Bicho04" target="_blank">Fabrizio</a> <a href="/Random-Primate" target="_blank">Jose Torres</a> <a href="/koshdnb" target="_blank">koshdnb</a> <a href="/enfinduc" target="_blank">enfinduc</a> <a href="/hounder91" target="_blank">Daniel</a> <a href="/AmeliaBR" target="_blank">Amelia Bellamy-Royds</a> <a href="/kasper_br" target="_blank">Kasper Rasmussen</a> <a href="/JayManale" target="_blank">Jay</a> <a href="/goekhans" target="_blank">Niclas Sauffaus</a> <a href="#" class="h">♡</a> <a href="#" class="h">♡</a> <a href="#" class="h">♡</a>
</div>
</body>
</html>

The 100 - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Righteous);
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { margin: 0; overflow-x: hidden;
}
h1 { position: relative; z-index: 1; font-family: 'Righteous',sans-serif; text-transform: uppercase; font-weight: 400; font-size: 40vmin; letter-spacing: -2vmin; line-height: 60vmin; width: 100vw; text-align: center; vertical-align: middle; margin: 0; color: #282828;
}
span:first-of-type { font-size: 20%; letter-spacing: -.2vmin; vertical-align: middle;
}
span:last-of-type { letter-spacing: -7vmin;
}
a { z-index: 2; display: inline-block; position: relative; float: left; font-family: sans-serif; font-weight: 100; font-size: 2vmin; color: #282828; text-decoration: none; text-transform: uppercase; padding: 1vmin; -webkit-transform: translateX(100vw); transform: translateX(100vw); white-space: nowrap; -webkit-animation: slide-in 3s; animation: slide-in 3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
a:hover { color: red;
}
@-webkit-keyframes slide-in { to { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes slide-in { to { -webkit-transform: translateX(0); transform: translateX(0); }
}
a:nth-of-type(1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s;
}
a:nth-of-type(2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s;
}
a:nth-of-type(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s;
}
a:nth-of-type(4) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s;
}
a:nth-of-type(5) { -webkit-animation-delay: 1s; animation-delay: 1s;
}
a:nth-of-type(6) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s;
}
a:nth-of-type(7) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s;
}
a:nth-of-type(8) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s;
}
a:nth-of-type(9) { -webkit-animation-delay: 1.8s; animation-delay: 1.8s;
}
a:nth-of-type(10) { -webkit-animation-delay: 2s; animation-delay: 2s;
}
a:nth-of-type(11) { -webkit-animation-delay: 2.2s; animation-delay: 2.2s;
}
a:nth-of-type(12) { -webkit-animation-delay: 2.4s; animation-delay: 2.4s;
}
a:nth-of-type(13) { -webkit-animation-delay: 2.6s; animation-delay: 2.6s;
}
a:nth-of-type(14) { -webkit-animation-delay: 2.8s; animation-delay: 2.8s;
}
a:nth-of-type(15) { -webkit-animation-delay: 3s; animation-delay: 3s;
}
a:nth-of-type(16) { -webkit-animation-delay: 3.2s; animation-delay: 3.2s;
}
a:nth-of-type(17) { -webkit-animation-delay: 3.4s; animation-delay: 3.4s;
}
a:nth-of-type(18) { -webkit-animation-delay: 3.6s; animation-delay: 3.6s;
}
a:nth-of-type(19) { -webkit-animation-delay: 3.8s; animation-delay: 3.8s;
}
a:nth-of-type(20) { -webkit-animation-delay: 4s; animation-delay: 4s;
}
a:nth-of-type(21) { -webkit-animation-delay: 4.2s; animation-delay: 4.2s;
}
a:nth-of-type(22) { -webkit-animation-delay: 4.4s; animation-delay: 4.4s;
}
a:nth-of-type(23) { -webkit-animation-delay: 4.6s; animation-delay: 4.6s;
}
a:nth-of-type(24) { -webkit-animation-delay: 4.8s; animation-delay: 4.8s;
}
a:nth-of-type(25) { -webkit-animation-delay: 5s; animation-delay: 5s;
}
a:nth-of-type(26) { -webkit-animation-delay: 5.2s; animation-delay: 5.2s;
}
a:nth-of-type(27) { -webkit-animation-delay: 5.4s; animation-delay: 5.4s;
}
a:nth-of-type(28) { -webkit-animation-delay: 5.6s; animation-delay: 5.6s;
}
a:nth-of-type(29) { -webkit-animation-delay: 5.8s; animation-delay: 5.8s;
}
a:nth-of-type(30) { -webkit-animation-delay: 6s; animation-delay: 6s;
}
a:nth-of-type(31) { -webkit-animation-delay: 6.2s; animation-delay: 6.2s;
}
a:nth-of-type(32) { -webkit-animation-delay: 6.4s; animation-delay: 6.4s;
}
a:nth-of-type(33) { -webkit-animation-delay: 6.6s; animation-delay: 6.6s;
}
a:nth-of-type(34) { -webkit-animation-delay: 6.8s; animation-delay: 6.8s;
}
a:nth-of-type(35) { -webkit-animation-delay: 7s; animation-delay: 7s;
}
a:nth-of-type(36) { -webkit-animation-delay: 7.2s; animation-delay: 7.2s;
}
a:nth-of-type(37) { -webkit-animation-delay: 7.4s; animation-delay: 7.4s;
}
a:nth-of-type(38) { -webkit-animation-delay: 7.6s; animation-delay: 7.6s;
}
a:nth-of-type(39) { -webkit-animation-delay: 7.8s; animation-delay: 7.8s;
}
a:nth-of-type(40) { -webkit-animation-delay: 8s; animation-delay: 8s;
}
a:nth-of-type(41) { -webkit-animation-delay: 8.2s; animation-delay: 8.2s;
}
a:nth-of-type(42) { -webkit-animation-delay: 8.4s; animation-delay: 8.4s;
}
a:nth-of-type(43) { -webkit-animation-delay: 8.6s; animation-delay: 8.6s;
}
a:nth-of-type(44) { -webkit-animation-delay: 8.8s; animation-delay: 8.8s;
}
a:nth-of-type(45) { -webkit-animation-delay: 9s; animation-delay: 9s;
}
a:nth-of-type(46) { -webkit-animation-delay: 9.2s; animation-delay: 9.2s;
}
a:nth-of-type(47) { -webkit-animation-delay: 9.4s; animation-delay: 9.4s;
}
a:nth-of-type(48) { -webkit-animation-delay: 9.6s; animation-delay: 9.6s;
}
a:nth-of-type(49) { -webkit-animation-delay: 9.8s; animation-delay: 9.8s;
}
a:nth-of-type(50) { -webkit-animation-delay: 10s; animation-delay: 10s;
}
a:nth-of-type(51) { -webkit-animation-delay: 10.2s; animation-delay: 10.2s;
}
a:nth-of-type(52) { -webkit-animation-delay: 10.4s; animation-delay: 10.4s;
}
a:nth-of-type(53) { -webkit-animation-delay: 10.6s; animation-delay: 10.6s;
}
a:nth-of-type(54) { -webkit-animation-delay: 10.8s; animation-delay: 10.8s;
}
a:nth-of-type(55) { -webkit-animation-delay: 11s; animation-delay: 11s;
}
a:nth-of-type(56) { -webkit-animation-delay: 11.2s; animation-delay: 11.2s;
}
a:nth-of-type(57) { -webkit-animation-delay: 11.4s; animation-delay: 11.4s;
}
a:nth-of-type(58) { -webkit-animation-delay: 11.6s; animation-delay: 11.6s;
}
a:nth-of-type(59) { -webkit-animation-delay: 11.8s; animation-delay: 11.8s;
}
a:nth-of-type(60) { -webkit-animation-delay: 12s; animation-delay: 12s;
}
a:nth-of-type(61) { -webkit-animation-delay: 12.2s; animation-delay: 12.2s;
}
a:nth-of-type(62) { -webkit-animation-delay: 12.4s; animation-delay: 12.4s;
}
a:nth-of-type(63) { -webkit-animation-delay: 12.6s; animation-delay: 12.6s;
}
a:nth-of-type(64) { -webkit-animation-delay: 12.8s; animation-delay: 12.8s;
}
a:nth-of-type(65) { -webkit-animation-delay: 13s; animation-delay: 13s;
}
a:nth-of-type(66) { -webkit-animation-delay: 13.2s; animation-delay: 13.2s;
}
a:nth-of-type(67) { -webkit-animation-delay: 13.4s; animation-delay: 13.4s;
}
a:nth-of-type(68) { -webkit-animation-delay: 13.6s; animation-delay: 13.6s;
}
a:nth-of-type(69) { -webkit-animation-delay: 13.8s; animation-delay: 13.8s;
}
a:nth-of-type(70) { -webkit-animation-delay: 14s; animation-delay: 14s;
}
a:nth-of-type(71) { -webkit-animation-delay: 14.2s; animation-delay: 14.2s;
}
a:nth-of-type(72) { -webkit-animation-delay: 14.4s; animation-delay: 14.4s;
}
a:nth-of-type(73) { -webkit-animation-delay: 14.6s; animation-delay: 14.6s;
}
a:nth-of-type(74) { -webkit-animation-delay: 14.8s; animation-delay: 14.8s;
}
a:nth-of-type(75) { -webkit-animation-delay: 15s; animation-delay: 15s;
}
a:nth-of-type(76) { -webkit-animation-delay: 15.2s; animation-delay: 15.2s;
}
a:nth-of-type(77) { -webkit-animation-delay: 15.4s; animation-delay: 15.4s;
}
a:nth-of-type(78) { -webkit-animation-delay: 15.6s; animation-delay: 15.6s;
}
a:nth-of-type(79) { -webkit-animation-delay: 15.8s; animation-delay: 15.8s;
}
a:nth-of-type(80) { -webkit-animation-delay: 16s; animation-delay: 16s;
}
a:nth-of-type(81) { -webkit-animation-delay: 16.2s; animation-delay: 16.2s;
}
a:nth-of-type(82) { -webkit-animation-delay: 16.4s; animation-delay: 16.4s;
}
a:nth-of-type(83) { -webkit-animation-delay: 16.6s; animation-delay: 16.6s;
}
a:nth-of-type(84) { -webkit-animation-delay: 16.8s; animation-delay: 16.8s;
}
a:nth-of-type(85) { -webkit-animation-delay: 17s; animation-delay: 17s;
}
a:nth-of-type(86) { -webkit-animation-delay: 17.2s; animation-delay: 17.2s;
}
a:nth-of-type(87) { -webkit-animation-delay: 17.4s; animation-delay: 17.4s;
}
a:nth-of-type(88) { -webkit-animation-delay: 17.6s; animation-delay: 17.6s;
}
a:nth-of-type(89) { -webkit-animation-delay: 17.8s; animation-delay: 17.8s;
}
a:nth-of-type(90) { -webkit-animation-delay: 18s; animation-delay: 18s;
}
a:nth-of-type(91) { -webkit-animation-delay: 18.2s; animation-delay: 18.2s;
}
a:nth-of-type(92) { -webkit-animation-delay: 18.4s; animation-delay: 18.4s;
}
a:nth-of-type(93) { -webkit-animation-delay: 18.6s; animation-delay: 18.6s;
}
a:nth-of-type(94) { -webkit-animation-delay: 18.8s; animation-delay: 18.8s;
}
a:nth-of-type(95) { -webkit-animation-delay: 19s; animation-delay: 19s;
}
a:nth-of-type(96) { -webkit-animation-delay: 19.2s; animation-delay: 19.2s;
}
a:nth-of-type(97) { -webkit-animation-delay: 19.4s; animation-delay: 19.4s;
}
a:nth-of-type(98) { -webkit-animation-delay: 19.6s; animation-delay: 19.6s;
}
a:nth-of-type(99) { -webkit-animation-delay: 19.8s; animation-delay: 19.8s;
}
a:nth-of-type(100) { -webkit-animation-delay: 20s; animation-delay: 20s;
}
a:nth-of-type(101) { -webkit-animation-delay: 20.2s; animation-delay: 20.2s;
}
a:nth-of-type(102) { -webkit-animation-delay: 20.4s; animation-delay: 20.4s;
}
a:nth-of-type(103) { -webkit-animation-delay: 20.6s; animation-delay: 20.6s;
}
div { position: relative; width: 100vw; padding: 0 2vmin;
}
div:after { content: ''; display: table; clear: left;
}
The 100 - Script Codes
The 100 - Script Codes
Home Page Home
Developer Jakob-e
Username jakob-e
Uploaded July 04, 2022
Rating 4.5
Size 5,082 Kb
Views 42,504
Do you need developer help for The 100?

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!

Jakob-e (jakob-e) Script Codes
Name
Profile Top
Responsive Aspect-Ratio SCSS Mixin
Navigation highlighting using waypoints.js
Snap to base-line
Encode SVG SCSS
Very Simple ViewPort Bookmarklet
SCSS z-index
Responsive break out of parent element
Angular Tab Menu
Responsive Font Sizing
Create amazing Facebook ads 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!