{"id":276,"date":"2021-06-28T08:02:00","date_gmt":"2021-06-28T08:02:00","guid":{"rendered":"https:\/\/foolishdeveloper.com\/index.php\/2021\/06\/28\/pure-css-flip-card-on-hover-using-html-css\/"},"modified":"2023-01-07T08:17:26","modified_gmt":"2023-01-07T08:17:26","slug":"pure-css-flip-card-on-hover-using-html-css","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/pure-css-flip-card-on-hover-using-html-css\/","title":{"rendered":"Pure CSS Flip Card On Hover Using HTML &#038; CSS"},"content":{"rendered":"<style>\n  p{font-size:18.5px;<br \/>\n    color: #292828;<br \/>\n  font-family: sans-serif;<\/p>\n<p>    display: block;<br \/>\n    margin-block-start: 1em;<br \/>\n    margin-block-end: 1em;<br \/>\n    margin-inline-start: 0px;<br \/>\n    margin-inline-end: 0px;<br \/>\n    word-wrap: break-word;<\/p>\n<p>  line-height: 2em;}<\/p>\n<p>  h3,h2{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<br \/>\n    color:#333131;<br \/>\n    font-weight: 500;<\/p>\n<p>    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>.class p{<br \/>\n background:#edf0f2;<br \/>\n font-family: Consolas,Monaco,Lucida Console,monospace;<br \/>\n line-height: 1.65;<br \/>\n word-wrap: break-word;<br \/>\n border-radius: 5px;<br \/>\n color:#001d8f;<br \/>\n font-size:17.1px;<br \/>\n padding-left:10px;<br \/>\n white-space: pre-wrap;}<\/p>\n<p>    a.last-btn{<br \/>\n  padding:14px 25px;<br \/>\n    font-size:17px;<br \/>\n    background-color:#0e87f0;<br \/>\n    border-radius:6px;<br \/>\n    color:white;<br \/>\n    margin-left:35%;<\/p>\n<p>  }<\/p>\n<p>    @media only screen and (max-width: 400px) {<br \/>\n    a.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 300px) {<br \/>\n    a.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 600px) {<br \/>\n    a.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 800px) {<br \/>\n    a.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<\/p>\n<p>      @media only screen and (max-width: 400px) {<br \/>\n  .copyButton {<br \/>\n     width: 45%;<br \/>\n  }<\/p>\n<\/style>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/1.bp.blogspot.com\/-_doPEvHdQTM\/YOLSCTPTVUI\/AAAAAAAAA5o\/fndysEqY3Ngwc1oKOtEZRKjLUmCf1coawCLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525286%25252529.jpg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/1.bp.blogspot.com\/-_doPEvHdQTM\/YOLSCTPTVUI\/AAAAAAAAA5o\/fndysEqY3Ngwc1oKOtEZRKjLUmCf1coawCLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525286%25252529.jpg\"><\/a><\/div>\n<p style=\"text-align: left;\">Learn how to make a <b>flip card using Html and CSS<\/b> code. Flip Card is a great UI design that you can create with the help of <span style=\"color: #2b00fe;\">basic Html and CSS<\/span>. The flip card basically helps to add a lot of information to a card. You can add some information on the front and back of this card.&nbsp;<\/p>\n<p style=\"text-align: left;\">As a result, this type of flip card is used to add a lot of information in one place. When you click on this card or move the mouse, the backside of this card will appear in front. The structure I have created in this article is basically a <span style=\"color: #2b00fe;\">subscribe box <\/span>and in this case, information related to a YouTube channel has been added. Under normal circumstances, I used the background red color on the front of this card and a youtube logo image.&nbsp;<\/p>\n<p style=\"text-align: left;\">The back of this design can be seen when you hover the mouse over the card. On the backside, I added the profile image, name, some information about that youtube channel. I have added a subscribe button with all this information. Clicking on it will subscribe to the channel.<\/p>\n<p style=\"text-align: left;\">\n<p class=\"codepen\" data-default-tab=\"result\" data-height=\"508\" data-preview=\"true\" data-slug-hash=\"oNZdrPR\" data-theme-id=\"light\" data-user=\"fghty\" style=\"align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 508px; justify-content: center; margin: 1em 0px; padding: 1em; text-align: left;\"><span>See the Pen <a href=\"https:\/\/codepen.io\/fghty\/pen\/oNZdrPR\" target=\"_blank\" rel=\"noopener\"><br \/>\nFlip subscribe  Card<\/a> by Foolish Developer (<a href=\"https:\/\/codepen.io\/fghty\" target=\"_blank\" rel=\"noopener\">@fghty<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span><\/p>\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<div>\n<p style=\"text-align: left;\">In the following tutorial, I have shared complete information for making this design. I have shared with you the method of making this flip card with all the information step by step. I hope you can learn how to make a flip card by following the tutorial below.<\/p>\n<h3 style=\"font-size: 24px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 1:&nbsp;<\/span>&nbsp;Create the basic structure of the card<\/h3>\n<p style=\"text-align: left;\">First of all, I have used the basic HTML structure below which has been used to create the front and back sites of the card.<br \/>\nThe CSS code below has helped to design the front and backside of this card and add a variety of colors. On the front I used red and on the back I used white. <span style=\"background-color: #ffe3e3; color: #660000;\">Height: 13px<\/span> and <span style=\"background-color: #ffebeb; color: #990000;\">width: 26px<\/span> have been used for this card.<\/p>\n<\/div>\n<div class=\"class\">\n<p>&lt;!DOCTYPE html&gt;<br \/>\n&lt;html lang=&#8221;en&#8221;&gt;<br \/>\n&lt;head&gt;<br \/>\n&nbsp; &lt;meta charset=&#8221;UTF-8&#8243;&gt;<br \/>\n&nbsp; &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge&#8221;&gt;<br \/>\n&nbsp; &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<br \/>\n&nbsp; &lt;title&gt;Document&lt;\/title&gt;<br \/>\n&nbsp; &lt;style&gt;<br \/>\n&nbsp; &lt;\/style&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&nbsp; &lt;div class=&#8221;card-wrap&#8221;&gt;<br \/>\n&nbsp; &nbsp; &lt;div class=&#8221;card&#8221;&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&#8221;card-front&#8221;&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;!&#8211; Card Fonts &#8211;&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&#8221;card-back&#8221;&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;!&#8211; card Back &#8211;&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;<br \/>\n&nbsp; &nbsp; &lt;\/div&gt;<br \/>\n&nbsp; &nbsp; &lt;\/div&gt;<br \/>\n&nbsp;<br \/>\n&nbsp;&nbsp;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/p>\n<\/div>\n<div class=\"class\" style=\"text-align: left;\">\n<p>@import url(&#8216;https:\/\/fonts.googleapis.com\/css2?family=Cabin:wght@400;500;600;700&amp;display=swap&#8217;);<br \/>\n*{<br \/>\n&nbsp; &nbsp; box-sizing: border-box;<br \/>\n&nbsp; &nbsp; margin: 0;<br \/>\n&nbsp; &nbsp; padding: 0;<br \/>\n}<br \/>\nhtml{<br \/>\n&nbsp; &nbsp; height: 100vh;<br \/>\n&nbsp; &nbsp; justify-content: center;<br \/>\n&nbsp; &nbsp; font-family: &#8216;Cabin&#8217;, sans-serif;<br \/>\n&nbsp; &nbsp; background-image: linear-gradient(60deg, #66757F, #292F33);<br \/>\n&nbsp; &nbsp; display: flex;<br \/>\n&nbsp; &nbsp; align-items: center;<br \/>\n}<br \/>\n.card-wrap{<br \/>\n&nbsp;&nbsp; border-radius: 0.37rem;<br \/>\n&nbsp; &nbsp; perspective: 1000px;<br \/>\n&nbsp; &nbsp; height: 13.65rem;&nbsp; \/* Card Height *\/<br \/>\n&nbsp; &nbsp; width: 27.15rem;&nbsp; \/* card width *\/<br \/>\n}<br \/>\n.card{<br \/>\n&nbsp; &nbsp; height: inherit;<br \/>\n&nbsp; &nbsp; width: inherit;<br \/>\n&nbsp; &nbsp; position: relative;<br \/>\n&nbsp; &nbsp; transition: transform 1s;<br \/>\n&nbsp; &nbsp; transform-style: preserve-3d;&nbsp;<br \/>\n}<br \/>\n.card-front,.card-back{<br \/>\n&nbsp; &nbsp; width: inherit;<br \/>\n&nbsp; &nbsp; backface-visibility: hidden;<br \/>\n&nbsp; &nbsp; position: absolute;<br \/>\n&nbsp; &nbsp; height: inherit;<br \/>\n&nbsp; &nbsp; border-radius: 0.37rem;<br \/>\n}<br \/>\n.card-front{<br \/>\n&nbsp; &nbsp; background-color: #d30404; \/ * Card front background color *\/<br \/>\n&nbsp; &nbsp; display: flex;<br \/>\n&nbsp; &nbsp; align-items: center;<br \/>\n&nbsp; &nbsp; justify-content: center;<br \/>\n}<br \/>\n&nbsp;<br \/>\n.card-back{<br \/>\n&nbsp; &nbsp; background-color: #CCD6DD;<br \/>\n&nbsp; &nbsp; transform: rotateY(180deg);<br \/>\n}<\/p>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/1.bp.blogspot.com\/-khcbgDGNchg\/YOVV34IQ-XI\/AAAAAAAAA-o\/Cs3G7jKstZEgZfiE5Nub1I_i5K668GRUgCLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525281%25252529.jpg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/1.bp.blogspot.com\/-khcbgDGNchg\/YOVV34IQ-XI\/AAAAAAAAA-o\/Cs3G7jKstZEgZfiE5Nub1I_i5K668GRUgCLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525281%25252529.jpg\"><\/a><\/div>\n<p style=\"text-align: left;\">The hover effect is used in the card as I said before. When you click on this card you will see the back of this card. For this, I have used a small amount of CSS code below which means that when you click on the top of the card the card will <span style=\"background-color: #ffe8e8; color: #660000;\">rotate at a 180-degree angle<\/span>.<\/p>\n<div class=\"class\">\n<p style=\"text-align: left;\">.card-wrap:hover .card{<br \/>\n&nbsp; &nbsp; transform: rotateY(180deg);<br \/>\n}<\/p>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/1.bp.blogspot.com\/-4wezD1dqnU8\/YOVV-570LvI\/AAAAAAAAA-s\/1hNg1UHAlrEzb9EZ8L1R2mcJTM1qBeZ5QCLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525282%25252529.jpg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/1.bp.blogspot.com\/-4wezD1dqnU8\/YOVV-570LvI\/AAAAAAAAA-s\/1hNg1UHAlrEzb9EZ8L1R2mcJTM1qBeZ5QCLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525282%25252529.jpg\"><\/a><\/div>\n<h3 style=\"font-size: 24px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 2:<\/span>&nbsp;Add an image to the front of the card<\/h3>\n<p style=\"text-align: left;\">First of all, we have added the profile image on the front of this card i.e. YouTube logo with the help of our own HTML and CSS code.<\/p>\n<div class=\"class\">\n<p style=\"text-align: left;\">&nbsp;&lt;div class=&#8221;card-logo&#8221;&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;img src=&#8221;https:\/\/i.pinimg.com\/originals\/19\/7b\/36\/197b365922d1ea3aa1a932ff9bbda4a6.png&#8221;\/&gt;<br \/>\n&lt;\/div&gt;<\/p>\n<\/div>\n<div class=\"class\">\n<p style=\"text-align: left;\">.card-logo img{<br \/>\n&nbsp; width: 290px;<br \/>\n}<\/p>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/1.bp.blogspot.com\/-hruINHIKo0s\/YOVWGfSGYlI\/AAAAAAAAA-w\/6uuGbGQHaUkAh69g6NXYM8L9DfPX4s2ggCLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525287%25252529.jpg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/1.bp.blogspot.com\/-hruINHIKo0s\/YOVWGfSGYlI\/AAAAAAAAA-w\/6uuGbGQHaUkAh69g6NXYM8L9DfPX4s2ggCLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525287%25252529.jpg\"><\/a><\/div>\n<h3 style=\"font-size: 24px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 3:<\/span>&nbsp;Add a profile image to the back of the card<\/h3>\n<p style=\"text-align: left;\">\nAgain we will design the back of this card i.e. we will add all the information on the back. As I said before I added a profile image and some information on the back. The following HTML and CSS code helped to create and design the profile image.<\/p>\n<div style=\"text-align: left;\">\n<p style=\"text-align: left;\">&nbsp;Box-shadow has been used to make this profile image more interesting. I have used a border radius<span style=\"background-color: #ffeded; color: #990000;\">&nbsp;of 50%<\/span> in this case. The following HTML code helps to make the various information on the card and the subscribe button on the card to make this image completely round.<\/p>\n<div class=\"class\">\n<p style=\"text-align: left;\">&nbsp;&lt;div class=&#8221;user&#8221;&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&#8221;https:\/\/lh3.googleusercontent.com\/a-\/AOh14Gj99VObFyE8W_h8RrcwZO_aYiIHu5AAa_XpnOym=s600-k-no-rp-mo&#8221; alt=&#8221;user-profile-picture&#8221;&gt;<br \/>\n&lt;\/div&gt;<\/p>\n<\/div>\n<div class=\"class\">\n<p style=\"text-align: left;\">.card-back .user img{<br \/>\n&nbsp; &nbsp; width: 35%;<br \/>\n&nbsp; &nbsp; float: left;<br \/>\n&nbsp; &nbsp; border-radius: 50%;<br \/>\n&nbsp; &nbsp; margin: 1.6rem 1.1rem;<br \/>\n&nbsp; &nbsp; box-shadow: 3px 3px 10px #66757F;<br \/>\n}<\/p>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/1.bp.blogspot.com\/-YcTuZfIjAqI\/YOVWMtgQnOI\/AAAAAAAAA-4\/A_4RKyyoqfo2PfBIGd0_68Mfgh_Bq2kzACLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525283%25252529.jpg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/1.bp.blogspot.com\/-YcTuZfIjAqI\/YOVWMtgQnOI\/AAAAAAAAA-4\/A_4RKyyoqfo2PfBIGd0_68Mfgh_Bq2kzACLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525283%25252529.jpg\"><\/a><\/div>\n<h3 style=\"font-size: 24px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 4:&nbsp;<\/span>Add profile information and buttons<span><!--more--><\/span><\/h3>\n<p style=\"text-align: left;\">We will use its CSS code to design the information and subscribe button added above. For the background of the button, I used the&nbsp;<span style=\"background-color: #fff2f2;\"><span style=\"color: #990000;\">color: white<\/span><\/span>. Added a hover to change the background color when you click on it.<\/p>\n<div class=\"class\">\n<p style=\"text-align: left;\">&nbsp; &lt;div class=&#8221;user-info&#8221;&gt;<br \/>\n&nbsp; &nbsp; &nbsp;&lt;div class=&#8221;username&#8221;&gt;Foolish Developer&lt;\/div&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&#8221;user-bio&#8221;&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Hello world!&lt;br&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Foolish Developer is a Youtube Channel where you can find tutorials on web design&lt;br&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br \/>\n&nbsp; &nbsp; &nbsp;&lt;\/div&gt;<br \/>\n&nbsp; &nbsp; &lt;button class=&#8221;follow-btn&#8221; onclick=&#8221;window.location.href=&#8217;https:#'&#8221;&gt;Subscribe&lt;\/button&gt;<br \/>\n&nbsp;&lt;\/div&gt;<\/p>\n<\/div>\n<div class=\"class\">\n<p style=\"text-align: left;\">.user-info{<br \/>\n&nbsp; &nbsp; height: inherit;<br \/>\n&nbsp; &nbsp; display: flex;<br \/>\n&nbsp; &nbsp; flex-direction: column;<br \/>\n&nbsp; &nbsp; text-align: center;<br \/>\n&nbsp; &nbsp; color: #292F33;<br \/>\n&nbsp; &nbsp; padding: 1.6rem 1.1rem;<br \/>\n}<br \/>\n.user-info .username{<br \/>\n&nbsp; &nbsp; font-size: 1.5rem; \/ * Card back-side name font size *\/<br \/>\n&nbsp; &nbsp; font-weight: 600;<br \/>\n&nbsp; &nbsp; color: rgb(2, 68, 99); \/* Text color *\/<br \/>\n}<br \/>\n.user-info .user-bio{<br \/>\n&nbsp; &nbsp; font-size: 1rem;<br \/>\n&nbsp; &nbsp; margin: 1.1rem 0;<br \/>\n}<br \/>\n.follow-btn{<br \/>\n&nbsp; &nbsp; padding: 0.5rem;<br \/>\n&nbsp; &nbsp; width: 9rem;&nbsp; \/* Button Size *\/<br \/>\n&nbsp; &nbsp; color: #E1E8ED;<br \/>\n&nbsp; &nbsp; background-color: #ce0505; \/* button background color *\/<br \/>\n&nbsp; &nbsp; border: 0;<br \/>\n&nbsp; &nbsp; font-weight: bold;<br \/>\n&nbsp; &nbsp; font-size: 1rem;<br \/>\n&nbsp; &nbsp; letter-spacing: 0.0625rem;<br \/>\n&nbsp; &nbsp; border-radius: 0.27rem;<br \/>\n&nbsp; &nbsp; margin: 0 auto;<br \/>\n}<br \/>\n.follow-btn:hover{<br \/>\n&nbsp; &nbsp; cursor: pointer;<br \/>\n&nbsp; &nbsp; background-color: #ff0d41; \/* Button hover color *\/<br \/>\n&nbsp; &nbsp; color: white;<br \/>\n}<\/p>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/1.bp.blogspot.com\/-xlgI1p4bMAQ\/YOVWUIlAveI\/AAAAAAAAA_A\/5oN-VYz_coMQ7ghdJxFjVjHgfYDuwgmxwCLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525284%25252529.jpg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/1.bp.blogspot.com\/-xlgI1p4bMAQ\/YOVWUIlAveI\/AAAAAAAAA_A\/5oN-VYz_coMQ7ghdJxFjVjHgfYDuwgmxwCLcBGAsYHQ\/s0\/Screenshot%25252B%252525281767%25252529%25252B%252525284%25252529.jpg\"><\/a><\/div>\n<p style=\"text-align: left;\">\nI hope you have learned from this tutorial <b>how I created this 3D flip card using HTML and CSS<\/b> programming code.<\/p>\n<\/div>\n<p><a class=\"last-btn\" href=\"https:\/\/drive.google.com\/uc?export=download&amp;id=1vPem0DFxZT_iHR60r0XGWE9LS3onc-zE\" target=\"_blank\" rel=\"noopener\"> Download Code <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to make a flip card using Html and CSS code. Flip Card is a great UI design that you can create with the help of basic Html and CSS. The flip card basically helps to add a lot of information to a card. You can add some information on the front and back [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1271,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[23,12,89,14],"tags":[],"class_list":["post-276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-css","category-flip_card","category-html","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=276"}],"version-history":[{"count":1,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/276\/revisions"}],"predecessor-version":[{"id":1272,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/276\/revisions\/1272"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/1271"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}