css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- 
Hover or Click in each element to see flip and bounceInLeft Effects.
Best view in full preview.
 -->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Beautiful Nation Project Grid Portal</title>
	<link href='https://fonts.googleapis.com/css?family=Cabin+Sketch' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>

<div class="responsive">
<ul class="content">

	<!-- 1 -->
	<li>
		<div class="card-front">
			<h2><b>What is Beautiful Nation Project?</b></h2>
			<h3>The Beautiful Nation Project (BNP) is an experiential learning project designed to connect students with Earth and each other. Its mission is to teach and promote global citizenship.</h3>
		</div>
		<div class="card-back">
      <h2><a href="http://www.beautifulnationproject.org/about" target="_blank">STEM Through a Global Lens</a></h2>
		</div>

		<!-- Content -->
		<div class="all-content">
			<h1>About Beautiful Nation Project</h1>
      <br>
 <br>
<br><h4>
The Beautiful Nation Project (BNP) is an experiential learning project designed to connect students with Earth and each other. Its mission is to teach and promote global citizenship.<br>
<br>
BNP presents life from the vantage point of the sea to help bring its mission to life. We are a crew of women, educators, scientists, artists and explorers - citizens of the sea - a limitless, beautiful nation without borders and the hindering politics of mankind. Traveling around the globe by sailboats, ships, and marine research vessels - theVoyage of Makulu is our collective journey on the sea. <br>
<br>
The Voyage of Makulu begins in the United State's coastal cities and makes its way towards the Equator to the coastal communities and delicate islands of the Caribbean, South Pacific and Asia. Our focus is on water, its ubiquity, and our interconnection as a result of water on planet Earth.<br>
<br>
BNP expands the missions of two leading education nonprofits, <a href="http://www.beautifulnationproject.org/partners">Reach the World</a> and <a href="http://www.beautifulnationproject.org/partners">Agastya</a>. Our platform for engagement is a geosocial network. It is a free resource for educators, students and anyone interested in exploring planet Earth from the vantage point of the sea. Through the network, educators and their students gain access to: <br>
<br>
+ real-time interactions with global explorers (webcast, podcast, videocalls)<br>
+ digital media stories for Grades 2-8<br>
+ citizen science data collection, tools and resources for measuring water quality<br>
+ classroom-to-classroom connections for project-based learning and collaborative data analysis<br>
+ badges for students and educators in global competence (educators can earn accreditation through the <a href="http://academy.nmc.org/course/connecting-students-to-their-world/">NMC Academy</a>)  <br>
<br>
Research on literacy (<a href="http://www.pearsonfoundation.org/literacy/research-surveys-and-reports/the-digital-world-of-young-children-emergent-literacy.html">Pearson Foundation</a>) in the digital age indicates that there is a growing need for projects like BNP that teach critical thinking and problem-solving on a global scale. The Beautiful Nation Project has the power to make core science learning a lifelong passion for students across borders! <br>
<br>
We would love your support as we work to prepare students for success in a complex, and rapidly changing world. <a href="http://www.beautifulnationproject.org/support-shop">Click to Donate!</a></h4>

		</div>
	</li>

	<li>
		<div class="card-front">
			<h2><b>Exploration in Education</b></h2>
			<h3>Take your students on a journey around the world. Help them become global thinkers</h3>
		</div>
		<div class="card-back">
			<h2><b>Make an Impact</b></h2>
		</div>

		<!-- Content -->
		<div class="all-content">
			<h1>Bring the World Into your Classroom</h1>
      <p>The Beautiful Nation Project  is a social networking experience for educators and students alike. When our journey begins, new opportunities for interactive story telling style content streaming to your classroom from our location at sea.  We believe in the power of natural curiosity when creating curriculum and the educators who are following will be tapped into something magnificent and modular, making all of our reports mixable and mashable. We may invent new words along the way, while promoting experiential learning. By definition, BNP is a geosocial network.  Our content and activity is all geo-related.  Everything and everyone are linked by their geographic location in the world. <br>
