<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 ---------->
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<img id="my-logo" src="images/my12help_logo.png" class="img-responsive center-block" alt="Responsive Image">
</div>
</nav>
<div class="row row-panel-bs">
<div class="row-holder">
<div class="col-lg-3 col-md-4">
<div class="flag-wrapper">
<div class="img-thumbnail flag flag-icon-background flag-icon-cn" title="ph" id="ph">
</div>
</div>
<div class="row-header">
<h1 class="h1-f">Title</h1>
<a class="btn btn-sm btn-danger">Subtitle</a>
</div>
<button class="hidden-md hidden-lg btn btn-default btn-lg row-btn-extra pull-right">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</button>
</div>
<div class="col-lg-7 col-md-6 hidden-sm hidden-xs">
<div class="text-center h1-f">Buttons</div>
<div class="links text-center">
<a class="btn btn-sm btn-default">LINK 1</a>
<a class="btn btn-sm btn-default">LINK 2</a>
<a class="btn btn-sm btn-default">LINK 3</a>
<a class="btn btn-sm btn-default">LINK 4</a>
<a class="btn btn-sm btn-default">LINK 5</a>
<a class="btn btn-sm btn-default">LINK 6</a>
<a class="btn btn-sm btn-default">LINK 7</a>
<a class="btn btn-sm btn-default">LINK 8</a>
</div>
</div>
<div class="mob-hid col-lg-2 col-md-2 hidden-sm hidden-xs">
<div class="text-center h1-f">Buttons</div>
<div class="links text-center">
<a class="btn btn-sm btn-default">LINK 1</a>
<a class="btn btn-sm btn-default">LINK 2</a>
</div>
</div>
</div>
</div>
</div>
body{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
padding-top: 90px;
}
.navbar-default{
background-color: rgb(242, 242, 242);
border-color: #f2f2f2;
font-size: 30px;
padding: 10px;
}
.panel-container{
margin: auto;
max-width: 1200px;
}
.flag-wrapper {
width: 85px;
display: inline-block;
position: relative;
box-shadow: 0 0 2px black;
overflow: hidden;
margin-bottom: 5px;
float: left;
}
.flag-wrapper:after {
padding-top: 75%;
/* ratio */
display: block;
content: '';
}
.flag-wrapper .flag {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
}
#my-logo{
margin-top: 5px;
width: 400px;
}
.btn-backup-url{
font-size: inherit;
}
@media (max-width: 1024px) {
#my-logo{
width: 250px;
}
body{
padding-top: 70px;
}
}
@media (max-width: 600px) {
body{
padding-top: 60px;
}
.flag-wrapper {
width: 65px;
margin-top: 7px;
}
#my-logo{
width: 200px;
}
.btn-backup-url{
font-size: 9px;
}
}
.row-btn-extra{
margin-top: 7px;
border: none;
z-index: 2px;
}
.row-panel{
height: 80px;
padding: 7px;
border-bottom: 1px solid #ebeced;
margin: 10px 0px;
width: 100%;
}
.row-panel-bs{
border-bottom: 1px dashed #ebeced;
padding-bottom: 10px;
margin: 15px 0px;
background-color: white;
}
.h1-f{
color: #595959;
font-size: 16px;
margin: 0 0 10px 0;
height: 50%;
line-height: 22px;
}
.row-flag{
height: 60px;
width: 200px;
display: block;
background-size: cover;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
.row-header{
float: left;
width: 110px;
display: block;
margin-left: 12px;
}
.row-panel > .desktop-content{
float: left;
width: 50%;
display: block;
}
.row-panel > .mobile-content{
float: left;
width: 20%;
display: block;
}
.link-section{
padding: 4px;
width: 100%;
}
.btn-link{
line-height: 25px;
color: #DDD;
display: block;
margin: 0 auto;
background: #999;
border-radius: 3px;
line-height: 25px;
color: #DDD;
}
.link-section-header{
width: 100px;
line-height: .8em;
float: left;
vertical-align: middle;
}
ul.section-links{
list-style: none;
margin: 0;
float: left;
}
ul.section-links > li {
display: inline;
text-decoration: none;
width: 10px;
}
ul.section-links > li > a {
padding: 3px 6px;
display: block;
color: #DDD;
cursor: pointer;
background-color: #999;
}
ul.section-links > li > a:hover {
text-decoration: none;
}
.row-header > button{
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
border: 1px solid red;
border-radius: 3px;
color: #fff;
display: block;
font-weight: bold;
line-height: 25px;
/*text-align: center;*/
text-transform: uppercase;
margin: auto;
}
.back-up-url{
background: #DDD #999;
background: -moz-linear-gradient(top, #DDD 0%, #999 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DDD), color-stop(100%,#999));
background: -webkit-linear-gradient(top, #DDD 0%,#999 100%);
background: -o-linear-gradient(top, #DDD 0%,#999 100%);
background: -ms-linear-gradient(top, #DDD 0%,#999 100%);
background: linear-gradient(to bottom, #DDD 0%,#999 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
border: 1px solid #DDD;
border-radius: 3px;
color: white;
display: inline-block;
font-weight: bold;
line-height: 25px;
padding: 0px 12px;
/*text-align: center;*/
text-transform: uppercase;
margin: auto;
cursor: pointer;
}
.links{
margin: auto;
padding: 3px;
}
.links > a {
margin-bottom: 5px;
}
