A Pen by Kazu
How do I make an a pen by kazu?
What is a a pen by kazu? How do you make a a pen by kazu? This script and codes were developed by Kazu on 28 October 2022, Friday.
A Pen by Kazu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kazu</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <input type="checkbox" id="flip" name="flip-card" /> <label for="flip"> <div class="card"> <div class="front"> <div class="front_bg"> KZ </div> <div class="strip"></div> <div class="left_side"></div> <div class="right_side"></div> <div class="name"> <span>John Doe</span> </div> <div class="profession"> Front End Web Developer </div> </div> <div class="back"> <div class="left_back"></div> <div class="item"> <a href="#"><i class="fa fa-bookmark"></i>Tuts+</a> </div> <div class="item"> <a href="#"><i class="fa fa-twitter"></i>Twitter</a> </div> <div class="item"> <a href="#"><i class="fa fa-codepen"></i>Codepen</a> </div> <div class="item"> <a href="#"><i class="fa fa-github"></i>GitHub</a> </div> <div class="item"> <a href="#"><i class="fa fa-behance"></i>Behance</a> </div> </div> </div> </label>
</div>
</body>
</html>
A Pen by Kazu - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { font-family: "Open Sans"; line-height: 1.618em; color: #444; background-color: #2c2c2c; background-image: repeating-radial-gradient( circle, #3a3a3a, #3a3a3a 45%, transparent 45%, transparent 60%, #3a3a3a 60%, #3a3a3a 100% ); background-size: 10px 10px;
}
a { text-decoration: none;
}
.wrapper { max-width: 50rem; width: 100%; margin: 5rem auto; text-align: center;
}
#flip { display: none;
}
.card { padding: 0; display: block; width: 32rem; height: 20rem; margin: 0 auto; transform-style: preserve-3d;
}
.front,
.back { overflow: hidden; position: absolute; width: 100%; height: 100%; box-shadow: rgba(0,0,0,.2) 0 0 3rem 0, rgba(0,0,0,.1) 0 0 1rem 0;
}
.front { transform: translateZ(2px); background: #2d5077; border-radius: .5rem 0; color: #cddbea;
}
.front:after { content: "CLICK TO FLIP"; /* background: #2d5077; */ white-space: nowrap; position: aboslute; top: 6rem; bottom: 6rem; left: 5.5rem; right: 5.5rem; font-size: 2rem; font-weight: 800; line-height: 128px; cursor: pointer; visibility: hidden; opacity: 0; transition: opacity .35s;
}
.front:hover:after { visibility: visible; opacity: 1; transition: opacity .35s;
}
#flip:not(:checked) + label > .card { transform: rotateY(0deg); transition: transform .25s;
}
#flip:checked + label > .card { transform: rotateY(180deg); transition: transform .25s;
}
.front_bg { position: absolute; left: -1.5rem; top: -1rem; font-weight: 800; font-style: italic; font-size: 28rem; line-height: 20rem; color: rgba(255, 255, 255, .04); letter-spacing: -10px;
}
.name { position: absolute; top: 8rem; left: 0; right: 0; text-align: center; font-size: 3rem; font-weight: 300;
}
.name span { font-weight: 800;
}
.profession { position: absolute; top: 11rem; left: 0; right: 0; text-align: center; font-size: 1.5rem; font-weight: 300;
}
.strip { position: absolute; top: 6rem; bottom: 6rem; left: 0; right: 0; background: #2d5077;
}
.left_side,
.right_side { position: absolute; top: 7rem; bottom: 7rem; width: .25rem; background: #3a5c81;
}
.left_side { left: 4.5rem;
}
.right_side { right: 4.5rem;
}
.back { border-radius: 0 2rem; transform: translateZ(-2px) rotateY(180deg); background: #fff; border: 1px solid #2d5077; padding-top: 1.7rem;
}
.left_back { background: #2d5077; position: absolute; top: 0; left: -1rem; bottom: 0; width: 9.5rem;
}
.item { position: relative; margin-left: 3.5rem; text-align: left; font-size: 1.65rem; font-weight: 700; line-height: 2em; z-index: 1;
}
.item::before { content: ""; position: absolute; top: 0; left: 0; width: 0; bottom: 0; background: #2d5077; z-index: -1; transition: width .35s;
}
.item:hover::before { width: 30rem; transition: width .35s;
}
.item::after { content: ""; position: absolute; top: 0; width: 0; right: 23.35rem; bottom: 0; background: #34587f; z-index: -1; transition: width .35s;
}
.item:hover::after { width: 9rem; transition: width .35s;
}
.item:hover a { color: #cddbea; transition: color: .35s;
}
.item a { color: #2d5077; transition: color: .35s;
}
.item:hover .fa { color: #fff; transition: color .35s;
}
.fa { width: 2em; text-align: center; margin-right: 2em; color: #cddbea; transition: color .35s;
}
Developer | Kazu |
Username | carmerano |
Uploaded | October 28, 2022 |
Rating | 3 |
Size | 2,780 Kb |
Views | 14,168 |
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!
Name | Size |
Full screen layout 1-pizza | 1,947 Kb |
Responsive Menu Button | 1,850 Kb |
Audio Wave Preloader | 1,707 Kb |
ScrollMagic - FadeIn FadeOut | 2,731 Kb |
Navigation Menu Hover Effect | 1,859 Kb |
Horizontal Drop Down Menu | 7,820 Kb |
3D shading with box shadow | 4,620 Kb |
LESS color spinning function - triadic | 1,868 Kb |
CSS Continuous Slide | 1,634 Kb |
A Pen by Kazu | 2,896 Kb |
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!
Name | Username | Size |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Template | Indra_z85 | 2,323 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
ASCII triangle image overlay | Mitchdot | 2,200 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
FontAwesome icons with animation | Nicotinell | 2,083 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
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!