Personal cards

Developer
Aaron Cuddeback
Size
5,093 Kb
Views
24,288
  1. Personal cards Previews
  2. Personal cards HTML Codes
  3. Personal cards CSS Codes
  4. Personal cards JS Codes

How do I make an personal cards?

What is a personal cards? How do you make a personal cards? This script and codes were developed by Aaron Cuddeback on 03 November 2022, Thursday.

Personal cards Previews
IQ Test

Personal cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>personal cards</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Arima+Madurai:100,200,300,400,500,700,800,900" rel="stylesheet">
</head>
<body>
<div class="container"> <div class="row"> <div class="col-sm-10 col-sm-offset-1"> <div class="col-md-4 col-sm-6"> <div class="card-container"> <div class="card"> <div class="front"> <div class="cover"> <img src="https://www.clipartsgram.com/image/129556292-kyz84k3.jpg"/> </div> <div class="user"> <img class="img-circle" src="https://www2.mmu.ac.uk/media/mmuacuk/style-assets/images/r-research/profile-Zeyad.jpg"/> </div>	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Simple Pricing Tables -->
<ins class="adsbygoogle" style="display:inline" data-ad-client="ca-pub-9155049400353686" data-ad-slot="6591520258" data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> <div class="content"> <div class="main"> <h3 class="name">John Marvel</h3> <p class="profession">CEO</p> <p class="text-center">"I'm the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere"</p> </div> <div class="footer"> <i class="fa fa-mail-forward"></i> Auto Rotation </div> </div> </div> <!-- end front panel --> <div class="back"> <div class="header"> <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5> </div> <div class="content"> <div class="main"> <h4 class="text-center">Job Description</h4> <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p> <div class="stats-container"> <div class="stats"> <h4>235</h4> <p> Followers </p> </div> <div class="stats"> <h4>114</h4> <p> Following </p> </div> <div class="stats"> <h4>35</h4> <p> Projects </p> </div> </div> </div> </div> <div class="footer"> <div class="social-links text-center"> <a href="http://deepak646.blogspot.in/" class="facebook"><i class="fa fa-facebook fa-fw"></i></a> <a href="http://deepak646.blogspot.in/" class="google"><i class="fa fa-google-plus fa-fw"></i></a> <a href="http://deepak646.blogspot.in/" class="twitter"><i class="fa fa-twitter fa-fw"></i></a> </div> </div> </div> <!-- end back panel --> </div> <!-- end card --> </div> <!-- end card-container --> </div> <!-- end col sm 3 -->
<!-- <div class="col-sm-1"></div> --> <div class="col-md-4 col-sm-6"> <div class="card-container manual-flip"> <div class="card"> <div class="front"> <div class="cover"> <img src="https://www.clipartsgram.com/image/124089475-california-beaches-tumblr-wallpaper-3.jpg"/> </div> <div class="user"> <img class="img-circle" src="http://www.outbrain.com/risingstars/wp-content/uploads/708x708-RS-Profile-Ashley-Callahan-400x400.jpg"/> </div> <div class="content"> <div class="main"> <h3 class="name">Andrew Mike</h3> <p class="profession">Web Developer</p> <p class="text-center">"Lamborghini Mercy <br>Your chick she so thirsty <br>I'm in that two seat Lambo"</p> </div> <div class="footer"> <button class="btn btn-simple" onclick="rotateCard(this)"> <i class="fa fa-mail-forward"></i> Manual Rotation </button> </div> </div> </div> <!-- end front panel --> <div class="back"> <div class="header"> <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5> </div> <div class="content"> <div class="main"> <h4 class="text-center">Job Description</h4> <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p> <div class="stats-container"> <div class="stats"> <h4>235</h4> <p> Followers </p> </div> <div class="stats"> <h4>114</h4> <p> Following </p> </div> <div class="stats"> <h4>35</h4> <p> Projects </p> </div> </div> </div> </div> <div class="footer"> <button class="btn btn-simple" rel="tooltip" title="Flip Card" onclick="rotateCard(this)"> <i class="fa fa-reply"></i> Back </button> <div class="social-links text-center"> <a href="http://deepak646.blogspot.in/" class="facebook"><i class="fa fa-facebook fa-fw"></i></a> <a href="http://deepak646.blogspot.in/" class="google"><i class="fa fa-google-plus fa-fw"></i></a> <a href="http://deepak646.blogspot.in/" class="twitter"><i class="fa fa-twitter fa-fw"></i></a> </div> </div> </div> <!-- end back panel --> </div> <!-- end card --> </div> <!-- end card-container --> </div> <!-- end col sm 3 -->
<!-- <div class="col-sm-1"></div> --> <div class="col-md-4 col-sm-6"> <div class="card-container"> <div class="card"> <div class="front"> <div class="cover"> <img src="http://www.hdimageson.com/wp-content/uploads/2016/05/beach-images-tumblr-300x188.jpg"/> </div> <div class="user"> <img class="img-circle" src="https://1.bp.blogspot.com/-aruLLVlXyJM/V_t-TxTncZI/AAAAAAAAJ3k/hnQKKVmKuOY_awf1nHGTsukGfw4qrde-gCLcB/s400/2.jpg"/> </div> <div class="content"> <div class="main"> <h3 class="name">Inna Corman</h3> <p class="profession">Product Manager</p> <p class="text-center">"I'm the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere"</p> </div> <div class="footer"> <div class="rating"> <i class="fa fa-mail-forward"></i> Auto Rotation </div> </div> </div> </div> <!-- end front panel --> <div class="back"> <div class="header"> <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5> </div> <div class="content"> <div class="main"> <h4 class="text-center">Job Description</h4> <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p> <div class="stats-container"> <div class="stats"> <h4>235</h4> <p> Followers </p> </div> <div class="stats"> <h4>114</h4> <p> Following </p> </div> <div class="stats"> <h4>35</h4> <p> Projects </p> </div> </div> </div> </div> <div class="footer"> <div class="social-links text-center"> <a href="http://deepak646.blogspot.in/" class="facebook"><i class="fa fa-facebook fa-fw"></i></a> <a href="http://deepak646.blogspot.in/" class="google"><i class="fa fa-google-plus fa-fw"></i></a> <a href="http://deepak646.blogspot.in/" class="twitter"><i class="fa fa-twitter fa-fw"></i></a> </div> </div> </div> <!-- end back panel --> </div> <!-- end card --> </div> <!-- end card-container --> </div> <!-- end col-sm-3 --> </div> <!-- end col-sm-10 --> </div> <!-- end row --> <div class="space-200"></div>
</div>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Personal cards - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Arima+Madurai:100,200,300,400,500,700,800,900');
body {	margin-top: 60px;	font-size: 14px;	font-family: 'Arima Madurai', cursive;	background-color: #E5E9ED;
}
.btn:hover,
.btn:focus,
.btn:active{ outline: 0 !important;
}
/* entire container, keeps perspective */
.card-container { -webkit-perspective: 800px; -o-perspective: 800px; perspective: 800px; margin-bottom: 30px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{	-webkit-transform: rotateY( 180deg ); transform: rotateY( 180deg );
}
.card-container.static:hover .card,
.card-container.static.hover .card {	-webkit-transform: none; transform: none;
}
/* flip speed goes here */
.card { -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s;
-webkit-transform-style: preserve-3d; transform-style: preserve-3d;	position: relative;
}
/* hide back of pane during swap */
.front, .back {	-webkit-backface-visibility: hidden; backface-visibility: hidden;	position: absolute;	top: 0;	left: 0;	background-color: #FFF; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */
.front {	z-index: 2;
}
/* back, initially hidden pane */
.back {	-webkit-transform: rotateY( 180deg ); transform: rotateY( 180deg ); z-index: 3;
}
.back .btn-simple{ position: absolute; left: 0; bottom: 4px;
}
/* Style */
.card{ background: none repeat scroll 0 0 #FFFFFF; border-radius: 4px; color: #444444;
}
.card-container, .front, .back {	width: 100%;	height: 420px;	border-radius: 4px;
box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.16);
}
.card .cover{ height: 105px; overflow: hidden; border-radius: 4px 4px 0 0;
}
.card .cover img{ width: 100%;
}
.card .user{ border-radius: 50%; display: block; height: 120px; margin: -55px auto 0; overflow: hidden; width: 120px;
}
.card .user img{ background: none repeat scroll 0 0 #FFFFFF; border: 4px solid #FFFFFF; width: 100%;
}
.card .content{ background-color: rgba(0, 0, 0, 0); box-shadow: none; padding: 10px 20px 20px;
}
.card .content .main { min-height: 160px;
}
.card .back .content .main { height: 215px;
}
.card .name {	font-family: 'Arima Madurai', cursive; font-size: 22px; line-height: 28px; margin: 10px 0 0; text-align: center; text-transform: capitalize;
}
.card h5{ margin: 5px 0; font-weight: 400; line-height: 20px;
}
.card .profession{ color: #999999; text-align: center; margin-bottom: 20px;
}
.card .footer { border-top: 1px solid #EEEEEE; color: #999999; margin: 30px 0 0; padding: 10px 0 0; text-align: center;
}
.card .footer .social-links{ font-size: 18px;
}
.card .footer .social-links a{ margin: 0 7px;
}
.card .footer .btn-simple{ margin-top: -6px;
}
.card .header { padding: 15px 20px; height: 90px;
}
.card .motto{	font-family: 'Arima Madurai', cursive; border-bottom: 1px solid #EEEEEE; color: #999999; font-size: 14px; font-weight: 400; padding-bottom: 10px; text-align: center;
}
.card .stats-container{	width: 100%;	margin-top: 50px;
}
.card .stats{	display: block;	float: left;	width: 33.333333%;	text-align: center;
}
.card .stats:first-child{	border-right: 1px solid #EEEEEE;
}
.card .stats:last-child{	border-left: 1px solid #EEEEEE;
}
.card .stats h4{	font-family: 'Arima Madurai', cursive;	font-weight: 300;	margin-bottom: 5px;
}
.card .stats p{	color: #777777;
}
/* Just for presentation */
.title{ color: #506A85; text-align: center; font-weight: 300; font-size: 44px; margin-bottom: 90px; line-height: 90%;
}
.title small{ font-size: 17px; color: #999; text-transform: uppercase; margin: 0;
}
.space-30{	height: 30px;	display: block;
}
.space-50{ height: 50px; display: block;
}
.space-200{ height: 200px; display: block;
}
.white-board{ background-color: #FFFFFF; min-height: 200px; padding: 60px 60px 20px;
}
.ct-heart{ color: #F74933;
} pre.prettyprint{ background-color: #ffffff; border: 1px solid #999; margin-top: 20px; padding: 20px; text-align: left;
}
.atv, .str{ color: #05AE0E;
}
.tag, .pln, .kwd{ color: #3472F7;
}
.atn{ color: #2C93FF;
}
.pln{ color: #333;
}
.com{ color: #999;
}
.btn-simple{ opacity: .8; color: #666666; background-color: transparent;
}
.btn-simple:hover,
.btn-simple:focus{ background-color: transparent; box-shadow: none; opacity: 1;
}
.btn-simple i{ font-size: 16px;
}
.navbar-brand-logo{ padding: 0;
}
.navbar-brand-logo .logo{ border: 1px solid #333333; border-radius: 50%; float: left; overflow: hidden; width: 60px;
}
.navbar .navbar-brand-logo .brand{ color: #FFFFFF; float: left; font-size: 18px; font-weight: 400; line-height: 20px; margin-left: 10px; margin-top: 10px; width: 60px;
}
.navbar-default .navbar-brand-logo .brand{ color: #555;
}
/* Fix bug for IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .front, .back{ -webkit-backface-visibility: visible; backface-visibility: visible; } .back { visibility: hidden; -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67); } .front{ z-index: 4; } .card-container:not(.manual-flip):hover .back, .card-container.manual-flip.hover .back{ z-index: 5; visibility: visible; }
}

Personal cards - Script Codes JS Codes

 $().ready(function(){ $('[rel="tooltip"]').tooltip(); }); function rotateCard(btn){ var $card = $(btn).closest('.card-container'); console.log($card); if($card.hasClass('hover')){ $card.removeClass('hover'); } else { $card.addClass('hover'); } }
Personal cards - Script Codes
Personal cards - Script Codes
Home Page Home
Developer Aaron Cuddeback
Username gymratpacks
Uploaded November 03, 2022
Rating 3
Size 5,093 Kb
Views 24,288
Do you need developer help for Personal cards?

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!

Aaron Cuddeback (gymratpacks) Script Codes
Name
FlexBox Layout
Full Page Header
Personal Portfolio
Booking Form Example
SVG Stars Animation
Transition - Transition Functions and Transition Delay
3D Transitions and Tranforms
Animating SVG with CSS
3D Transform Gallery
Random Quote Generator
Create amazing video scripts 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!