<a href="http://www.beautifulnationproject.org/channels/teacher-tech/"><img src="https://api.ning.com/files/OcxvxG4wHxbs6a4Lmz6SKkuF3CT7rzttW13TyRLYfyPEmgCm2ha40jElVdrr1QfcMwYANclYGwubTKCpkWQzG5gwdD7kiAuZ/techconnection.png" width="50%"></a><br>
The network houses resources for educators and students. Articles, photos and videos produced by the Voyage of Makulu crew, along side real-time communication tools, maps, games and activities, offer ways for students to engage with the crew and each other in real-time, about real global issues. <br>
<br>
Articles are filtered into subject-specific sections of the network, called <a href="http://www.beautifulnationproject.org/channels">Channels</a>. By subscribing to a specific Channel, your classroom can engage in online discussions and videocalls with the crew and each other about content posted in the Channel. <br>
</p>
		</div>
	</li>

	<li>
		<div class="card-front">
			<h2><b>Where we live effects how we live</b></h2>
			<h3>It is important that kids begin to learn how other kids live around the world and how best to share the planet.</h3>
		</div>
		<div class="card-back">
			<h2><b>Learn How</b></h2>
		</div>

		<!-- Content -->
		<div class="all-content">
			<h1>One World. One Map</h1>
      <p><span style="color: rgb(255, 255, 255);">The Beautiful Nation Project is a resource specifically designed to help build student engagement and geographic literacy. </span><br>
<a href="http://www.beautifulnationproject.org/educator#"><img src="https://api.ning.com/files/WQzLUF11osoDV1E7NSckh-9T5Y2FFpfZNUhKw1o20VRjaqqf*L3I2gSlUzzzSjvWoC6lUsoDlw*eMTjO997wJnsbmIuAuwJg/bnationwave.gif"></a><br>
<span style="color: rgb(255, 255, 255);">Educators can take their students on a real global journey by tracking the <a href="http://www.beautifulnationproject.org/welcome-aboard">Voyage of Makulu</a>. The journey will introduce students to new ideas, cultures and ways of living around the globe by introducing real people, and other students living in the locations visited by the crew!<br>
<br>
The Voyage of Makulu crew content meets Grades 2-8 Literacy Levels with its digital media stories. Free resources are available to help educators with:<br>
<br>
-Mapping the crew's content to the Common Core criteria for success<br>
-Developing Hands-on Science Activities <br>
-Planning and Implementing a Virtual Science Fair<br>
<br>
Visit the <a href="http://www.beautifulnationproject.org/channels/teacher-tech">Teacher Tech Channel</a> to learn more about the tools available to educators through the Beautiful Nation Project's geosocial network for classrooms!</span>

</p>
		</div>
	</li>


	<!-- 2 -->
	<li>
		<div class="card-front">
			<h2><b>No Mind Left Behind</b></h2>
			<h3>Educators, Students, Teachers in Training, Sailors, Explorers....jump aboard!</h3>
		</div>
		<div class="card-back">
			<h2><b>No Kid Without Time</b></h2>
		</div>

		<!-- Content -->
		<div class="all-content">
			<h1>No Child Without Wonder</h1>
		</div>
	</li>

	<li>
		<div class="card-front">
			<h2><b>Progress Through Partnership and Alliance</b></h2>
			<h3>Learn about our global partnerships and non-profit sponsors and how you can leverage our journey in the classroom<h3>
		</div>
		<div class="card-back">
			<h2><b>Become our Global Partner</b></h2>
		</div>

		<!-- Content -->
		<div class="all-content">
			<h1>Our partners make the world go-round!</h1>
		</div>
	</li>
	<li>
		<div class="card-front">
			<h2><b>Lifting the Anchor for Educators Worldwide</b></h2>
			<h3>Customizable curriculum packages travel content.<h3>
		</div>
		<div class="card-back">
			<h2><b>Make a Mix</b></h2>
		</div>

		<!-- Content -->
		<div class="all-content">
			<h1>It will do ya goood.!</h1>
		</div>
	</li>


	<!-- 3 -->
	<li>
		<div class="card-front">
			<h2><b>Customizable Classroom Curriculum</b></h2>
			<h3>Educators have the ability to mashup our adventures into dynamic customized classroom curriculum </h3>
		</div>
		<div class="card-back">
			<h2><b>How Does This Happen?</b></h2>
		</div>
		
		<!-- Content -->
		<div class="all-content">
			<h1>Personalized Classroom Content</h1>
		</div>
	</li>

	<li>
		<div class="card-front">
			<h2><b>Dynamic Card Catalog in Flux</b></h2>
			<h3>Our carefully crafted Journey Channels explore essential questions kids will have about the places we visit.</h3>
		</div>
		<div class="card-back">
			<h2><b>What are Channels?</b></h2>
		</div>

		<!-- Content -->
		<div class="all-content">
			<h1>Channels are the bomb</h1>
		</div>
	</li>

	<li>
		<div class="card-front">
			<h2><b>Donate Your Time, Talents and Funds</b></h2>
			<h3>Learn how you can help by simply sharing your expertise, your resources and of course, your spare change.</h3>
		</div>
		<div class="card-back">
			<h2><b>Help grow the Float Fund</b></h2>
		</div>

		<!-- Content -->
		<div class="all-content">
			<h1>Ways to Donate and Get Involved</h1>
		</div>
	</li>

