"title"
Bootstrap 3.0.0 Snippet by evarevirus

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

Paper Kit

Questions / Comments: