Card Mockup

Developer
Aaron Levine
Size
6,436 Kb
Views
6,072
  1. Card Mockup Previews
  2. Card Mockup HTML Codes
  3. Card Mockup CSS Codes
  4. Card Mockup JS Codes

How do I make an card mockup?

What is a card mockup? How do you make a card mockup? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.

Card Mockup Previews
IQ Test

Card Mockup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Card Mockup</title> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta content='width=device-width, height=device-height, minimum-scale=0.8, maximum-scale=0.8' name='viewport'>
<div class='row row-5'> <div class='column column-1'></div> <div class='column column-3'> <div class='card'> <div class='menu'> <div class='closed wheel wheel-3'> <div class='wheel-item'> <span class='fa fa-comment-o'></span> </div> <div class='wheel-item'> <span class='fa fa-edit'></span> </div> <div class='wheel-item'> <span class='fa fa-ban'></span> </div> <div class='wheel-main'> <span class='fa fa-bars'></span> </div> </div> </div> <h2 class='header'>Samuel L. Ipsum</h2> <p class='body'>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> <div class='column column-1'></div>
</div>
<div class='row row-5'> <div class='column column-1'></div> <div class='column column-3'> <div class='card'> <div class='menu'> <div class='wheel wheel-3'> <div class='wheel-item'> <span class='fa fa-comment-o'></span> </div> <div class='wheel-item'> <span class='fa fa-edit'></span> </div> <div class='wheel-item'> <span class='fa fa-ban'></span> </div> <div class='wheel-main'> <span class='fa fa-bars'></span> </div> </div> </div> <h2 class='header'>Samuel L. Ipsum</h2> <p class='body'>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> <div class='column column-1'></div>
</div>
<div class='row row-5'> <div class='column column-1'></div> <div class='column column-3'> <div class='card'> <div class='menu'> <div class='closed wheel wheel-3'> <div class='wheel-item'> <span class='fa fa-comment-o'></span> </div> <div class='wheel-item'> <span class='fa fa-edit'></span> </div> <div class='wheel-item'> <span class='fa fa-ban'></span> </div> <div class='wheel-main'> <span class='fa fa-bars'></span> </div> </div> </div> <h2 class='header'>Samuel L. Ipsum</h2> <p class='body'>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> <div class='column column-1'></div>
</div>
<div class='row row-5'> <div class='column column-1'></div> <div class='column column-3'> <div class='card'> <div class='menu'> <div class='closed wheel wheel-3'> <div class='wheel-item'> <span class='fa fa-comment-o'></span> </div> <div class='wheel-item'> <span class='fa fa-edit'></span> </div> <div class='wheel-item'> <span class='fa fa-ban'></span> </div> <div class='wheel-main'> <span class='fa fa-bars'></span> </div> </div> </div> <h2 class='header'>Samuel L. Ipsum</h2> <p class='body'>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> <div class='column column-1'></div>
</div>
<div class='row row-5'> <div class='column column-1'></div> <div class='column column-3'> <div class='card'> <div class='menu'> <div class='closed wheel wheel-3'> <div class='wheel-item'> <span class='fa fa-comment-o'></span> </div> <div class='wheel-item'> <span class='fa fa-edit'></span> </div> <div class='wheel-item'> <span class='fa fa-ban'></span> </div> <div class='wheel-main'> <span class='fa fa-bars'></span> </div> </div> </div> <h2 class='header'>Samuel L. Ipsum</h2> <p class='body'>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> <div class='column column-1'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.2/fastclick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Card Mockup - Script Codes CSS Codes

/* * Grid */
.row { display: inline-block; box-sizing: border-box;
}
.row .column { min-height: 1px; box-sizing: border-box; display: inline-block; margin: 0; float: left;
}
.row-1 .column-1 { width: 100%;
}
.row-2 .column-1 { width: 50%;
}
.row-2 .column-2 { width: 100%;
}
.row-3 .column-1 { width: 33.33333%;
}
.row-3 .column-2 { width: 66.66667%;
}
.row-3 .column-3 { width: 100%;
}
.row-4 .column-1 { width: 25%;
}
.row-4 .column-2 { width: 50%;
}
.row-4 .column-3 { width: 75%;
}
.row-4 .column-4 { width: 100%;
}
.row-5 .column-1 { width: 20%;
}
.row-5 .column-2 { width: 40%;
}
.row-5 .column-3 { width: 60%;
}
.row-5 .column-4 { width: 80%;
}
.row-5 .column-5 { width: 100%;
}
.row-6 .column-1 { width: 16.66667%;
}
.row-6 .column-2 { width: 33.33333%;
}
.row-6 .column-3 { width: 50%;
}
.row-6 .column-4 { width: 66.66667%;
}
.row-6 .column-5 { width: 83.33333%;
}
.row-6 .column-6 { width: 100%;
}
.row-7 .column-1 { width: 14.28571%;
}
.row-7 .column-2 { width: 28.57143%;
}
.row-7 .column-3 { width: 42.85714%;
}
.row-7 .column-4 { width: 57.14286%;
}
.row-7 .column-5 { width: 71.42857%;
}
.row-7 .column-6 { width: 85.71429%;
}
.row-7 .column-7 { width: 100%;
}
.row-8 .column-1 { width: 12.5%;
}
.row-8 .column-2 { width: 25%;
}
.row-8 .column-3 { width: 37.5%;
}
.row-8 .column-4 { width: 50%;
}
.row-8 .column-5 { width: 62.5%;
}
.row-8 .column-6 { width: 75%;
}
.row-8 .column-7 { width: 87.5%;
}
.row-8 .column-8 { width: 100%;
}
.row-9 .column-1 { width: 11.11111%;
}
.row-9 .column-2 { width: 22.22222%;
}
.row-9 .column-3 { width: 33.33333%;
}
.row-9 .column-4 { width: 44.44444%;
}
.row-9 .column-5 { width: 55.55556%;
}
.row-9 .column-6 { width: 66.66667%;
}
.row-9 .column-7 { width: 77.77778%;
}
.row-9 .column-8 { width: 88.88889%;
}
.row-9 .column-9 { width: 100%;
}
.row-10 .column-1 { width: 10%;
}
.row-10 .column-2 { width: 20%;
}
.row-10 .column-3 { width: 30%;
}
.row-10 .column-4 { width: 40%;
}
.row-10 .column-5 { width: 50%;
}
.row-10 .column-6 { width: 60%;
}
.row-10 .column-7 { width: 70%;
}
.row-10 .column-8 { width: 80%;
}
.row-10 .column-9 { width: 90%;
}
.row-10 .column-10 { width: 100%;
}
.row-11 .column-1 { width: 9.09091%;
}
.row-11 .column-2 { width: 18.18182%;
}
.row-11 .column-3 { width: 27.27273%;
}
.row-11 .column-4 { width: 36.36364%;
}
.row-11 .column-5 { width: 45.45455%;
}
.row-11 .column-6 { width: 54.54545%;
}
.row-11 .column-7 { width: 63.63636%;
}
.row-11 .column-8 { width: 72.72727%;
}
.row-11 .column-9 { width: 81.81818%;
}
.row-11 .column-10 { width: 90.90909%;
}
.row-11 .column-11 { width: 100%;
}
.row-12 .column-1 { width: 8.33333%;
}
.row-12 .column-2 { width: 16.66667%;
}
.row-12 .column-3 { width: 25%;
}
.row-12 .column-4 { width: 33.33333%;
}
.row-12 .column-5 { width: 41.66667%;
}
.row-12 .column-6 { width: 50%;
}
.row-12 .column-7 { width: 58.33333%;
}
.row-12 .column-8 { width: 66.66667%;
}
.row-12 .column-9 { width: 75%;
}
.row-12 .column-10 { width: 83.33333%;
}
.row-12 .column-11 { width: 91.66667%;
}
.row-12 .column-12 { width: 100%;
}
/* * Blowout Menu */
.wheel-1 > .wheel-item:nth-child(1) { left: 2.01784rem; top: 1.665rem; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
.wheel-1.closed .wheel-item:nth-child(1) { -webkit-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0);
}
.wheel-2 > .wheel-item:nth-child(1) { left: 2.33rem; top: 0.5rem; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
.wheel-2.closed .wheel-item:nth-child(1) { -webkit-transform: translate3d(-2.33rem, 0rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-2.33rem, 0rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-2.33rem, 0rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-2.33rem, 0rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-2.33rem, 0rem, 0) translate3d(50%, 50%, 0);
}
.wheel-2 > .wheel-item:nth-child(2) { left: 1.165rem; top: 2.51784rem; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -ms-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s;
}
.wheel-2.closed .wheel-item:nth-child(2) { -webkit-transform: translate3d(-1.165rem, -2.01784rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-1.165rem, -2.01784rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-1.165rem, -2.01784rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-1.165rem, -2.01784rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-1.165rem, -2.01784rem, 0) translate3d(50%, 50%, 0);
}
.wheel-3 > .wheel-item:nth-child(1) { left: 2.25061rem; top: -0.10305rem; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
.wheel-3.closed .wheel-item:nth-child(1) { -webkit-transform: translate3d(-2.25061rem, 0.60305rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-2.25061rem, 0.60305rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-2.25061rem, 0.60305rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-2.25061rem, 0.60305rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-2.25061rem, 0.60305rem, 0) translate3d(50%, 50%, 0);
}
.wheel-3 > .wheel-item:nth-child(2) { left: 2.01784rem; top: 1.665rem; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -ms-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s;
}
.wheel-3.closed .wheel-item:nth-child(2) { -webkit-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0);
}
.wheel-3 > .wheel-item:nth-child(3) { left: 0.60305rem; top: 2.75061rem; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;
}
.wheel-3.closed .wheel-item:nth-child(3) { -webkit-transform: translate3d(-0.60305rem, -2.25061rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-0.60305rem, -2.25061rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-0.60305rem, -2.25061rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-0.60305rem, -2.25061rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-0.60305rem, -2.25061rem, 0) translate3d(50%, 50%, 0);
}
.wheel-4 > .wheel-item:nth-child(1) { left: 2.12856rem; top: -0.4477rem; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
.wheel-4.closed .wheel-item:nth-child(1) { -webkit-transform: translate3d(-2.12856rem, 0.9477rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-2.12856rem, 0.9477rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-2.12856rem, 0.9477rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-2.12856rem, 0.9477rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-2.12856rem, 0.9477rem, 0) translate3d(50%, 50%, 0);
}
.wheel-4 > .wheel-item:nth-child(2) { left: 2.27908rem; top: 0.98443rem; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -ms-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s;
}
.wheel-4.closed .wheel-item:nth-child(2) { -webkit-transform: translate3d(-2.27908rem, -0.48443rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-2.27908rem, -0.48443rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-2.27908rem, -0.48443rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-2.27908rem, -0.48443rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-2.27908rem, -0.48443rem, 0) translate3d(50%, 50%, 0);
}
.wheel-4 > .wheel-item:nth-child(3) { left: 1.55907rem; top: 2.23153rem; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;
}
.wheel-4.closed .wheel-item:nth-child(3) { -webkit-transform: translate3d(-1.55907rem, -1.73153rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-1.55907rem, -1.73153rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-1.55907rem, -1.73153rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-1.55907rem, -1.73153rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-1.55907rem, -1.73153rem, 0) translate3d(50%, 50%, 0);
}
.wheel-4 > .wheel-item:nth-child(4) { left: 0.24355rem; top: 2.81724rem; -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; -ms-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s;
}
.wheel-4.closed .wheel-item:nth-child(4) { -webkit-transform: translate3d(-0.24355rem, -2.31724rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-0.24355rem, -2.31724rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-0.24355rem, -2.31724rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-0.24355rem, -2.31724rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-0.24355rem, -2.31724rem, 0) translate3d(50%, 50%, 0);
}
.wheel-5 > .wheel-item:nth-child(1) { left: 2.01784rem; top: -0.665rem; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
.wheel-5.closed .wheel-item:nth-child(1) { -webkit-transform: translate3d(-2.01784rem, 1.165rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-2.01784rem, 1.165rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-2.01784rem, 1.165rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-2.01784rem, 1.165rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-2.01784rem, 1.165rem, 0) translate3d(50%, 50%, 0);
}
.wheel-5 > .wheel-item:nth-child(2) { left: 2.33rem; top: 0.5rem; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -ms-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s;
}
.wheel-5.closed .wheel-item:nth-child(2) { -webkit-transform: translate3d(-2.33rem, 0rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-2.33rem, 0rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-2.33rem, 0rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-2.33rem, 0rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-2.33rem, 0rem, 0) translate3d(50%, 50%, 0);
}
.wheel-5 > .wheel-item:nth-child(3) { left: 2.01784rem; top: 1.665rem; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;
}
.wheel-5.closed .wheel-item:nth-child(3) { -webkit-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-2.01784rem, -1.165rem, 0) translate3d(50%, 50%, 0);
}
.wheel-5 > .wheel-item:nth-child(4) { left: 1.165rem; top: 2.51784rem; -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; -ms-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s;
}
.wheel-5.closed .wheel-item:nth-child(4) { -webkit-transform: translate3d(-1.165rem, -2.01784rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-1.165rem, -2.01784rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-1.165rem, -2.01784rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-1.165rem, -2.01784rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-1.165rem, -2.01784rem, 0) translate3d(50%, 50%, 0);
}
.wheel-5 > .wheel-item:nth-child(5) { left: 0rem; top: 2.83rem; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s;
}
.wheel-5.closed .wheel-item:nth-child(5) { -webkit-transform: translate3d(0rem, -2.33rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(0rem, -2.33rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(0rem, -2.33rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(0rem, -2.33rem, 0) translate3d(50%, 50%, 0); transform: translate3d(0rem, -2.33rem, 0) translate3d(50%, 50%, 0);
}
.wheel { position: relative; display: inline-block;
}
.wheel .wheel-main, .wheel .wheel-item { -webkit-transition: all 0.33s cubic-bezier(0.79, 0.085, 0.32, 1.38), opacity 0.33s ease-out, box-shadow 0.33s ease-out; -moz-transition: all 0.33s cubic-bezier(0.79, 0.085, 0.32, 1.38), opacity 0.33s ease-out, box-shadow 0.33s ease-out; -ms-transition: all 0.33s cubic-bezier(0.79, 0.085, 0.32, 1.38), opacity 0.33s ease-out, box-shadow 0.33s ease-out; -o-transition: all 0.33s cubic-bezier(0.79, 0.085, 0.32, 1.38), opacity 0.33s ease-out, box-shadow 0.33s ease-out; transition: all 0.33s cubic-bezier(0.79, 0.085, 0.32, 1.38), opacity 0.33s ease-out, box-shadow 0.33s ease-out;
}
.wheel .wheel-item { position: absolute; display: inline-block; -webkit-transform: translate3d(50%, 0, 0); -moz-transform: translate3d(50%, 0, 0); -ms-transform: translate3d(50%, 0, 0); -o-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0);
}
.wheel.closed .wheel-item { opacity: 0;
}
.wheel-main, .wheel-item { color: #999; border: solid 2px #CCC; width: 2rem; height: 2rem; line-height: 2rem; border-radius: 50%; cursor: pointer; opacity: 1;
}
.wheel-main:hover, .wheel-item:hover { box-shadow: 0 0 5px #333;
}
.wheel-main.wheel-item, .wheel-item.wheel-item { width: 1.33333rem; height: 1.33333rem; line-height: 1.33333rem;
}
/* * Vertical Center */
.container { white-space: nowrap;
}
.container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle;
}
.container > .centered { width: 100%; display: inline-block; vertical-align: middle; white-space: normal;
}
/* * Card */
.card { position: relative; padding: 1rem; margin-bottom: 1.5rem; box-shadow: 0 0 1px #000, 0 4px 8px -4px #333; background: #F9F9F9;
}
.card .header { margin: 0; padding-bottom: 0.25rem; text-align: center; box-shadow: 0 2px 1px -2px #666;
}
.card .menu { position: absolute; left: -1rem; top: -1rem;
}
.card .menu .wheel { -webkit-transition: all 0.333s cubic-bezier(0.79, 0.085, 0.32, 1.38); -moz-transition: all 0.333s cubic-bezier(0.79, 0.085, 0.32, 1.38); -ms-transition: all 0.333s cubic-bezier(0.79, 0.085, 0.32, 1.38); -o-transition: all 0.333s cubic-bezier(0.79, 0.085, 0.32, 1.38); transition: all 0.333s cubic-bezier(0.79, 0.085, 0.32, 1.38);
}
.card .menu .wheel:not(.closed) { -webkit-transform: scale3d(1.2, 1.2, 1.2); -moz-transform: scale3d(1.2, 1.2, 1.2); -ms-transform: scale3d(1.2, 1.2, 1.2); -o-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2);
}
.card .menu .wheel:not(.closed) .wheel-item, .card .menu .wheel:not(.closed) .wheel-main { box-shadow: 0 0 0 1px #999, 4px 4px 8px -2px #666;
}
.card .menu .wheel .wheel-item, .card .menu .wheel .wheel-main { color: #666; background: #CCC; box-shadow: 0 0 0 1px #999, 1px 1px 2px #333; border-color: #EEE;
}
.card .menu .wheel .wheel-item span, .card .menu .wheel .wheel-main span { display: inline-block; width: 100%; text-align: center;
}
.card .menu .wheel .wheel-item.wheel-main, .card .menu .wheel .wheel-main.wheel-main { opacity: 1; font-size: 1.05rem; line-height: 2.1rem;
}
.card .body { margin: 0.5rem;
}
/* * Body */
body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; padding: 1rem; color: #333; background: #DDD;
}
@media only screen and (max-width: 40em) { body { font-size: 0.8em; } .card { width: 140%; margin-left: -25%; }
}

Card Mockup - Script Codes JS Codes

$('.wheel-main').on('click', function(){ $('.wheel:not(.closed)')	.not($(this).closest('.wheel'))	.addClass('closed'); $(this).closest('.wheel').toggleClass('closed');
});
//For Responsiveness
FastClick.attach(document.body);
Card Mockup - Script Codes
Card Mockup - Script Codes
Home Page Home
Developer Aaron Levine
Username Aldlevine
Uploaded January 30, 2023
Rating 3
Size 6,436 Kb
Views 6,072
Do you need developer help for Card Mockup?

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 Levine (Aldlevine) Script Codes
Name
Flashy Rating Page
Faceful Cubes
Canvas Falloff Test
IOS-7 style slide-toggle
Popup Modal
Touch Hover
Pure CSS Rating Scale
Price is Right Wheel - Better Inertia
Colored Rain
CRT TV Page Load Animation
Create amazing blog posts 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!