"Untitled"
Bootstrap 4.1.1 Snippet by Briancas20

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Pacifico:300,400,600,700&lang=en" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css); @import url("https://fonts.googleapis.com/css?family=Pacifico:300,400,600"); @import url("https://fonts.googleapis.com/css?family=Pacifico"); html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } * { box-sizing: border-box; } html { font-size: 14px; } body { font-family: 'Open Sans', sans-serif; background-color: #FFFFFF; color: #7e8a9b; } i { display: inline-block; } h1, h2, h3 { margin: 0; } h3 { font-size: 10px; } a { text-decoration: none; } button::-moz-focus-inner { border: 0; padding: 0; } ul { list-style: none; margin: 0; padding: 0; } .sidebar { background-color: #4363a2; font-size: 0.75rem; width: 15%; } .sidebar-avatar { padding: 1.8rem; text-align: center; } .sidebar-avatar-photo { margin: auto; margin-bottom: 1rem; } .sidebar-menu { padding: 1.3rem; } .sidebar-avatar, .sidebar-menu { border-bottom: 2px solid #2B3444; } .sidebar-title { color: #55627A; } .sidebar-title, .sidebar-item { margin-bottom: 1.78rem; } .sidebar-link, .sidebar-avatar-name, .sidebar-item-label { color: #8893a6; } .sidebar-link:hover { color: white; text-decoration: underline; } .sidebar-avatar-name { margin-right: 0.3rem; } .sidebar-link-concept { margin-left: 0.35rem; } .sidebar-link-concept { text-transform: uppercase; } .content { width: 85%; } .dashboard-container { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 100%; height:100vh; } .header { padding: 2.85rem .0rem 0; border-bottom: 1px solid #d0d8e0; } .header-intro, .header-right { display: -webkit-box; display: -ms-flexbox; display: flex; } .header-intro { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 2.85rem; } .header-right { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .header2 { font-weight: normal; margin-bottom: 1.43rem; font-size: 55px; font-family: Pacifico; color:#4363a2; } .header-left-city { margin-left: 0.0rem; color: #4363a2; } .header-left-city:after { content: ''; display: inline-block; width: 2px; height: 2px; background-color: #C2C8CF; border-radius: 50%; position: relative; left: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .header-left-link { color: #3da3f9; margin-left: 0.75rem; } .header-left-link:hover { text-decoration: underline; color: #7e8a9b; } .header-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; } .header-navigation .navigation-item { margin-right: 2.85rem; } .header-navigation .navigation-item-link { color: #7e8a9b; font-weight: bold; text-transform: uppercase; font-size: 1rem; display: inline-block; } .header-navigation .navigation-item-link:hover { color: black; } .header-navigation .navigation-item-link:after { content: ''; display: block; width: 0; height: 4px; background-color: #389AFA; position: relative; bottom: -20px; } .navigation-item-link:hover:after { width: 100%; } .header-right-item { margin-right: 0.86rem; } .data-information { background-color: #ebf1f5; padding: 3.43rem 2.85rem; } .info { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 2rem; } .field-checkbox { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; color: #8893a6; } .field-checkbox:before { content: ''; display: inline-block; background-color: yellow; width: 0.75rem; height: 0.75rem; } .checkbox { opacity: 0; position: abolute; left: -9999; } .field-checkbox.is-yellow:before { background-color: yellow; } .field-checkbox.is-blue:before { background-color: #3da3f9; } .field-checkbox.is-pink:before { background-color: #E94060; } .field-checkbox.is-green:before { background-color: #4cbac1; } .checkbox-tip { width: 0.40rem; height: 0.40rem; border-right: 1px solid #354052; border-bottom: 1px solid #354052; -webkit-transform: translate(0, 50%) rotate(30deg); transform: translate(0, 50%) rotate(30deg); position: absolute; top: -0.10em; left: 0.20em; opacity: 0; } .field-checkbox .checkbox:checked ~ .checkbox-tip { opacity: 1; } .icon-sidebar { text-align: center; width: 16px; } .icon-content { color: #7e8a9b; } .icon-hamburguer { position: relative; } .icon-hamburguer:after { border-bottom: 4px solid transparent; border-right: 4px solid #3da3f9; border-top: 4px solid transparent; content: ''; display: inline-block; height: 0; left: 0; position: absolute; top: 50%; -webkit-transform: translate(-150%, -50%); transform: translate(-150%, -50%); width: 0; } .icon-action-sidebar { left: 1.5rem; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .data-user { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .social-sidebar { width: calc(32.5% - 2.85rem); } .button { border: 0; outline: none; } .button-toolbar { background-color: white; padding: 1.78rem; } .button-toolbar:hover { background-color: #3da3f9; } .button-header-right-item { border-radius: 50%; height: 2.15rem; width: 2.15rem; } .button-header-right-item-open { border-radius: 2.15rem; font-size: 0.85rem; font-weight: bold; padding: 0.45rem 1rem; text-transform: uppercase; } .button-header-right-item-open:before { background-color: #8CC63D; border-radius: 50%; content: ''; display: inline-block; height: 8px; margin-right: 10px; width: 8px; } .button-header-right-item, .button-header-right-item-open { border: 1px solid #d0d8e0; text-align: center; background-color: white; } .button-border-arrow { width: 35px; height: 35px; background-color: #fff; } .button-social { border-radius: 4px; color: white; display: block; padding: 0.70rem 1.5rem; position: relative; text-align: center; } .social-link { margin-bottom: 1rem; } .facebook { background-color: #4A70C1; } .twitter { background-color: #3da3f9; } .linkedin { background-color: #2F7FBC; } .action-sidebar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: calc(32.5% - 2.85rem); } .action-sidebar-social { margin-bottom: 2.3rem; } .action-sidebar-send-title { display: inline-block; font-size: 1rem; } .action-sidebar-send-text { display: block; font-size: 0.714rem; } .action-sidebar-send-title, .action-sidebar-send-text, .action-sidebar-send li { margin-bottom: 1.5rem; } .action-sidebar-send li { border-bottom: 2px solid #d0d8e0; } .action-sidebar-send li:last-of-type { border-bottom: 0; margin-bottom: 0; } /*OBJECTS*/ .clearfix:after, .field-group:after, .clearfix:before, .field-group:before { content: ''; display: table; } .clearfix:after, .field-group:after { clear: both; } .avatar { background-image: url(http://lorempixel.com/50/50/); border-radius: 50%; display: block; height: 50px; width: 50px; } .avatar { background-color: #F06050; } .toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; } .toolbar-item { border-left: 1px solid #d0d8e0; border-bottom: 1px solid #d0d8e0; } .toolbar-item:first-of-type { border-left: 0; } .toolbar-item.border-right { border-right: 1px solid #EBECEE; } .toolbar-item.long { -webkit-box-flex: 5; -ms-flex-positive: 5; flex-grow: 5; position: relative; z-index: 1; } .graphic-circles { margin-right: 4rem; text-align: center; } .group-circles { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 2.85rem; } .group-circle-item { margin-right: 2.14rem; position: relative; } .group-circle-item:last-child { margin-right: 0; } .circle { border-radius: 50%; border: 10px solid #d7e2eb; height: 130px; width: 130px; } .circle-one { border-left: 10px solid #4cbac1; border-right: 10px solid #4cbac1; border-top: 10px solid #4cbac1; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .circle-two { border-left: 10px solid #3da3f9; border-top: 10px solid #3da3f9; } .circle-three { border-left: 10px solid #AD68AE; } .circle-two, .circle-three { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } .circle-description { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .circle-numbers { font-size: 2.14rem; } .circle-concept { font-size: 0.72rem; } .totals-concept, .circle-concept { text-transform: uppercase; } .circle-numbers, .circle-concept { display: block; text-align: center; } .rounded { background-color: white; border-radius: 30px; border: 1px solid #BBC4CD; display: inline-block; font-size: 0.71rem; padding: 0.70rem 1rem; } .graphic-group { text-align: center; } .graphic { background-color: #ECF2F6; color: #7e8a9b; height: 100%; margin-bottom: 40px; position: relative; } .graphic-days { bottom: -10%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: absolute; width: 100%; } .graphic, .graphic-days-item { display: inline-block; } .graphic-days-item { font-size: 12px; text-transform: uppercase; width: 15px; } .graphic-numbers { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; left: -10%; position: absolute; } .graphic-bars { display: -webkit-box; display: -ms-flexbox; display: flex; } .graphic-bar { background-color: #d7e2eb; border-radius: 4px; height: 150px; margin-left: 10px; position: relative; width: 15px; } .graphic-bar:first-child { margin-left: 0; } .graphic-bar:after { background-color: #4cbac1; border-radius: 4px; bottom: 0; content: ''; display: block; position: absolute; width: 15px; } .graphic-bar:before { content: attr(data-day); display: inline-block; font-size: 10px; height: 0; position: relative; top: 100%; width: 15px; } .graphic-bar.ten-percent:after { height: 10%; } .graphic-bar.thirty-percent:after { height: 30%; } .graphic-bar.fifty-percent:after { height: 50%; } .graphic-bar.sixty-percent:after { height: 60%; } dl, dd { margin: 0; } dt, dd { font-size: 12px; vertical-align: top; } dt { width: 30%; } dd { width: 70%; } /*this is the user prompt*/ .userprompt{ text-align: left; } .job-description-table { background-color: white; border: 1px solid #d0d8e0; box-shadow: 0 1px 0 #d0d8e0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 0; width: 67.5%; } .job-description-table-item.header { background-color: #6F7C95; color: white; } .job-description-table-item { padding: 20px; } .job-description-table-item.header:nth-child(2) { padding-left: 0; } .job-description-table-item.header, .job-description-table-item.concept { text-transform: uppercase; } .job-description-table-item.concept, .definition.salary { font-weight: bold; } .job-description-table-item.definition { padding-left: 0; } .job-description-table-item.concept, .job-description-table-item.definition { position: relative; } .job-description-table-item.concept:last-of-type:after, .job-description-table-item.definition:last-of-type:after { display: none; } .job-description-table-item.concept.align-middle { line-height: 3; } .job-descrition-table-item-avatar { display: inline-block; height: 30px; margin-right: 10px; vertical-align: middle; width: 30px; } .job-description-table-item.concept:after, .job-description-table-item.definition:after { background-color: #E6EDF2; bottom: 0; content: ''; display: block; height: 1px; position: absolute; width: calc(100% - 20px); } .arrow { border-bottom: 1px solid #8893A6; border-right: 1px solid #8893A6; height: 5px; width: 5px; } .arrow.bottom { -webkit-transform: translateY(-30%) rotate(45deg); transform: translateY(-30%) rotate(45deg); } .arrow.top { margin: 0 auto; -webkit-transform: translateY(50%) rotate(-135deg); transform: translateY(50%) rotate(-135deg); background-color: #ebf1f5; display: block; height: 15px; width: 15px; } .border-arrow { margin-bottom: 2rem; position: relative; text-align: center; } .border-arrow:after, .border-arrow:before { background-color: #d0d8e0; content: ''; display: inline-block; height: 1px; position: absolute; top: 50%; width: 45%; } .border-arrow:after { left: 0; } .border-arrow:before { right: 0; } .field-text { border: none; outline: none; } .field-text:focus { box-shadow: 0 0 1px 1px #d0d8e0; } .field-text-action-sidebar { border-radius: 4px 0 0 4px; box-shadow: 0 1px 0 #d0d8e0; float: left; font-size: 0.714rem; margin-bottom: 2rem; padding: 0.6rem; width: 75%; } .action-sidebar-send li:last-child .field-text-action-sidebar { margin-bottom: 0; } .field-button { background-color: #4cbac1; border-radius: 0 4px 4px 0; border: none; color: white; float: left; font-size: 0.714rem; outline: none; padding: 0.6rem 1rem; } .field-text-search { width: 100%; border: 0; padding: 25px; padding: 25px 25px 25px 35px; } .field-text-search:focus { box-shadow: 0 0 0 1px #3da3f9; } </style></head><body> <div class="dashboard-container"> <div class="sidebar"> <div class="sidebar-avatar"> <div class="sidebar-avatar-photo avatar"></div> <div class="sidebar-avatar-user"> <span class="sidebar-avatar-name">Local Social Pro</span> <i class="arrow bottom"></i> </div> </div> <div class="sidebar-menu main"> <ul class="sidebar-items"> <li class="sidebar-item"> <a href="#" class="sidebar-link"> <span class="sidebar-link-concept">MY PROFILE</span> </a> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link"> <span class="sidebar-link-concept">AUTOMATION</span> </a> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link"> <span class="sidebar-link-concept"> INTEGRATIONS</span> </a> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link"> <span class="sidebar-link-concept">REQUEST A FLYER</span> </a> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link"> <span class="sidebar-link-concept">BILLING</span> </a> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link"> <span class="sidebar-link-concept">LOGOUT</span> </a> </li> </ul> </div> </div> <div class=" col-xs-10 col-sm-10 col-md-6 col-xs-offset-1 col-sm-offset-1 col-md-offset-2"> <div class="header"> <div class="header-intro"> <div class="header-left"> <h2 class ="header2"> Welcome, Firstname!</h2> <span class="header-left-city">You are Almost Done.</span> </div> </div> <ul class="header-navigation"> <li class="navigation-item"> <a href="#" class="navigation-item-link">My Profile</a> </li> <li class="navigation-item"> <a href="#" class="navigation-item-link">Your Details</a> </li> <li class="navigation-item"> <a href="#" class="navigation-item-link">About</a> </li> <li class="navigation-item"> <a href="#" class="navigation-item-link">summary</a> </li> </ul> </div> <div class=" col-sm-10 col-md-10"> <br> <span class="userprompt"> Please provide the information below. This information will be used in all your personalized graphics!</span> </div> </div> </div> </body></html>

Related: See More


Questions / Comments: