9 Pens

Developer
Noah Blon
Size
3,350 Kb
Views
68,816
  1. 9 Pens Previews
  2. 9 Pens HTML Codes
  3. 9 Pens CSS Codes

How do I make an 9 pens?

9 Pens created by frontenders at The Nerdery. Inspired by 9 Squares. Read about the project.. What is a 9 pens? How do you make a 9 pens? This script and codes were developed by Noah Blon on 24 June 2022, Friday.

9 Pens Previews
IQ Test

9 Pens - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>9 Pens</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body class="body"> <h1> <div class="letter letter-white">9</div> <div class="letter letter-blue">P</div> <div class="letter letter-green">E</div> <div class="letter letter-yellow">N</div> <div class="letter letter-red">S</div> </h1> <div class="bradyBunch"> <div class="brady"> <div data-height="250" data-theme-id="15029" data-slug-hash="aOmBmV" data-default-tab="result" data-user="jsndks" class='codepen'></div> <div class="credit"> <a class="edit" href="//codepen.io/jsndks/pen/aOmBmV" target="_blank">Edit this pen</a> <a class="profile" href="//codepen.io/jsndks" target="_blank">Jason Dicks [@jdicks]</a> </div> </div> <div class="brady"> <div data-height="250" data-theme-id="15029" data-slug-hash="doOOwg" data-default-tab="result" data-user="adamRenny" class='codepen'></div> <div class="credit"> <a class="edit" href="//codepen.io/adamRenny/pen/doOOwg" target="_blank">Edit this pen</a> <a class="profile" href="//codepen.io/adamRenny" target="_blank">Adam Ranfelt [@adamRenny]</a> </div> </div> <div class="brady"> <div data-height="250" data-theme-id="15029" data-slug-hash="eNBdjY" data-default-tab="result" data-user="ekidd" class='codepen'></div> <div class="credit"> <a class="edit" href="//codepen.io/ekidd/pen/eNBdjY" target="_blank">Edit this pen</a> <a class="profile" href="//codepen.io/ekidd/" target="_blank">Eric Kidd [@ekidd]</a> </div> </div> <div class="brady"> <div data-height="250" data-theme-id="15029" data-slug-hash="gpLgbO" data-default-tab="result" data-user="ferronsays" class='codepen'></div> <div class="credit"> <a class="edit" href="//codepen.io/ferronsays/pen/gpLgbO" target="_blank">Edit this pen</a> <a class="profile" href="//codepen.io/ferronsays/" target="_blank">Mike Ferron [@ferronsays]</a> </div> </div> <div class="brady"> <div data-height="250" data-theme-id="15029" data-slug-hash="mJrQoR" data-default-tab="result" data-user="WithAnEs" class='codepen'></div> <div class="credit"> <a class="edit" href="//codepen.io/WithAnEs/pen/mJrQoR" target="_blank">Edit this pen</a> <a class="profile" href="//codepen.io/WithAnEs" target="_blank">Mark Thomes [@WithAnEs]</a> </div> </div> <div class="brady"> <div data-height="250" data-theme-id="15029" data-slug-hash="eNBdOx" data-default-tab="result" data-user="noahblon" class='codepen'></div> <div class="credit"> <a class="edit" href="//codepen.io/noahblon/pen/b2726307b689e81bc0e378d87e81ed79" target="_blank">Edit this pen</a> <a class="profile" href="//codepen.io/noahblon" target="_blank">Noah Blon [@noahblon]</a> </div> </div> <div class="brady"> <div data-height="250" data-theme-id="15029" data-slug-hash="waovBG" data-default-tab="result" data-user="Martin-Duran" class='codepen'></div> <div class="credit"> <a class="edit" href="//codepen.io/Martin-Duran/pen/waovBG" target="_blank">Edit this pen</a> <a class="profile" href="//codepen.io/Martin-Duran" target="_blank">Martin Duran <br/>[@Martin-Duran]</a> </div> </div> <div class="brady"> <p data-height="250" data-theme-id="15029" data-slug-hash="LVZYvb" data-default-tab="result" data-user="kkrueger" class='codepen'> <div class="credit"> <a class="edit" href="//codepen.io/kkrueger/pen/LVZYvb">Edit this pen</a> <a class="profile" href="//codepen.io/kkrueger/">Kevin Krueger [@kkrueger]</a> </div> </div> <div class="brady"> <div data-height="250" data-theme-id="15029" data-slug-hash="BNQNKb" data-default-tab="result" data-user="mmckinnon" class='codepen'></div> <div class="credit"> <a class="edit" href="//codepen.io/mmckinnon/pen/BNQNKb" target="_blank">Edit this pen</a> <a class="profile" href="//codepen.io/mmckinnon" target="_blank">Megan McKinnon [@mmckinnon]</a> </div> </div> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> </div> </div>
<div class="page-credit">
<h2>Created by Frontenders at <a href="https://twitter.com/the_nerdery" target="_blank">The Nerdery</a>.</h2> <h2>Inspired by <a href="http://9-squares.tumblr.com/" target="_blank">9 Squares</a>.</h2> <h2><a href="http://codepen.io/noahblon/blog/9-pens" target="_blank">✏ Read about the project.</a></h2>
</div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

9 Pens - Script Codes CSS Codes

@import url("//fonts.googleapis.com/css?family=Dosis:300");
* { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
}
.body { margin: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-family: 'Dosis';
}
.bradyBunch { width: 760px; height: 760px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); border-radius: 2px; background: #ccc;
}
.brady { position: relative; width: 250px; height: 250px;
}
.credit { position: absolute; bottom: 20px; right: 20px; top: 20px; left: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; opacity: 0; -webkit-transition: all 150ms ease-in; transition: all 150ms ease-in; -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px);
}
.credit a { text-decoration: none; font-family: menlo, monaco, courier, 'courier new' !important; font-size: 14px; background: black; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: skyblue; padding: 5px 10px; min-height: 24px; border-radius: 1px;
}
.credit .edit { background-color: white; padding: 5px; -webkit-filter: invert(100%); background: white url(http://google.github.io/material-design-icons/content/svg/design/ic_create_24px.svg) 50% 50% no-repeat; height: 24px; width: 24px; display: block; text-indent: -9999px; position: relative;
}
.brady:hover .credit { opacity: 1; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);
}
iframe { border: 5px solid #222; width: 250px !important; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; display: block; background: #222; border-radius: 2px;
}
h1 { padding: 0; margin: 50px 0 50px 0; font-size: 45px; line-height: 1; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; font-weight: 300;
}
h1 .letter { width: 60px; height: 60px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: white;
}
h1 .letter-white { color: black; margin-left: -23px;
}
h1 .letter-blue { background: #2A3443;
}
h1 .letter-green { background: #569480;
}
h1 .letter-yellow { background: #F7DA4B;
}
h1 .letter-red { background: #C55841;
}
.page-credit { margin-top: -75px; padding-bottom: 50px; text-align: center;
}
h2 { font-size: 16px; font-weight: 300; margin: 0;
}
a { text-decoration: none; color: #569480;
}
9 Pens - Script Codes
9 Pens - Script Codes
Home Page Home
Developer Noah Blon
Username noahblon
Uploaded June 24, 2022
Rating 4.5
Size 3,350 Kb
Views 68,816
Do you need developer help for 9 Pens?

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!

Noah Blon (noahblon) Script Codes
Name
Glitch Pop
3D CSS Text with Perspective
Responsive Image Grid using SVG wrappers
An Intro to SVG Animation with SMIL - Example 1
Colored SVG background-image - Filter Method
Colored SVG background-image - Mask Method
Juggle
Cross-Browser Range Input With Solid Lower Fill
CSS Jellyfish
Sass-managed SVG Background-Image icons
Create amazing marketing copy 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!