Meet Our Team - #CodePenChallenge cpc-cards

In this example below you will see how to do a Meet Our Team - #CodePenChallenge cpc-cards with some HTML / CSS and Javascript

Creating "Cards" with "3D Flip" style & "Carousel Slider Syncing" by using CSS & JavaScript. I'm custom the ( "carousel-rotate" 👉 https://codepen.io/desandro/pen/jxwELK ) 👉 a pen by "@desandro".

Thumbnail
This awesome code was written by Amli, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Amli ©
  • HTML
  • CSS
  • JavaScript
    <div class="container" id="MOT">
	<div class="box">
		
		<div class="codepen">
			<div class="bg-hello cp-big"></div>
			<div class="hello">
				<h1>Meet Our<br>CodePen Team</h1>
				<button class="btnOpen" onclick="OpenMOT()">Take A Tour</button>
			</div>
		</div>
			
		<div class="team">
			<button class="btnClose" onclick="CloseMOT()">&times;</button>
			
			<div class="data-for-thumbnail">
				<div class="bg-header cp-big">
					<div class="title">
						<h1>CodePen</h1>
						<p>Social Development Environment</p>
					</div>
				</div>
				<div class="about">
					<h2>About</h2>
					<p>CodePen is a social development environment for front-end designers and developers.</p>
				</div>
				<div class="social-media">
					<div class="col-2">
						<div class="tooltips left">@CodePen</div>
						<a class="tw" href="https://twitter.com/codepen" target="blank_"></a>
					</div>
					<div class="col-2">
						<div class="tooltips right">@codepen</div>
						<a class="cp-link" href="https://codepen.io/team/codepen" target="blank_"></a>
					</div>
				</div>
			</div>
								
			<div class="data-for-thumbnail">
				<div class="bg-header ts">
					<div class="title">
						<h1>Tim Sabat</h1>
						<p>CO-Founder</p>
					</div>
				</div>
				<div class="about">
					<h2>About</h2>
					<p>Tim is a full stack developer but with more focus on back end. He does a lot of the Rails work for CodePen.
					He is also our server master and keeps CodePen fast.</p>
				</div>
				<div class="social-media">
					<div class="col-2">
						<div class="tooltips left">@timsabat</div>
						<a class="tw" href="https://twitter.com/timsabat" target="blank_"></a>
					</div>
					<div class="col-2">
						<div class="tooltips right">@tsabat</div>
						<a class="cp-link" href="https://codepen.io/tsabat" target="blank_"></a>
					</div>
				</div>
			</div>
				
			<div class="data-for-thumbnail">
				<div class="bg-header av">
					<div class="title">
						<h1>Alex Vazquez</h1>
						<p>CO-Founder</p>
					</div>
				</div>
				<div class="about">
					<h2>About</h2>
					<p>Alex is a full stack developer. Alex does JavaScript development for CodePen, both front end and back, as well as Rails and just about everything else.</p>
				</div>
				<div class="social-media">
					<div class="col-2">
						<div class="tooltips left">@alexquez</div>
						<a class="tw" href="https://twitter.com/alexquez" target="blank_"></a>
					</div>
					<div class="col-2">
						<div class="tooltips right">@quezo</div>
						<a class="cp-link" href="https://codepen.io/quezo" target="blank_"></a>
					</div>
				</div>
			</div>
				
			<div class="data-for-thumbnail">
				<div class="bg-header cc">
					<div class="title">
						<h1>Chris Coyier</h1>
						<p>CO-Founder</p>
					</div>
				</div>
				<div class="about">
					<h2>About</h2>
					<p>Chris is a front-end developer and designer. He writes a bunch of HTML, CSS, and JavaScript and shakes the pom-poms for CodePen.</p>
				</div>
				<div class="social-media">
					<div class="col-2">
						<div class="tooltips left">@chriscoyier</div>
						<a class="tw" href="https://twitter.com/chriscoyier" target="blank_"></a>
					</div>
					<div class="col-2">
						<div class="tooltips right">@chriscoyier</div>
						<a class="cp-link" href="https://codepen.io/chriscoyier" target="blank_"></a>
					</div>
				</div>
			</div>
				
			<div class="data-for-thumbnail">
				<div class="bg-header mm">
					<div class="title">
						<h1>Marie Mosley</h1>
						<p>Podcast Producer</p>
					</div>
				</div>
				<div class="about">
					<h2>About</h2>
					<p>Marie wears a lot of hats. She is our podcast producer, documentation lead, customer support maestro, editor, and community manager.</p>
				</div>
				<div class="social-media">
					<div class="col-2">
						<div class="tooltips left">@MMosley</div>
						<a class="tw" href="https://twitter.com/mmosley" target="blank_"></a>
					</div>
					<div class="col-2">
						<div class="tooltips right">@mariemosley</div>
						<a class="cp-link" href="https://codepen.io/mariemosley" target="blank_"></a>
					</div>
				</div>
			</div>
				
			<div class="data-for-thumbnail">
				<div class="bg-header ja">
					<div class="title">
						<h1>Jake Albaugh</h1>
						<p>Full Stack Developer</p>
					</div>
				</div>
				<div class="about">
					<h2>About</h2>
					<p>Jake is full stack developer from Chicago.
					He's always experimenting with new and interesting ideas and is helping CodePen build new tools with a back end focus.</p>
				</div>
				<div class="social-media">
					<div class="col-2">
						<div class="tooltips left">@jake_albaugh</div>
						<a class="tw" href="https://twitter.com/jake_albaugh" target="blank_"></a>
					</div>
					<div class="col-2">
						<div class="tooltips right">@jakealbaugh</div>
						<a class="cp-link" href="https://codepen.io/jakealbaugh" target="blank_"></a>
					</div>
				</div>
			</div>
				
			<div class="data-for-thumbnail">
				<div class="bg-header rs">
					<div class="title">
						<h1>Rachel Smith</h1>
						<p>Full Stack Developer</p>
					</div>
				</div>
				<div class="about">
					<h2>About</h2>
					<p>Rachel is a full stack'er in Australia.
					Not only a creative and talented designer and developer, but a great technical writer and wonderful and encouraging CodePen community member.</p>
				</div>
				<div class="social-media">
					<div class="col-2">
						<div class="tooltips left">@rachsmithtweets</div>
						<a class="tw" href="https://twitter.com/rachsmithtweets" target="blank_"></a>
					</div>
					<div class="col-2">
						<div class="tooltips right">@rachsmith</div>
						<a class="cp-link" href="https://codepen.io/rachsmith" target="blank_"></a>
					</div>
				</div>
			</div>

			<div class="data-for-thumbnail">
				<div class="bg-header kf">
					<div class="title">
						<h1>Klare Frank</h1>
						<p>Designer</p>
					</div>
				</div>
				<div class="about">
					<h2>About</h2>
					<p>Klare is a designer who codes in Seattle.
					She focuses on everything from design research to crafting interfaces and illustrations to playing around in SASS.</p>
				</div>
				<div class="social-media">
					<div class="col-2">
						<div class="tooltips left">@klare</div>
						<a class="tw" href="https://twitter.com/klare" target="blank_"></a>
					</div>
					<div class="col-2">
						<div class="tooltips right">@klare</div>
						<a class="cp-link" href="https://codepen.io/klare" target="blank_"></a>
					</div>
				</div>
			</div>
				
			<div class="middle">
				<button class="prev" onclick="prev(-1)"></button>
				<button class="next" onclick="next(1)"></button>
				<div class="people">
					<div class="thumbnail_1"><span class="cp"></span></div>
					<div class="thumbnail_2"><span class="ts"></span></div>
					<div class="thumbnail_3"><span class="av"></span></div>
					<div class="thumbnail_4"><span class="cc"></span></div>
					<div class="thumbnail_5"><span class="mm"></span></div>
					<div class="thumbnail_6"><span class="ja"></span></div>
					<div class="thumbnail_7"><span class="rs"></span></div>
					<div class="thumbnail_8"><span class="kf"></span></div>
				</div>
			</div>
		</div>
	
	</div>
