Pokemon badges in HTML/CSS
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 - 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
*/
Developer | Kevin Jannis |
Username | kevinjannis |
Uploaded | August 25, 2022 |
Rating | 4.5 |
Size | 12,166 Kb |
Views | 30,360 |
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!
Name | Size |
A Pen by Kevin Jannis | 3,280 Kb |
Vivid CSS3 Spinner | 3,181 Kb |
Google Chrome logos in CSS | 2,391 Kb |
The world with CSS3 Transforms | 5,001 Kb |
White House | 3,988 Kb |
Star Wars The Force Awakens Speeder | 9,027 Kb |
Flat Star Wars | 37,947 Kb |
Vintage TV | 3,903 Kb |
Earth in a single HTML element | 4,014 Kb |
Random Access Memories | 4,252 Kb |
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!
Name | Username | Size |
Sass random color animation | Jotavejv | 4,827 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
Arrow Navigation | Hinducows | 1,973 Kb |
Loader | MikitaLisavets | 3,321 Kb |
Animated Logo | Shakdaniel | 2,672 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
E-mail Template | SoloMDFK | 4,871 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!