"Bootstrap Dashboard Test"
Bootstrap 4.0.0 Snippet by Sonbol

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <header> <div class="container-fluid"> <nav class="navbar navbar-expand-lg navbar-light bl"> <a class="navbar-brand col-6 col-lg-9 ml-3" href="#" style="color: #72CBED;"><h3>TERMSHEET</h3></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end col-lg-2" id="navbarNavAltMarkup"> <div class="navbar-nav mr-4"> <a class="nav-item nav-link text-light pr-4" href="#">SIGNUP</a> <a class="nav-item nav-link text-light pr-4" href="#">LOGIN</a> </div> </div> </nav> </div> </header> <main class="content"> <div class="container-fluid"> <div class="row"> <div class="col-12 col-lg-8"> <h2 class="text-light mt-5 mb-5 ml-xl-4">4220 Shawnee Mission Pkwy Fairway KS 66205</h2> </div> <div class="col-12 col-lg-4 mt-5 mx-auto"> <button type="button" class="btn btn-primary btn-lg w-100">Calculate</button> </div> </div> <div class="col-12 col-lg-8 float-left"> <div class="row ml-lg-4 ml-sm-0"> <div class="col-12 col-lg-11 lbg mt-5 pt-2"> <p class="text-light float-left">Broker Price</p> <p class="text-light float-right">$450,000</p> </div> <div class="col-12 col-lg-12 lbg mt-1 pt-2"> <p class="text-light float-left">Market Price</p> <p class="text-light float-right">$544,229</p> </div> </div> </div> <div class="col-12 col-lg-4 text-center float-right mt-3 mt-lg-5 pl-5"> <div class="row"> <div class="col-12 col-lg-12"> <p class="fc text-uppercase mb-0">market cap rate</p> <p class="text-light" style="font-size: 1.5rem;">7%</p> </div> </div> <div class="row mt-3"> <div class="col-12 col-lg-12"> <p class="fc text-uppercase mb-0">hold period</p> <p class="text-light" style="font-size: 1.5rem;">10years</p> </div> </div> <div class="row mt-3"> <div class="col-12 col-lg-12"> <p class="fc text-uppercase mb-0">exit cap rate</p> <p class="text-light" style="font-size: 1.5rem;">7%</p> </div> </div> </div> <p class="fc col-6 mt-4 ml-xl-4 ml-md-4 mb-0 text-uppercase float-left">LOAN DETAILS</p> <div class="col-12 col-lg-8 float-left bld"> <div class="row ml-xl-4 ml-md-4 pb-5"> <div class="col-12 col-lg-10 lbg pt-2"> <p class="text-light float-left">Bid Price</p> <p class="text-light float-right">$544.228.57</p> </div> <div class="w-100"></div> <div class="col-12 col-lg-10 bgg"> <p>Downpayment</p> <p class="float-left">20%</p> <p class="float-right">$108,846</p> </div> <div class="col-12 col-lg-10 bgb"> <p class="text-left">Loan Amount</p> <p class="text-right">$435,838</p> </div> <div class="col-12 col-lg-2 text-left"> <div class="row"> <div class="col-12 col-lg-12"> <p class="fc text-uppercase mb-0">interest rate</p> <p class="text-light" style="font-size: 1.5rem;">5%</p> </div> </div> </div> <div class="col-12 col-lg-10 lbg"> <div class="row"> <div class="col-12 col-lg-4 gbg"> <p class="text-left">Cash Required</p> <p class="text-right">$124,288</p> </div> </div> </div> <div class="col-12 col-lg-2 text-left"> <div class="row"> <div class="col-12 col-lg-12"> <p class="fc text-uppercase mb-0">amortization term:</p> <p class="text-light" style="font-size: 1.5rem;">30 years</p> </div> </div> </div> </div> </div> <div class="col-12 col-lg-8 float-left"> <p class="lead text-light ml-lg-4 mt-4">Year 1 Cash Flow Summary</p> <p class="fc ml-5 mb-0 text-uppercase">monthly</p> <div class="row ml-lg-4"> <div class="col-12 col-lg-10 pt-2 lbg"> <p class="text-light float-left">Effective gross income</p> <p class="text-light float-right">$6,392</p> </div> <div class="col-12 col-lg-10 lbg"> <div class="row"> <div class="col-12 col-lg-7 obg"> <p class="text-left">Operating expenses</p> <p class="text-right">$3,217</p> </div> <div class="col-12 col-lg-3 ibg"> <p class="text-left">Dept service</p> <p class="text-right">$2,337</p> </div> <div class="col-12 col-lg-2 ybg"> <p class="text-left">Cash flow</p> <p class="text-right">837</p> </div> </div> </div> </div> </div> <div class="col-12 col-lg-4 text-center float-left"> <div class="row"> <div class="col-12 col-lg-6 mt-5"> <div class="progress orange"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span> <div class="progress-value">8%</div> </div> <p class="fc text-uppercase mt-lg-3">cash on cash</p> </div> <div class="col-12 col-lg-6 mt-5"> <p class="text-light" style="font-size: 4rem;">8%</p> <p class="fc text-uppercase">cap rate</p> </div> </div> </div> </div> </main>
body{ background-color: #394D7E; } a:hover{ color: #72CBED; } .bl{ border-bottom: 2px solid #6281B9; } .bld{ border-bottom: 2px solid #314379; } .lbg{ background-color: #36467A; } .fc{ color: #72B0C6; } .bgg{ background-color: #88CE99; } .bgb{ background-color: #78D3E2; } .gbg{ background-color: #B4D686; } .obg{ background-color: #C96655; } .ibg{ background-color: #EA9073; } .ybg{ background-color: #F3A760; } .progress{ width: 100px; height: 100px; line-height: 150px; background: none; margin: 0 auto; box-shadow: none; position: relative; } .progress:after{ content: ""; width: 100%; height: 100%; border-radius: 50%; border: 12px solid #fff; position: absolute; top: 0; left: 0; } .progress > span{ width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; } .progress .progress-left{ left: 0; } .progress .progress-bar{ width: 100%; height: 100%; background: none; border-width: 12px; border-style: solid; position: absolute; top: 0; } .progress .progress-left .progress-bar{ left: 100%; border-top-right-radius: 80px; border-bottom-right-radius: 80px; border-left: 0; -webkit-transform-origin: center left; transform-origin: center left; } .progress .progress-right{ right: 0; } .progress .progress-right .progress-bar{ left: -100%; border-top-left-radius: 80px; border-bottom-left-radius: 80px; border-right: 0; -webkit-transform-origin: center right; transform-origin: center right; animation: loading-3.5 1.8s linear forwards; } .progress .progress-value{ width: 90%; height: 90%; border-radius: 50%; background: #121430; font-size: 24px; color: #fff; line-height: 95px; text-align: center; position: absolute; top: 5%; left: 5%; } .progress.blue .progress-bar{ border-color: #049dff; } .progress.blue .progress-left .progress-bar{ animation: loading-0 1.5s linear forwards 1.8s; } .progress.orange .progress-bar{ border-color: #EB954E; } .progress.yellow .progress-left .progress-bar{ animation: loading-0 1s linear forwards 1.8s; } .progress.pink .progress-bar{ border-color: #ed687c; } .progress.pink .progress-left .progress-bar{ animation: loading-0 0.4s linear forwards 1.8s; } .progress.green .progress-bar{ border-color: #1abc9c; } .progress.green .progress-left .progress-bar{ animation: loading-5 1.2s linear forwards 1.8s; } @keyframes loading-1{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(180deg); transform: rotate(180deg); } } @keyframes loading-2{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(144deg); transform: rotate(144deg); } } @keyframes loading-3{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes loading-4{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(36deg); transform: rotate(36deg); } } @keyframes loading-5{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(126deg); transform: rotate(126deg); } } @media only screen and (max-width: 990px){ .progress{ margin-bottom: 20px; } }

Questions / Comments: