"layout"
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 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/andrewfarinella/pen/LkgPYb?depth=everything&order=popularity&page=20&q=card+list&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <style class="cp-pen-styles">* { -webkit-box-sizing: border-box; box-sizing: border-box; } @font-face { font-family: 'Avenir Light'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Light.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Light.otf") format("opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Light.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Light.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Light.svg#AvenirLTStd-Light") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Avenir Bold'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirNextLTPro-Bold.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirNextLTPro-Bold.otf") format("opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirNextLTPro-Bold.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirNextLTPro-Bold.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirNextLTPro-Bold.svg#AvenirNextLTPro-Bold") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Avenir Medium'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Medium.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Medium.otf") format("opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Medium.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Medium.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Medium.svg#AvenirLTStd-Medium") format("svg"); font-weight: normal; font-style: normal; } .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .row [class^=col] { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .col-full { width: 100%; max-width: 100%; } .row .col-flex { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .col-1of2 { width: calc( (100% / 2 ) * 1 ); max-width: calc( (100% / 2 ) * 1 ); } .col-1of3 { width: calc( (100% / 3 ) * 1 ); max-width: calc( (100% / 3 ) * 1 ); } .col-2of3 { width: calc( (100% / 3 ) * 2 ); max-width: calc( (100% / 3 ) * 2 ); } .col-1of4 { width: calc( (100% / 4 ) * 1 ); max-width: calc( (100% / 4 ) * 1 ); } .col-2of4 { width: calc( (100% / 4 ) * 2 ); max-width: calc( (100% / 4 ) * 2 ); } .col-3of4 { width: calc( (100% / 4 ) * 3 ); max-width: calc( (100% / 4 ) * 3 ); } .col-1of5 { width: calc( (100% / 5 ) * 1 ); max-width: calc( (100% / 5 ) * 1 ); } .col-2of5 { width: calc( (100% / 5 ) * 2 ); max-width: calc( (100% / 5 ) * 2 ); } .col-3of5 { width: calc( (100% / 5 ) * 3 ); max-width: calc( (100% / 5 ) * 3 ); } .col-4of5 { width: calc( (100% / 5 ) * 4 ); max-width: calc( (100% / 5 ) * 4 ); } .col-1of6 { width: calc( (100% / 6 ) * 1 ); max-width: calc( (100% / 6 ) * 1 ); } .col-2of6 { width: calc( (100% / 6 ) * 2 ); max-width: calc( (100% / 6 ) * 2 ); } .col-3of6 { width: calc( (100% / 6 ) * 3 ); max-width: calc( (100% / 6 ) * 3 ); } .col-4of6 { width: calc( (100% / 6 ) * 4 ); max-width: calc( (100% / 6 ) * 4 ); } .col-5of6 { width: calc( (100% / 6 ) * 5 ); max-width: calc( (100% / 6 ) * 5 ); } .col-1of7 { width: calc( (100% / 7 ) * 1 ); max-width: calc( (100% / 7 ) * 1 ); } .col-2of7 { width: calc( (100% / 7 ) * 2 ); max-width: calc( (100% / 7 ) * 2 ); } .col-3of7 { width: calc( (100% / 7 ) * 3 ); max-width: calc( (100% / 7 ) * 3 ); } .col-4of7 { width: calc( (100% / 7 ) * 4 ); max-width: calc( (100% / 7 ) * 4 ); } .col-5of7 { width: calc( (100% / 7 ) * 5 ); max-width: calc( (100% / 7 ) * 5 ); } .col-6of7 { width: calc( (100% / 7 ) * 6 ); max-width: calc( (100% / 7 ) * 6 ); } .col-1of8 { width: calc( (100% / 8 ) * 1 ); max-width: calc( (100% / 8 ) * 1 ); } .col-2of8 { width: calc( (100% / 8 ) * 2 ); max-width: calc( (100% / 8 ) * 2 ); } .col-3of8 { width: calc( (100% / 8 ) * 3 ); max-width: calc( (100% / 8 ) * 3 ); } .col-4of8 { width: calc( (100% / 8 ) * 4 ); max-width: calc( (100% / 8 ) * 4 ); } .col-5of8 { width: calc( (100% / 8 ) * 5 ); max-width: calc( (100% / 8 ) * 5 ); } .col-6of8 { width: calc( (100% / 8 ) * 6 ); max-width: calc( (100% / 8 ) * 6 ); } .col-7of8 { width: calc( (100% / 8 ) * 7 ); max-width: calc( (100% / 8 ) * 7 ); } .col-1of9 { width: calc( (100% / 9 ) * 1 ); max-width: calc( (100% / 9 ) * 1 ); } .col-2of9 { width: calc( (100% / 9 ) * 2 ); max-width: calc( (100% / 9 ) * 2 ); } .col-3of9 { width: calc( (100% / 9 ) * 3 ); max-width: calc( (100% / 9 ) * 3 ); } .col-4of9 { width: calc( (100% / 9 ) * 4 ); max-width: calc( (100% / 9 ) * 4 ); } .col-5of9 { width: calc( (100% / 9 ) * 5 ); max-width: calc( (100% / 9 ) * 5 ); } .col-6of9 { width: calc( (100% / 9 ) * 6 ); max-width: calc( (100% / 9 ) * 6 ); } .col-7of9 { width: calc( (100% / 9 ) * 7 ); max-width: calc( (100% / 9 ) * 7 ); } .col-8of9 { width: calc( (100% / 9 ) * 8 ); max-width: calc( (100% / 9 ) * 8 ); } .col-1of10 { width: calc( (100% / 10 ) * 1 ); max-width: calc( (100% / 10 ) * 1 ); } .col-2of10 { width: calc( (100% / 10 ) * 2 ); max-width: calc( (100% / 10 ) * 2 ); } .col-3of10 { width: calc( (100% / 10 ) * 3 ); max-width: calc( (100% / 10 ) * 3 ); } .col-4of10 { width: calc( (100% / 10 ) * 4 ); max-width: calc( (100% / 10 ) * 4 ); } .col-5of10 { width: calc( (100% / 10 ) * 5 ); max-width: calc( (100% / 10 ) * 5 ); } .col-6of10 { width: calc( (100% / 10 ) * 6 ); max-width: calc( (100% / 10 ) * 6 ); } .col-7of10 { width: calc( (100% / 10 ) * 7 ); max-width: calc( (100% / 10 ) * 7 ); } .col-8of10 { width: calc( (100% / 10 ) * 8 ); max-width: calc( (100% / 10 ) * 8 ); } .col-9of10 { width: calc( (100% / 10 ) * 9 ); max-width: calc( (100% / 10 ) * 9 ); } .col-1of11 { width: calc( (100% / 11 ) * 1 ); max-width: calc( (100% / 11 ) * 1 ); } .col-2of11 { width: calc( (100% / 11 ) * 2 ); max-width: calc( (100% / 11 ) * 2 ); } .col-3of11 { width: calc( (100% / 11 ) * 3 ); max-width: calc( (100% / 11 ) * 3 ); } .col-4of11 { width: calc( (100% / 11 ) * 4 ); max-width: calc( (100% / 11 ) * 4 ); } .col-5of11 { width: calc( (100% / 11 ) * 5 ); max-width: calc( (100% / 11 ) * 5 ); } .col-6of11 { width: calc( (100% / 11 ) * 6 ); max-width: calc( (100% / 11 ) * 6 ); } .col-7of11 { width: calc( (100% / 11 ) * 7 ); max-width: calc( (100% / 11 ) * 7 ); } .col-8of11 { width: calc( (100% / 11 ) * 8 ); max-width: calc( (100% / 11 ) * 8 ); } .col-9of11 { width: calc( (100% / 11 ) * 9 ); max-width: calc( (100% / 11 ) * 9 ); } .col-10of11 { width: calc( (100% / 11 ) * 10 ); max-width: calc( (100% / 11 ) * 10 ); } .col-1of12 { width: calc( (100% / 12 ) * 1 ); max-width: calc( (100% / 12 ) * 1 ); } .col-2of12 { width: calc( (100% / 12 ) * 2 ); max-width: calc( (100% / 12 ) * 2 ); } .col-3of12 { width: calc( (100% / 12 ) * 3 ); max-width: calc( (100% / 12 ) * 3 ); } .col-4of12 { width: calc( (100% / 12 ) * 4 ); max-width: calc( (100% / 12 ) * 4 ); } .col-5of12 { width: calc( (100% / 12 ) * 5 ); max-width: calc( (100% / 12 ) * 5 ); } .col-6of12 { width: calc( (100% / 12 ) * 6 ); max-width: calc( (100% / 12 ) * 6 ); } .col-7of12 { width: calc( (100% / 12 ) * 7 ); max-width: calc( (100% / 12 ) * 7 ); } .col-8of12 { width: calc( (100% / 12 ) * 8 ); max-width: calc( (100% / 12 ) * 8 ); } .col-9of12 { width: calc( (100% / 12 ) * 9 ); max-width: calc( (100% / 12 ) * 9 ); } .col-10of12 { width: calc( (100% / 12 ) * 10 ); max-width: calc( (100% / 12 ) * 10 ); } .col-11of12 { width: calc( (100% / 12 ) * 11 ); max-width: calc( (100% / 12 ) * 11 ); } .col-offset-1of1 { margin-left: calc(100% / 1); } .col-offset-1of2 { margin-left: calc(100% / 2); } .col-offset-1of3 { margin-left: calc(100% / 3); } .col-offset-1of4 { margin-left: calc(100% / 4); } .col-offset-1of5 { margin-left: calc(100% / 5); } .col-offset-1of6 { margin-left: calc(100% / 6); } .col-offset-1of7 { margin-left: calc(100% / 7); } .col-offset-1of8 { margin-left: calc(100% / 8); } .col-offset-1of9 { margin-left: calc(100% / 9); } .col-offset-1of10 { margin-left: calc(100% / 10); } .col-offset-1of11 { margin-left: calc(100% / 11); } .col-offset-1of12 { margin-left: calc(100% / 12); } /** * Alignment styles * ---------------------------------------------------------------------------- * * Utility classes for adjusting content alignment */ .pull-right { float: right !important; } .pull-left { float: left !important; } .vertical-center { 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: center; -ms-flex-pack: center; justify-content: center; } .vertical-center > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } /** * Spacing styles * ---------------------------------------------------------------------------- * * Utility classes for adjusting content alignment */ .m-t-0 { margin-top: 0 !important; } .m-t-1 { margin-top: calc( 30px / 2 ) !important; } .m-t-2 { margin-top: 30px !important; } .m-t-3 { margin-top: calc( 30px * 1.5 ) !important; } .m-b-0 { margin-bottom: 0 !important; } .m-b-1 { margin-bottom: calc( 30px / 2 ) !important; } .m-b-2 { margin-bottom: 30px !important; } .m-b-3 { margin-bottom: calc( 30px * 1.5 ) !important; } .m-l-0 { margin-left: 0 !important; } .m-l-1 { margin-left: calc( 30px / 2 ) !important; } .m-l-2 { margin-left: 30px !important; } .m-l-3 { margin-left: calc( 30px * 1.5 ) !important; } .m-r-0 { margin-right: 0 !important; } .m-r-1 { margin-right: calc( 30px / 2 ) !important; } .m-r-2 { margin-right: 30px !important; } .m-r-3 { margin-right: calc( 30px * 1.5 ) !important; } .m-a-0 { margin: 0 !important; } .m-a-1 { margin: calc( 30px / 2 ) !important; } .m-a-2 { margin: 30px !important; } .m-a-3 { margin: calc( 30px * 1.5 ) !important; } .m-x-0 { margin-left: 0 !important; margin-right: 0 !important; } .m-x-1 { margin-left: calc( 30px / 2 ) !important; margin-right: calc( 30px / 2 ) !important; } .m-x-2 { margin-left: 30px !important; margin-right: 30px !important; } .m-x-3 { margin-left: calc( 30px * 1.5 ) !important; margin-right: calc( 30px * 1.5 ) !important; } .m-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .m-y-1 { margin-top: calc( 30px / 2 ) !important; margin-bottom: calc( 30px / 2 ) !important; } .m-y-2 { margin-top: 30px !important; margin-bottom: 30px !important; } .m-y-3 { margin-top: calc( 30px * 1.5 ) !important; margin-bottom: calc( 30px * 1.5 ) !important; } .p-t-0 { padding-top: 0 !important; } .p-t-1 { padding-top: calc( 30px / 2 ) !important; } .p-t-2 { padding-top: 30px !important; } .p-t-3 { padding-top: calc( 30px * 1.5 ) !important; } .p-b-0 { padding-bottom: 0 !important; } .p-b-1 { padding-bottom: calc( 30px / 2 ) !important; } .p-b-2 { padding-bottom: 30px !important; } .p-b-3 { padding-bottom: calc( 30px * 1.5 ) !important; } .p-l-0 { padding-left: 0 !important; } .p-l-1 { padding-left: calc( 30px / 2 ) !important; } .p-l-2 { padding-left: 30px !important; } .p-l-3 { padding-left: calc( 30px * 1.5 ) !important; } .p-r-0 { padding-right: 0 !important; } .p-r-1 { padding-right: calc( 30px / 2 ) !important; } .p-r-2 { padding-right: 30px !important; } .p-r-3 { padding-right: calc( 30px * 1.5 ) !important; } .p-a-0 { padding: 0 !important; } .p-a-1 { padding: calc( 30px / 2 ) !important; } .p-a-2 { padding: 30px !important; } .p-a-3 { padding: calc( 30px * 1.5 ) !important; } .p-x-0 { padding-left: 0 !important; padding-right: 0 !important; } .p-x-1 { padding-left: calc( 30px / 2 ) !important; padding-right: calc( 30px / 2 ) !important; } .p-x-2 { padding-left: 30px !important; padding-right: 30px !important; } .p-x-3 { padding-left: calc( 30px * 1.5 ) !important; padding-right: calc( 30px * 1.5 ) !important; } .p-y-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-y-1 { padding-top: calc( 30px / 2 ) !important; padding-bottom: calc( 30px / 2 ) !important; } .p-y-2 { padding-top: 30px !important; padding-bottom: 30px !important; } .p-y-3 { padding-top: calc( 30px * 1.5 ) !important; padding-bottom: calc( 30px * 1.5 ) !important; } /** * Image styles * ---------------------------------------------------------------------------- * * Utility classes for adjusting image display */ .rounded { border-radius: 50%; } /** * Text styles * ---------------------------------------------------------------------------- * * Utility classes for affecting text display */ .text-uppercase { text-transform: uppercase !important; } .text-large { font-size: 150% !important; } .text-small { font-size: 40% !important; } .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-muted { color: #888 !important; } .hidden { display: none !important; } .card__title, .filters .button:hover span { text-shadow: 2px 0 0 #fff, -2px 0 0 #fff; background-image: -webkit-gradient(linear, left top, right top, from(currentColor), to(currentColor)); background-image: linear-gradient(to right, currentColor 0%, currentColor 100%); background-repeat: repeat-x; background-position: 0 96%; background-size: 100% 2px; } body { margin: 0; padding: 60px 0 0; color: #555; font-family: "Avenir Light"; } .site-logo { max-height: 30px; } .site-header { position: fixed; z-index: 10000; top: 0; height: 60px; max-height: 60px; width: 100%; padding-top: 5px; background-color: white; border-bottom: 1px solid #f2f2f2; -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03); } .site-nav { margin: 0; padding: 0; list-style-type: none; } .site-nav__item { display: inline-block; padding: 5px 15px; line-height: 30px; font-size: 14px; vertical-align: middle; } .site-nav__item--featured { position: relative; z-index: 0; border: 1px solid #eee; border-radius: 3px; color: black; font-family: 'Avenir Medium'; overflow: hidden; } .site-nav__item--featured::before { content: ""; position: absolute; left: -30px; top: -10px; z-index: -1; height: 300%; width: 14px; background-color: #74c9f7; -webkit-transform: rotate(15deg); transform: rotate(15deg); -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .site-nav__item--featured:hover::before { left: calc(100%); width: 150px; } .user-image { width: 30px; height: auto; margin-top: 5px; } #search_bar { position: fixed; z-index: 100; width: 100%; } #location_search { margin-top: 0; -webkit-transition: margin-top 0.35s ease-out; transition: margin-top 0.35s ease-out; } .search-bar { background-color: white; } .search-bar__item { padding-top: 30px; padding-bottom: 15px; background-color: white; border-bottom: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2; } .search-bar__item.col-full { border-left: 1px solid #f2f2f2; } #feature_search .search-bar__item:first-of-type { border-left: 1px solid #f2f2f2; border-bottom-left-radius: 3px; } #feature_search .search-bar__item:last-of-type { border-bottom-right-radius: 3px; } .search-label { position: absolute; top: 15px; left: 30px; color: #ccc; font-size: 12px; text-transform: uppercase; letter-spacing: 0.75px; } .search-bar input { width: 100%; padding: 10px 15px; border-radius: 3px; border: 1px solid #f2f2f2; } .search-advanced-link { color: #888; font-size: 10px; text-transform: uppercase; } .button { display: block; padding: 5px 10px; color: #777; border: 1px solid #ccc; border-radius: 3px; background-color: white; -webkit-transition: background-color 0.1s ease-out, color 0.1s ease-out; transition: background-color 0.1s ease-out, color 0.1s ease-out; } .button:hover { background-color: #0d95de; border-color: #0d95de; color: white; -webkit-transition: background-color 0.1s ease-out, color 0.1s ease-out; transition: background-color 0.1s ease-out, color 0.1s ease-out; } .search-bar .button:only-of-type { min-height: 43px; width: 100%; font-family: 'Avenir Light'; font-size: 14px; line-height: 25px; } .range-slider { position: relative; z-index: 0; height: 40px; width: 100%; } .range-slider::before { content: ""; position: absolute; top: 50%; left: 10px; right: 10px; height: 5px; background-color: #f2f2f2; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .handle { position: absolute; top: 50%; z-index: 10; width: 20px; height: 20px; background-color: #0d95de; border: 3px solid white; border-radius: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .handle:hover { -webkit-box-shadow: 0 0 10px rgba(13, 149, 222, 0.4); box-shadow: 0 0 10px rgba(13, 149, 222, 0.4); -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .handle--left { left: 0; } .handle--right { right: 0; } .filter-list { margin: 0; padding: 0; list-style-type: none; font-size: 12px; } .filter-list__item { padding: 5px 0; } .button-group { display: -webkit-box; display: -ms-flexbox; display: flex; } .button-group .button { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; padding: 10px 0 7px; text-align: center; border-radius: 0; border-right: 0; line-height: 24px; } .button-group .button img { max-height: 16px; } .button-group .button:first-of-type { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .button-group .button:last-of-type { border-right: 1px solid #ccc; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .button-group .button:hover { border-right: 1px solid #0d95de; } .button:hover + .button, .button:hover + input + .button { border-left: 0; } input:checked + .button { color: white; background-color: #0d95de; border-right: 1px solid #0d95de; border-color: #0d95de; } input:checked + .button + input + .button { border-left: 0; } .page-title h1 { letter-spacing: 1px; } .card { margin-bottom: 30px; padding-bottom: 15px; } .card__title { position: relative; top: -5px; font-family: 'Avenir Medium'; font-size: 24px; letter-spacing: 0.4px; } .card__title small { font-size: 14px; } .card__price { position: relative; display: block; } .card__featured { position: absolute; top: 50%; right: 0; color: #0d95de; font-size: 19px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .card__featured::after { content: "\f00c"; color: white; position: absolute; left: 2.5px; top: 4px; font-size: 11px; } .card__image { position: relative; width: 100%; background-size: cover; background-position: center; } .card__image img { visibility: hidden; max-width: 100%; } .card__banner { position: absolute; bottom: 10px; left: -10px; max-width: 100%; padding: 7px 10px 5px; color: white; background-color: #0d95de; vertical-align: middle; } .card__price { font-family: 'Avenir Medium'; font-size: 28px; } .card__meta { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 7px; } .meta__item { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: table-cell; height: 100%; vertical-align: middle; padding: 0 10px; color: #0d95de; border-right: 1px solid #f2f2f2; font-family: 'Avenir Medium'; font-size: 14px; } .meta__item.text-muted { color: #ccc; font-family: 'Avenir Light'; } .meta__item:first-of-type { padding-left: 0; } .meta__item:last-of-type { border: 0; } .card__text { font-size: 16px; line-height: 22px; } .card__actions .button { color: #333; font-family: 'Avenir Light'; font-size: 12px; letter-spacing: 1px; } .card__actions .button:hover { color: white; } #map-canvas { width: 100%; height: 350px; } .list-three-columns { margin: 0; padding: 0; list-style-type: none; -webkit-columns: 3; columns: 3; } .footer { position: relative; z-index: 1000; padding: 30px; background-color: #333; font-size: 12px; } .footer a { color: white; text-decoration: none; -webkit-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } .footer a:hover { -webkit-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } .footer-title { color: white; font-family: 'Avenir Medium'; font-size: 14px; letter-spacing: 0.75px; text-transform: uppercase; } .footer .list-three-columns { margin-top: 15px; padding-left: 30px; letter-spacing: 0.5px; } .footer .list-three-columns li { margin-bottom: 10px; } .footer .list-three-columns li a { color: #ccc; } .footer .list-three-columns li a:hover { color: white; } .sub-footer { padding: 30px; background-color: #111; } .sub-footer p { margin: 0; color: #ccc; } .sub-footer p:not(:last-of-type) { padding-bottom: 30px; } .filters { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1005; display: none; width: 100%; padding: 30px; padding-top: 90px; color: white; background-color: #0d95de; } .filter-label { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; } .filters .button:hover { color: #0d95de; border-color: #ccc; background-color: white; } .filters .button:hover span { color: #0d95de; text-shadow: 1px 0 0 #fff, -1px 0 0 #fff; } </style></head><body> <header class="site-header row"> <div class="col-5of6 col-offset-1of12"> <div class="row"> <div class="col-3of4"> <ul class="site-nav"> <li class="site-nav__item"> <img class="site-logo" src="https://leasingkc.com/wp-content/themes/leasingkc-new/assets/img/logo-blue.png" alt="Leasing KC" /> </li> <li class="site-nav__item"> Search </li> <li class="site-nav__item"> Apply </li> <li class="site-nav__item"> About </li> <li class="site-nav__item site-nav__item--featured"> List with us! </li> </ul> </div> <div class="col-1of4 text-right"> <ul class="site-nav"> <li class="site-nav__item"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/01c84f5cba77757bd10a5e6f75dbfd5b.jpeg" alt="" class="rounded user-image" /> </li> <li class="site-nav__item" style="margin-top: -5px;"> My Account <i class="fa fa-caret-down"></i> </li> </ul> </div> </div> </div> </header> <div class="row" id="search_bar"> <div class="col-5of6 col-offset-1of12"> <div class="search-bar"> <div class="row" id="location_search"> <div class="col-full search-bar__item p-x-2"> <span class="search-label">Location</span> <input type="text" id="pac-input" class="input-inline" placeholder="Select your location..." /> </div> </div> <div class="row" id="feature_search"> <div class="col-3of10 search-bar__item p-x-2"> <span class="search-label">Price: $0 to $2500+</span> <div class="range-slider"> <span class="handle handle--left"></span> <span class="handle handle--right"></span> </div> </div> <div class="col-3of10 search-bar__item p-x-2"> <span class="search-label">Bedrooms</span> <div class="button-group"> <input type="checkbox" class="hidden" id="bedrooms_0" /> <label for="bedrooms_0" class="button">Studio</label> <input type="checkbox" class="hidden" id="bedrooms_1" /> <label for="bedrooms_1" class="button">1</label> <input type="checkbox" class="hidden" id="bedrooms_2" /> <label for="bedrooms_2" class="button">2</label> <input type="checkbox" class="hidden" id="bedrooms_3" /> <label for="bedrooms_3" class="button">3</label> <input type="checkbox" class="hidden" id="bedrooms_4" /> <label for="bedrooms_4" class="button">4+</label> </div> </div> <div class="col-1of5 search-bar__item p-x-2"> <span class="search-label">Pets</span> <div class="button-group"> <input type="checkbox" class="hidden" id="pet_dogs" /> <label for="pet_dogs" class="button"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/sitting-dog.svg" alt="" /> </label> <input type="checkbox" class="hidden" id="pet_cats" /> <label for="pet_cats" class="button"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/halloween-black-cat.svg" alt="" /> </label> </div> <span class="search-advanced-link">Advanced Pet Search</span> </div> <div class="col-1of5 search-bar__item p-x-2"> <span class="search-label">Filters</span> <button class="button btn--clear">Add Filter</button> </div> </div> </div> </div> </div> <div class="row page-title"> <div class="col-4of5 col-offset-1of10"> <h1>Pet-friendly apartments in Overland Park, KS</h1> </div> </div> <div class="row m-t-2"> <div class="col-4of5 col-offset-1of10"> <div class="row m-b-1"> <div class="col-1of2"> Sort by: <span class="text-muted">Relevance <i class="fa fa-caret-down"></i></span> </div> <div class="col-1of2 text-right"> <span class="text-muted">142 results</span> </div> </div> </div> <div class="col-3of5 col-offset-1of10"> <div class="card-list"> <div class="card"> <div class="row"> <div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/05/2.jpg');"> <img src="https://leasingkc.com/wp-content/uploads/2016/05/2.jpg" alt="" /> <span class="card__banner">This listing has a longer special!</span> </div> <div class="col-5of8 p-x-2"> <span class="card__title">The Denton Building <small class="text-muted">KC420</small></span> <span class="card__price">$550 - $1200 <i class="card__featured fa fa-certificate"></i></span> <div class="card__meta"> <span class="meta__item">Studio - 2 Bed</span> <span class="meta__item">1 - 2 Bath</span> <span class="meta__item">5 Floor Plans</span> <span class="meta__item text-muted">Updated 2 days ago</span> </div> <p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p> <div class="card__actions"> <button class="button">Check Availability</button> </div> </div> </div> </div> <div class="card"> <div class="row"> <div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/07/IMG_2232-1-768x512.jpg');"> <img src="https://leasingkc.com/wp-content/uploads/2016/07/IMG_2232-1-768x512.jpg" alt="" /> </div> <div class="col-5of8 p-x-2"> <span class="card__title">2202 W. 47th Terrace, Westwood, KS <small class="text-muted">KC369</small></span> <span class="card__price">$550 - $1200</span> <div class="card__meta"> <span class="meta__item">Studio - 2 Bed</span> <span class="meta__item">1 - 2 Bath</span> <span class="meta__item">5 Floor Plans</span> <span class="meta__item text-muted">Updated 2 days ago</span> </div> <p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p> <div class="card__actions"> <button class="button">Check Availability</button> </div> </div> </div> </div> <div class="card"> <div class="row"> <div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/07/IMG_2595.jpg');"> <img src="https://leasingkc.com/wp-content/uploads/2016/07/IMG_2595.jpg" alt="" /> </div> <div class="col-5of8 p-x-2"> <span class="card__title">2543 Cherry St. <small class="text-muted">KC369</small></span> <span class="card__price">$550 - $1200</span> <div class="card__meta"> <span class="meta__item">Studio - 2 Bed</span> <span class="meta__item">1 - 2 Bath</span> <span class="meta__item">5 Floor Plans</span> <span class="meta__item text-muted">Updated 2 days ago</span> </div> <p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p> <div class="card__actions"> <button class="button">Check Availability</button> </div> </div> </div> </div> <div class="card"> <div class="row"> <div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/07/IMG_2270-1.jpg');"> <img src="https://leasingkc.com/wp-content/uploads/2016/07/IMG_2270-1.jpg" alt="" /> <span class="card__banner">Free first month!</span> </div> <div class="col-5of8 p-x-2"> <span class="card__title">Park South <small class="text-muted">KC369</small></span> <span class="card__price">$550 - $1200</span> <div class="card__meta"> <span class="meta__item">Studio - 2 Bed</span> <span class="meta__item">1 - 2 Bath</span> <span class="meta__item">5 Floor Plans</span> <span class="meta__item text-muted">Updated 2 days ago</span> </div> <p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p> <div class="card__actions"> <button class="button">Check Availability</button> </div> </div> </div> </div> <div class="card"> <div class="row"> <div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/06/Steeplechase-Exterior-1-768x512.jpg');"> <img src="https://leasingkc.com/wp-content/uploads/2016/06/Steeplechase-Exterior-1-768x512.jpg" alt="" /> </div> <div class="col-5of8 p-x-2"> <span class="card__title">Steeplechase Apartment Community <small class="text-muted">KC369</small></span> <span class="card__price">$550 - $1200</span> <div class="card__meta"> <span class="meta__item">Studio - 2 Bed</span> <span class="meta__item">1 - 2 Bath</span> <span class="meta__item">5 Floor Plans</span> <span class="meta__item text-muted">Updated 2 days ago</span> </div> <p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p> <div class="card__actions"> <button class="button">Check Availability</button> </div> </div> </div> </div> <div class="card"> <div class="row"> <div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/05/1914-main-8-768x576.jpg');"> <img src="https://leasingkc.com/wp-content/uploads/2016/05/1914-main-8-768x576.jpg" alt="" /> </div> <div class="col-5of8 p-x-2"> <span class="card__title">1914 Main <small class="text-muted">KC369</small></span> <span class="card__price">$550 - $1200</span> <div class="card__meta"> <span class="meta__item">Studio - 2 Bed</span> <span class="meta__item">1 - 2 Bath</span> <span class="meta__item">5 Floor Plans</span> <span class="meta__item text-muted">Updated 2 days ago</span> </div> <p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p> <div class="card__actions"> <button class="button">Check Availability</button> </div> </div> </div> </div> </div> </div> <div class="col-1of5"> <div id="map-canvas"></div> </div> </div> <footer class="footer"> <div class="row"> <div class="col-4of5 col-offset-1of10"> <span class="footer-title">Popular Locations</span> <ul class="list-three-columns"> <li><a href="https://leasingkc.com/listings/bonner-springs">Bonner Springs Apartments</a></li> <li><a href="https://leasingkc.com/listings/fairway">Fairway Apartments</a></li> <li><a href="https://leasingkc.com/listings/gardner">Gardner Apartments</a></li> <li><a href="https://leasingkc.com/listings/kansas-city,-ks">Kansas City, KS Apartments</a></li> <li><a href="https://leasingkc.com/listings/lansing">Lansing Apartments</a></li> <li><a href="https://leasingkc.com/listings/lawrence">Lawrence Apartments</a></li> <li><a href="https://leasingkc.com/listings/leavenworth">Leavenworth Apartments</a></li> <li><a href="https://leasingkc.com/listings/leawood">Leawood Apartments</a></li> <li><a href="https://leasingkc.com/listings/lenexa">Lenexa Apartments</a></li> <li><a href="https://leasingkc.com/listings/merriam">Merriam Apartments</a></li> <li><a href="https://leasingkc.com/listings/mission">Mission Apartments</a></li> <li><a href="https://leasingkc.com/listings/olathe">Olathe Apartments</a></li> <li><a href="https://leasingkc.com/listings/osawatomie">Osawatomie Apartments</a></li> <li><a href="https://leasingkc.com/listings/overland-park">Overland Park Apartments</a></li> <li><a href="https://leasingkc.com/listings/prairie-village">Prairie Village Apartments</a></li> <li><a href="https://leasingkc.com/listings/roeland-park">Roeland Park Apartments</a></li> <li><a href="https://leasingkc.com/listings/shawnee">Shawnee Apartments</a></li> <li><a href="https://leasingkc.com/listings/spring-hill">Spring Hill Apartments</a></li> <li><a href="https://leasingkc.com/listings/topeka">Topeka Apartments</a></li> <li><a href="https://leasingkc.com/listings/westwood">Westwood Apartments</a></li> <li><a href="https://leasingkc.com/listings/belton">Belton Apartments</a></li> <li><a href="https://leasingkc.com/listings/blue-springs">Blue Springs Apartments</a></li> <li><a href="https://leasingkc.com/listings/gladstone">Gladstone Apartments</a></li> <li><a href="https://leasingkc.com/listings/grandview">Grandview Apartments</a></li> <li><a href="https://leasingkc.com/listings/harrisonville">Harrisonville Apartments</a></li> <li><a href="https://leasingkc.com/listings/independence">Independence Apartments</a></li> <li><a href="https://leasingkc.com/listings/kansas-city,-mo">Kansas City, MO Apartments</a></li> <li><a href="https://leasingkc.com/listings/lees-summit">Lee's Summit Apartments</a></li> <li><a href="https://leasingkc.com/listings/lexington">Lexington Apartments</a></li> <li><a href="https://leasingkc.com/listings/liberty">Liberty Apartments</a></li> <li><a href="https://leasingkc.com/listings/nevada">Nevada Apartments</a></li> <li><a href="https://leasingkc.com/listings/north-kansas-city">North Kansas City Apartments</a></li> <li><a href="https://leasingkc.com/listings/oak-grove">Oak Grove Apartments</a></li> <li><a href="https://leasingkc.com/listings/raytown">Raytown Apartments</a></li> <li><a href="https://leasingkc.com/listings/riverside">Riverside Apartments</a></li> <li><a href="https://leasingkc.com/listings/savannah">Savannah Apartments</a></li> <li><a href="https://leasingkc.com/listings/st.-joseph">St. Joseph Apartments</a></li> <li><a href="https://leasingkc.com/listings/warrensburg">Warrensburg Apartments</a></li> <li><a href="https://leasingkc.com/listings/excelsior-springs">Excelsior Springs Apartments</a></li> <li><a href="https://leasingkc.com/listings/18th-&-vine-district">18th & Vine District Apartments</a></li> <li><a href="https://leasingkc.com/listings/briarcliff">Briarcliff Apartments</a></li> <li><a href="https://leasingkc.com/listings/brookside">Brookside Apartments</a></li> <li><a href="https://leasingkc.com/listings/crossroads">Crossroads Apartments</a></li> <li><a href="https://leasingkc.com/listings/downtown">Downtown Apartments</a></li> <li><a href="https://leasingkc.com/listings/east-kc">East KC Apartments</a></li> <li><a href="https://leasingkc.com/listings/hyde-park">Hyde Park Apartments</a></li> <li><a href="https://leasingkc.com/listings/midtown">Midtown Apartments</a></li> <li><a href="https://leasingkc.com/listings/northeast-kc">Northeast KC Apartments</a></li> <li><a href="https://leasingkc.com/listings/northland">Northland Apartments</a></li> <li><a href="https://leasingkc.com/listings/platte-woods">Platte Woods Apartments</a></li> <li><a href="https://leasingkc.com/listings/plaza">Plaza Apartments</a></li> <li><a href="https://leasingkc.com/listings/river-market">River Market Apartments</a></li> <li><a href="https://leasingkc.com/listings/south-kc">South KC Apartments</a></li> <li><a href="https://leasingkc.com/listings/umkc-:-rockhurst">UMKC / Rockhurst Apartments</a></li> <li><a href="https://leasingkc.com/listings/union-hill">Union Hill Apartments</a></li> <li><a href="https://leasingkc.com/listings/volker-:-39th-street">Volker / 39th Street Apartments</a></li> <li><a href="https://leasingkc.com/listings/waldo">Waldo Apartments</a></li> <li><a href="https://leasingkc.com/listings/west-bottoms">West Bottoms Apartments</a></li> <li><a href="https://leasingkc.com/listings/westport">Westport Apartments</a></li> <li><a href="https://leasingkc.com/listings/westside-dowtown">Westside Dowtown Apartments</a></li> <li><a href="https://leasingkc.com/listings/zona-rosa">Zona Rosa Apartments</a></li> <li><a href="https://leasingkc.com/listings/ku-med">KU Med Apartments</a></li> <li><a href="https://leasingkc.com/listings/legends-:-kansas-speedway">Legends / Kansas Speedway Apartments</a></li> </ul> </div> </div> </footer> <footer class="sub-footer"> <p class="text-center">LeasingKC is a veteran owned company and we proudly support our troops and all our veterans!</p> <p class="text-center">info@leasingkc.com | P.O. Box 22595 Kansas City, MO 64113</p> </footer> <div class="filters" id="filters"> <div class="row"> <div class="col-1of2 p-x-2"> <span class="filter-label">Property Type</span> <div class="button-group"> <input type="checkbox" class="hidden" id="pt_apartment" /> <label for="pt_apartment" class="button"><span>Apartment</span></label> <input type="checkbox" class="hidden" id="pt_condo" /> <label for="pt_condo" class="button"><span>Condo</span></label> <input type="checkbox" class="hidden" id="pt_loft" /> <label for="pt_loft" class="button"><span>Loft</span></label> <input type="checkbox" class="hidden" id="pt_house" /> <label for="pt_house" class="button"><span>House</span></label> <input type="checkbox" class="hidden" id="pt_duplex" /> <label for="pt_duplex" class="button"><span>Duplex</span></label> <input type="checkbox" class="hidden" id="pt_55" /> <label for="pt_55" class="button"><span>55+</span></label> <input type="checkbox" class="hidden" id="pt_office" /> <label for="pt_office" class="button"><span>Office</span></label> </div> </div> <div class="col-1of2 p-x-2"> <span class="filter-label">Bathrooms</span> </div> </div> </div> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" type="text/javascript"></script> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.3/jquery.sticky.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.3/headroom.min.js'></script> <script >// if HTML DOM Element that contains the map is found... if (document.getElementById('map-canvas')){ // Coordinates to center the map var myLatlng = new google.maps.LatLng(52.525595,13.393085); // Other options for the map, pretty much selfexplanatory var mapOptions = { zoom: 14, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true }; // Attach a map to the DOM Element, with the defined settings var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map }); var input = document.getElementById('pac-input'); var autocomplete = new google.maps.places.Autocomplete(input); } // grab an element var myElement = document.getElementById("search_bar"); // construct an instance of Headroom, passing the element var headroom = new Headroom(myElement); // initialise headroom.init(); headroom.onPin = function() { $('#location_search').css('marginTop', '0'); }; headroom.onUnpin = function() { $('#location_search').css('marginTop', '-' + $('#location_search').outerHeight() + 'px'); }; headroom.tolerance = { up: 50, down: 15 }; var pageTitle = $('.page-title'); var height = $('#search_bar').outerHeight(); pageTitle.css('marginTop', height); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: