<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - A Pen by Mel Choyce</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #f1f1f1;
color: #444;
font-family: "Open Sans", sans-serif;
font-size: 13px;
line-height: 1.4em;
}
a {
color: #0074A2;
text-decoration: none;
}
ul {
list-style: none;
}
.button,
.button-primary,
.button-secondary {
display: inline-block;
text-decoration: none;
font-size: 13px;
line-height: 26px;
height: 28px;
margin: 0;
padding: 0 10px 1px;
cursor: pointer;
border-width: 1px;
border-style: solid;
-webkit-appearance: none;
-webkit-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.button,
.button-secondary {
color: #555;
border-color: #CCC;
background: #F7F7F7;
-webkit-box-shadow: inset 0 1px 0 #FFF, 0 1px 0 rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px 0 #FFF, 0 1px 0 rgba(0, 0, 0, 0.08);
vertical-align: top;
}
.plugin-card {
float: left;
margin: 0 8px 16px;
width: 550px;
/*width: 48.5%;
width: -webkit-calc( 50% - 8px );
width: calc( 50% - 8px );*/
background-color: #FFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Front */
.plugin-card-top {
position: relative;
padding: 20px 20px 10px;
min-height: 135px;
background: #fff;
}
.plugin-icon {
position: absolute;
top: 20px;
left: 20px;
width: 128px;
height: 128px;
margin: 0 20px 20px 0;
}
.plugin-card .name,
.plugin-card .desc {
margin-left: 148px;
margin-right: 120px;
}
.plugin-card h4 {
margin: 0 0 12px;
font-size: 18px;
line-height: 1.3;
font-weight: 600;
}
.plugin-card h4 a {
text-decoration: none;
}
.plugin-card .action-links {
position: absolute;
top: 20px;
right: 20px;
width: 120px;
}
.plugin-action-buttons {
clear: right;
float: right;
margin-left: 2em;
margin-bottom: 1em;
text-align: right;
}
div.action-links,
.plugin-action-buttons {
margin: 0;
}
.plugin-action-buttons li {
margin-bottom: 10px;
}
.plugin-card-bottom {
clear: both;
padding: 12px 20px;
background-color: #FAFAFA;
border-top: 1px solid #DEDEDE;
overflow: hidden;
}
.plugin-card .column-rating,
.plugin-card .column-downloaded {
float: left;
clear: left;
max-width: 180px;
}
.plugin-card .column-rating,
.plugin-card .column-updated {
margin-bottom: 4px;
}
.plugin-card .column-rating {
line-height: 23px;
}
.plugin-card .column-updated,
.plugin-card .column-compatibility {
text-align: right;
float: right;
clear: right;
width: 65%;
width: -webkit-calc( 100% - 180px );
width: calc( 100% - 180px );
}
.plugin-card-bottom .star-rating {
display: inline;
}
.star-rating .star {
color: #E14D43;
}
.star-rating .star {
display: inline-block;
width: 20px;
height: 20px;
-webkit-font-smoothing: antialiased;
font-size: 20px;
line-height: 1;
font-family: 'dashicons';
text-decoration: inherit;
font-weight: normal;
font-style: normal;
vertical-align: top;
-webkit-transition: color .1s ease-in 0;
transition: color .1s ease-in 0;
text-align: center;
color: #0074A2;
}
/* Back */
.plugin-card-back {
padding: 20px 20px 10px;
width: 550px;
min-height: 252px;
background: #fff;
}
/* Flipping */
.plugin-card {
perspective: 1000;
}
/*.plugin-card:hover .plugin-card-flipper,*/
.plugin-card.flip .plugin-card-flipper {
transform: rotateY(180deg);
}
.plugin-card-flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.plugin-card-front,
.plugin-card-back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.plugin-card-front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
.plugin-card-back {
transform: rotateY(180deg);
}
/* Spinner */
.pie {
position: absolute;
top: 20px;
left: 20px;
width: 128px;
height: 128px;
margin: 0 20px 20px 0;
-webkit-border-radius: 50%;
border-radius: 50%;
background-image: -webkit-linear-gradient(0deg, #0074d9 50%, #7fdbff 0);
background-image: -moz-linear-gradient(0deg, #0074d9 50%, #7fdbff 0);
background-image: linear-gradient(90deg, #0074d9 50%, #7fdbff 0);
overflow: hidden;
-webkit-animation: bg 10s step-end infinite;
-moz-animation: bg 10s step-end infinite;
animation: bg 10s step-end infinite;
}
.pie:before {
background: #0074d9;
-webkit-border-radius: 0 100% 100% 0/50%;
border-radius: 0 100% 100% 0/50%;
display: block;
width: 50%;
height: 100%;
content: '';
margin-left: 50%;
-webkit-transform-origin: 0%;
-moz-transform-origin: 0%;
transform-origin: 0%;
-webkit-animation: spin 2.5s linear infinite, color-spin 10s step-end infinite;
-moz-animation: spin 2.5s linear infinite, color-spin 10s step-end infinite;
animation: spin 2.5s linear infinite, color-spin 10s step-end infinite;
}
@-moz-keyframes bg {
50% {
background-position: 64px;
}
}
@-webkit-keyframes bg {
50% {
background-position: 64px;
}
}
@-o-keyframes bg {
50% {
background-position: 64px;
}
}
@keyframes bg {
50% {
background-position: 64px;
}
}
@-moz-keyframes color-spin {
25% {
background: #7fdbff;
}
75% {
background: #0074d9;
}
}
@-webkit-keyframes color-spin {
25% {
background: #7fdbff;
}
75% {
background: #0074d9;
}
}
@-o-keyframes color-spin {
25% {
background: #7fdbff;
}
75% {
background: #0074d9;
}
}
@keyframes color-spin {
25% {
background: #7fdbff;
}
75% {
background: #0074d9;
}
}
@-moz-keyframes spin {
100% {
-webkit-transform: rotate(0.5turn);
-moz-transform: rotate(0.5turn);
transform: rotate(0.5turn);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(0.5turn);
-moz-transform: rotate(0.5turn);
transform: rotate(0.5turn);
}
}
@-o-keyframes spin {
100% {
-webkit-transform: rotate(0.5turn);
-moz-transform: rotate(0.5turn);
transform: rotate(0.5turn);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(0.5turn);
-moz-transform: rotate(0.5turn);
transform: rotate(0.5turn);
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://wordpress.github.io/dashicons/css/dashicons.css" rel="stylesheet" type="text/css" />
<div class="plugin-card">
<div class="plugin-card-flipper">
<div class="plugin-card-front">
<div class="plugin-card-top">
<a href="#" class="thickbox plugin-icon"><img src="//ps.w.org/buddypress/assets/icon.svg?rev=977480"></a>
<div class="name column-name">
<h4><a href="https://local.wordpress-trunk.dev/wp-admin/plugin-install.php?tab=plugin-information&plugin=buddypress&TB_iframe=true&width=772&height=411" class="thickbox">BuddyPress</a></h4>
</div>
<div class="action-links">
<ul class="plugin-action-buttons">
<li><a class="install-now button" href="https://local.wordpress-trunk.dev/wp-admin/update.php?action=install-plugin&plugin=buddypress&_wpnonce=1bb1812563" aria-label="Install BuddyPress 2.1 now">Install Now</a></li>
<li><a href="https://local.wordpress-trunk.dev/wp-admin/plugin-install.php?tab=plugin-information&plugin=buddypress&TB_iframe=true&width=772&height=411" class="thickbox" aria-label="More information about BuddyPress 2.1" data-title="BuddyPress 2.1">More Details</a></li>
</ul>
</div>
<div class="desc column-description">
<p>Social networking in a box. Build a social network for your company, school, sports team, or niche community.</p>
<p class="authors"> <cite>By <a href="https://buddypress.org/community/members/">The BuddyPress Community</a></cite></p>
</div>
</div>
<div class="plugin-card-bottom">
<div class="vers column-rating">
<div class="star-rating" title="4.0 rating based on 672 ratings">
<div class="dashicons-before dashicons-star-filled star star-full"></div>
<div class="dashicons-before dashicons-star-filled star star-full"></div>
<div class="dashicons-before dashicons-star-filled star star-full"></div>
<div class="dashicons-before dashicons-star-filled star star-full"></div>
<div class="dashicons-before dashicons-star-empty star star-empty"></div>
</div>
<span class="num-ratings">(672)</span>
</div>
<div class="column-updated">
<strong>Last Updated:</strong> <span title="2014-09-18 6:09pm GMT">2 weeks ago</span>
</div>
<div class="column-downloaded">2,316,640 downloads</div>
<div class="column-compatibility">
<span class="compatibility-untested"><strong>Untested</strong> with your version of WordPress</span>
</div>
</div>
</div>
<div class="plugin-card-back">
<div class="name column-name">
<h4><a href="https://local.wordpress-trunk.dev/wp-admin/plugin-install.php?tab=plugin-information&plugin=buddypress&TB_iframe=true&width=772&height=411" class="thickbox">BuddyPress</a></h4>
<p>Installing now...</p>
<a class="plugin-card-back-close">Close</a>
</div>
<div class="pie"></div>
</div>
</div>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script id="rendered-js">
(function ($, undefined) {
$(".install-now").on('click', function (event) {
event.preventDefault();
$(".plugin-card").toggleClass("flip");
});
$(".plugin-card-back-close").on('click', function (event) {
event.preventDefault();
$(".plugin-card").removeClass("flip");
});
})(jQuery);
//# sourceURL=pen.js
</script>
</body>
</html>
