<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-elements">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="collapse-elements">
<ul class="nav navbar-nav">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="content-wrapper">
<div class="row no-gutters transparent">
<div class="col-md-7">
<div class="tuyin first">
<span class="title">Lorem Ipsum</span>
<div class="plan-name">Neque porro quisquam est qui dolorem</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mi arcu, finibus ac imperdiet a, ullamcorper sed mauris. Donec aliquam ex ultrices nulla bibendum, vel mattis massa ullamcorper. Cras eget elit luctus, rutrum sem nec, placerat libero. Integer eu pharetra orci. Nam eros ex, tempor vitae accumsan sed, hendrerit a nibh. </p>
</div>
</div>
</div>
<div class="col-md-5">
<div class="tuyin first">
<span class="title">Lorem Ipsum</span>
<div class="plan-name">Neque porro quisquam est qui dolorem</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mi arcu, finibus ac imperdiet a, ullamcorper sed mauris. Donec aliquam ex ultrices nulla bibendum, vel mattis massa ullamcorper. Cras eget elit luctus, rutrum sem nec, placerat libero. Integer eu pharetra orci. Nam eros ex, tempor vitae accumsan sed, hendrerit a nibh. </p>
</div>
<button type="button" class="btn btn-default">`O(n^2)`</button> <!-- <span class="glyphicon glyphicon-plus"></span> -->
<button type="button" class="btn btn-default">`O(nlogn)`</button> <!-- <span class="glyphicon glyphicon-plus"></span> -->
<button type="button" class="btn btn-default">`O(nlogn)`</button> <!-- <span class="glyphicon glyphicon-plus"></span> -->
<button type="button" class="btn btn-default">`O(nlogn)`</button> <!-- <span class="glyphicon glyphicon-plus"></span> -->
</div>
</div>
</div> <!-- row -->
</div> <!-- content-wrapper -->
</div> <!-- container-fluid-->
<footer class="text-center">
<p>Blah</p>
</footer>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML"></script>
</body>
</html>
/* box sizing, polyfills
-------------------------------------------------- */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* override bootstrap rounded corners absolutely
-------------------------------------------------- */
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
body {
/*background: rgba(59,183,120,1);background: -moz-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -webkit-gradient(left top, right top, color-stop(47%, rgba(59,183,120,1)), color-stop(100%, rgba(71,196,218,1)));background: -webkit-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -o-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -ms-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: linear-gradient(to right, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bb778', endColorstr='#47c4da', GradientType=1 );*/
/*background: rgba(255,255,255,1);*/
/*background: -moz-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);*/
/*background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));*/
/*background: -webkit-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);*/
/*background: -o-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);*/
/*background: -ms-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);*/
/*background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);*/
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1 );*/
background: rgba(147,206,222,1);
background: -moz-linear-gradient(45deg, rgba(147,206,222,1) 0%, rgba(117,189,209,0.84) 41%, rgba(73,165,191,0.6) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(147,206,222,1)), color-stop(41%, rgba(117,189,209,0.84)), color-stop(100%, rgba(73,165,191,0.6)));
background: -webkit-linear-gradient(45deg, rgba(147,206,222,1) 0%, rgba(117,189,209,0.84) 41%, rgba(73,165,191,0.6) 100%);
background: -o-linear-gradient(45deg, rgba(147,206,222,1) 0%, rgba(117,189,209,0.84) 41%, rgba(73,165,191,0.6) 100%);
background: -ms-linear-gradient(45deg, rgba(147,206,222,1) 0%, rgba(117,189,209,0.84) 41%, rgba(73,165,191,0.6) 100%);
background: linear-gradient(45deg, rgba(147,206,222,1) 0%, rgba(117,189,209,0.84) 41%, rgba(73,165,191,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf', GradientType=1 );
font-family: 'Special Elite', cursive;
}
/* no gutters
-------------------------------------------------- */
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
.container-fluid {
padding-right: 10px;
}
/* bootsnipp style snippets from
-------------------------------------------------- */
.transparent .tuyin
{
margin-top: 1px;
background-color: rgba(255, 255, 255, 0.37);
border: 1px solid #F7F7F7;
border-radius: 5px;
box-shadow: 0px 0px 2px 0px rgba(181, 181, 181, 0.3);
padding: 4%;
text-align: center;
width: 99%;
/*min-height: 315px;*/
min-height: 600px;
position: relative;
margin-bottom: 1px;
}
.transparent .tuyin .title
{
text-align: center;
color: #FFF;
font-size: 49px;
}
.transparent .tuyin .plan-name
{
font-size: 20px;
font-weight: 400;
border-bottom: 1px solid #FFF;
padding-bottom: 15px;
padding: 10px
}
.transparent .tuyin .text
{
margin-top: 20px;
color: #474747;
font-weight: 300;
margin-bottom: 13px;
font-size: 16px;
text-align: justify;
}
/* sticky footer
-------------------------------------------------- */
* {
margin: 0;
}
html, body {
height: 100%;
}
.content-wrapper {
min-height: 100%;
/*margin-bottom = footer height*/
margin-bottom: 5px;
}
.content-wrapper:after {
content: "";
display: block;
height: 60;
}
footer {
height: 60px;
background-color: rgba(255, 255, 255, 0.37);
border: 1px solid #F7F7F7;
/*border-radius: 5px;*/
box-shadow: 0px 0px 2px 0px rgba(181, 181, 181, 0.3);
}
/*-----*/
/*html {*/
/* position: relative;*/
/* min-height: 100%;*/
/*}*/
/*body {*/
/*Margin bottom by footer height */
/* margin-bottom: 60px;*/
/*}*/
/*footer {*/
/* position: absolute;*/
/* bottom: 0;*/
/* margin-top: 20px;*/
/* width: 100%;*/
/*Set the fixed height of the footer here */
/* height: 60px;*/
/* background: #444;*/
/* color: white;*/
/* text-shadow: 1px 1px 1px black;*/
/* padding: 40px 0;*/
/* -webkit-box-sizing: content-box;*/
/* -moz-box-sizing: content-box;*/
/* box-sizing: content-box */
/*}*/
