"card"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/iprodev/pen/yygvPx?limit=all&page=77&q=box" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Varela+Round'> <style class="cp-pen-styles">html, body { margin: 0; padding: 0; background: #E8ECEF; height: 100%; width: 100%; text-align: center; } h1{ font: 400 30px roboto, "Open Sans", Helvetica, sans-serif; text-transform: uppercase; } h2{ font: 300 22px roboto, "Open Sans", Helvetica, sans-serif; text-transform: uppercase; } .switcher-box { list-style: none; padding: 0; margin: 40px 0; text-align: center; } .switcher-box a { display: inline-block; width: 32px; height: 32px; margin-right: 10px; padding: 3px; cursor: pointer; background: #FFF; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); } .switcher-box a span { display: block; width: 100%; height: 100%; -webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset, 0 5px 20px rgba(255, 255, 255, 0.4) inset; box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset, 0 5px 20px rgba(255, 255, 255, 0.4) inset; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; border-radius: 50%; } .switcher-box a.active { background: #000; -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset; } .switcher-box a.active span { border-color: #BBB; } .switcher-box a.skin-turquoise span { background: #1ABC9C; } .switcher-box a.skin-emerald span { background: #2ECC71; } .switcher-box a.skin-peter-river span { background: #3498DB; } .switcher-box a.skin-amethyst span { background: #9B59B6; } .switcher-box a.skin-wet-asphalt span { background: #34495E; } .switcher-box a.skin-sun-flower span { background: #F1C40F; } .switcher-box a.skin-carrot span { background: #E67E22; } .switcher-box a.skin-alizarin span { background: #E74C3C; } .switcher-box a.skin-graphite span { background: #454545; } .switcher-box a.skin-concrete span { background: #95A5A6; } .switcher-box a.skin-green-sea span { background: #16A085; } .switcher-box a.skin-nephritis span { background: #27AE60; } .switcher-box a.skin-belize-hole span { background: #2980B9; } .switcher-box a.skin-wisteria span { background: #8E44AD; } .switcher-box a.skin-midnight-blue span { background: #2C3E50; } .switcher-box a.skin-orange span { background: #F39C12; } .switcher-box a.skin-pumpkin span { background: #D35400; } .switcher-box a.skin-pomegranate span { background: #C0392B; } .switcher-box a.skin-silver span { background: #BDC3C7; } .switcher-box a.skin-asbestos span { background: #7F8C8D; } .switcher-box a.skin-dodgerblue span { background: dodgerblue; } .switcher-box a.skin-gray-black span { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); } .switcher-box a.skin-black-glass span { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYmNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNzc3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhMGUwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); } /* Tabbed Styles */ .tabbed { width: 80%; min-width: 400px; margin: 0 auto; margin-bottom: 68px; border-bottom: 4px solid #000; overflow: hidden; transition: border 250ms ease; } .tabbed ul { margin: 0px; padding: 0px; overflow: hidden; float: left; padding-left: 48px; list-style-type: none; } .tabbed ul * { margin: 0px; padding: 0px; } .tabbed ul li { display: block; float: right; padding: 10px 24px 8px; background-color: #FFF; margin-right: 46px; z-index: 2; position: relative; cursor: pointer; color: #777; text-transform: uppercase; font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif; transition: all 250ms ease; } .tabbed ul li:before, .tabbed ul li:after { display: block; content: " "; position: absolute; top: 0; height: 100%; width: 44px; background-color: #FFF; transition: all 250ms ease; } .tabbed ul li:before { right: -24px; transform: skew(30deg, 0deg); box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0; } .tabbed ul li:after { left: -24px; transform: skew(-30deg, 0deg); box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0; } .tabbed ul li:hover, .tabbed ul li:hover:before, .tabbed ul li:hover:after { background-color: #F4F7F9; color: #444; } .tabbed ul li.active { z-index: 3; } .tabbed ul li.active, .tabbed ul li.active:before, .tabbed ul li.active:after { background-color: #000; color: #fff; } /* Round Tabs */ .tabbed.round ul li { border-radius: 8px 8px 0 0; } .tabbed.round ul li:before { border-radius: 0 8px 0 0; } .tabbed.round ul li:after { border-radius: 8px 0 0 0; } /* Skins */ .tabbed[class*="skin-"] ul li { color: #FFF; text-shadow: rgba(0,0,0,.1) 0 1px; } .tabbed.skin-turquoise { border-bottom-color: #1ABC9C; } .tabbed.skin-turquoise ul li, .tabbed.skin-turquoise ul li:before, .tabbed.skin-turquoise ul li:after { background-color: #34D6B6; } .tabbed.skin-turquoise ul li:hover, .tabbed.skin-turquoise ul li:hover:before, .tabbed.skin-turquoise ul li:hover:after { background-color: #40E2C2; } .tabbed.skin-turquoise ul li.active, .tabbed.skin-turquoise ul li.active:before, .tabbed.skin-turquoise ul li.active:after { background-color: #1ABC9C; } .tabbed.skin-emerald { border-bottom-color: #2ECC71; } .tabbed.skin-emerald ul li, .tabbed.skin-emerald ul li:before, .tabbed.skin-emerald ul li:after { background-color: #48E68B; } .tabbed.skin-emerald ul li:hover, .tabbed.skin-emerald ul li:hover:before, .tabbed.skin-emerald ul li:hover:after { background-color: #54F297; } .tabbed.skin-emerald ul li.active, .tabbed.skin-emerald ul li.active:before, .tabbed.skin-emerald ul li.active:after { background-color: #2ECC71; } .tabbed.skin-peter-river { border-bottom-color: #3498DB; } .tabbed.skin-peter-river ul li, .tabbed.skin-peter-river ul li:before, .tabbed.skin-peter-river ul li:after { background-color: #4EB2F5; } .tabbed.skin-peter-river ul li:hover, .tabbed.skin-peter-river ul li:hover:before, .tabbed.skin-peter-river ul li:hover:after { background-color: #5ABEFF; } .tabbed.skin-peter-river ul li.active, .tabbed.skin-peter-river ul li.active:before, .tabbed.skin-peter-river ul li.active:after { background-color: #3498DB; } .tabbed.skin-amethyst { border-bottom-color: #9B59B6; } .tabbed.skin-amethyst ul li, .tabbed.skin-amethyst ul li:before, .tabbed.skin-amethyst ul li:after { background-color: #B573D0; } .tabbed.skin-amethyst ul li:hover, .tabbed.skin-amethyst ul li:hover:before, .tabbed.skin-amethyst ul li:hover:after { background-color: #C17FDC; } .tabbed.skin-amethyst ul li.active, .tabbed.skin-amethyst ul li.active:before, .tabbed.skin-amethyst ul li.active:after { background-color: #9B59B6; } .tabbed.skin-wet-asphalt { border-bottom-color: #34495E; } .tabbed.skin-wet-asphalt ul li, .tabbed.skin-wet-asphalt ul li:before, .tabbed.skin-wet-asphalt ul li:after { background-color: #4E6378; } .tabbed.skin-wet-asphalt ul li:hover, .tabbed.skin-wet-asphalt ul li:hover:before, .tabbed.skin-wet-asphalt ul li:hover:after { background-color: #5A6F84; } .tabbed.skin-wet-asphalt ul li.active, .tabbed.skin-wet-asphalt ul li.active:before, .tabbed.skin-wet-asphalt ul li.active:after { background-color: #34495E; } .tabbed.skin-sun-flower { border-bottom-color: #F1C40F; } .tabbed.skin-sun-flower ul li, .tabbed.skin-sun-flower ul li:before, .tabbed.skin-sun-flower ul li:after { background-color: #FFDE29; color: #0A0; } .tabbed.skin-sun-flower ul li:hover, .tabbed.skin-sun-flower ul li:hover:before, .tabbed.skin-sun-flower ul li:hover:after { background-color: #FFEA35; } .tabbed.skin-sun-flower ul li.active, .tabbed.skin-sun-flower ul li.active:before, .tabbed.skin-sun-flower ul li.active:after { background-color: #F1C40F; color: #FFF; } .tabbed.skin-carrot { border-bottom-color: #E67E22; } .tabbed.skin-carrot ul li, .tabbed.skin-carrot ul li:before, .tabbed.skin-carrot ul li:after { background-color: #FF983C; } .tabbed.skin-carrot ul li:hover, .tabbed.skin-carrot ul li:hover:before, .tabbed.skin-carrot ul li:hover:after { background-color: #FFA448; } .tabbed.skin-carrot ul li.active, .tabbed.skin-carrot ul li.active:before, .tabbed.skin-carrot ul li.active:after { background-color: #E67E22; } .tabbed.skin-alizarin { border-bottom-color: #E74C3C; } .tabbed.skin-alizarin ul li, .tabbed.skin-alizarin ul li:before, .tabbed.skin-alizarin ul li:after { background-color: #FF6656; } .tabbed.skin-alizarin ul li:hover, .tabbed.skin-alizarin ul li:hover:before, .tabbed.skin-alizarin ul li:hover:after { background-color: #FF7262; } .tabbed.skin-alizarin ul li.active, .tabbed.skin-alizarin ul li.active:before, .tabbed.skin-alizarin ul li.active:after { background-color: #E74C3C; } .tabbed.skin-graphite { border-bottom-color: #454545; } .tabbed.skin-graphite ul li, .tabbed.skin-graphite ul li:before, .tabbed.skin-graphite ul li:after { background-color: #5F5F5F; } .tabbed.skin-graphite ul li:hover, .tabbed.skin-graphite ul li:hover:before, .tabbed.skin-graphite ul li:hover:after { background-color: #6B6B6B; } .tabbed.skin-graphite ul li.active, .tabbed.skin-graphite ul li.active:before, .tabbed.skin-graphite ul li.active:after { background-color: #454545; } .tabbed.skin-concrete { border-bottom-color: #95A5A6; } .tabbed.skin-concrete ul li, .tabbed.skin-concrete ul li:before, .tabbed.skin-concrete ul li:after { background-color: #AFBFC0; } .tabbed.skin-concrete ul li:hover, .tabbed.skin-concrete ul li:hover:before, .tabbed.skin-concrete ul li:hover:after { background-color: #BBCBCC; } .tabbed.skin-concrete ul li.active, .tabbed.skin-concrete ul li.active:before, .tabbed.skin-concrete ul li.active:after { background-color: #95A5A6; } .tabbed.skin-green-sea { border-bottom-color: #16A085; } .tabbed.skin-green-sea ul li, .tabbed.skin-green-sea ul li:before, .tabbed.skin-green-sea ul li:after { background-color: #30BA9F; } .tabbed.skin-green-sea ul li:hover, .tabbed.skin-green-sea ul li:hover:before, .tabbed.skin-green-sea ul li:hover:after { background-color: #3CC6AB; } .tabbed.skin-green-sea ul li.active, .tabbed.skin-green-sea ul li.active:before, .tabbed.skin-green-sea ul li.active:after { background-color: #16A085; } .tabbed.skin-nephritis { border-bottom-color: #27AE60; } .tabbed.skin-nephritis ul li, .tabbed.skin-nephritis ul li:before, .tabbed.skin-nephritis ul li:after { background-color: #41C87A; } .tabbed.skin-nephritis ul li:hover, .tabbed.skin-nephritis ul li:hover:before, .tabbed.skin-nephritis ul li:hover:after { background-color: #4DD486; } .tabbed.skin-nephritis ul li.active, .tabbed.skin-nephritis ul li.active:before, .tabbed.skin-nephritis ul li.active:after { background-color: #27AE60; } .tabbed.skin-belize-hole { border-bottom-color: #2980B9; } .tabbed.skin-belize-hole ul li, .tabbed.skin-belize-hole ul li:before, .tabbed.skin-belize-hole ul li:after { background-color: #439AD3; } .tabbed.skin-belize-hole ul li:hover, .tabbed.skin-belize-hole ul li:hover:before, .tabbed.skin-belize-hole ul li:hover:after { background-color: #4FA6DF; } .tabbed.skin-belize-hole ul li.active, .tabbed.skin-belize-hole ul li.active:before, .tabbed.skin-belize-hole ul li.active:after { background-color: #2980B9; } .tabbed.skin-wisteria { border-bottom-color: #8E44AD; } .tabbed.skin-wisteria ul li, .tabbed.skin-wisteria ul li:before, .tabbed.skin-wisteria ul li:after { background-color: #A85EC7; } .tabbed.skin-wisteria ul li:hover, .tabbed.skin-wisteria ul li:hover:before, .tabbed.skin-wisteria ul li:hover:after { background-color: #B46AD3; } .tabbed.skin-wisteria ul li.active, .tabbed.skin-wisteria ul li.active:before, .tabbed.skin-wisteria ul li.active:after { background-color: #8E44AD; } .tabbed.skin-midnight-blue { border-bottom-color: #2C3E50; } .tabbed.skin-midnight-blue ul li, .tabbed.skin-midnight-blue ul li:before, .tabbed.skin-midnight-blue ul li:after { background-color: #46586A; } .tabbed.skin-midnight-blue ul li:hover, .tabbed.skin-midnight-blue ul li:hover:before, .tabbed.skin-midnight-blue ul li:hover:after { background-color: #526476; } .tabbed.skin-midnight-blue ul li.active, .tabbed.skin-midnight-blue ul li.active:before, .tabbed.skin-midnight-blue ul li.active:after { background-color: #2C3E50; } .tabbed.skin-orange { border-bottom-color: #F39C12; } .tabbed.skin-orange ul li, .tabbed.skin-orange ul li:before, .tabbed.skin-orange ul li:after { background-color: #FFB62C; } .tabbed.skin-orange ul li:hover, .tabbed.skin-orange ul li:hover:before, .tabbed.skin-orange ul li:hover:after { background-color: #FFC238; } .tabbed.skin-orange ul li.active, .tabbed.skin-orange ul li.active:before, .tabbed.skin-orange ul li.active:after { background-color: #F39C12; } .tabbed.skin-pumpkin { border-bottom-color: #D35400; } .tabbed.skin-pumpkin ul li, .tabbed.skin-pumpkin ul li:before, .tabbed.skin-pumpkin ul li:after { background-color: #ED6E1A; } .tabbed.skin-pumpkin ul li:hover, .tabbed.skin-pumpkin ul li:hover:before, .tabbed.skin-pumpkin ul li:hover:after { background-color: #F97A26; } .tabbed.skin-pumpkin ul li.active, .tabbed.skin-pumpkin ul li.active:before, .tabbed.skin-pumpkin ul li.active:after { background-color: #D35400; } .tabbed.skin-pomegranate { border-bottom-color: #C0392B; } .tabbed.skin-pomegranate ul li, .tabbed.skin-pomegranate ul li:before, .tabbed.skin-pomegranate ul li:after { background-color: #DA5345; } .tabbed.skin-pomegranate ul li:hover, .tabbed.skin-pomegranate ul li:hover:before, .tabbed.skin-pomegranate ul li:hover:after { background-color: #E65F51; } .tabbed.skin-pomegranate ul li.active, .tabbed.skin-pomegranate ul li.active:before, .tabbed.skin-pomegranate ul li.active:after { background-color: #C0392B; } .tabbed.skin-silver { border-bottom-color: #BDC3C7; } .tabbed.skin-silver ul li, .tabbed.skin-silver ul li:before, .tabbed.skin-silver ul li:after { background-color: #D7DDE1; color: #666; } .tabbed.skin-silver ul li:hover, .tabbed.skin-silver ul li:hover:before, .tabbed.skin-silver ul li:hover:after { background-color: #E3E9ED; } .tabbed.skin-silver ul li.active, .tabbed.skin-silver ul li.active:before, .tabbed.skin-silver ul li.active:after { background-color: #BDC3C7; color: #FFF; } .tabbed.skin-asbestos { border-bottom-color: #7F8C8D; } .tabbed.skin-asbestos ul li, .tabbed.skin-asbestos ul li:before, .tabbed.skin-asbestos ul li:after { background-color: #99A6A7; } .tabbed.skin-asbestos ul li:hover, .tabbed.skin-asbestos ul li:hover:before, .tabbed.skin-asbestos ul li:hover:after { background-color: #A5B2B3; } .tabbed.skin-asbestos ul li.active, .tabbed.skin-asbestos ul li.active:before, .tabbed.skin-asbestos ul li.active:after { background-color: #7F8C8D; } .tabbed.skin-dodgerblue { border-bottom-color: dodgerblue; } .tabbed.skin-dodgerblue ul li, .tabbed.skin-dodgerblue ul li:before, .tabbed.skin-dodgerblue ul li:after { background-color: deepskyblue; } .tabbed.skin-dodgerblue ul li:hover, .tabbed.skin-dodgerblue ul li:hover:before, .tabbed.skin-dodgerblue ul li:hover:after { background-color: #33ccff; } .tabbed.skin-dodgerblue ul li.active, .tabbed.skin-dodgerblue ul li.active:before, .tabbed.skin-dodgerblue ul li.active:after { background-color: dodgerblue; } .tabbed.skin-gray-black { border-bottom-color: #28343b; } .tabbed.skin-gray-black, .tabbed.skin-gray-black ul li, .tabbed.skin-gray-black ul li:before, .tabbed.skin-gray-black ul li:after { transition: none; } .tabbed.skin-gray-black ul li, .tabbed.skin-gray-black ul li:before, .tabbed.skin-gray-black ul li:after { background-color: #68737B; } .tabbed.skin-gray-black ul li:hover, .tabbed.skin-gray-black ul li:hover:before, .tabbed.skin-gray-black ul li:hover:after { background-color: #707A83; } .tabbed.skin-gray-black ul li.active, .tabbed.skin-gray-black ul li.active:before, .tabbed.skin-gray-black ul li.active:after { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); } .tabbed.skin-black-glass { border-bottom-color: #0a0809; } .tabbed.skin-black-glass, .tabbed.skin-black-glass ul li, .tabbed.skin-black-glass ul li:before, .tabbed.skin-black-glass ul li:after { transition: none; } .tabbed.skin-black-glass ul li, .tabbed.skin-black-glass ul li:before, .tabbed.skin-black-glass ul li:after { background-color: #333; } .tabbed.skin-black-glass ul li:hover, .tabbed.skin-black-glass ul li:hover:before, .tabbed.skin-black-glass ul li:hover:after { background-color: #444; } .tabbed.skin-black-glass ul li.active, .tabbed.skin-black-glass ul li.active:before, .tabbed.skin-black-glass ul li.active:after { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYmNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNzc3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhMGUwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); } a.iprodev { line-height: normal; font-family: Varela Round, sans-serif; font-weight: 600; text-decoration: none; font-size: 13px; color: #A7AAAE; position: fixed; left: 20px; bottom: 20px; border: 1px solid #A7AAAE; padding: 12px 20px 10px; border-radius: 50px; transition: all .1s ease-in-out; text-transform: uppercase; } a.iprodev:hover { background: #A7AAAE; color: white; }</style></head><body> <h1>Default</h1> <div class='tabbed'> <ul> <li>Third tab</li> <li>Second tab</li> <li class='active'>First tab</li> </ul> </div> <h2>With round corners</h2> <div class='tabbed round'> <ul> <li>Third tab</li> <li>Second tab</li> <li class='active'>First tab</li> </ul> </div> <br> <br> <br> <h1>Skins</h1> <h2>Flat</h2> <div class='config-group'> <div class='switcher-box' style='margin-top: 7px;'> <a class='skin-turquoise active' skin='skin-turquoise'> <span></span> </a> <a class='skin-emerald' skin='skin-emerald'> <span></span> </a> <a class='skin-peter-river' skin='skin-peter-river'> <span></span> </a> <a class='skin-amethyst' skin='skin-amethyst'> <span></span> </a> <a class='color skin-wet-asphalt' skin='skin-wet-asphalt'> <span></span> </a> <a class='skin-sun-flower' skin='skin-sun-flower'> <span></span> </a> <a class='skin-carrot' skin='skin-carrot'> <span></span> </a> <a class='skin-alizarin' skin='skin-alizarin'> <span></span> </a> <a class='skin-graphite' skin='skin-graphite'> <span></span> </a> <a class='skin-concrete' skin='skin-concrete'> <span></span> </a> <a class='skin-green-sea' skin='skin-green-sea'> <span></span> </a> <a class='skin-nephritis' skin='skin-nephritis'> <span></span> </a> <a class='skin-belize-hole' skin='skin-belize-hole'> <span></span> </a> <a class='skin-wisteria' skin='skin-wisteria'> <span></span> </a> <a class='skin-midnight-blue' skin='skin-midnight-blue'> <span></span> </a> <a class='skin-orange' skin='skin-orange'> <span></span> </a> <a class='skin-pumpkin' skin='skin-pumpkin'> <span></span> </a> <a class='skin-pomegranate' skin='skin-pomegranate'> <span></span> </a> <a class='skin-silver' skin='skin-silver'> <span></span> </a> <a class='skin-asbestos' skin='skin-asbestos'> <span></span> </a> <a class='skin-dodgerblue' skin='skin-dodgerblue'> <span></span> </a> <br> <br> <br> <h2>Multicolor</h2> <a class='skin-gray-black' skin='skin-gray-black'> <span></span> </a> <a class='skin-black-glass' skin='skin-black-glass'> <span></span> </a> </div> </div> <div class='tabbed skin-turquoise round' id='skinable'> <ul> <li>Third tab</li> <li>Second tab</li> <li class='active'>First tab</li> </ul> </div> <a class='iprodev' href='http://iprodev.com' target='_blank'>iprodev.com</a> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src="https://iprodev.com/projects-widget.js"></script> <script >document.addEventListener("DOMContentLoaded", function() { var tabs = document.querySelectorAll('.tabbed li'); var switchers = document.querySelectorAll('.switcher-box a'); var skinable = document.getElementById('skinable'); for (var i = 0, len = tabs.length; i < len; i++) {if (window.CP.shouldStopExecution(2)){break;} tabs[i].addEventListener("click", function() { if (this.classList.contains('active')) return; var parent = this.parentNode, innerTabs = parent.querySelectorAll('li'); for (var index = 0, iLen = innerTabs.length; index < iLen; index++) {if (window.CP.shouldStopExecution(1)){break;} innerTabs[index].classList.remove('active'); } window.CP.exitedLoop(1); this.classList.add('active'); }); } window.CP.exitedLoop(2); for (var i = 0, len = switchers.length; i < len; i++) {if (window.CP.shouldStopExecution(4)){break;} switchers[i].addEventListener("click", function() { if (this.classList.contains('active')) return; var parent = this.parentNode, innerSwitchers = parent.querySelectorAll('a'), skinName = this.getAttribute('skin'); for (var index = 0, iLen = innerSwitchers.length; index < iLen; index++) {if (window.CP.shouldStopExecution(3)){break;} innerSwitchers[index].classList.remove('active'); } window.CP.exitedLoop(3); this.classList.add('active'); skinable.className = 'tabbed round ' + skinName; }); } window.CP.exitedLoop(4); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: