Pokemon badges in HTML/CSS

Developer
Size
12,166 Kb
Views
30,360

How do I make an pokemon badges in html/css?

What is a pokemon badges in html/css? How do you make a pokemon badges in html/css? This script and codes were developed by Kevin Jannis on 25 August 2022, Thursday.

Pokemon badges in HTML/CSS Previews

Pokemon badges in HTML/CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pokemon badges in HTML/CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <div class="row"> <div id="boulder-badge"> <div class="badge"> <div class="part part-1"></div> <div class="part part-2"></div> <div class="part part-3"></div> <div class="part part-4"></div> <div class="part part-shade"></div> </div> <h1>Boulder badge</h1> </div> <div id="cascade-badge"> <div class="badge"> <div class="part part-1"></div> <div class="part part-2"></div> <div class="part part-3"></div> <div class="part part-4"></div> <div class="part part-5"></div> <div class="part part-6"></div> <div class="part part-7"></div> <div class="part part-8"></div> </div> <h1>Cascade badge</h1> </div> <div id="thunder-badge"> <div class="badge"> <div class="part part-1"></div> <div class="part part-2"></div> <div class="part part-3"></div> <div class="part part-4"></div> <div class="part part-shade"></div> </div> <h1>Thunder badge</h1> </div> <div id="rainbow-badge"> <div class="badge"> <div class="part-leaf part-1"></div> <div class="part-leaf part-2"></div> <div class="part-leaf part-3"></div> <div class="part-leaf part-4"></div> <div class="part-leaf part-5"></div> <div class="part-leaf part-6"></div> <div class="part-leaf part-7"></div> <div class="part-leaf part-8"></div> <div class="part-inner part-1"></div> <div class="part-inner part-2"></div> <div class="part-inner part-3"></div> <div class="part-inner part-4"></div> </div> <h1>Rainbow badge</h1> </div> </div> <div class="row"> <div id="soul-badge"> <div class="badge"> <div class="part part-1"></div> <div class="part part-2"></div> <div class="part part-3"></div> <div class="part part-4"></div> <div class="part part-5"></div> <div class="part part-6"></div> <div class="part part-7"></div> <div class="part part-8"></div> <div class="part part-9"></div> <div class="part part-10"></div> <div class="part part-shade"></div> </div> <h1>Soul badge</h1> </div> <div id="marsh-badge"> <div class="badge"> <div class="inner"></div> </div> <h1>Marsh badge</h1> </div> <div id="volcano-badge"> <div class="badge"> <div class="part-outer part-1"></div> <div class="part-outer part-2"></div> <div class="part-outer part-3"></div> <div class="part-outer part-4"></div> <div class="part-outer part-5"></div> <div class="part-outer part-6"></div> <div class="part-outer part-7"></div> <div class="part-outer part-8"></div> <div class="part-outer part-9"></div> <div class="part-outer part-10"></div> <div class="part-inner part-1"></div> <div class="part-inner part-2"></div> <div class="part-inner part-3"></div> <div class="part-inner part-4"></div> <div class="part-inner part-5"></div> <div class="part-inner part-6"></div> <div class="part-inner part-7"></div> <div class="part-inner part-8"></div> <div class="part-inner part-9"></div> <div class="part-inner part-10"></div> </div> <h1>Volcano badge</h1> </div> <div id="earth-badge"> <div class="badge"> <div class="part-leaf part-top"></div> <div class="part-leaf part-1"></div> <div class="part-leaf part-2"></div> <div class="part-leaf part-3"></div> <div class="part-leaf part-4"></div> <div class="part-leaf part-5"></div> <div class="part-leaf part-6"></div> <div class="part-center part-handle"></div> <div class="part-center part-1-left"></div> <div class="part-center part-1-right"></div> <div class="part-center part-2-left"></div> <div class="part-center part-2-right"></div> <div class="part-center part-3-left"></div> <div class="part-center part-3-right"></div> <div class="part-center part-4"></div> </div> <h1>Earth badge</h1> </div> </div> <script src="js/index.js"></script>
</body>
</html>

Pokemon badges in HTML/CSS - Script Codes CSS Codes

@import "http://fonts.googleapis.com/css?family=Lato";
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;
}
*:before,
*:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
}
body { padding: 25px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; background: #454545;
}
#wrapper { display: table; table-layout: fixed; width: 960px; height: 560px; margin: 40px auto;
}
#boulder-badge,
#cascade-badge,
#thunder-badge,
#rainbow-badge,
#soul-badge,
#marsh-badge,
#volcano-badge,
#earth-badge { display: table-cell; vertical-align: bottom; text-align: center; width: 240px; height: 240px; padding: 20px;
}
#boulder-badge .badge,
#cascade-badge .badge,
#thunder-badge .badge,
#rainbow-badge .badge,
#soul-badge .badge,
#marsh-badge .badge,
#volcano-badge .badge,
#earth-badge .badge { display: inline-block;
}
#boulder-badge h1,
#cascade-badge h1,
#thunder-badge h1,
#rainbow-badge h1,
#soul-badge h1,
#marsh-badge h1,
#volcano-badge h1,
#earth-badge h1 { font-family: Lato, sans-serif; font-size: 1em; text-transform: uppercase; color: white; margin-top: 30px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
#boulder-badge { background: #2d3e50;
}
#boulder-badge .badge { position: relative; width: 180px; height: 180px;
}
#boulder-badge .badge .part,
#boulder-badge .badge .part:before,
#boulder-badge .badge .part:after { position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#boulder-badge .badge .part { -webkit-transform-origin: center center 0; -moz-transform-origin: center center 0; -ms-transform-origin: center center 0; -o-transform-origin: center center 0; transform-origin: center center 0; top: 0; left: 50%; margin-left: -38px; border-width: 90px 38px 90px 38px;
}
#boulder-badge .badge .part:before { -webkit-transform: rotate(0.01deg); -moz-transform: rotate(0.01deg); -ms-transform: rotate(0.01deg); -o-transform: rotate(0.01deg); transform: rotate(0.01deg); /* Jagged edge fix */ content: " "; top: 50%; left: 50%; margin-top: -60px; margin-left: -26px; border-width: 60px 26px 60px 26px; z-index: 10;
}
#boulder-badge .badge .part:after { -webkit-transform: rotate(0.01deg); -moz-transform: rotate(0.01deg); -ms-transform: rotate(0.01deg); -o-transform: rotate(0.01deg); transform: rotate(0.01deg); content: " "; top: 50%; left: 50%; margin-top: -39px; margin-left: -17px; border-width: 39px 17px 39px 17px; z-index: 20;
}
#boulder-badge .badge .part-1 { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); border-top-color: #9f9d9e; border-bottom-color: #646263; z-index: 50;
}
#boulder-badge .badge .part-1:before { border-top-color: #878586; border-bottom-color: #595556;
}
#boulder-badge .badge .part-1:after { border-top-color: #8d8d8d; border-bottom-color: #7f7f7f;
}
#boulder-badge .badge .part-2 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-top-color: #858182; border-bottom-color: #898788; z-index: 40;
}
#boulder-badge .badge .part-2:before { border-top-color: #706e6f; border-bottom-color: #777576;
}
#boulder-badge .badge .part-2:after { border-top-color: #8d8d8d; border-bottom-color: #8d8d8d;
}
#boulder-badge .badge .part-3 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); border-top-color: #676364; border-bottom-color: #979596; z-index: 30;
}
#boulder-badge .badge .part-3:before { border-top-color: #595556; border-bottom-color: #838182;
}
#boulder-badge .badge .part-3:after { border-top-color: #7f7f7f; border-bottom-color: #8d8d8d;
}
#boulder-badge .badge .part-4 { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); border-top-color: #615d5e; border-bottom-color: #a5a3a4; z-index: 20;
}
#boulder-badge .badge .part-4:before { border-top-color: #535152; border-bottom-color: #878586;
}
#boulder-badge .badge .part-4:after { border-top-color: #7f7f7f; border-bottom-color: #8d8d8d;
}
#boulder-badge .badge .part-shade { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); margin-top: 13px; margin-left: -6px; border-left-width: 0; border-top-color: #767475; border-bottom-color: #7b797a; z-index: 100;
}
#boulder-badge .badge .part-shade:before { margin-left: 0; border-left-width: 0; border-top-color: #656364; border-bottom-color: #6b696a;
}
#boulder-badge .badge .part-shade:after { margin-left: 0; border-left-width: 0; border-top-color: #7f7f7f; border-bottom-color: #7f7f7f;
}
#cascade-badge { background: #474749;
}
#cascade-badge .badge { position: relative; width: 145px; height: 200px;
}
#cascade-badge .badge .part { position: absolute; top: 0; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#cascade-badge .badge .part-1,
#cascade-badge .badge .part-2,
#cascade-badge .badge .part-3,
#cascade-badge .badge .part-4 { left: 50%;
}
#cascade-badge .badge .part-5,
#cascade-badge .badge .part-6,
#cascade-badge .badge .part-7,
#cascade-badge .badge .part-8 { right: 50%;
}
#cascade-badge .badge .part-1 { border-width: 60px 0 40px 37px; border-left-color: #39a8d5;
}
#cascade-badge .badge .part-2 { -webkit-transform: rotate(13deg); -moz-transform: rotate(13deg); -ms-transform: rotate(13deg); -o-transform: rotate(13deg); transform: rotate(13deg); top: 61px; margin-left: 4px; border-width: 0 48px 48px 27px; border-bottom-color: #25a2d2;
}
#cascade-badge .badge .part-3 { -webkit-transform: rotate(13deg); -moz-transform: rotate(13deg); -ms-transform: rotate(13deg); -o-transform: rotate(13deg); transform: rotate(13deg); top: 107px; margin-left: -9px; border-width: 63px 7px 0 69px; border-top-color: #0d9bcd;
}
#cascade-badge .badge .part-4 { top: 100px; border-width: 75px 0 24px 52px; border-left-color: #0697c9;
}
#cascade-badge .badge .part-5 { top: 100px; border-width: 75px 52px 24px 0; border-right-color: #25a2d2;
}
#cascade-badge .badge .part-6 { -webkit-transform: rotate(-13deg); -moz-transform: rotate(-13deg); -ms-transform: rotate(-13deg); -o-transform: rotate(-13deg); transform: rotate(-13deg); top: 107px; margin-right: -9px; border-width: 63px 69px 0 7px; border-top-color: #45acd9;
}
#cascade-badge .badge .part-7 { -webkit-transform: rotate(-13deg); -moz-transform: rotate(-13deg); -ms-transform: rotate(-13deg); -o-transform: rotate(-13deg); transform: rotate(-13deg); top: 61px; margin-right: 4px; border-width: 0 27px 48px 48px; border-bottom-color: #55b0dd;
}
#cascade-badge .badge .part-8 { border-width: 60px 37px 40px 0; border-right-color: #5db4df;
}
#thunder-badge { background: #525c65;
}
#thunder-badge .badge { position: relative; width: 0; height: 0; border-style: solid; border-width: 68px; border-color: #eac830 #ebae2c #ebae2c #eac830; margin-bottom: 27px;
}
#thunder-badge .badge:before, #thunder-badge .badge:after { -webkit-transform-origin: center right 0; -moz-transform-origin: center right 0; -ms-transform-origin: center right 0; -o-transform-origin: center right 0; transform-origin: center right 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); content: " "; position: absolute; top: -68px; left: -68px; width: 68px; height: 136px; background: #eac830; z-index: 10;
}
#thunder-badge .badge:after { -webkit-transform-origin: center left 0; -moz-transform-origin: center left 0; -ms-transform-origin: center left 0; -o-transform-origin: center left 0; transform-origin: center left 0; left: 0; background: #ebae2c;
}
#thunder-badge .badge .part,
#thunder-badge .badge .part:before { position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#thunder-badge .badge .part { -webkit-transform-origin: center center 0; -moz-transform-origin: center center 0; -ms-transform-origin: center center 0; -o-transform-origin: center center 0; transform-origin: center center 0; top: -60px; left: 50%; margin-left: -25px; border-width: 60px 25px 60px 25px; z-index: 20;
}
#thunder-badge .badge .part:before { -webkit-transform: rotate(0.01deg); -moz-transform: rotate(0.01deg); -ms-transform: rotate(0.01deg); -o-transform: rotate(0.01deg); transform: rotate(0.01deg); /* Jagged edge fix */ content: " "; top: 50%; left: 50%; margin-top: -40px; margin-left: -17px; border-width: 40px 17px 40px 17px; border-top-color: #e64d2d; border-bottom-color: #e64d2d; z-index: 30;
}
#thunder-badge .badge .part-1 { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); border-top-color: #da492c; border-bottom-color: #ac3518; z-index: 50;
}
#thunder-badge .badge .part-2 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-top-color: #b33921; border-bottom-color: #be3e25; z-index: 40;
}
#thunder-badge .badge .part-3 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); border-top-color: #ac3518; border-bottom-color: #d2452a; z-index: 30;
}
#thunder-badge .badge .part-4 { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); border-top-color: #a63016; border-bottom-color: #da492c; z-index: 20;
}
#thunder-badge .badge .part-shade { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); margin-top: 9px; margin-left: -4px; border-left-width: 0; border-top-color: #bf3b1f; border-bottom-color: #c93f22; z-index: 100;
}
#thunder-badge .badge .part-shade:before { margin-left: 0; border-left-width: 0; border-top-color: #e64d2d; border-bottom-color: #e64d2d;
}
#rainbow-badge { background: #474749;
}
#rainbow-badge .badge { position: relative; height: 180px; width: 180px;
}
#rainbow-badge .badge:before { content: " "; position: absolute; background: #bdb6b4; width: 0; height: 0; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; border-style: solid; border-width: 16px; border-color: #c6bebc #beb6b4 #beb6b4 #c6bebc; z-index: 50;
}
#rainbow-badge .badge .part-leaf { -webkit-transform-origin: center bottom 0; -moz-transform-origin: center bottom 0; -ms-transform-origin: center bottom 0; -o-transform-origin: center bottom 0; transform-origin: center bottom 0; position: absolute; top: 0; left: 50%; height: 90px; width: 0; margin-left: -13px; border-style: solid; border-color: transparent; border-color: transparent; border-width: 0 13px 0 13px; z-index: 10;
}
#rainbow-badge .badge .part-leaf:before, #rainbow-badge .badge .part-leaf:after { content: " "; position: absolute; top: -1px; border-style: solid; border-color: transparent; border-color: transparent;
}
#rainbow-badge .badge .part-leaf:before { right: 12px; border-width: 23px 17px 40px 0;
}
#rainbow-badge .badge .part-leaf:after { left: 12px; border-width: 23px 0 40px 17px;
}
#rainbow-badge .badge .part-leaf.part-1 { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); border-left-color: #e2004b; border-right-color: #d60048;
}
#rainbow-badge .badge .part-leaf.part-1:before { border-right-color: #e2004b;
}
#rainbow-badge .badge .part-leaf.part-1:after { border-left-color: #d60048;
}
#rainbow-badge .badge .part-leaf.part-2 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-left-color: #e64d2d; border-right-color: #d2452a;
}
#rainbow-badge .badge .part-leaf.part-2:before { border-right-color: #e64d2d;
}
#rainbow-badge .badge .part-leaf.part-2:after { border-left-color: #d2452a;
}
#rainbow-badge .badge .part-leaf.part-3 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); border-left-color: #e0bd2d; border-right-color: #d4b42b;
}
#rainbow-badge .badge .part-leaf.part-3:before { border-right-color: #e0bd2d;
}
#rainbow-badge .badge .part-leaf.part-3:after { border-left-color: #d4b42b;
}
#rainbow-badge .badge .part-leaf.part-4 { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); border-left-color: #4e9f5e; border-right-color: #54b36a;
}
#rainbow-badge .badge .part-leaf.part-4:before { border-right-color: #4e9f5e;
}
#rainbow-badge .badge .part-leaf.part-4:after { border-left-color: #54b36a;
}
#rainbow-badge .badge .part-leaf.part-5 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); border-left-color: #399f57; border-right-color: #3eaa5e;
}
#rainbow-badge .badge .part-leaf.part-5:before { border-right-color: #399f57;
}
#rainbow-badge .badge .part-leaf.part-5:after { border-left-color: #3eaa5e;
}
#rainbow-badge .badge .part-leaf.part-6 { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); border-left-color: #67a3c7; border-right-color: #6eb3de;
}
#rainbow-badge .badge .part-leaf.part-6:before { border-right-color: #67a3c7;
}
#rainbow-badge .badge .part-leaf.part-6:after { border-left-color: #6eb3de;
}
#rainbow-badge .badge .part-leaf.part-7 { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); border-left-color: #486ba7; border-right-color: #4d70b3;
}
#rainbow-badge .badge .part-leaf.part-7:before { border-right-color: #486ba7;
}
#rainbow-badge .badge .part-leaf.part-7:after { border-left-color: #4d70b3;
}
#rainbow-badge .badge .part-leaf.part-8 { -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); border-left-color: #9455a2; border-right-color: #8b4f9b;
}
#rainbow-badge .badge .part-leaf.part-8:before { border-right-color: #9455a2;
}
#rainbow-badge .badge .part-leaf.part-8:after { border-left-color: #8b4f9b;
}
#rainbow-badge .badge .part-inner { -webkit-transform-origin: center bottom 0; -moz-transform-origin: center bottom 0; -ms-transform-origin: center bottom 0; -o-transform-origin: center bottom 0; transform-origin: center bottom 0; position: absolute; top: 50%; left: 50%; height: 35px; width: 0; margin-left: -14px; margin-top: -35px; border-style: solid; border-color: transparent; border-color: transparent; border-width: 0 14px 0 14px; z-index: 20;
}
#rainbow-badge .badge .part-inner:before, #rainbow-badge .badge .part-inner:after { content: " "; position: absolute; top: -1px; border-style: solid; border-color: transparent; border-color: transparent;
}
#rainbow-badge .badge .part-inner:before { right: 13px; border-width: 16px 10px 10px 0;
}
#rainbow-badge .badge .part-inner:after { left: 13px; border-width: 16px 0 10px 10px;
}
#rainbow-badge .badge .part-inner.part-1 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-left-color: #e4d3cf; border-right-color: #d9c8c4;
}
#rainbow-badge .badge .part-inner.part-1:before { border-right-color: #e4d3cf;
}
#rainbow-badge .badge .part-inner.part-1:after { border-left-color: #d9c8c4;
}
#rainbow-badge .badge .part-inner.part-2 { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); border-left-color: #cfbeb8; border-right-color: #cfbeb8;
}
#rainbow-badge .badge .part-inner.part-2:before { border-right-color: #cfbeb8;
}
#rainbow-badge .badge .part-inner.part-2:after { border-left-color: #cfbeb8;
}
#rainbow-badge .badge .part-inner.part-3 { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); border-left-color: #e6d4d3; border-right-color: #efe2db;
}
#rainbow-badge .badge .part-inner.part-3:before { border-right-color: #e6d4d3;
}
#rainbow-badge .badge .part-inner.part-3:after { border-left-color: #efe2db;
}
#rainbow-badge .badge .part-inner.part-4 { -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); border-left-color: #fbeee7; border-right-color: #fbeee7;
}
#rainbow-badge .badge .part-inner.part-4:before { border-right-color: #fbeee7;
}
#rainbow-badge .badge .part-inner.part-4:after { border-left-color: #fbeee7;
}
#soul-badge { background: #2d3e50;
}
#soul-badge .badge { position: relative; height: 180px; width: 180px;
}
#soul-badge .badge .part { position: absolute; top: 0; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: transparent;
}
#soul-badge .badge .part-1 { -webkit-transform: rotate(-62deg); -moz-transform: rotate(-62deg); -ms-transform: rotate(-62deg); -o-transform: rotate(-62deg); transform: rotate(-62deg); left: 50%; margin-top: 31px; margin-left: -36px; border-width: 0 41px 27px 50px; border-bottom-color: #c370a4;
}
#soul-badge .badge .part-2 { -webkit-transform: rotate(-119deg); -moz-transform: rotate(-119deg); -ms-transform: rotate(-119deg); -o-transform: rotate(-119deg); transform: rotate(-119deg); right: 50%; margin-top: 31px; margin-right: -36px; border-width: 27px 41px 0 50px; border-top-color: #c370a4;
}
#soul-badge .badge .part-3 { -webkit-transform: rotate(-27deg); -moz-transform: rotate(-27deg); -ms-transform: rotate(-27deg); -o-transform: rotate(-27deg); transform: rotate(-27deg); left: 50%; margin-top: 20px; margin-left: -18px; border-width: 0 23px 53px 75px; border-bottom-color: #b86c9d;
}
#soul-badge .badge .part-4 { -webkit-transform: rotate(-154deg); -moz-transform: rotate(-154deg); -ms-transform: rotate(-154deg); -o-transform: rotate(-154deg); transform: rotate(-154deg); right: 50%; margin-top: 20px; margin-right: -18px; border-width: 53px 23px 0 75px; border-top-color: #cb76af;
}
#soul-badge .badge .part-5 { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); left: 50%; margin-top: 44px; border-width: 0 6px 51px 84px; border-bottom-color: #aa6091;
}
#soul-badge .badge .part-6 { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); right: 50%; margin-top: 44px; border-width: 0 84px 51px 6px; border-bottom-color: #c370a4;
}
#soul-badge .badge .part-7 { -webkit-transform: rotate(51deg); -moz-transform: rotate(51deg); -ms-transform: rotate(51deg); -o-transform: rotate(51deg); transform: rotate(51deg); left: 50%; margin-left: 10px; margin-top: 65px; border-width: 0 7px 63px 63px; border-bottom-color: #995681;
}
#soul-badge .badge .part-8 { -webkit-transform: rotate(-51deg); -moz-transform: rotate(-51deg); -ms-transform: rotate(-51deg); -o-transform: rotate(-51deg); transform: rotate(-51deg); right: 50%; margin-right: 10px; margin-top: 65px; border-width: 0 63px 63px 7px; border-bottom-color: #b86c9d;
}
#soul-badge .badge .part-9 { top: 50%; left: 50%; border-width: 52px 0 45px 44px; border-left-color: #874d73;
}
#soul-badge .badge .part-10 { top: 50%; right: 50%; border-width: 52px 44px 45px 0; border-right-color: #b26695;
}
#soul-badge .badge .part-shade { position: absolute; top: 50%; left: 50%; margin-top: 4px; margin-left: -3px; width: 6px; height: 89px; background: #4e3145; z-index: 20;
}
#soul-badge .badge .part-shade:before, #soul-badge .badge .part-shade:after { content: " "; position: absolute; left: -3px; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: transparent;
}
#soul-badge .badge .part-shade:before { top: -7px; border-width: 0 3px 4px 3px; border-bottom-color: #4e3145;
}
#soul-badge .badge .part-shade:after { bottom: -7px; border-width: 4px 3px 0 3px; border-top-color: #4e3145;
}
#marsh-badge { background: #2d3e50;
}
#marsh-badge .badge { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: relative; width: 180px; height: 180px; background: #f0c514; overflow: hidden;
}
#marsh-badge .badge:before, #marsh-badge .badge:after { -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); content: " "; position: absolute; top: 0; left: 0; height: 180px; width: 180px; background: #eeb412;
}
#marsh-badge .badge:before { margin-left: 70px;
}
#marsh-badge .badge:after { margin-top: 150px;
}
#marsh-badge .badge .inner { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; top: 25px; left: 25px; right: 25px; bottom: 25px; background: #f0c514; border: solid 6px #f59d1f; overflow: hidden; z-index: 10;
}
#marsh-badge .badge .inner:before { -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); content: " "; position: absolute; top: 0; left: 0; height: 180px; width: 180px; background: #eeb412; margin: 40px 0 0 10px;
}
#volcano-badge { background: #474749;
}
#volcano-badge .badge { position: relative; width: 165px; height: 190px;
}
#volcano-badge .badge .part-outer { position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#volcano-badge .badge .part-outer.part-1 { top: 0; left: 50%; border-width: 51px 0 37px 39px; border-left-color: #e01544; z-index: 2;
}
#volcano-badge .badge .part-outer.part-2 { top: 0; right: 50%; border-width: 51px 39px 37px 0; border-right-color: #e01544; z-index: 2;
}
#volcano-badge .badge .part-outer.part-3 { -webkit-transform: rotate(34deg); -moz-transform: rotate(34deg); -ms-transform: rotate(34deg); -o-transform: rotate(34deg); transform: rotate(34deg); top: 0; left: 50%; height: 70px; border-width: 25px 0 18px 48px; border-left-color: #d61240; margin: 44px 0 0 30px;
}
#volcano-badge .badge .part-outer.part-3:before, #volcano-badge .badge .part-outer.part-3:after { content: " "; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#volcano-badge .badge .part-outer.part-3:before { height: 50px; border-width: 12px 7px 0 0; border-right-color: #d61240; margin: -16px 0 0 -52px;
}
#volcano-badge .badge .part-outer.part-3:after { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); width: 20px; height: 60px; border: none; background: #d61240; margin: -6px 0 0 -68px;
}
#volcano-badge .badge .part-outer.part-4 { -webkit-transform: rotate(-34deg); -moz-transform: rotate(-34deg); -ms-transform: rotate(-34deg); -o-transform: rotate(-34deg); transform: rotate(-34deg); top: 0; right: 50%; height: 70px; border-width: 25px 48px 18px 0; border-right-color: #ec1747; margin: 45px 30px 0 0;
}
#volcano-badge .badge .part-outer.part-4:before, #volcano-badge .badge .part-outer.part-4:after { content: " "; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#volcano-badge .badge .part-outer.part-4:before { height: 50px; border-width: 12px 0 0 7px; border-left-color: #ec1747; margin: -14px 0 0 47px;
}
#volcano-badge .badge .part-outer.part-4:after { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); width: 20px; height: 60px; border: none; background: #ec1747; margin: -6px 0 0 45px;
}
#volcano-badge .badge .part-outer.part-5 { -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg); top: 0; left: 50%; margin: 95px 0 0 -4px; border-width: 0 17px 13px 68px; border-bottom-color: #af0931; z-index: 2;
}
#volcano-badge .badge .part-outer.part-6 { -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg); top: 0; right: 50%; margin: 95px -4px 0 0; border-width: 0 68px 13px 17px; border-bottom-color: #d61240; z-index: 2;
}
#volcano-badge .badge .part-outer.part-7 { -webkit-transform: rotate(49deg); -moz-transform: rotate(49deg); -ms-transform: rotate(49deg); -o-transform: rotate(49deg); transform: rotate(49deg); top: 0; left: 50%; margin: 102px 0 0 0; border-width: 0 24px 31px 70px; border-bottom-color: #af0931; z-index: 2;
}
#volcano-badge .badge .part-outer.part-8 { -webkit-transform: rotate(-49deg); -moz-transform: rotate(-49deg); -ms-transform: rotate(-49deg); -o-transform: rotate(-49deg); transform: rotate(-49deg); top: 0; right: 50%; margin: 102px 0 0 0; border-width: 0 70px 31px 24px; border-bottom-color: #d61240; z-index: 2;
}
#volcano-badge .badge .part-outer.part-9 { top: 88px; left: 50%; border-width: 73px 0 38px 67px; border-left-color: #9d0329; z-index: 2;
}
#volcano-badge .badge .part-outer.part-10 { top: 88px; right: 50%; border-width: 73px 67px 38px 0; border-right-color: #cd123d; z-index: 2;
}
#volcano-badge .badge .part-inner { position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0); z-index: 5;
}
#volcano-badge .badge .part-inner.part-1 { top: 60px; left: 50%; border-width: 24px 0 18px 17px; border-left-color: #e6bc12; z-index: 10;
}
#volcano-badge .badge .part-inner.part-2 { top: 60px; right: 50%; border-width: 24px 17px 18px 0; border-right-color: #e6bc12; z-index: 10;
}
#volcano-badge .badge .part-inner.part-3 { -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); top: 0; left: 50%; height: 35px; border-width: 12px 0 9px 22px; border-left-color: #d9b312; margin: 79px 0 0 13px; z-index: 5;
}
#volcano-badge .badge .part-inner.part-3:before, #volcano-badge .badge .part-inner.part-3:after { content: " "; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#volcano-badge .badge .part-inner.part-3:before { height: 32px; border-width: 6px 4px 0 0; border-right-color: #d9b312; margin: -6px 0 0 -25px;
}
#volcano-badge .badge .part-inner.part-3:after { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); width: 10px; height: 30px; border: none; background: #d9b312; margin: 2px 0 0 -28px;
}
#volcano-badge .badge .part-inner.part-4 { -webkit-transform: rotate(-37deg); -moz-transform: rotate(-37deg); -ms-transform: rotate(-37deg); -o-transform: rotate(-37deg); transform: rotate(-37deg); top: 0; right: 50%; height: 35px; border-width: 12px 22px 9px 0; border-right-color: #f0c514; margin: 78px 13px 0 0;
}
#volcano-badge .badge .part-inner.part-4:before { content: " "; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#volcano-badge .badge .part-inner.part-4:before { height: 32px; border-width: 12px 0 0 7px; border-left-color: #f0c514; margin: -7px 0 0 21px;
}
#volcano-badge .badge .part-inner.part-5 { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -ms-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg); top: 0; left: 50%; margin: 102px 0 0 -4px; border-width: 0 7px 6px 34px; border-bottom-color: #b2910e; z-index: 10;
}
#volcano-badge .badge .part-inner.part-6 { -webkit-transform: rotate(-18deg); -moz-transform: rotate(-18deg); -ms-transform: rotate(-18deg); -o-transform: rotate(-18deg); transform: rotate(-18deg); top: 0; right: 50%; margin: 102px -4px 0 0; border-width: 0 34px 6px 7px; border-bottom-color: #d9b312; z-index: 10;
}
#volcano-badge .badge .part-inner.part-7 { -webkit-transform: rotate(43deg); -moz-transform: rotate(43deg); -ms-transform: rotate(43deg); -o-transform: rotate(43deg); transform: rotate(43deg); top: 0; left: 50%; margin: 102px 0 0 -1px; border-width: 0 7px 16px 34px; border-bottom-color: #b2910e; z-index: 10;
}
#volcano-badge .badge .part-inner.part-8 { -webkit-transform: rotate(-43deg); -moz-transform: rotate(-43deg); -ms-transform: rotate(-43deg); -o-transform: rotate(-43deg); transform: rotate(-43deg); top: 0; right: 50%; margin: 102px -1px 0 0; border-width: 0 34px 16px 7px; border-bottom-color: #d9b312; z-index: 10;
}
#volcano-badge .badge .part-inner.part-9 { top: 102px; left: 50%; border-width: 28px 0 16px 30px; border-left-color: #9e8006; z-index: 10;
}
#volcano-badge .badge .part-inner.part-10 { top: 102px; right: 50%; border-width: 28px 30px 16px 0; border-right-color: #cfaa13; z-index: 10;
}
#earth-badge { background: #474749;
}
#earth-badge .badge { position: relative; height: 170px; width: 170px;
}
#earth-badge .badge .part-leaf { position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-leaf.part-top, #earth-badge .badge .part-leaf.part-1, #earth-badge .badge .part-leaf.part-2, #earth-badge .badge .part-leaf.part-3, #earth-badge .badge .part-leaf.part-4, #earth-badge .badge .part-leaf.part-5, #earth-badge .badge .part-leaf.part-6 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border: none; right: 0; top: 0; margin: 7px 7px 0 0;
}
#earth-badge .badge .part-leaf.part-top:before, #earth-badge .badge .part-leaf.part-top:after, #earth-badge .badge .part-leaf.part-1:before, #earth-badge .badge .part-leaf.part-1:after, #earth-badge .badge .part-leaf.part-2:before, #earth-badge .badge .part-leaf.part-2:after, #earth-badge .badge .part-leaf.part-3:before, #earth-badge .badge .part-leaf.part-3:after, #earth-badge .badge .part-leaf.part-4:before, #earth-badge .badge .part-leaf.part-4:after, #earth-badge .badge .part-leaf.part-5:before, #earth-badge .badge .part-leaf.part-5:after, #earth-badge .badge .part-leaf.part-6:before, #earth-badge .badge .part-leaf.part-6:after { content: " "; position: absolute; width: 0; height: 29px; top: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-leaf.part-top:before, #earth-badge .badge .part-leaf.part-1:before, #earth-badge .badge .part-leaf.part-2:before, #earth-badge .badge .part-leaf.part-3:before, #earth-badge .badge .part-leaf.part-4:before, #earth-badge .badge .part-leaf.part-5:before, #earth-badge .badge .part-leaf.part-6:before { right: 0; margin-right: -1px; border-width: 15px 25px 15px 0; border-right-color: #4fb96e;
}
#earth-badge .badge .part-leaf.part-top:after, #earth-badge .badge .part-leaf.part-1:after, #earth-badge .badge .part-leaf.part-2:after, #earth-badge .badge .part-leaf.part-3:after, #earth-badge .badge .part-leaf.part-4:after, #earth-badge .badge .part-leaf.part-5:after, #earth-badge .badge .part-leaf.part-6:after { left: 0; border-width: 15px 0 15px 25px; border-left-color: #3c9255;
}
#earth-badge .badge .part-leaf.part-1 { -webkit-transform: rotate(-13deg); -moz-transform: rotate(-13deg); -ms-transform: rotate(-13deg); -o-transform: rotate(-13deg); transform: rotate(-13deg); margin: 5px 75px 0 0;
}
#earth-badge .badge .part-leaf.part-1:before, #earth-badge .badge .part-leaf.part-1:after { height: 38px;
}
#earth-badge .badge .part-leaf.part-1:before { border-width: 10px 17px 10px 0; border-right-color: #4bb168;
}
#earth-badge .badge .part-leaf.part-1:after { border-width: 10px 0 10px 17px; border-left-color: #4bb168;
}
#earth-badge .badge .part-leaf.part-2 { -webkit-transform: rotate(106deg); -moz-transform: rotate(106deg); -ms-transform: rotate(106deg); -o-transform: rotate(106deg); transform: rotate(106deg); margin: 76px 6px 0 0;
}
#earth-badge .badge .part-leaf.part-2:before, #earth-badge .badge .part-leaf.part-2:after { height: 38px;
}
#earth-badge .badge .part-leaf.part-2:before { border-width: 10px 17px 10px 0; border-right-color: #398f52;
}
#earth-badge .badge .part-leaf.part-2:after { border-width: 10px 0 10px 17px; border-left-color: #398f52;
}
#earth-badge .badge .part-leaf.part-3 { -webkit-transform: rotate(-14deg); -moz-transform: rotate(-14deg); -ms-transform: rotate(-14deg); -o-transform: rotate(-14deg); transform: rotate(-14deg); margin: 35px 100px 0 0;
}
#earth-badge .badge .part-leaf.part-3:before, #earth-badge .badge .part-leaf.part-3:after { height: 38px;
}
#earth-badge .badge .part-leaf.part-3:before { border-width: 9px 16px 9px 0; border-right-color: #46a060;
}
#earth-badge .badge .part-leaf.part-3:after { border-width: 9px 0 9px 16px; border-left-color: #46a060;
}
#earth-badge .badge .part-leaf.part-4 { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -ms-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); margin: 100px 37px 0 0;
}
#earth-badge .badge .part-leaf.part-4:before, #earth-badge .badge .part-leaf.part-4:after { height: 38px;
}
#earth-badge .badge .part-leaf.part-4:before { border-width: 9px 16px 9px 0; border-right-color: #338249;
}
#earth-badge .badge .part-leaf.part-4:after { border-width: 9px 0 9px 16px; border-left-color: #338249;
}
#earth-badge .badge .part-leaf.part-5 { -webkit-transform: rotate(-17deg); -moz-transform: rotate(-17deg); -ms-transform: rotate(-17deg); -o-transform: rotate(-17deg); transform: rotate(-17deg); margin: 65px 121px 0 0;
}
#earth-badge .badge .part-leaf.part-5:before, #earth-badge .badge .part-leaf.part-5:after { height: 19px;
}
#earth-badge .badge .part-leaf.part-5:before { border-width: 9px 16px 9px 0; border-right-color: #3a9256;
}
#earth-badge .badge .part-leaf.part-5:after { border-width: 5px 0 9px 13px; border-left-color: #3a9256;
}
#earth-badge .badge .part-leaf.part-6 { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -ms-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); margin: 120px 64px 0 0;
}
#earth-badge .badge .part-leaf.part-6:before, #earth-badge .badge .part-leaf.part-6:after { height: 19px;
}
#earth-badge .badge .part-leaf.part-6:before { border-width: 5px 13px 9px 0; border-right-color: #3a9256;
}
#earth-badge .badge .part-leaf.part-6:after { border-width: 9px 0 9px 16px; border-left-color: #3a9256;
}
#earth-badge .badge .part-center.part-handle { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 122px; right: 124px;
}
#earth-badge .badge .part-center.part-handle:before, #earth-badge .badge .part-center.part-handle:after { content: " "; position: absolute; width: 0; height: 65px; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-handle:before { left: 0; margin-left: -7px; border-right-color: #94b464; border-right-width: 5px;
}
#earth-badge .badge .part-center.part-handle:after { left: 0; border-left-color: #84a35b; border-left-width: 5px;
}
#earth-badge .badge .part-center.part-1-left, #earth-badge .badge .part-center.part-1-right, #earth-badge .badge .part-center.part-2-left, #earth-badge .badge .part-center.part-2-right, #earth-badge .badge .part-center.part-3-left, #earth-badge .badge .part-center.part-3-right, #earth-badge .badge .part-center.part-4 { position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-1-left { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 0; height: 67px; top: 0; right: 0; margin: 51px 90px 0 0; border-width: 0 0 0 25px; border-left-color: #a3c86e;
}
#earth-badge .badge .part-center.part-1-left:before, #earth-badge .badge .part-center.part-1-left:after { content: " "; position: absolute; width: 0; height: 0; top: 0; left: -25px; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-1-left:before { margin-top: -15px; border-width: 15px 25px 15px 0; border-right-color: #abd275;
}
#earth-badge .badge .part-center.part-1-left:after { margin-top: 52px; border-width: 15px 25px 15px 0; border-right-color: #94b564;
}
#earth-badge .badge .part-center.part-1-right { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 0; height: 67px; top: 0; right: 0; margin: 68px 73px 0 0; border-width: 0 25px 0 0; border-right-color: #8dac60;
}
#earth-badge .badge .part-center.part-1-right:before, #earth-badge .badge .part-center.part-1-right:after { content: " "; position: absolute; width: 0; height: 0; top: 0; left: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-1-right:before { margin-top: -15px; border-width: 15px 0 15px 25px; border-left-color: #9bc069;
}
#earth-badge .badge .part-center.part-1-right:after { margin-top: 52px; border-width: 15px 0 15px 25px; border-left-color: #84a45b;
}
#earth-badge .badge .part-center.part-2-left { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 0; height: 45px; top: 0; right: 0; margin: 66px 92px 0 0; border-width: 0 0 0 12px; border-left-color: #53af65;
}
#earth-badge .badge .part-center.part-2-left:before, #earth-badge .badge .part-center.part-2-left:after { content: " "; position: absolute; width: 0; height: 0; top: 0; left: -12px; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-2-left:before { margin-top: -11px; border-width: 11px 12px 11px 0; border-right-color: #5fbd71;
}
#earth-badge .badge .part-center.part-2-left:after { margin-top: 33px; border-width: 11px 12px 11px 0; border-right-color: #459055;
}
#earth-badge .badge .part-center.part-2-right { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 0; height: 45px; top: 0; right: 0; margin: 75px 84px 0 0; border-width: 0 12px 0 0; border-right-color: #3f844e;
}
#earth-badge .badge .part-center.part-2-right:before, #earth-badge .badge .part-center.part-2-right:after { content: " "; position: absolute; width: 0; height: 0; top: 0; left: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-2-right:before { margin-top: -11px; border-width: 11px 0 11px 12px; border-left-color: #4b9c5f;
}
#earth-badge .badge .part-center.part-2-right:after { margin-top: 33px; border-width: 11px 0 11px 12px; border-left-color: #377744;
}
#earth-badge .badge .part-center.part-3-left { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 0; height: 29px; top: 0; right: 0; margin: 75px 92px 0 0; border-width: 0 0 0 6px; border-left-color: #59b66b;
}
#earth-badge .badge .part-center.part-3-left:before, #earth-badge .badge .part-center.part-3-left:after { content: " "; position: absolute; width: 0; height: 0; top: 0; left: -6px; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-3-left:before { margin-top: -6px; border-width: 6px 6px 6px 0; border-right-color: #54ae65;
}
#earth-badge .badge .part-center.part-3-left:after { margin-top: 24px; border-width: 6px 6px 6px 0; border-right-color: #51a362;
}
#earth-badge .badge .part-center.part-3-right { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 0; height: 29px; top: 0; right: 0; margin: 79px 88px 0 0; border-width: 0 6px 0 0; border-right-color: #4d9f5d;
}
#earth-badge .badge .part-center.part-3-right:before, #earth-badge .badge .part-center.part-3-right:after { content: " "; position: absolute; width: 0; height: 0; top: 0; left: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-3-right:before { margin-top: -6px; border-width: 6px 0 6px 6px; border-left-color: #54ae65;
}
#earth-badge .badge .part-center.part-3-right:after { margin-top: 24px; border-width: 6px 0 6px 6px; border-left-color: #489558;
}
#earth-badge .badge .part-center.part-4 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 6px; height: 27px; top: 0; right: 0; margin: 78px 90px 0 0; border: none; background: #3d9257;
}
#earth-badge .badge .part-center.part-4:before, #earth-badge .badge .part-center.part-4:after { content: " "; position: absolute; width: 0; height: 0; top: 0; left: 0; border-style: solid; border-color: transparent; border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-4:before { margin-top: -3px; border-width: 0 3px 3px 3px; border-bottom-color: #3d9257;
}
#earth-badge .badge .part-center.part-4:after { top: 100%; border-width: 3px 3px 0 3px; border-top-color: #3d9257;
}

Pokemon badges in HTML/CSS - Script Codes JS Codes

/*
The first 8 pokémon badges in HTML/CSS
Made by Kevin Jannis (@kevinjannis)
Inspired by: https://www.behance.net/gallery/11030097/Pokmon-Gym-Badges
View more at www.janniskev.in
*/
Pokemon badges in HTML/CSS - Script Codes
Pokemon badges in HTML/CSS - Script Codes
Home Page Home
Developer Kevin Jannis
Username kevinjannis
Uploaded August 25, 2022
Rating 4.5
Size 12,166 Kb
Views 30,360
Do you need developer help for Pokemon badges in HTML/CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Jannis (kevinjannis) Script Codes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!