</div>

/*Downloaded from https://www.codeseek.co/uzcho_/meet-our-team-codepenchallenge-cpc-cards-jKyRmr */
    @charset "utf8";


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Root */
*,
*:after,
*:before,
html
	{box-sizing:border-box}

a
	{text-decoration:none}

body
	{font-family:Tahoma,Geneva,sans-serif;font-style:normal;font-weight:400}

body,
html
	{height:100%}

body,
h1,
h2,
p
	{margin:0;padding:0}

body,
.btnOpen,
.middle,
.about:before
	{background:linear-gradient(45deg,#3f5efb,#fc466b)}

button{
	border:none;
	outline:none;
	cursor:pointer;
	font-size:15px
	}

button,
h2
	{color:#fff}

h1
	{color:#fcd000;font-size:18px}

h2
	{font-size:16px}

p,
.tooltips
	{font-size:14px}

.container,
.codepen,
.team,
.bg-header,
.bg-header:before,
.title,
.about,
.about:before,
.social-media,
.tooltips:before,
.middle,
.middle:before,
.middle button,
.people,
[class*="thumbnail"]
	{display:block;position:absolute}

.container,
.middle
	{top:50%;perspective:100%}

.box,
.codepen,
.team,
.data-for-thumbnail,
.bg-header:before,
[class*="thumbnail"]
	{width:100%;height:100%}

.box,
.bg-hello,
.hello,
.col-2,
.col-2 a,
[class*="thumbnail"] span
	{display:block;position:relative}

.box,
.people
	{transform-style:preserve-3d;transition:all 1s ease}

.codepen,
.team{
	background:#000;
	overflow:hidden;
	border-radius:10px;
	backface-visibility:hidden
	}

.bg-hello,
.bg-header,
.bg-header:before
	{border-radius:10px 10px 0 0}

.hello,
.social-media
	{border-radius:0 0 10px 10px}

.btnOpen,
.btnClose,
.tooltips
	{border-radius:5px}

.title,
.middle
	{transform:translate(0,-50%)}

.social-media,
.middle
	{width:100%;height:40px}

.col-2 a,
[class*="thumbnail"] span{
	background-size:32px 32px;
	width:32px;
	height:32px;
	border-radius:50%
	}

.cp-big
	{background:#111 url("https://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png")no-repeat center}

.cp
	{background:#000 url("https://codepen.io/favicons/favicon-32x32.png")no-repeat center}

.ts
	{background:url("https://static.codepen.io/assets/about/about-timsabat-5e841e2e7c8d80a82f093a5be77006497328d89ef3b8add79c15fff45c951f82.jpg")no-repeat center}

.av
	{background:url("https://static.codepen.io/assets/about/about-alexvazquez-63ccca1f934d2e630ea39c3ef6744ec50c6b47f21918e5c21a4439736abb29c4.jpg")no-repeat center}

.cc
	{background:url("https://static.codepen.io/assets/about/about-chriscoyier-79cbe777c11e0c1f3150fa6ba8983a29745226b0dc9d2f7bf4f7214ac891b931.jpg")no-repeat center}

.mm
	{background:url("https://static.codepen.io/assets/about/about-mariemosley-c915a6b18901329df2eed3cb634cf7683cd01e73de038b89f8d3d7f0ae632646.jpg")no-repeat center}

.ja
	{background:url("https://static.codepen.io/assets/about/about-jakealbaugh-ffb1e1d4a5ad6e6f78d9730ca00ccf09fea1be7afd69bce10c0ed15450e06c8c.jpg")no-repeat center}

.rs
	{background:url("https://static.codepen.io/assets/about/about-rachelsmith-28c8885b4e02e35acc4f702846e794e975791c07de81da0be8d7d78fa310299f.jpg")no-repeat center}

.kf
	{background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83959/profile/profile-512.jpg?1522341927")no-repeat center}

.tw
	{background:url("https://image.flaticon.com/icons/png/128/145/145812.png")no-repeat center}

.cp-link
	{background:url("https://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-White-Small.png")no-repeat center}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Root */


/*                                                ! Meet Our Team Start Here ...
=======================================================================================================================*/
.container{
	width:250px;
	height:400px;
	left:50%;
	transform:translate(-50%,-50%)
	}

.box
	{transform:rotateY(0deg)}

.codepen
	{transform:translate3d(0,0,125px)}

.bg-hello,
.hello
	{width:100%;height:50%;float:left}

.bg-hello
	{background-size:contain}

.hello
	{padding:48px 16px 0 16px;text-align:center}

.btnOpen{
	margin:16px 0 0 0;
	padding:14px;
	transition:all .3s ease;
	box-shadow:0 8px 8px -8px #fff
	}

.btnOpen:hover
	{transform:translateY(4px);box-shadow:none}

.team
	{transform:rotateY(180deg) translate3d(0,0,125px)}

.team:hover .btnClose
	{display:block}

.btnClose{
	background:rgba(255,0,0,.5);
	margin:10px 10px 0 0;
	padding:8px 10px;
	display:none;
	float:right
	}

.data-for-thumbnail{
	display:none;
	position:absolute;
	border-radius:10px;
	z-index:-1;
	animation:fade 1.5s ease
	}

@keyframes fade{
	from{opacity:0}
	to{opacity:1}
	}

.bg-header{
	background-size:cover;
	width:100%;
	height:180px;
	top:0
	}

.bg-header:before
	{background:rgba(0,0,0,.4);content:""}

.title{
	width:100%;
	padding:0 8px;
	top:50%;
	text-align:center
	}

.title p
	{color:#1ae1ff}

.about{
	background:#15061e;
	width:100%;
	height:140px;
	padding:8px 16px;
	top:220px
	}

.about:before{
	content:"";
	width:6px;
	height:6px;
	top:13px;
	left:5px;
	border-radius:50%
	}

.about p
	{color:#b6b6b6}

.social-media
	{padding:4px 0;bottom:0}

.col-2
	{width:50%;height:32px;float:left}

.col-2:hover .tooltips
	{display:block}

.col-2 a
	{margin:auto}

.tooltips{
	background:#fff;
	padding:8px;
	top:-42px;
	display:none;
	position:absolute;
	z-index:1
	}

.tooltips:before{
	background:transparent;
	content:"";
	width:10px;
	bottom:-6px;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-top:10px solid #fff
	}

.tooltips.left
	{left:59px}

.tooltips.left:before
	{left:0}

.tooltips.right
	{right:59px}

.tooltips.right:before
	{right:0}

.middle:before{
	background:#000;
	content:"";
	width:40px;
	height:40px;
	left:50%;
	border-radius:50%;
	transform:translate(-50%,0)
	}

.middle button{
	background:transparent;
	width:20px;
	top:10px;
	z-index:1;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
	}

.prev
	{left:60px;border-right:20px solid #000}

.next
	{right:60px;border-left:20px solid #000}

.people{
	background:transparent;
	width:210px;
	height:100%;
	left:20px
	}

[class*="thumbnail"]
	{backface-visibility:hidden}

.thumbnail_1
	{transform:rotateY(0deg) translateZ(180px)}

.thumbnail_2
	{transform:rotateY(45deg) translateZ(180px)}

.thumbnail_3
	{transform:rotateY(90deg) translateZ(180px)}

.thumbnail_4
	{transform:rotateY(135deg) translateZ(180px)}

.thumbnail_5
	{transform:rotateY(180deg) translateZ(180px)}

.thumbnail_6
	{transform:rotateY(225deg) translateZ(180px)}

.thumbnail_7
	{transform:rotateY(270deg) translateZ(180px)}

.thumbnail_8
	{transform:rotateY(315deg) translateZ(180px)}

[class*="thumbnail"] span
	{margin:4px auto;border:2px solid #fff}

.rotate-box .box
	{transform:rotateY(-180deg)}


/*Downloaded from https://www.codeseek.co/uzcho_/meet-our-team-codepenchallenge-cpc-cards-jKyRmr */
    function OpenMOT()
	{document.getElementById("MOT").classList.add("rotate-box")}

function CloseMOT()
	{document.getElementById("MOT").classList.remove("rotate-box")}

var slideIndex = 1;
    showSlides(slideIndex);
function showSlides(n){
   var i;
   var slides = document.getElementsByClassName("data-for-thumbnail");
   if(n > slides.length){slideIndex = 1}
   if(n < 1){slideIndex = slides.length}
   for(i = 0; i < slides.length; i++){
       slides[i].style.display = "none"
   }
   slides[slideIndex-1].style.display = "block"
}

var carousel = document.querySelector(".people");
var cellCount = 8;
var selectedIndex = 0;
function getCarousel(){
   var angle = selectedIndex / cellCount * -360;
   carousel.style.transform = "rotateY(" + angle + "deg)"
}

function prev(n){
   showSlides(slideIndex += n);
   selectedIndex--;
   getCarousel()
}

function next(n){
   showSlides(slideIndex += n);
   selectedIndex++;
   getCarousel()
}

Comments