</ul>
</div>

</body>
</html>
            
          
!
            
              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, menu, nav, section, summary {
  display: block; }

/**
*
* Animate.css
* From : https://daneden.me/animate/
*
**/
.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s; }

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05); }

  70% {
    -webkit-transform: scale(0.9); }

  100% {
    -webkit-transform: scale(1); } }

@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0.3); }

  50% {
    opacity: 1;
    -moz-transform: scale(1.05); }

  70% {
    -moz-transform: scale(0.9); }

  100% {
    -moz-transform: scale(1); } }

@-o-keyframes bounceIn {
  0% {
    opacity: 0;
    -o-transform: scale(0.3); }

  50% {
    opacity: 1;
    -o-transform: scale(1.05); }

  70% {
    -o-transform: scale(0.9); }

  100% {
    -o-transform: scale(1); } }

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3); }

  50% {
    opacity: 1;
    transform: scale(1.05); }

  70% {
    transform: scale(0.9); }

  100% {
    transform: scale(1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px); }

  80% {
    -webkit-transform: translateY(10px); }

  100% {
    -webkit-transform: translateY(0); } }

@-moz-keyframes bounceInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateY(-30px); }

  80% {
    -moz-transform: translateY(10px); }

  100% {
    -moz-transform: translateY(0); } }

@-o-keyframes bounceInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(2000px); }

  60% {
    opacity: 1;
    -o-transform: translateY(-30px); }

  80% {
    -o-transform: translateY(10px); }

  100% {
    -o-transform: translateY(0); } }

@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px); }

  60% {
    opacity: 1;
    transform: translateY(-30px); }

  80% {
    transform: translateY(10px); }

  100% {
    transform: translateY(0); } }

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  -moz-animation-name: bounceInUp;
  -o-animation-name: bounceInUp;
  animation-name: bounceInUp; }

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px); }

  80% {
    -webkit-transform: translateY(-10px); }

  100% {
    -webkit-transform: translateY(0); } }

@-moz-keyframes bounceInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateY(30px); }

  80% {
    -moz-transform: translateY(-10px); }

  100% {
    -moz-transform: translateY(0); } }

@-o-keyframes bounceInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -o-transform: translateY(30px); }

  80% {
    -o-transform: translateY(-10px); }

  100% {
    -o-transform: translateY(0); } }

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px); }

  60% {
    opacity: 1;
    transform: translateY(30px); }

  80% {
    transform: translateY(-10px); }

  100% {
    transform: translateY(0); } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  -moz-animation-name: bounceInDown;
  -o-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px); }

  80% {
    -webkit-transform: translateX(-10px); }

  100% {
    -webkit-transform: translateX(0); } }

