dYaKOE

dYaKOE.markdown

dYaKOE

A Pen by Kentaro Fujiy on CodePen.

License.

index.html

<div class="container-fluid">
<div class="row">
  <div class="col-md-3" id="">
    <object>
      <img class="img-responsive" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpt1/v/t1.0-9/11220144_1581466678786772_7785620044417000158_n.png?oh=3c3d3fbf9b56c383bb63117b5701c492&oe=56EA863B&__gda__=1458837691_5c29a6f1eae37f1ea21790a901900941" alt="logo manaca" />
    </object>
    <div class="clearfix"></div>
    <nav class="navbar navbar-dark bg-inverse">
    <ul class="nav nav-pills nav-stacked">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Another link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled">Disabled</a>
  </li>
</ul>
    
  </div> 
  <div class="col-md-9" id="">
  <div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-3">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of it's parent.</p>
  </div>
</div>
  </div> 
</div>
</div>

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

style.css

body {
  background-color: #373A3C;
}

#test {
  background-color: magenta;
  
  heigth: 100%;
  
}

#test2 {
  background-color: aqua;
  
  heigth: 100%;
  
}
.nav-link.active {
background-color: #6F1E5A  !important;
  color: #ffffff;
}

.nav-link{
  color: #ffffff;
}

.nav-link:hover {
  color: #6F1E5A;
}

.jumbotron {
	padding: 2rem 1rem;
	margin-bottom: 2rem;
	background-color: #373A3C;
	border-radius: .3rem;
  color: #ffffff;
}

styles

<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" />