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 Sphere | 2,244 Kb |
A Bouncy Menu Toggle | 4,563 Kb |
Full Page Vertical Hover Sliders | 2,418 Kb |
Random Swim Slider | 2,345 Kb |
A Simple, Fashionable, Loader | 1,661 Kb |
Hotel Booking ..in progress | 4,458 Kb |
Interactive Business Card - OG | 3,334 Kb |
SuprLiTE CSS Arrows | 3,691 Kb |
Camera | 2,136 Kb |
DMND | 2,796 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 |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Testing Portfolio Page | Sideshowli | 3,395 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
React Template | Isac | 1,241 Kb |
Wip elementary os navbar | Nickcolley | 2,993 Kb |
Welcome | Nakome | 6,076 Kb |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
Virtual vinyl | Davidpanik | 3,474 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!