@-moz-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateX(30px); }

  80% {
    -moz-transform: translateX(-10px); }

  100% {
    -moz-transform: translateX(0); } }

@-o-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -o-transform: translateX(30px); }

  80% {
    -o-transform: translateX(-10px); }

  100% {
    -o-transform: translateX(0); } }

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px); }

  60% {
    opacity: 1;
    transform: translateX(30px); }

  80% {
    transform: translateX(-10px); }

  100% {
    transform: translateX(0); } }

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  -moz-animation-name: bounceInLeft;
  -o-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px); }

  80% {
    -webkit-transform: translateX(10px); }

  100% {
    -webkit-transform: translateX(0); } }

@-moz-keyframes bounceInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateX(-30px); }

  80% {
    -moz-transform: translateX(10px); }

  100% {
    -moz-transform: translateX(0); } }

@-o-keyframes bounceInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(2000px); }

  60% {
    opacity: 1;
    -o-transform: translateX(-30px); }

  80% {
    -o-transform: translateX(10px); }

  100% {
    -o-transform: translateX(0); } }

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px); }

  60% {
    opacity: 1;
    transform: translateX(-30px); }

  80% {
    transform: translateX(10px); }

  100% {
    transform: translateX(0); } }

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  -moz-animation-name: bounceInRight;
  -o-animation-name: bounceInRight;
  animation-name: bounceInRight; }

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@-moz-keyframes rotateIn {
  0% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(0);
    opacity: 1; } }

@-o-keyframes rotateIn {
  0% {
    -o-transform-origin: center center;
    -o-transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -o-transform-origin: center center;
    -o-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateIn {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0; }

  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  -moz-animation-name: rotateIn;
  -o-animation-name: rotateIn;
  animation-name: rotateIn; }

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@-moz-keyframes rotateInUpLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

@-o-keyframes rotateInUpLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  -moz-animation-name: rotateInUpLeft;
  -o-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@-moz-keyframes rotateInDownLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

@-o-keyframes rotateInDownLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  -moz-animation-name: rotateInDownLeft;
  -o-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@-moz-keyframes rotateInUpRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

@-o-keyframes rotateInUpRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  -moz-animation-name: rotateInUpRight;
  -o-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@-moz-keyframes rotateInDownRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

@-o-keyframes rotateInDownRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  -moz-animation-name: rotateInDownRight;
  -o-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

body, html {
  height: 100%; }

body {
  background: rgb(52, 73, 94);
  color: #fff;
  font-family: 'Cabin Sketch', sans-serif; }
p {
  color: rgb(231, 76, 60);
  font-family: 'Cabin Sketch', sans-serif;
font-size: 1.1em;}
a {
  color:rgb(46, 204, 113);
}
h3 {color:rgb(46, 204, 113);
  
}
h4 {
  color:rgb(231, 76, 60);
  font-size: 2em;
}

/**
*
* Responsive list
*
**/
.responsive {
  width: 100%;
  height: 100%; }

.content {
  float: left;
  width: 100%;
  height: 100%; }
  .content img {
    width: 100%;
    height: 101%; }
  .content li {
    float: left;
    border-bottom: 1px solid #2c2c2c;
    border-left: 1px solid #2c2c2c;
    width: 33.2%;
    height: 33%;
    position: relative;
    /* Colors Hover */ }
    .content li:hover {
      cursor: pointer; }
      .content li:hover .card-front {
        -webkit-transform: rotateX(50deg);
        -moz-transform: rotateX(50deg);
        -ms-transform: rotateX(50deg);
        -o-transform: rotateX(50deg);
        transform: rotateX(50deg);
        -webkit-transform: perspective(1000) rotateX(50deg);
        -moz-transform: perspective(1000) rotateX(50deg);
        -ms-transform: perspective(1000) rotateX(50deg);
        -o-transform: perspective(1000) rotateX(50deg);
        transform: perspective(1000) rotateX(50deg); }
      .content li:hover .card-back {
        z-index: 950;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        -o-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform: perspective(1000) rotateX(0deg);
        -moz-transform: perspective(1000) rotateX(0deg);
        -ms-transform: perspective(1000) rotateX(0deg);
        -o-transform: perspective(1000) rotateX(0deg);
        transform: perspective(1000) rotateX(0deg); }
    .content li:nth-child(1) .card-back, .content li:nth-child(9) .card-back {
      background: #6b6b6b; }
    .content li:nth-child(2) .card-back {
      background: #22cfda; }
    .content li:nth-child(3) .card-back {
      background: #162b53; }
    .content li:nth-child(4) .card-back {
      background: #ee2ca3; }
    .content li:nth-child(5) .card-back {
      background: #d0ce06; }
    .content li:nth-child(6) .card-back {
      background: #7381a8; }
    .content li:nth-child(7) .card-back {
      background: #da222b; }
    .content li:nth-child(8) .card-back {
      background: #f07938; }
    .content li:first-child, .content li:last-child {
      background-color: #151515; }
  .content .card-front,
  .content .card-back {
    text-align: right;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 400ms;
    -moz-transition: -moz-transform 400ms;
    -o-transition: -o-transform 400ms;
    transition: transform 400ms;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%; }
  .content .card-front {
    -webkit-transform: perspective(1000) rotateX(0);
    -moz-transform: perspective(1000) rotateX(0);
    -ms-transform: perspective(1000) rotateX(0);
    -o-transform: perspective(1000) rotateX(0);
    transform: perspective(1000) rotateX(0);
    z-index: 900; }
  .content .card-back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    z-index: 800; }
  .content h2 {
    font-size: 28px;
    float: right;
    width: 100%;
    margin-bottom: 10px;
    text-transform: uppercase;
    margin-right: 20px;
    margin-top: 20px; }
    .content h2 b {
      float: right;
      width: 55%; }
  .content p {
    line-height: 1.3em;
    color: #3d3d3d;
    width: 90%;
    float: right;
    margin-right: 20px; }

.close {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  background: rgb(44, 62, 80);
  color: rgb(236, 240, 241);
  text-decoration: none;
  font-size: 2em;
  padding: 10px 20px; }

.active {
  width: 100% !important;
  height: 100% !important; }
  .active .all-content {
    position: absolute;
    left: 10px;
    top: 20px; }
    .active .all-content h1 {
      font-size: 80px;
      width: 50%; }

@media (min-width: 440px) and (max-width: 750px) {
  .content h2 {
    font-size: 1.5em; }
  .content p {
    font-size: 13px; }
  .content li {
    width: 33.1%; } }
@media (max-width: 439px) {
  .content h2 {
    font-size: 15px; }
  .content p {
    font-size: 13px; }
  .content li {
    width: 33%; } }
@media (max-height: 450px) {
  .content h2 {
    font-size: 22px; }
    .content h2 b {
      width: 100%; }
  .content li {
    width: 33%; } }

            
          
!
            
              $('.all-content').hide();

var bgColor;
var effect = 'animated bounceInLeft'; /* bounceIn, bounceInUp, bounceInDown, bounceInLeft,
										 bounceInRight, rotateIn, rotateInUpLeft, rotateInDownLeft,
										 rotateInUpRight, rotateInDownRight  */

$('.content li').click(function(){
	$('.card-front, .card-back').hide();
	$('.content li').removeClass('active').hide().css('border','none');
	$(this).addClass('active').show();
	bgColor = $('.active .card-back').css('background-color');
	$('.content').css('background-color',bgColor);
	$('.close, .all-content').show();
	$('.responsive').append('<span class="close">close</span>').addClass(effect);
});


$('.responsive').on('click', '.close', function(){

	$('.close').remove();
	bgColor = $('.active .card-front').css('background-color');
	$('.responsive').removeClass(effect);
	$('.all-content').hide();
	$('.content li').removeClass('active').show().css({ 'border-bottom':'1px solid #2c2c2c',
													    'border-left':'1px solid #2c2c2c' });
	$('.card-front, .card-back').show();
	$('.content').css('background-color',bgColor);
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console