Interactive Business Card - OG
How do I make an interactive business card - og?
I haven't done any CSS in a whileee, but I'm going to try to make a little comeback here, working from @joshnh, Joshua Hibbert's, Dribbble shot: https://dribbble.com/shots/1681087-Interactive-Business-Card?list=likes&offset=0. What is a interactive business card - og? How do you make a interactive business card - og? This script and codes were developed by Billy Crist on 04 October 2022, Tuesday.
Interactive Business Card - OG - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Interactive Business Card - OG</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Lato:400,300italic);
html, body { height: 100%; background: #efefef; font-family: Lato, sans-serif;
}
.card { position: relative; top: 50%; margin: -10rem auto; perspective: 700px;
}
.card:hover > .cardflip { transform: rotateX(180deg);
}
.card, .frontside, .backside { width: 26rem; height: 20rem;
}
.cardflip { transition: 540ms ease-in-out; transform-origin: 100% 10rem; transform-style: preserve-3d;
}
.frontside, .backside { position: absolute; backface-visibility: hidden; background: #fff; // webkit hacks.. -webkit-backface-visibilit: hidden; -webkit-transform: scale(1);
}
.backside { transform: rotateX(180deg);
}
.content { position: absolute; top: 2rem; right: 2rem; bottom: 2rem; left: 8rem; border: 1rem solid #dedede; padding: 7rem 0 0 1rem; box-shadow: 0 0rem #aaa, 0 0rem #aaa inset; transition: box-shadow 550ms ease-out;
}
.content::after { position: absolute; content:''; top: -1rem; left: -9rem; width: 6rem; height: 16rem; box-shadow: 0 0rem #aaa; transition: box-shadow 550ms ease-out; background: #52CEF7;
}
.card:hover > .cardflip > .frontside > .content { box-shadow: 0 1.5rem #ddd, 0 1.5rem #ddd inset; transition: box-shadow 250ms ease-in;
}
.card:hover > .cardflip > .frontside > .content::after { box-shadow: 0 1.5rem #ddd; transition: box-shadow 250ms ease-in;
}
.large { font-size: 2rem; color: #555;
}
.small { margin: 0.4rem 0 0; font-size: 1.2rem; font-style: italic; color: #999;
}
.button { position: relative; float: left; margin: 2rem 0 0 2rem; width: 10rem; height: 4rem; text-align: center; line-height: 4rem; text-decoration: none; color: #fff; font-size: 1.2rem; box-shadow: 0 -1.5rem #ddd; transition: box-shadow 250ms ease-in;
}
.card:hover > .cardflip .backside > .button { box-shadow: 0 0rem #aaa; transition: box-shadow 550ms ease-out;
}
.portfolio { background:#FF6666 }
.twitter { background:#019AD2 }
.instagram { background:#517FA4 }
.github { background:#4183C4 }
.dribbble { background:#EA4C89 }
.strava { background:#FC4C02 } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="card"> <div class="cardflip"> <div class="frontside"> <div class="content"> <p class="large">Billy Crist</p> <p class="small">Web designer</p> </div> </div> <div class="backside"> <a href="" class="button portfolio">Portfolio</a> <a href="" class="button twitter">Twitter</a> <a href="" class="button instagram">Instagram</a> <a href="" class="button dribbble">Dribbble</a> <a href="" class="button strava">Strava</a> <a href="" class="button github">Github</a> </div> </div>
</div>
</body>
</html>
Interactive Business Card - OG - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Lato:400,300italic);
html, body { height: 100%; background: #efefef; font-family: Lato, sans-serif;
}
.card { position: relative; top: 50%; margin: -10rem auto; perspective: 700px;
}
.card:hover > .cardflip { transform: rotateX(180deg);
}
.card, .frontside, .backside { width: 26rem; height: 20rem;
}
.cardflip { transition: 540ms ease-in-out; transform-origin: 100% 10rem; transform-style: preserve-3d;
}
.frontside, .backside { position: absolute; backface-visibility: hidden; background: #fff; // webkit hacks.. -webkit-backface-visibilit: hidden; -webkit-transform: scale(1);
}
.backside { transform: rotateX(180deg);
}
.content { position: absolute; top: 2rem; right: 2rem; bottom: 2rem; left: 8rem; border: 1rem solid #dedede; padding: 7rem 0 0 1rem; box-shadow: 0 0rem #aaa, 0 0rem #aaa inset; transition: box-shadow 550ms ease-out;
}
.content::after { position: absolute; content:''; top: -1rem; left: -9rem; width: 6rem; height: 16rem; box-shadow: 0 0rem #aaa; transition: box-shadow 550ms ease-out; background: #52CEF7;
}
.card:hover > .cardflip > .frontside > .content { box-shadow: 0 1.5rem #ddd, 0 1.5rem #ddd inset; transition: box-shadow 250ms ease-in;
}
.card:hover > .cardflip > .frontside > .content::after { box-shadow: 0 1.5rem #ddd; transition: box-shadow 250ms ease-in;
}
.large { font-size: 2rem; color: #555;
}
.small { margin: 0.4rem 0 0; font-size: 1.2rem; font-style: italic; color: #999;
}
.button { position: relative; float: left; margin: 2rem 0 0 2rem; width: 10rem; height: 4rem; text-align: center; line-height: 4rem; text-decoration: none; color: #fff; font-size: 1.2rem; box-shadow: 0 -1.5rem #ddd; transition: box-shadow 250ms ease-in;
}
.card:hover > .cardflip .backside > .button { box-shadow: 0 0rem #aaa; transition: box-shadow 550ms ease-out;
}
.portfolio { background:#FF6666 }
.twitter { background:#019AD2 }
.instagram { background:#517FA4 }
.github { background:#4183C4 }
.dribbble { background:#EA4C89 }
.strava { background:#FC4C02 }
Developer | Billy Crist |
Username | billyysea |
Uploaded | October 04, 2022 |
Rating | 3 |
Size | 3,334 Kb |
Views | 20,240 |
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 |
A Bouncy Menu Toggle | 4,563 Kb |
Hotel Booking ..in progress | 4,458 Kb |
Camera | 2,136 Kb |
Random Swim Slider | 2,345 Kb |
A Music Player | 6,174 Kb |
A Simple, Fashionable, Loader | 1,661 Kb |
Location Pin Point | 3,102 Kb |
A Sphere | 2,244 Kb |
CSS Slider | 1,910 Kb |
SuprLiTE CSS Arrows | 3,691 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 |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Cool audio | Bigliam | 1,868 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Button Option Group | Honchoman | 1,859 Kb |
Loading Bar | Jaradlight | 2,333 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Degree Picker | Idered | 4,307 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Video mute | Leon9208 | 2,131 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!