Profile Card

Size
6,749 Kb
Views
22,264

How do I make an profile card?

CSS3 profile card. What is a profile card? How do you make a profile card? This script and codes were developed by Özgür Sağıroğlu on 13 August 2022, Saturday.

Profile Card Previews

Profile Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Profile Card</title> <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! */ html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
.lbl { font-size: 25px; margin-top: 15px;
}
body { font: 12px Arial, Helvetica, sans-serif; background: #e0e0e0; overflow: hidden;
}
.profile { width: 350px; height: 120px; margin: -50px -200px; position: absolute; top: 50%; left: 50%;
}
.profile figure, .profile figure img, .profile figure .back, .profile figure .front, .profile figure .back span { width: 90px; height: 90px; -moz-border-radius: 500px; -webkit-border-radius: 500px; border-radius: 500px;
}
.profile figure { position: absolute; z-index: 3; left: -50px; top: 10px; background: #e0e0e0; padding: 5px; border-right: solid 1px #bdc6e7;
}
.profile figure img { -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.profile figure .front, .profile figure .back { position: absolute; top: 5px; left: 5px; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: all 500ms; -o-transition: all 500ms; -webkit-transition: all 500ms; transition: all 500ms;
}
.profile figure .front { z-index: 1;
}
.profile figure .back { -moz-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg);
}
.profile figure .back span { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); z-index: 2; text-align: center; color: #ffffff; line-height: 88px; font-size: 20px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.profile figure .back span:active { -moz-box-shadow: 0 0 25px 20px rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 0 25px 20px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 0 25px 20px rgba(0, 0, 0, 0.1) inset;
}
.profile figure:hover .front { -moz-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg);
}
.profile figure:hover .back { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); transform: rotateX(0deg);
}
.profile article { position: absolute; padding: 5px 10px 5px 60px; background: #fff; -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.1) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.1) inset; width: 280px; height: 115px;
}
.profile .info { z-index: 2;
}
.profile .info .name { font-size: 23px; margin-bottom: 5px; color: #36c;
}
.profile .info .job { font-size: 13px; color: #505050;
}
.profile .info .stats { width: 280px; height: 50px; margin-top: 10px; padding-top: 6px; border-top: solid 1px #ddd;
}
.profile .info .stats li { float: left; font-size: 22px; width: 33.3%; color: #353535;
}
.profile .info .stats li label { font-size: 13px; display: block; color: #757575;
}
.profile .contact { top: 10px; left: 10px;
}
.profile .contact ul { margin-top: 5px;
}
.profile .contact li { margin-bottom: 8px; clear: both;
}
.profile .contact li label { width: 90px; float: left; display: block; line-height: 17px;
}
.profile .contact li label img { width: 16px; height: 16px; margin-right: 5px; float: left;
}
.profile .contact li label:after { content: ":";
}
.profile .contact li a { color: #36c; text-decoration: none;
}
.profile .contact li a:hover { text-decoration: underline;
}
.profile .otherLabel { position: absolute; z-index: 5; right: -15px; top: -5px; cursor: pointer; background: #1e78e8; padding: 2px 5px; color: #ffffff; text-decoration: underline;
}
.profile .otherLabel.infoLabel { display: none;
}
.profile input[type=radio] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; position: absolute; top: -9999px; left: -9999px;
}
.profile #contactBtn:checked ~ .contact { animation: second 500ms both ease;
}
.profile #contactBtn:checked ~ .info { animation: first 500ms both ease;
}
.profile #contactBtn:checked ~ .contactLabel { display: none;
}
.profile #contactBtn:checked ~ .infoLabel { display: block;
}
.profile #infoBtn:checked ~ .info { animation: second 500ms both ease;
}
.profile #infoBtn:checked ~ .contact { animation: first 500ms both ease;
}
.profile #infoBtn:checked ~ .infoLabel { display: none;
}
.profile #infoBtn:checked ~ .contactLabel { display: block;
}
@keyframes second { 0% { z-index: 1; top: 10px; left: 10px; } 50% { top: 150px; left: 10px; } 100% { top: 0; left: 0px; z-index: 2; }
}
@keyframes first { from { top: 0; left: 0; z-index: 2; } to { top: 10px; left: 10px; z-index: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <center> <h2 class="lbl">Hover photo and click "Contact" label</h2>
</center>
<section class="profile">	<input type="radio" id="contactBtn" name="otherBtn">	<input type="radio" id="infoBtn" name="otherBtn">	<label class="otherLabel contactLabel" for="contactBtn">Contact</label>	<label class="otherLabel infoLabel" for="infoBtn">Info</label>	<figure>	<div class="front">	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/18603/profile/profile-512_8.jpg" alt="">	</div>	<div class="back">	<a href="http://twitter.com/ozgursagiroglu">	<img src="http://cdn1.iconfinder.com/data/icons/somacro___dpi_social_media_icons_by_vervex-dfjq/128/twitter.png">	<span>Twitter</span>	</a>	</div>	</figure>	<article class="info">	<header class="name">Özgür Sağıroğlu</header>	<h5 class="job">Front End Developer</h5>	<ul class="stats">	<li><label>Tweets</label>1,954</li>	<li><label>Following</label>264</li>	<li><label>Followers</label>141</li>	</ul>	</article>	<article class="contact">	<ul>	<li>	<label><img src="http://yandex.st/lego/_/rBTjd6UOPk5913OSn5ZQVYMTQWQ.ico">Email</label>	<a href="mailto:[email protected]">[email protected]</a>	</li>	<li>	<label><img src="https://fbstatic-a.akamaihd.net/rsrc.php/yP/r/Ivn-CVe5TGK.ico">Facebook</label>	<a href="http://facebook.com/osagiroglu">/osagiroglu</a>	</li>	<li>	<label><img src="https://si0.twimg.com/favicons/favicon.ico">Twitter</label>	<a href="http://twitter.com/ozgursagiroglu">/ozgursagiroglu</a></li>	<li>	<label><img src="//s.w.org/favicon.ico?2">Wordpress</label>	<a href="http://ozgursagiroglu.wordpress.com">ozgursagiroglu.wordpress.com</a>	</li>	<li>	<label><img src="https://github.com/favicon.ico">Github</label>	<a href="https://github.com/ozgursagiroglu">/ozgursagiroglu</a>	</li>	</ul>	</article>	</section>
</body>
</html>

Profile Card - Script Codes CSS Codes

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
.lbl { font-size: 25px; margin-top: 15px;
}
body { font: 12px Arial, Helvetica, sans-serif; background: #e0e0e0; overflow: hidden;
}
.profile { width: 350px; height: 120px; margin: -50px -200px; position: absolute; top: 50%; left: 50%;
}
.profile figure, .profile figure img, .profile figure .back, .profile figure .front, .profile figure .back span { width: 90px; height: 90px; -moz-border-radius: 500px; -webkit-border-radius: 500px; border-radius: 500px;
}
.profile figure { position: absolute; z-index: 3; left: -50px; top: 10px; background: #e0e0e0; padding: 5px; border-right: solid 1px #bdc6e7;
}
.profile figure img { -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.profile figure .front, .profile figure .back { position: absolute; top: 5px; left: 5px; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: all 500ms; -o-transition: all 500ms; -webkit-transition: all 500ms; transition: all 500ms;
}
.profile figure .front { z-index: 1;
}
.profile figure .back { -moz-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg);
}
.profile figure .back span { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); z-index: 2; text-align: center; color: #ffffff; line-height: 88px; font-size: 20px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.profile figure .back span:active { -moz-box-shadow: 0 0 25px 20px rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 0 25px 20px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 0 25px 20px rgba(0, 0, 0, 0.1) inset;
}
.profile figure:hover .front { -moz-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg);
}
.profile figure:hover .back { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); transform: rotateX(0deg);
}
.profile article { position: absolute; padding: 5px 10px 5px 60px; background: #fff; -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.1) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.1) inset; width: 280px; height: 115px;
}
.profile .info { z-index: 2;
}
.profile .info .name { font-size: 23px; margin-bottom: 5px; color: #36c;
}
.profile .info .job { font-size: 13px; color: #505050;
}
.profile .info .stats { width: 280px; height: 50px; margin-top: 10px; padding-top: 6px; border-top: solid 1px #ddd;
}
.profile .info .stats li { float: left; font-size: 22px; width: 33.3%; color: #353535;
}
.profile .info .stats li label { font-size: 13px; display: block; color: #757575;
}
.profile .contact { top: 10px; left: 10px;
}
.profile .contact ul { margin-top: 5px;
}
.profile .contact li { margin-bottom: 8px; clear: both;
}
.profile .contact li label { width: 90px; float: left; display: block; line-height: 17px;
}
.profile .contact li label img { width: 16px; height: 16px; margin-right: 5px; float: left;
}
.profile .contact li label:after { content: ":";
}
.profile .contact li a { color: #36c; text-decoration: none;
}
.profile .contact li a:hover { text-decoration: underline;
}
.profile .otherLabel { position: absolute; z-index: 5; right: -15px; top: -5px; cursor: pointer; background: #1e78e8; padding: 2px 5px; color: #ffffff; text-decoration: underline;
}
.profile .otherLabel.infoLabel { display: none;
}
.profile input[type=radio] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; position: absolute; top: -9999px; left: -9999px;
}
.profile #contactBtn:checked ~ .contact { animation: second 500ms both ease;
}
.profile #contactBtn:checked ~ .info { animation: first 500ms both ease;
}
.profile #contactBtn:checked ~ .contactLabel { display: none;
}
.profile #contactBtn:checked ~ .infoLabel { display: block;
}
.profile #infoBtn:checked ~ .info { animation: second 500ms both ease;
}
.profile #infoBtn:checked ~ .contact { animation: first 500ms both ease;
}
.profile #infoBtn:checked ~ .infoLabel { display: none;
}
.profile #infoBtn:checked ~ .contactLabel { display: block;
}
@keyframes second { 0% { z-index: 1; top: 10px; left: 10px; } 50% { top: 150px; left: 10px; } 100% { top: 0; left: 0px; z-index: 2; }
}
@keyframes first { from { top: 0; left: 0; z-index: 2; } to { top: 10px; left: 10px; z-index: 1; }
}
Profile Card - Script Codes
Profile Card - Script Codes
Home Page Home
Developer Özgür Sağıroğlu
Username ozgursagiroglu
Uploaded August 13, 2022
Rating 3.5
Size 6,749 Kb
Views 22,264
Do you need developer help for Profile Card?

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!

Özgür Sağıroğlu (ozgursagiroglu) Script Codes
Create amazing art & images 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!