<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Info Card Flip</h2>
<!-- Info Card with social icons -->
<div class="info-card">
<div class="front">
<img class="card-image" src="http://solarstreetcharger.ro/wp-content/uploads/2017/07/Soalar-Street-Mobile-Charger.png">
</div>
<div class="back">
<h2>Gentlesir</h2>
<p>
Stalpi Solari inteligenti de iluminat public stradal si pietenall cu reglarea intensitatii luminoase ce reduce consumul de energie pe timpul noptii, iar intensitatea luminoasã se va face in functie de corpurile in miscare care vor trece prin raza de lumina. Acestia vor fi independenti fiind alimentati cu Panouri Solare fara a fi nevoie de reteaua electrica.
</p>
<div class="social">
<a href="#" class="social-icon facebook animate"><span class="fa fa-facebook"></span></a>
<a href="https://twitter.com/MichaelCanlas7" target="_blank" class=" social-icon twitter animate"><span class="fa fa-twitter"></span></a>
<a href="https://github.com/ironprice91" target="_blank" class=" social-icon github animate"><span class="fa fa-github-alt"></span></a>
</div>
</div>
</div>
<!-- Scrolling enabled for longer content -->
<div class="info-card">
<div class="front">
<img class="card-image" src="http://solarstreetcharger.ro/wp-content/uploads/2017/07/Soalar-Street-Mobile-Charger.png">
</div>
<div class="back">
<h2>Gentlesir</h2>
<p>
Stalpi Solari inteligenti de iluminat public stradal si pietenall cu reglarea intensitatii luminoase ce reduce consumul de energie pe timpul noptii, iar intensitatea luminoasã se va face in functie de corpurile in miscare care vor trece prin raza de lumina. Acestia vor fi independenti fiind alimentati cu Panouri Solare fara a fi nevoie de reteaua electrica.
</p>
</div>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Lato:400,900);
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
.info-card {
float: left;
margin: 10px;
-webkit-perspective: 600px;
}
.front, .back {
background: #FFF;
border-radius: 10px;
transition: -webkit-transform 1s;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
border: 1px solid black;
}
.front {
overflow: hidden;
width: 250px;
height: 330px;
position: absolute;
z-index: 1;
}
.back {
padding: 20px;
padding-top: 0px;
width: 250px;
height: 330px;
-webkit-transform: rotateY(-180deg);
overflow: scroll;
}
.info-card:hover .back {
-webkit-transform: rotateY(0);
}
.info-card:hover .front {
-webkit-transform: rotateY(180deg);
}
.card-image {
width: 100%;
height: 100%;
}
/* Social buttons */
.social {
list-style: none;
padding: 0px;
margin-top: 25px;
text-align: center;
}
.social a {
position: relative;
display: inline-block;
min-width: 40px;
padding: 10px 0px;
margin: 0px 5px;
overflow: hidden;
text-align: center;
background-color: rgb(215, 215, 215);
border-radius: 40px;
}
a.social-icon {
text-decoration: none !important;
box-shadow: 0px 0px 1px rgb(51, 51, 51);
box-shadow: 0px 0px 1px rgba(51, 51, 51, 0.7);
}
a.social-icon:hover {
color: rgb(255, 255, 255) !important;
}
a.facebook {
color: rgb(59, 90, 154) !important;
}
a.facebook:hover {
background-color: rgb(59, 90, 154) !important;
}
a.twitter {
color: rgb(45, 168, 225) !important;
}
a.twitter:hover {
background-color: rgb(45, 168, 225) !important;
}
a.github {
color: rgb(51, 51, 51) !important;
}
a.github:hover {
background-color: rgb(51, 51, 51) !important;
}
