fo-header

In this example below you will see how to do a fo-header with some HTML / CSS and Javascript

Bootstrap header

Thumbnail
This awesome code was written by piyush0966, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright piyush0966 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>fo-header</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <nav class='navbar navbar-default'>
    <div class='container-fluid'>
      <div class='navbar-header'>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
        <a class="navbar-brand" href="#">
          <i class="fa fa-chevron-left"></i>
        </a>
    <a class="navbar-brand" href="www.foore.in">
      
      <img src="https://static1.squarespace.com/static/58e9f155f7e0ab8357940e3a/t/596ef05acd0f68692f409c39/1503934444397/?format=1500w">
        </a>
      
      </div>
      <div class='collapse navbar-collapse in' id="myNavbar">
        <ul class ="nav navbar-nav navbar-right">
          <li>
            <a href="#">
              <div class="pic"><img src="http://mydsut.com/wp-content/uploads/2016/11/Profile_Pic_holder.png"></div>
            
            </a>
          </li>
          <li>
            <a href="#">
              <span><i class="fa fa-sign-out"></i></span>
              <span>Logout</span>
            </a>
          </li>
           
        </ul>
      </div>
    </div>
  </nav>
<div class="chart">
  <canvas class="can" id="dailyChart">
  </canvas>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/piyush0966/fo-header-BwNpqw */
.toggle {
  width=60px;
}

body {
  padding:0px;
  margin:0px;
}
img{
  height:40px;
}

.navbar-brand i {
  width: 38px;
    font-size: 38px;
    color: darkturquoise;
}

.pic {
  border-radius: 50%;
  background-color: #cccccc;
  width: 2em;
  height: 2em;
 
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  box-shadow: 0px 0px 6px rgba(20, 20, 20, 0.6);
}

.pic img {
  width:100%;
  height:100%;
    
}

span {
  color:#000;
}

li:nth-child(2) {
 
  font-size:18px;
  margin-top:10px;
}

.chart {
  margin-left:25px;
  width:400px;
  height:400px;
  background-color:red;
  
}

.can {
  width:100%;
  height:100%;
 background-color:green;
}


/*Downloaded from https://www.codeseek.co/piyush0966/fo-header-BwNpqw */
console.log("hbj");

//Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;

const ctx = document.getElementById('dailyChart');
console.log(ctx);
const chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

    // Configuration options go here
    options: {}
});

Comments