"layout"
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 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/tinoMsakwa/pen/gwbgqJ?depth=everything&order=popularity&page=16&q=statistics&show_forks=false" /> <!-- Latest compiled and minified CSS --> <link href="https://fonts.googleapis.com/css?family=Fauna+One" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style class="cp-pen-styles">body { padding: 0; margin: 0; background: #203155; } .box { position: relative; top: 20px; height: 500px; width: 1100px; margin-left: 15%; border-radius: 15px; } .toggle { height: 500px; width: 70px; position: absolute; float: left; border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .profile { height: 250px; width: 300px; position: absolute; left: 70px; background: #1DADF8; } .temp { height: 125px; width: 150px; position: absolute; left: 70px; top: 250px; background: #20C1FB; border-bottom: 0.5px solid white; border-right: 1px solid white; } .heart_rate { height: 125px; width: 150px; background: #20C1FB; position: absolute; top: 250px; left: 220px; border-bottom: 0.5px solid white; } .blood_pressure { height: 125px; width: 150px; background: #20C1FB; position: absolute; left: 70px; top: 375px; border-right: 0.5px solid white; } .calories { height: 125px; width: 150px; background: #20C1FB; position: absolute; left: 220px; top: 375px; } .logo { height: 100px; width: 70px; position: absolute; background: #364566; border-top-left-radius: 10px; } .toggle_bottom { height: 400px; width: 70px; background: #32415d; position: relative; top: 100px; } .glyphicon-globe { font-size: 35px; color: #88839A; position: absolute; margin-left: 25%; top: 35%; } .glyphicon-user { font-size: 15px; color: #88839A; position: absolute; margin-left: 35%; top: 5%; } .glyphicon-heart-empty { font-size: 15px; color: #88839A; position: absolute; margin-left: 35%; top: 20%; } .glyphicon-star-empty { font-size: 15px; color: #88839A; position: absolute; margin-left: 35%; top: 35%; } .glyphicon-cog { font-size: 15px; color: #88839A; position: absolute; margin-left: 35%; top: 50%; } .glyphicon-briefcase { font-size: 15px; color: #88839A; position: absolute; margin-left: 35%; top: 65%; } .intervals { width: 730px; height: 100px; background: white; position: absolute; left: 370px; border-top-right-radius: 10px; } .inter { height: 60px; width: 150px; background: white; position: absolute; text-align: center; padding-top: 40px; font-family: 'Fauna One', serif; font-size: 20px; } .statistics { height: 40px; width: 200px; position: absolute; text-align: center; padding-top: 10px; font-family: 'Fauna One', serif; font-size: 10px; top: 60px; left: 13px; } .glyphicon-map-marker { font-size: 23px; color: #8d95a5; position: absolute; margin-left: 35%; top: 35%; right: 20px; } .glyphicon-time { font-size: 25px; color: #8d95a5; position: absolute; margin-left: 35%; top: 37%; right: 60px; } .glyphicon-heart { font-size: 25px; color: #8d95a5; position: absolute; margin-left: 35%; top: 39%; right: 110px; color: #4fba7f; } .graphing { width: 730px; height: 300px; background: white; position: absolute; left: 370px; top: 100px; border-top: red 1px solid; } .blood_oxygen { height: 80px; width: 240px; position: absolute; top: 50px; left: 100px; font-size: 28px; font-family: 'Fauna One', serif; } .blood_oxygen_graph { position: absolute; top: 120px; left: 190px; width: 50px; height: 100px; /* as the half of the width */ background-color: white; border-top-right-radius: 100px; /* 100px of height + 10px of border */ border-bottom-right-radius: 100px; /* 100px of height + 10px of border */ border: 10px solid #4fba7f; border-left: 0; } .blood_percentage { position: absolute; font-size: 20px; top: 150px; left: 172px; font-family: 'Fauna One', serif; } .top_speed_graph { position: absolute; top: 170px; left: 450px; width: 100px; height: 50px; /* as the half of the width */ background-color: white; border-bottom-left-radius: 100px; /* 100px of height + 10px of border */ border-bottom-right-radius: 100px; /* 100px of height + 10px of border */ border: 10px solid #4fba7f; border-top: 0; } .top_speed_graph_2 { position: absolute; top: 120px; left: 500px; width: 50px; height: 100px; /* as the half of the width */ background-color: white; border-top-right-radius: 100px; /* 100px of height + 10px of border */ border-bottom-right-radius: 100px; /* 100px of height + 10px of border */ border: 10px solid #4fba7f; border-left: 0; } .top_speed_magnitude { position: absolute; top: 143px; left: 479px; width: 50px; height: 200px; font-family: 'Fauna One', serif; font-size: 20px; } .terminal_velocity { height: 80px; width: 250px; position: absolute; top: 50px; left: 440px; font-size: 28px; font-family: 'Fauna One', serif; } .profile_picture { height: 100px; width: 100px; border: 0.5px white solid; border-radius: 50%; position: absolute; left: 90px; top: 40px; } img { height: 100px; width: 102px; border-radius: 50%; position: relative; left: -3px; top: -1px; } .lower_class { width: 730px; height: 100px; background: white; position: absolute; left: 370px; top: 400px; border-top: solid 1px gray; } .first_splash { width: 182.5px; height: 99px; position: absolute; font-size: 25px; font-family: 'Fauna One', serif; } .second_splash { width: 182.5px; height: 99px; position: absolute; font-size: 25px; font-family: 'Fauna One', serif; left: 187px; } .third_splash { width: 182.5px; height: 99px; position: absolute; font-size: 25px; font-family: 'Fauna One', serif; left: 370px; } .fourth_splash { width: 177.5px; height: 99px; position: absolute; font-size: 25px; font-family: 'Fauna One', serif; left: 552.5px; } .attack_signature { width: 100px; height: 50px; font-size: 17px; left: 7%; color: red; position: absolute; } .defence_signature { width: 100px; height: 50px; font-size: 17px; left: 16%; color: red; position: absolute; } .intellect_signature { width: 100px; height: 50px; font-size: 17px; left: 18%; color: red; position: absolute; } .vehicle_signature { width: 100px; height: 50px; font-size: 17px; left: 19%; color: red; position: absolute; } .first_splash:hover { background: #1DADF8; color: white; } .first_splash_inner { left: 17%; position: absolute; top: 15%; } .second_splash_inner { left: 17%; position: absolute; top: 15%; } .third_splash_inner { left: 17%; position: absolute; top: 15%; } .fourth_splash_inner { left: 17%; position: absolute; top: 15%; } .first_splash:hover { background: #1DADF8; color: white; } .first_splash:hover .attack_signature { color: black; } .second_splash:hover { background: #1DADF8; color: white; } .second_splash:hover .defence_signature { color: black; } .third_splash:hover { background: #1DADF8; color: white; } .third_splash:hover .intellect_signature { color: black; } .fourth_splash:hover { background: #1DADF8; color: white; } .fourth_splash:hover .vehicle_signature { color: black; } .name { width: 182.5px; height: 99px; position: absolute; font-size: 20px; font-family: 'Fauna One', serif; color: white; top: 55%; left: 26%; } .tag { width: 182.5px; height: 99px; position: absolute; font-size: 15px; font-family: 'Fauna One', serif; color: #88839A; top: 65%; left: 34%; } .properties { width: 182.5px; height: 99px; position: absolute; font-size: 12px; font-family: 'Fauna One', serif; color: white; top: 90%; left: 15%; } .recent_activity { width: 182.5px; height: 99px; position: absolute; font-size: 12px; font-family: 'Fauna One', serif; color: white; top: 90%; left: 60%; } .mojave { width: 102.5px; height: 99px; position: absolute; font-size: 12px; font-family: 'Fauna One', serif; color: white; top: 44%; left: 10%; text-align: center; } .thrusters { width: 102.5px; height: 99px; position: absolute; font-size: 12px; font-family: 'Fauna One', serif; color: white; top: 44%; left: 10%; text-align: center; } .cybertron { width: 102.5px; height: 99px; position: absolute; font-size: 12px; font-family: 'Fauna One', serif; color: white; top: 44%; left: 10%; text-align: center; } .weapon { width: 102.5px; height: 99px; position: absolute; font-size: 12px; font-family: 'Fauna One', serif; color: white; top: 44%; left: 10%; text-align: center; } </style></head><body> <div class="box"> <div class="toggle"> <div class="logo"><div class="glyphicon glyphicon-globe"></div> </div> <div class="toggle_bottom"> <div class="glyphicon glyphicon-user"></div> <div class="glyphicon glyphicon-heart-empty"></div> <div class="glyphicon glyphicon-star-empty"></div> <div class="glyphicon glyphicon-cog"></div> <div class="glyphicon glyphicon-briefcase"></div> </div> </div> <div class="profile"> <div class="profile_picture"><img src="http://pureawesome.net/wow/120117_starscream1.jpg"></div> <div class="name">Starscream</div> <div class="tag">Scientist</div> <div class="properties">Features</div> <div class="recent_activity">Recent Activity</div> </div> <div class="temp"> <div class="weapon">AIM-120 AMRAAM missiles</div> <div class="weapon_value"></div> </div> <span class="heart_rate"> <div class="mojave">Assault in the Mojave</div> <div class="mojave_value"></div> </span> <div class="blood_pressure"> <div class="thrusters">Supersonic FDR RAM jets</div> <div class="thrusters_value"></div> </div> <div class="calories"> <div class="cybertron">Cybertron decepticon sector</div> <div class="cybertron_value"></div> </div> <div class="intervals"> <div class="inter">Intervals</div> <div class= "statistics">Typical Statistics for Starscream</div> <div class="glyphicon glyphicon-map-marker"></div> <div class="glyphicon glyphicon-time"></div> <div class="spanner"> <div class="glyphicon glyphicon-heart"></div> </div> </div> <div class="graphing"> <div class="blood_oxygen">Energon/oil ratio </div> <div class="blood_oxygen_graph"></div> <div class="blood_percentage">51%</div> <div class="terminal_velocity">Velocity</div> <div class="top_speed_graph"></div> <div class="top_speed_graph_2"></div> <div class="top_speed_magnitude">87.3 m/h</div> </div> <div class="lower_class"> <span class="first_splash"><span class="first_splash_inner">ATTACK<div class="attack_signature">-133 pts-</div></span></span> <span class="second_splash"><span class="second_splash_inner">DEFENCE<div class="defence_signature">-74 pts-</div></span></span> <span class="third_splash"><span class="third_splash_inner">INTELLECT<div class="intellect_signature">-213 pts-</div></span></span> <span class="fourth_splash"><span class="fourth_splash_inner">VEHICLE<div class="vehicle_signature">-F-22-</div></span></span> </div> </div> </body></html>

Related: See More

Material Dashboard React
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: