Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"title"
Bootstrap 3.0.0 Snippet by
evarevirus
3.0.0
Preview
HTML
View Full Screen
Fork
Fork this
1.3K
 
1 Fav
Post to Facebook
Tweet this
<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 lang='en' 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/yumyo/pen/qRMYej?depth=everything&order=popularity&page=26&q=icon+box&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://res.cloudinary.com/cpub/raw/upload/v1486565710/styles/custom-symbols.css'><link rel='stylesheet prefetch' href='https://res.cloudinary.com/cpub/raw/upload/v1486576039/styles/custom-fonts.css'> <style class="cp-pen-styles">body { padding: 0; margin: 0; color: #666; background: #fafafa; font-family: 'Roboto Mono', monospace; font-size: 1em; line-height: 1.5; } article { max-width: 980px; margin: 3rem auto 0; font-size: 18px; text-align: center; } section + section { margin-top: 6rem; } .brand__font + .brand__font { margin-top: 2rem; display: block; } .brand__logo + section { margin-top: 3rem; } .symbol-set { display: none; } .labels { font-size: 14px; color: #aaa; display: block; text-align: center; border-bottom: 1px dashed #dedede; margin-bottom: 4rem; } .labels:after { content: attr(data-label); display: inline-block; text-transform: uppercase; background-color: #fafafa; position: relative; top: 9px; padding: 0 7px; line-height: 1; } .icon-box { margin: 0; width: 144px; height: 144px; position: relative; background: #ccc url(data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=) top left repeat; border: 1px solid #ccc; display: table-cell; vertical-align: middle; text-align: center; } .icon { display: inline; display: inline-block; } h2 { margin: 0; padding: 0; font-size: 1em; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; left: 1em; right: 1em; bottom: 1em; } footer { display: block; margin: 0; padding: 0 3em 3em 3em; } footer p { margin: 0; font-size: .7em; } footer a { color: #0f7595; margin-left: 0; } ul { margin: 0; padding: 0; } li { display: inline; display: inline-block; background-color: #fff; position: relative; margin: 0 2em 2em 0; vertical-align: top; border: 1px solid #ccc; padding: 1em 1em 3em 1em; cursor: default; } .logo { display: inline-block; max-width: 100%; overflow: hidden; padding-left: 18px; line-height: 0; } .logo svg { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .logo__icon { display: none; } .color-box { width: 144px; height: 144px; position: relative; } .color-accent { background-color: #D22738; } .color-text { background-color: #141413; } .color-warm-1 { background-color: #781541; } .color-warm-2 { background-color: #DE6771; } .color-warm-3 { background-color: #FFF572; } .color-chill-1 { background-color: #00484E; } .color-chill-2 { background-color: #00976D; } .color-chill-3 { background-color: #67BCBE; } .brand__font { font-size: 21px; } .brand__font--apercu-regular { font-family: 'Apercu'; font-weight: normal; font-style: normal; } .brand__font--apercu-italic { font-family: 'Apercu'; font-weight: normal; font-style: italic; } .brand__font--apercu-bold { font-family: 'Apercu'; font-weight: bold; font-style: normal; } .brand__font--apercu-medium { font-family: 'Apercu-Medium'; font-weight: normal; font-style: normal; } .brand__font--apercu-light { font-family: 'Apercu-Light'; font-weight: normal; font-style: normal; } .brand__font--stanley-regular { font-family: 'Stanley'; font-weight: normal; font-style: normal; } .brand__font--stanley-italic { font-family: 'Stanley'; font-weight: normal; font-style: italic; } .brand__font--stanley-bold { font-family: 'Stanley'; font-weight: bold; font-style: normal; } .brand__font--stanley-bolditalic { font-family: 'Stanley'; font-weight: bold; font-style: italic; } .brand__font--stanley-poster { font-family: 'Stanley-Poster'; font-weight: normal; font-style: normal; } .brand__font--apercu-mono { font-family: 'Apercu-Mono'; font-weight: normal; font-style: normal; } </style></head><body> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"> <svg class="symbol-set"> <symbol viewBox="0 0 480 93" id="raconteur"> <g class="logo__letters"><path class="O color" d="M212.3 34.5c0-14.8-6.6-30.7-23.7-30.7-9.3 0-21.5 6.4-21.5 26 0 13.3 6.5 30.5 24.2 30.5 10.7-.1 21-8.1 21-25.8m-54.2-1.9c0-17.9 13.5-31.6 32-31.6 20.8 0 31.2 15 31.2 30.7 0 18.1-13.8 31.3-31.2 31.3-20 0-32-14.2-32-30.4"/><path class="T color" d="M303.6 61.8c0-2.3.1-53.8.1-53.8 0-2.8 0-2.9-2.7-2.9h-19.5V2.5h52.2v2.7h-19.5c-2.7 0-2.7.1-2.7 2.9 0 0 .1 51.5.1 53.8h-8v-.1z"/><path class="UR color" d="M479.1 59.3c-2.1-.3-4-1.2-5.3-2.4-6.1-5.1-10.8-12.2-18-23.7-.4-.7-.9-1.6-.4-2.1 4.5-1.8 10.8-6 10.8-14.5 0-6.2-3.1-10.3-7.4-12.5-4.1-2.2-9.4-2.7-14.9-2.7h-19.2V35c0 13.5-4.9 23.6-17.8 23.6-13.6 0-18-9.4-18-23.7v-33h-7.3v34.8c0 10.5 2.2 17 6.9 20.9 4.4 3.7 10.5 4.9 16.6 4.9 6.6 0 13.2-2.3 17-6.5 5-5.3 6.2-13.5 6.2-21.2v-10c0-5 0-15.4 1.2-18.4.5-1.2 2.2-1.9 4.4-2.1l1.8-.1h7.8c9.9 0 14.2 6.7 14.2 13.7 0 6.1-1.6 8.8-4.1 10.6-2.2 1.7-5 2.2-7.8 2.3h-7.7l2.6 3.8h6.7l2.4 3.7c2.5 3.9 5.5 8.7 7.4 11.5 6.4 9 10.9 11.2 18.5 11.2 1.7 0 3.1-.2 3.9-.4l-.5-1.3z"/><path class="RA color" d="M80.3 1.8H73S55.9 46.4 51.2 58.4c-.9-.4-1.7-.9-2.4-1.5-6.1-5.1-10.8-12.2-18-23.7-.4-.7-.9-1.6-.4-2.1C34.7 29.2 41 25 41 16.5c0-6.2-3.1-10.3-7.4-12.5-4.1-2.2-9.4-2.7-14.9-2.7H0l.1.1L1.9 4h16.8c9.9 0 14.2 6.7 14.2 13.7 0 6.1-1.6 8.8-4.1 10.6-2.2 1.7-5 2.2-7.8 2.3h-7.6l2.6 3.8h6.7l2.4 3.7c2.5 3.9 5.5 8.7 7.4 11.5 6.4 9 10.9 11.2 18.5 11.2h3.8l9.8-26.4h15.5c2.4 0 3.1.2 3.6 1.5L92 61.1h8.7c-.5-1.4-20.4-59.3-20.4-59.3zm-1.4 29H66l8.4-22.7 6.9 20.7c.4 1.7 0 2-2.4 2z"/><path class="E color" d="M358.8 58.8c-7-.1-8.9-1-9.9-2-1.4-1.5-1.7-4.6-1.7-9.3V33.3h20.7v-3.1h-20.7V8.8c0-3.4 0-3.6 2.7-3.6h22.6V2.6h-32.6v59.3h36v-3l-17.1-.1z"/><path class="N color" d="M276.2 1.8h-4.7v45.1C267.4 42.6 231 1.8 231 1.8h-3.9v59.1h4.7V13.1l42.7 49.2h1.7V1.8z"/><path class="C color" d="M154.4 53c-1.5 1.5-6 5.6-13.2 6.8-.1 0-.2 0-.4.1-1.2.2-2.5.3-3.9.3-14.7 0-26.7-10.4-26.7-29.2 0-18.5 11.7-27.2 25.4-27.2 10.1 0 14.3 2.5 16.7 3.9.9.6 1.7 1.1 2.2 1.3V3.5c-.5 0-1.1-.2-1.8-.4C148.4 2 141.6 1 136.8 1c-9.3 0-17.7 2.5-24.3 7.6-6.8 5.3-11.3 13.8-11.3 23.7 0 11.6 5.6 19.7 12.8 24.6 6.6 4.4 14.3 6 22.4 6 5.7 0 12.5-1.3 17.4-3 .6-.2.8-.2.8-1.3v-5.8l-.2.2"/></g><g class="logo__icon"><circle class="circle bg" cx="30" cy="31.2" r="30"/><path class="color" d="M48.9 49.5c-1.4-.2-2.6-.8-3.5-1.6-4-3.3-7-8-11.7-15.4-.3-.5-.6-1-.3-1.4 2.9-1.2 7-3.9 7-9.4 0-4.1-2-6.7-4.8-8.1-2.7-1.5-6.1-1.7-9.7-1.7h-12v.1l.5.8.6.9h11c6.4 0 9.2 4.4 9.2 8.9 0 3.9-1.1 5.7-2.6 6.9-1.4 1.1-3.3 1.4-5.1 1.5h-5l1.7 2.5h4.4l1.5 2.4c1.7 2.5 3.5 5.7 4.8 7.5 4.1 5.9 7.1 7.3 12 7.3 1.1 0 2-.1 2.6-.3l-.6-.9z"/></g> <g class="logo__custom"><path d="M11.1 80c.1-.2.2-.3.3-.4.1-.1.3-.1.6-.1s.5.1.6.2c.1.1.2.4.2.8v2.8c0 .3-.1.6-.2.7-.1.1-.3.2-.6.2-.5 0-.8-.3-.9-1 0-.2-.1-.4-.1-.5-.1-.5-.5-1-1-1.3-.5-.3-1.1-.5-1.8-.5-1.3 0-2.3.5-3.1 1.4-.8.9-1.2 2.2-1.2 3.8 0 1.6.4 2.8 1.2 3.8.8.9 1.8 1.4 3.1 1.4.4 0 .8-.1 1.3-.2.4-.1.9-.3 1.3-.5.2-.1.5-.3.8-.5.3-.2.6-.4.7-.4.2 0 .4.1.6.2.2.1.2.3.2.5s-.1.4-.3.6c-.2.2-.5.4-.9.7-.6.4-1.2.7-1.8.9-.6.2-1.3.3-1.9.3-1.8 0-3.3-.6-4.4-1.9-1.2-1.3-1.7-2.9-1.7-4.8s.6-3.6 1.8-4.9 2.7-1.9 4.5-1.9c.5 0 1 .1 1.5.2.2 0 .7.2 1.2.4M33 81.2h-.2c-.4 0-.7-.1-.9-.2-.2-.1-.2-.3-.2-.6s.1-.5.2-.6c.1-.1.3-.2.6-.2h2.7c.6 0 1 .1 1.1.2.2.1.2.3.2.6s-.1.5-.3.6c-.2.1-.5.2-1.1.2h-.5v6c0 .8 0 1.4.1 1.8.1.4.2.7.4 1 .3.4.6.8 1.1 1 .5.2 1 .4 1.5.4 1 0 1.8-.3 2.3-.9.5-.6.7-1.6.7-3v-6.2h-.6c-.6 0-.9-.1-1.1-.2-.2-.1-.3-.3-.3-.6s.1-.5.2-.6c.2-.1.5-.2.9-.2h2.9c.3 0 .5.1.6.2.1.1.2.3.2.6s-.1.5-.2.6c-.2.1-.5.2-.9.2h-.2v6.4c0 1.8-.4 3.1-1.2 4-.8.9-2 1.3-3.5 1.3-1.4 0-2.6-.4-3.4-1.3-.7-1-1.1-2.2-1.1-3.7v-6.8zM64.2 92.1c0 .3-.1.6-.2.7-.1.1-.3.2-.6.2s-.5-.1-.7-.3c-.1-.2-.2-.5-.3-.9l-.1-2.5v-.2c0-.4.1-.6.2-.7.1-.1.4-.2.7-.2.4 0 .7.3.9.9.1.3.2.5.2.7.3.5.7.9 1.2 1.2.5.3 1.2.4 2 .4.9 0 1.7-.2 2.3-.7.6-.4.9-1 .9-1.7 0-.6-.2-1-.5-1.4-.4-.4-.9-.6-1.6-.7l-1.6-.2c-1.5-.2-2.6-.6-3.3-1.2-.7-.6-1-1.4-1-2.4 0-1.1.5-2 1.4-2.8.9-.8 2.1-1.1 3.4-1.1.4 0 .8.1 1.3.2.4.1.9.3 1.5.5 0-.2.1-.4.2-.4.1-.1.3-.1.5-.1.3 0 .5 0 .7.1.1.1.2.3.2.7l.2 2.3v.1c0 .3-.1.5-.2.6-.1.1-.3.2-.6.2-.4 0-.7-.3-.9-.8-.1-.3-.2-.5-.3-.7-.2-.4-.6-.6-1-.8-.5-.2-1-.3-1.5-.3-.9 0-1.6.2-2.1.7-.5.4-.8 1-.8 1.7 0 .5.2 1 .6 1.3.4.3 1 .5 1.9.7l1.7.2c1.3.2 2.2.5 2.8 1.2.6.6 1 1.4 1 2.4 0 1.2-.5 2.2-1.4 2.9-.9.7-2.1 1.1-3.6 1.1-.5 0-1-.1-1.6-.2-.8-.2-1.3-.4-1.9-.7M92.6 84c0 .5-.1.9-.2 1-.1.1-.3.2-.7.2-.3 0-.4-.1-.6-.2-.1-.1-.2-.3-.2-.6v-.5l.1-3.6c0-.3.1-.5.2-.6.1-.1.3-.2.6-.2h9.4c.3 0 .5.1.6.2.1.1.2.3.2.6l.1 3.6V84.5c0 .3-.1.5-.2.6-.1.1-.3.2-.6.2s-.5-.1-.6-.2c-.1-.1-.2-.5-.2-1l-.1-2.8h-3.1V91h2.1c.3 0 .5.1.7.2.1.1.2.3.2.6s-.1.4-.2.6c-.1.1-.3.2-.6.2h-6.1c-.2 0-.4-.1-.6-.2-.1-.1-.2-.3-.2-.6s.1-.5.2-.6c.1-.1.4-.2.7-.2h2.1v-9.8h-3.1l.1 2.8zM126.8 91.3c1.2 0 2.2-.5 2.9-1.4.7-.9 1-2.2 1-3.8 0-1.6-.4-2.9-1-3.8-.7-.9-1.7-1.4-2.9-1.4s-2.2.5-2.9 1.4c-.7.9-1 2.2-1 3.9 0 1.6.3 2.9 1 3.8.7.8 1.7 1.3 2.9 1.3m5.9-5.2c0 2-.5 3.6-1.7 4.9-1.1 1.3-2.5 1.9-4.2 1.9-1.7 0-3.1-.6-4.2-1.9-1.1-1.3-1.7-2.9-1.7-4.9 0-2 .5-3.6 1.6-4.9 1.1-1.3 2.5-1.9 4.2-1.9 1.7 0 3.1.6 4.2 1.9 1.2 1.3 1.8 2.9 1.8 4.9M157.8 87.2l2.3-6.8c.1-.3.2-.4.4-.6.2-.1.4-.2.8-.2h1.8c.2 0 .4.1.5.2.1.1.2.3.2.5 0 .3-.1.5-.2.6-.1.1-.4.2-.8.2h-.2l.3 9.9h.3c.5 0 .8.1.9.2.2.1.2.3.2.6s-.1.5-.2.6c-.1.1-.3.2-.6.2h-3.1c-.4 0-.7-.1-.9-.2-.2-.1-.2-.3-.2-.6s.1-.5.3-.6c.2-.1.5-.2 1-.2h.5l-.2-9.3-2.1 6.2c-.1.3-.2.5-.4.6-.2.1-.4.2-.7.2-.3 0-.5-.1-.7-.2-.2-.1-.3-.3-.4-.6l-2.2-6.2-.2 9.3h.7c.4 0 .7.1.9.2.2.1.3.3.3.6s-.1.5-.2.6c-.1.1-.4.2-.9.2h-3c-.3 0-.4-.1-.6-.2-.1-.1-.2-.3-.2-.6s.1-.5.2-.6c.2-.1.5-.2.9-.2h.2l.3-9.9h-.2c-.4 0-.7-.1-.8-.2-.2-.1-.2-.3-.2-.6 0-.2.1-.4.2-.5.1-.1.3-.2.5-.2h1.8c.3 0 .6.1.8.2.2.1.3.3.4.6l2.5 6.8zM206.1 81.2v5h2c1.1 0 2-.2 2.6-.6.6-.4.8-1.1.8-1.9 0-.8-.3-1.5-.9-1.9-.6-.4-1.4-.6-2.5-.6h-2zm2.3 9.8c.4 0 .6.1.8.2.2.1.2.3.2.6s-.1.5-.2.6c-.1.1-.4.2-.9.2H203c-.2 0-.4-.1-.6-.2-.1-.1-.2-.3-.2-.6s.1-.4.2-.6c.1-.1.3-.2.6-.2h1.4v-9.8h-.8c-.6 0-1-.1-1.2-.2-.2-.1-.2-.3-.2-.6s.1-.4.2-.6c.1-.1.3-.2.6-.2h5c1.8 0 3.1.3 4 1 .9.7 1.4 1.7 1.4 3s-.5 2.3-1.4 3c-.9.7-2.2 1-4 1h-1.9V91h2.3zM233.3 81.2h-.2c-.4 0-.7-.1-.9-.2-.2-.1-.2-.3-.2-.6s.1-.5.2-.6c.1-.1.3-.2.6-.2h2.7c.6 0 1 .1 1.1.2.2.1.2.3.2.6s-.1.5-.3.6c-.2.1-.5.2-1.1.2h-.5v6c0 .8 0 1.4.1 1.8.1.4.2.7.4 1 .3.4.6.8 1.1 1 .5.2 1 .4 1.5.4 1 0 1.8-.3 2.3-.9.5-.6.7-1.6.7-3v-6.2h-.6c-.6 0-.9-.1-1.1-.2-.2-.1-.3-.3-.3-.6s.1-.5.2-.6c.2-.1.5-.2.9-.2h2.9c.3 0 .5.1.6.2.1.1.2.3.2.6s-.1.5-.2.6c-.2.1-.5.2-.9.2h-.2v6.4c0 1.8-.4 3.1-1.2 4-.8.9-2 1.3-3.5 1.3-1.4 0-2.6-.4-3.4-1.3-.9-.9-1.3-2.1-1.3-3.6v-6.9zM266.1 91h2.4c1.4 0 2.3-.2 2.9-.5.6-.3.8-.9.8-1.7 0-.8-.3-1.4-.8-1.7-.5-.3-1.5-.5-2.8-.5h-2.5V91zm0-5.8h2.3c1 0 1.8-.2 2.3-.5.5-.3.7-.8.7-1.5 0-.6-.2-1.1-.7-1.5-.5-.3-1.1-.5-1.9-.5h-2.7v4zm2.1 7.3h-4.9c-.3 0-.4-.1-.6-.2-.1-.1-.2-.3-.2-.6s.1-.5.2-.6c.3-.1.7-.1 1.3-.1h.4v-9.8h-.4c-.6 0-.9-.1-1.1-.2-.2-.1-.2-.3-.2-.6s.1-.5.2-.6c.1-.1.3-.2.6-.2h5.1c1.5 0 2.7.3 3.5.9.8.6 1.2 1.5 1.2 2.6 0 .6-.1 1.1-.4 1.5-.2.4-.6.8-1.1 1.1.8.3 1.4.7 1.7 1.2.4.5.6 1.1.6 1.9 0 .7-.2 1.3-.5 1.8s-.8 1-1.4 1.3c-.4.2-.8.3-1.2.4-.4.1-1 .1-1.8.1h-1zM302.8 88.1c0-.5.1-.9.2-1.1.1-.2.3-.2.6-.2s.5.1.6.2c.1.1.2.3.2.6v4.1c0 .3-.1.5-.2.6-.1.1-.3.2-.6.2h-10.1c-.3 0-.5-.1-.6-.2-.1-.1-.2-.3-.2-.6s.1-.5.2-.6c.2-.1.5-.2 1.1-.2h1.4v-9.8H294c-.5 0-.9-.1-1-.2-.2-.1-.2-.3-.2-.6s.1-.5.2-.6c.1-.1.3-.2.6-.2h5.9c.3 0 .5.1.6.2.1.1.2.3.2.6s-.1.5-.2.6c-.2.1-.5.2-1.1.2h-2V91h5.8v-2.9zM330.9 91c.6 0 .9.1 1.1.2.2.1.2.3.2.6s-.1.5-.2.6c-.2.1-.5.2-1.1.2h-7.1c-.3 0-.5-.1-.6-.2-.1-.1-.2-.3-.2-.6s.1-.5.2-.6c.2-.1.5-.2 1.1-.2h2.5v-9.8h-2.5c-.5 0-.9-.1-1.1-.2-.2-.1-.2-.3-.2-.6s.1-.5.2-.6c.1-.1.3-.2.6-.2h7.6c.3 0 .5.1.6.2.1.1.2.3.2.6s-.1.5-.2.6c-.2.1-.5.2-1.1.2h-2.5V91h2.5zM352.8 92.1c0 .3-.1.6-.2.7-.1.1-.3.2-.6.2s-.5-.1-.7-.3c-.1-.2-.2-.5-.3-.9l-.1-2.5v-.2c0-.4.1-.6.2-.7.1-.1.4-.2.7-.2.4 0 .7.3.9.9.1.3.2.5.2.7.3.5.7.9 1.2 1.2.5.3 1.2.4 2 .4.9 0 1.7-.2 2.3-.7.6-.4.9-1 .9-1.7 0-.6-.2-1-.5-1.4-.4-.4-.9-.6-1.6-.7l-1.6-.2c-1.5-.2-2.6-.6-3.3-1.2-.7-.6-1-1.4-1-2.4 0-1.1.5-2 1.4-2.8.9-.8 2.1-1.1 3.4-1.1.4 0 .8.1 1.3.2.4.1.9.3 1.5.5 0-.2.1-.4.2-.4.1-.1.3-.1.5-.1.3 0 .5 0 .7.1.1.1.2.3.2.7l.2 2.3v.1c0 .3-.1.5-.2.6-.1.1-.3.2-.6.2-.4 0-.7-.3-.9-.8-.1-.3-.2-.5-.3-.7-.2-.4-.6-.6-1-.8-.5-.2-1-.3-1.5-.3-.9 0-1.6.2-2.1.7-.5.4-.8 1-.8 1.7 0 .5.2 1 .6 1.3.4.3 1 .5 1.9.7l1.7.2c1.3.2 2.2.5 2.8 1.2.6.6 1 1.4 1 2.4 0 1.2-.5 2.2-1.4 2.9-.9.7-2.1 1.1-3.6 1.1-.5 0-1-.1-1.6-.2-.8-.2-1.4-.4-1.9-.7M382.5 91h.7c.4 0 .7.1.9.2.2.1.3.3.3.6s-.1.5-.2.6c-.1.1-.5.2-1 .2h-2.9c-.3 0-.5-.1-.6-.2-.1-.1-.2-.3-.2-.6s.1-.5.2-.6c.2-.1.5-.2.9-.2h.2v-9.8h-.2c-.4 0-.7-.1-.9-.2-.2-.1-.2-.3-.2-.6s.1-.5.2-.6c.1-.1.3-.2.6-.2h2.8c.6 0 .9.1 1.1.2.2.1.2.3.2.6s-.1.5-.3.6c-.2.1-.6.2-1.1.2h-.5V85h5.2v-3.8h-.7c-.4 0-.7-.1-.9-.2-.2-.1-.3-.3-.3-.6s.1-.5.2-.6c.2-.1.6-.2 1.2-.2h2.7c.3 0 .5.1.6.2.1.1.2.3.2.6s-.1.5-.2.6c-.2.1-.4.2-.8.2h-.3V91h.2c.4 0 .7.1.9.2.2.1.2.3.2.6s-.1.5-.2.6c-.2.1-.5.2-1.1.2h-2.2c-.6 0-1-.1-1.1-.2-.2-.1-.2-.3-.2-.6s.1-.5.3-.6c.2-.1.5-.2 1.1-.2h.5v-4.5h-5.2V91zM417.3 91c.6 0 .9.1 1.1.2.2.1.2.3.2.6s-.1.5-.2.6c-.2.1-.5.2-1.1.2h-7.1c-.3 0-.5-.1-.6-.2-.1-.1-.2-.3-.2-.6s.1-.5.2-.6c.2-.1.5-.2 1.1-.2h2.5v-9.8h-2.5c-.5 0-.9-.1-1.1-.2-.2-.1-.2-.3-.2-.6s.1-.5.2-.6c.1-.1.3-.2.6-.2h7.6c.3 0 .5.1.6.2.1.1.2.3.2.6s-.1.5-.2.6c-.2.1-.5.2-1.1.2h-2.5V91h2.5zM440.5 91h1.4c.4 0 .7.1.8.2.2.1.3.3.3.6s-.1.5-.2.6c-.2.1-.5.2-1 .2h-3.3c-.3 0-.5-.1-.6-.2-.1-.1-.2-.3-.2-.6s.1-.5.2-.6c.1-.1.4-.2.9-.2h.2v-9.8h-.3c-.6 0-1-.1-1.2-.2-.2-.1-.3-.3-.3-.6s.1-.5.3-.6c.2-.1.5-.2.9-.2h1.7c.3 0 .6 0 .7.1.1.1.3.3.5.6l5.5 9.4v-8.6H445.6c-.4 0-.7-.1-.9-.2-.2-.1-.3-.3-.3-.6s.1-.5.2-.6.5-.2 1-.2h3.1c.3 0 .5.1.6.2.1.1.2.3.2.6s-.1.5-.2.6c-.2.1-.4.2-.9.2h-.1V92c0 .2 0 .4-.1.4-.1.1-.3.1-.7.1-.4 0-.6 0-.7-.1-.1 0-.2-.2-.4-.6l-5.8-10V91zM477.4 90.6V88h-2.7c-.2 0-.4-.1-.5-.2-.1-.1-.2-.3-.2-.5 0-.3 0-.5.1-.6.1-.1.3-.1.5-.1h4.7c.2 0 .3.1.4.2.1.1.1.3.1.5 0 .3-.1.5-.2.6-.1.1-.3.2-.6.2v3.3c0 .2 0 .3-.1.4 0 .1-.1.2-.3.2-.4.2-1 .5-1.8.6-.8.2-1.6.3-2.4.3-1.9 0-3.5-.6-4.7-1.9s-1.8-2.9-1.8-4.8c0-2 .6-3.6 1.8-4.9 1.2-1.3 2.7-1.9 4.5-1.9.5 0 1 .1 1.5.2s1 .3 1.5.5c.1-.2.2-.3.3-.4.1-.1.3-.1.5-.1.3 0 .6.1.7.3.1.2.2.7.2 1.4v1.5c0 .4-.1.6-.2.7-.1.1-.3.2-.6.2-.4 0-.6-.2-.8-.7-.1-.1-.1-.2-.1-.3-.3-.6-.7-1-1.1-1.3-.5-.3-1.1-.5-1.7-.5-1.3 0-2.3.5-3.1 1.4-.8.9-1.2 2.2-1.2 3.8 0 1.6.4 2.9 1.3 3.9s2 1.5 3.4 1.5c.4 0 .8-.1 1.3-.2.3-.2.8-.4 1.3-.7"/></g> </symbol> <symbol viewBox="0 0 33 33" id="arrow-left"> <polyline fill="none" stroke="currentColor" stroke-width="3" points="12.001 9.939 22.182 19.999 32.059 9.939" transform="matrix(0 -1 -1 0 24.939 37.999)"/> </symbol> <symbol viewBox="0 0 33 33" id="arrow-right"> <polyline fill="none" stroke="currentColor" stroke-width="3" points="11.996 10.944 22.172 21.004 32.044 10.944" transform="rotate(-90 23.02 15.974)"/> </symbol> <symbol viewBox="0 0 35 35" id="go-up"> <g fill="none" fill-rule="evenodd"> <path fill="#FFF" d="M14 14.34L17.34 11l3.34 3.34-.606.587-2.324-2.325v10.082h-.82V12.602l-2.344 2.325z"/> <path stroke="#FFF" d="M9.935 1H1v33h33V1H9.935z"/> </g> </symbol> <symbol viewBox="0 0 32 32" id="play"> <g fill="#FFF" fill-rule="evenodd"> <path d="M12.943 10.586L22.998 16l-10.055 5.415v-10.83zM12 9v14l13-7-13-7z"/><path d="M16 1c8.27 0 15 6.73 15 15s-6.73 15-15 15S1 24.27 1 16 7.73 1 16 1m0 31c8.823 0 16-7.177 16-16 0-8.822-7.177-16-16-16C7.178 0 0 7.178 0 16s7.178 16 16 16"/> </g> </symbol> </svg> <article> <div class="labels" data-label="logo"></div> <div class="brand__logo"> <a class="logo logo--header" href="#"> <svg class="raconteur"> <use class="raconteur-logo raconteur-logo--header" xlink:href="#raconteur"/> </svg> </a> </div> <section> <div class="labels" data-label="typefaces"></div> <div class="brand__fonts"> <div class="brand__font brand__font--apercu-regular"> <div class="">Apercu Regular</div> <div class="caps">A B C D E F G H I J K L M N O P Q R S T U V X Y Z</div> <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v x y z</div> <div class="others">1 2 3 4 5 6 7 8 9 0 - = _ + < > ? / . , : "</div> </div> <div class="brand__font brand__font--apercu-italic"> <div class="">Apercu Italic</div> <div class="caps">A B C D E F G H I J K L M N O P Q R S T U V X Y Z</div> <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v x y z</div> <div class="others">1 2 3 4 5 6 7 8 9 0 - = _ + < > ? / . , : "</div> </div> <div class="brand__font brand__font--apercu-bold"> <div class="">Apercu Bold</div> <div class="caps">A B C D E F G H I J K L M N O P Q R S T U V X Y Z</div> <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v x y z</div> <div class="others">1 2 3 4 5 6 7 8 9 0 - = _ + < > ? / . , : "</div> </div> <div class="brand__font brand__font--apercu-medium"> <div class="">Apercu Medium</div> <div class="caps">A B C D E F G H I J K L M N O P Q R S T U V X Y Z</div> <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v x y z</div> <div class="others">1 2 3 4 5 6 7 8 9 0 - = _ + < > ? / . , : "</div> </div> <div class="brand__font brand__font--apercu-light"> <div class="">Apercu Light</div> <div class="caps">A B C D E F G H I J K L M N O P Q R S T U V X Y Z</div> <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v x y z</div> <div class="others">1 2 3 4 5 6 7 8 9 0 - = _ + < > ? / . , : "</div> </div> <div class="brand__font brand__font--apercu-mono"> <div class="">Apercu Mono</div> <div class="caps">A B C D E F G H I J K L M N O P Q R S T U V X Y Z</div> <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v x y z</div> <div class="others">1 2 3 4 5 6 7 8 9 0 - = _ + < > ? / . , : "</div> </div> <div class="brand__font brand__font--stanley-regular"> <div class="">Stanley Regular</div> <div class="caps">A B C D E F G H I J K L M N O P Q R S T U V X Y Z</div> <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v x y z</div> <div class="others">1 2 3 4 5 6 7 8 9 0 - = _ + < > ? / . , : "</div> </div> <div class="brand__font brand__font--stanley-italic"> <div class="">Stanley Italic</div> <div class="caps">A B C D E F G H I J K L M N O P Q R S T U V X Y Z</div> <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v x y z</div> <div class="others">1 2 3 4 5 6 7 8 9 0 - = _ + < > ? / . , : "</div> </div> <div class="brand__font brand__font--stanley-bold"> <div class="">Stanley Bold</div> <div class="caps">A B C D E F G H I J K L M N O P Q R S T U V X Y Z</div> <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v x y z</div> <div class="others">1 2 3 4 5 6 7 8 9 0 - = _ + < > ? / . , : "</div> </div> <div class="brand__font brand__font--stanley-bolditalic"> <div class="">Stanley BoldItalic</div> <div class="caps">A B C D E F G H I J K L M N O P Q R S T U V X Y Z</div> <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v x y z</div> <div class="others">1 2 3 4 5 6 7 8 9 0 - = _ + < > ? / . , : "</div> </div> <div class="brand__font brand__font--stanley-poster"> <div class="">Stanley Poster</div> <div class="caps">A B C D E F G H I J K L M N O P Q R S T U V X Y Z</div> <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v x y z</div> <div class="others">1 2 3 4 5 6 7 8 9 0 - = _ + < > ? / . , : "</div> </div> </div> </section> <section> <div class="brand__colors"> <div class="labels" data-label="colours"></div> <ul> <li> <div class="color-box color-accent"> </div> <h2>#D22738</h2> </li> <li> <div class="color-box color-text"> </div> <h2>#141413</h2> </li> </ul> <ul> <li> <div class="color-box color-warm-1"> </div> <h2>#781541</h2> </li> <li> <div class="color-box color-warm-2"> </div> <h2>#DE6771</h2> </li> <li> <div class="color-box color-warm-3"> </div> <h2>#FFF572</h2> </li> </ul> <ul> <li> <div class="color-box color-chill-1"> </div> <h2>#00484E</h2> </li> <li> <div class="color-box color-chill-2"> </div> <h2>#00976D</h2> </li> <li> <div class="color-box color-chill-3"> </div> <h2>#67BCBE</h2> </li> </ul> </div> </section> <section> <div class="labels" data-label="icons"></div> <div class="brand__icons"> <ul> <li title="symbol-c_10"><div class="icon-box"><div class="icon symbol-c_10 symbol-c_10-dims"><!-- symbol-c_10 --></div></div><h2>symbol-c_10</h2> </li> <li title="symbol-c_11"><div class="icon-box"><div class="icon symbol-c_11 symbol-c_11-dims"><!-- symbol-c_11 --></div></div><h2>symbol-c_11</h2> </li> <li title="symbol-c_12"><div class="icon-box"><div class="icon symbol-c_12 symbol-c_12-dims"><!-- symbol-c_12 --></div></div><h2>symbol-c_12</h2> </li> <li title="symbol-c_3"><div class="icon-box"><div class="icon symbol-c_3 symbol-c_3-dims"><!-- symbol-c_3 --></div></div><h2>symbol-c_3</h2> </li> <li title="symbol-c_4"><div class="icon-box"><div class="icon symbol-c_4 symbol-c_4-dims"><!-- symbol-c_4 --></div></div><h2>symbol-c_4</h2> </li> <li title="symbol-c_5"><div class="icon-box"><div class="icon symbol-c_5 symbol-c_5-dims"><!-- symbol-c_5 --></div></div><h2>symbol-c_5</h2> </li> <li title="symbol-c_6"><div class="icon-box"><div class="icon symbol-c_6 symbol-c_6-dims"><!-- symbol-c_6 --></div></div><h2>symbol-c_6</h2> </li> <li title="symbol-c_7"><div class="icon-box"><div class="icon symbol-c_7 symbol-c_7-dims"><!-- symbol-c_7 --></div></div><h2>symbol-c_7</h2> </li> <li title="symbol-c_8"><div class="icon-box"><div class="icon symbol-c_8 symbol-c_8-dims"><!-- symbol-c_8 --></div></div><h2>symbol-c_8</h2> </li> <li title="symbol-c_9"><div class="icon-box"><div class="icon symbol-c_9 symbol-c_9-dims"><!-- symbol-c_9 --></div></div><h2>symbol-c_9</h2> </li> </ul> </div> </section> <section> <div class="brand__typography"> </div> </section> </article> </body></html>
Related:
See More
Free Template
Material Kit React
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76