{"id":19956,"date":"2020-03-17T06:20:18","date_gmt":"2020-03-17T06:20:18","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=19956"},"modified":"2020-03-17T07:15:50","modified_gmt":"2020-03-17T07:15:50","slug":"fallout-76-css-slugger-perk-card","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/fallout-76-css-slugger-perk-card\/","title":{"rendered":"FALLOUT 76 CSS SLUGGER PERK CARD"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Author:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>Jonno Witts<\/li><li>January 2, 2019<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Made with:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>HTML \/ CSS (SCSS) \/ JavaScript<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>About the code:<\/em><\/span><\/strong><\/h4>\n\n\n\n<p>This is an amazing CSS Flip Card which is a recreation of a Fallout 76 perk card. Lots of bits have been used to create this Card i.e.  conic gradient,   various CSS shapes using overlaps (the stars), Google Fonts, animations, gradients with stops, and all rems for easy resizing at different device sizes. <\/p>\n\n\n\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\n\n\n\n<p><strong><em>Responsive:<\/em><\/strong> Yes<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> conic-gradient.js<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/jonnowitts\/share\/zip\/YdYjmd\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n\n\n<a href=\"https:\/\/codepen.io\/jonnowitts\/pen\/YdYjmd\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Jonno Witts January 2, 2019 Made with: HTML \/ CSS (SCSS) \/ JavaScript About the code: This is an amazing CSS Flip Card which is a recreation of a Fallout 76 perk card. Lots of bits have been used to create this Card i.e. conic gradient, various CSS shapes using overlaps (the stars), Google Fonts, animations, gradients with stops, and all rems for easy resizing at different device sizes. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: conic-gradient.js<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":19957,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2150],"tags":[3808,20,2151,5680,266,353],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/19956"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=19956"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/19956\/revisions"}],"predecessor-version":[{"id":19958,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/19956\/revisions\/19958"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/19957"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=19956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=19956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=19956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}