A Pen by Kazu

Developer
Size
2,780 Kb
Views
14,168

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 Previews

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;
}
A Pen by Kazu - Script Codes
A Pen by Kazu - Script Codes
Home Page Home
Developer Kazu
Username carmerano
Uploaded October 28, 2022
Rating 3
Size 2,780 Kb
Views 14,168
Do you need developer help for A Pen by Kazu?

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!

Kazu (carmerano) Script Codes
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!