How to create a Portfolio Item Flipcard
Before We Start
Every developer needs clean and modern elements to develop their websites, It contains pictures and a user interface element within a website. The most important one and the first section that the user sees when the user enters a website. How to create a Portfolio Item Flipcard
So if you are a person who wishes to develop a website, you have to know how to create that properly.
How to create a Portfolio Item Flipcard
We are here to solve your problem. In this article we discuss how to create these elements. Before we start please read the below articles which easier you to understand the process, if you are new to development.
Step 1 – Add HTML
It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag.
<div class="container">
<div class="hover panel" onmouseover="javascript:this.className += ' flip';" onmouseout="javascript:this.className = 'hover panel';">
<div class="front">
<div class="frontTitle">
Science and Aerospace Scholars
</div>
<div class="frontLogo isas">
</div>
<div class="frontLocation">
NASA Ames
</div>
</div>
<div class="back">
<div class="backTitle">ISAS Graduate</div>
<div class="backParagraph">
Idaho Science and Aerospace is an online class that invites the top 20% of students to a free trip to Boise State University and NASA Ames. During this time I spent personal time with two astronauts, and multiple mission controllers from the Mars landing. I illustrated my teams (Team P.E.N.G.U.I.N.) mission patch (front).
</div>
<div class="backGoto">
<a href="http://nicholas.dizin.x10.bz" target="_blank" title="Academic Portfolio">Academic Portfolio →</a>
</div>
</div>
</div>
<div class="hover panel" onmouseover="javascript:this.className += ' flip';" onmouseout="javascript:this.className = 'hover panel';">
<div class="front">
<div class="frontTitle">
Boise Digital Marketing
</div>
<div class="frontLogo boisedigital">
</div>
<div class="frontLocation">
Boise, Idaho
</div>
</div>
<div class="back">
<div class="backTitle">Boise Digital Marketing</div>
<div class="backParagraph">
Boise Digital Marketing was founded in 2015 under a partnership between Koby & Nicholas. We're small agency doing big agency work.
</div>
<div class="backGoto">
<a href="http://boisedigitalmarketing.com" target="_blank" title="Boise Digital Marketing">Boise Digital →</a>
</div>
</div>
</div>
<div class="hover panel" onmouseover="javascript:this.className += ' flip';" onmouseout="javascript:this.className = 'hover panel';">
<div class="front">
<div class="frontTitle">
Cinematography
</div>
<div class="frontLogo dissolve">
</div>
<div class="frontLocation">
Dissolve.com
</div>
</div>
<div class="back">
<div class="backTitle"> Cinematography</div>
<div class="backParagraph">
I am an independent stock footage contributor on Dissolve.com. I use a GoPro Hero 3+, Canon EOS 70D and DJI Phantom 3 with Adobe Premiere to create the highest quality video and timeplapses I can.
</div>
<div class="backGoto">
<a href="http://dissolve.com/products?media_type=video&producer=Nicholas+Butler" target="_blank" title="Stock Video Collection (Not very comprehensive atm)">Stock Collection →</a>
</div>
</div>
</div>
</div>
Step 2 – Add CSS
Copy and paste below code in your HTML editor between <style></style> tag.
<style>
.container {
width: 750px;
margin: auto;
background-color: #0093e9;
background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}
.panel .pad {
padding: 0 15px;
}
.panel.flip .action {
display: none;
}
.panel {
width: 200px;
height: 300px;
margin: 20px;
position: relative;
display: inline-block;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.panel .front {
z-index: 900;
width: inherit;
height: inherit;
background: #fff;
-moz-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1);
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transform: rotateX(0deg) rotateY(0deg);
-o-transform-style: preserve-3d;
-o-backface-visibility: hidden;
-ms-transform: rotateX(0deg) rotateY(0deg);
-ms-transform-style: preserve-3d;
-ms-backface-visibility: hidden;
transform: rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
backface-visibility: hidden;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.panel.flip .front {
z-index: 900;
background: #fff;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
-moz-box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}
.panel .back {
position: absolute;
top: 0;
left: 0;
z-index: 800;
width: inherit;
height: inherit;
background: #fff;
border: 1px solid #000;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transform: rotateY(-180deg);
-o-transform-style: preserve-3d;
-o-backface-visibility: hidden;
-ms-transform: rotateY(-180deg);
-ms-transform-style: preserve-3d;
-ms-backface-visibility: hidden;
transform: rotateY(-180deg);
transform-style: preserve-3d;
backface-visibility: hidden;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.panel.flip .back {
z-index: 1000;
background: #fff;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}
.frontTitle {
padding-top: 5px;
text-align: center;
font-family: "latoregular", arial;
font-size: 18px;
color: #000;
height: 45px;
}
.frontLogo {
width: 100%;
height: 200px;
background-repeat: no-repeat;
background-position: center center;
}
.isas {
background-image: url("http://dizin.x10.bz/codepen/wgaFq/isas.png");
background-size: 150px 150px;
}
.boisedigital {
background-image: url("http://dizin.x10.bz/codepen/wgaFq/logo_dark.png");
background-size: 85% auto;
background-position: center center;
}
.dissolve {
background-image: url("http://portfolio.dizin.x10.bz/images/dissolve.png");
background-size: 125px 125px;
}
.frontLocation {
padding-top: 10px;
text-align: center;
color: #aaa;
font-family: "latoregular", arial;
font-size: 18px;
}
.backTitle {
padding: 10px;
color: #000;
font-family: "latohairline", arial;
font-size: 16px;
font-weight: bold;
}
.backParagraph {
padding: 10px;
padding-top: 0;
color: #000;
font-family: "latoregular", arial;
font-size: 14px;
}
.backGoto {
padding: 10px;
padding-top: 0;
color: #06f;
font-family: "latoregular", arial;
font-size: 14px;
}
.backGoto a {
text-decoration: none;
color: #06f;
-webkit-transition: 0.1s all linear;
-moz-transition: 0.1s all linear;
-o-transition: 0.1s all linear;
transition: 0.1s all linear;
}
.backGoto a:hover {
text-decoration: underline;
padding-left: 15px;
}
</style>
At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.
Your Output
Your Output
Video Tutorial
Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.
Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.
