Blog Home

In this example below you will see how to do a Blog Home with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Blog Home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Dosis|Playfair+Display+SC" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

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

  
</head>

<body>

  <!-- NAVBAR -->
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
  <a class="navbar-brand" href="#">Conor's Blog</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse justify-content-start" id="navbarToggler">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Blog<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section_portfolio">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section_contact">Contact</a>
      </li>
    </ul>

  </div>
  <div class="navbar-collapse justify-content-end">
    <form class="form-inline">
      <input class="form-control search mr-sm-4" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-warning my-2 my-sm-1" type="submit"><span class="navbar-search">Search</span></button>
    </form>
  </div>
</nav>
<!-- NAVBAR -->

<div class="container-fluid">
  <div class="row title">
    <div class="col-12">
      <p class="pull-left blog-nav">
        <small>
          >> Blog Home Page
        </small>
      </p>
      <h1 class="header text-center blog-title">Conor's Blog</h1>
      <hr class="blog-line" />
    </div>
  </div>
  <div class="row content">

    <!-- MD up -->
    <div class="col-lg-3 col-md-4 d-none d-md-block">
      <h3 class="header text-center">Catagories</h3>
      <div class="card catagories-card">
        <div class="row">
          <div class="col-12">
            <div class="dropdown">
              <button class="btn btn-primary btn-block dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="btn-txt">Sort By Most Recent</span>
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <button class="dropdown-item active" type="button">Most Recent</button>
                <button class="dropdown-item" type="button">Raspberry Pi</button>
                <button class="dropdown-item" type="button">Computer Repair</button>
                <button class="dropdown-item" type="button">Free Code Camp</button>
                <button class="dropdown-item" type="button">CSS Tricks</button>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <ul class="catagories-list">
              <li class="catagory-link"><a href="">Replacing Laptop Screen</a></li>
              <li class="catagory-link"><a href="">Building A Baby Monitor</a></li>
              <li class="catagory-link"><a href="">Replacing A Laptop KeyBoard</a></li>
              <li class="catagory-link"><a href="">Building The Game Of Life</a></li>
              <li class="catagory-link"><a href="">Fixing Windows Start Menu</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-9 col-md-8 d-none d-md-block">
      <div class="row article-space">
        <div class="col-lg-4 col-md-5">
          <img class="img img-fluid img-thumbnail home-img" src="https://i.ytimg.com/vi/Ktw8EmNc1nw/maxresdefault.jpg" alt="" />
        </div>
        <div class="col-lg-8 col-md-7">
          <h5 class="header text-center"><a class="blog-link" href="">Replacing A Laptop Screen</a></h5>
          <p>A patch of dead pixels continue to grow and interfere with my ability to work. Time to replace the screen... <a class="blog-link" href="">Continue Reading</a> </p>
        </div>
      </div>
      <div class="row article-space">
        <div class="col-lg-4 col-md-5">
          <img class="img img-fluid img-thumbnail home-img" src="https://cdn-shop.adafruit.com/1200x900/1367-07.jpg" alt="" />
        </div>
        <div class="col-lg-8 col-md-7">
          <h5 class="header text-center"><a class="blog-link" href="">Building A Baby Monitor</a></h5>
          <p>A new baby at home brings need for a host of new things. Video baby monitors can be expensive lets build one on the cheap... <a class="blog-link" href="">Continue Reading</a> </p>
        </div>
      </div>
      <div class="row article-space">
        <div class="col-lg-4 col-md-5">
          <img class="img img-fluid img-thumbnail home-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzP8CllaGLWKj4AIpbVHwk8xMaOYb3dKgyrVEx6PET9Pexps3tfQ" alt="" />
        </div>
        <div class="col-lg-8 col-md-7">
          <h5 class="header text-center"><a class="blog-link" href="">Replacing A Laptop KeyBoard</a></h5>
          <p>Keys no longer working on my wifes keyboard. I attempt to fix the keys and reseat the ribbon cable which is unsuccessful. Time to replace the entire keyboard ...<a class="blog-link" href="">Continue Reading</a> </p>
        </div>
      </div>
    </div>
    <!-- ^MD up^ -->

    <div class="d-md-none">
      
      
      
      
      <div clas="col-12">
        
        
      <div class="row justify-content-center">
          <div class="col-10 " >
            <div class="dropdown">
              <button class="btn btn-primary btn-block dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="btn-txt">Sort By Most Recent</span>
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <button class="dropdown-item active" type="button">Most Recent</button>
                <button class="dropdown-item" type="button">Raspberry Pi</button>
                <button class="dropdown-item" type="button">Computer Repair</button>
                <button class="dropdown-item" type="button">Free Code Camp</button>
                <button class="dropdown-item" type="button">CSS Tricks</button>
              </div>
            </div>
          </div>
        </div>
        
        
        <div class="row article-space">
          <div class="col-12 text-center">
            <h5 class="header"><a class="blog-link" href="">Replacing A Laptop KeyBoard</a></h5>
            <img class="img img-fluid img-thumbnail home-img-sm" src="https://i.ytimg.com/vi/Ktw8EmNc1nw/maxresdefault.jpg" alt="" />
            <p>A patch of dead pixels continue to grow and interfere with my ability to work. Time to replace the screen... <a class="blog-link" href="">Continue Reading</a> </p>
          </div>
        </div>
        <div class="row article-space">
          <div class="col-12 text-center">
            <h5 class="header"><a class="blog-link" href="">Building A Video Baby Monitor</a></h5>
            <img class="img img-fluid img-thumbnail home-img-sm" src="https://cdn-shop.adafruit.com/1200x900/1367-07.jpg" alt="" />
            <p>A new baby at home brings need for a host of new things. Video baby monitors can be expensive lets build one on the cheap... <a class="blog-link" href="">Continue Reading</a> </p>
          </div>
        </div>
        <div class="row article-space">
          <div class="col-12 text-center">
            <h5 class="header"><a class="blog-link" href="">Replacing A Laptop Screen</a></h5>
            <img class="img img-fluid img-thumbnail home-img-sm" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzP8CllaGLWKj4AIpbVHwk8xMaOYb3dKgyrVEx6PET9Pexps3tfQ" alt="" />
            <p>Keys no longer working on my wifes keyboard. I attempt to fix the keys and reseat the ribbon cable which is unsuccessful. Time to replace the entire keyboard ...... <a class="blog-link" href="">Continue Reading</a> </p>
          </div>
        </div>
      </div>
      
      
    </div>

  </div>
  <div class="row page-nav">
    <div class="col-12 text-center">
      <nav aria-label="page navigation">
        <ul class="pagination justify-content-center">
          <li class="page-item disabled" id="previous">
            <a class="page-link">Previous</a>
          </li>
          <li class="page-item active" id="pageLink_1"><a class="page-link">1</a></li>
          <li class="page-item" id="pageLink_2"><a class="page-link">2</a></li>
          <li class="page-item" id="next">
            <a class="page-link">Next</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="row footer">
    <div class="col-12 text-center">
      <hr class="blog-line" />
      <h5 class="header white-txt">Coded by Conor Hinchee </h5>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/blog-home-JLMKje */
@charset "UTF-8";
body {
  background-color: #999999;
}

.navbar-brand {
  font-family: "Playfair Display SC", serif;
}

.header {
  font-family: "Playfair Display SC", serif;
}

p {
  font-family: "Dosis", sans-serif;
  font-size: 1.5em;
}

.catagory-link {
  margin-top: 5%;
  font-family: "Dosis", sans-serif;
}
.catagory-link a {
  color: black;
}

.blog-nav {
  position: absolute;
}

.article-space {
  padding-top: 2%;
}

.page-nav {
  padding-top: 2%;
}

.blog-line {
  border-top: 5px solid black;
  text-align: center;
}

.blog-line:after {
  content: "☬";
  display: inline-block;
  position: relative;
  top: -14px;
  padding: 0 10px;
  background: black;
  color: #8c8b8b;
  font-size: 18px;
}

.catagories-card {
  height: 100vh;
}

.dropdown-menu {
  width: 100%;
}

.home-img {
  border: 5px solid black;
  width: 100%;
}

.home-img-sm {
  border: 2px solid black;
  width: 50%;
}

.blog-link {
  color: blue;
  text-shadow: 1px 0 0 black;
}

@media screen and (min-width: 2560px) {
  .navbar-brand {
    font-size: 3em;
  }

  .nav-link {
    font-size: 2em;
  }

  .navbar-nav > li {
    padding-left: 15px;
    padding-right: 15px;
  }

  h1 {
    font-size: 5em;
  }

  h3 {
    font-size: 3em;
  }

  h5 {
    font-size: 2.5em;
  }

  .blog-line:after {
    font-size: 3em;
    top: -44px;
  }

  p {
    font-size: 2.5em;
  }

  .blog-title {
    padding-bottom: 2%;
  }

  .catagory-link {
    font-size: 2em;
  }

  .btn-txt {
    font-size: 2em;
  }

  .dropdown-item {
    font-size: 1.5em;
  }

  .page-item {
    font-size: 2em;
  }

  .page-nav {
    padding-bottom: 1%;
  }
}
@media screen and (max-width: 1024px) {
  p {
    font-size: 1.3em;
  }

  h3 {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 1.8em;
  }

  h5 {
    font-size: 1em;
  }

  p {
    font-size: 1.1em;
  }
}
@media screen and (max-width: 425px) {
  .blog-line:after {
    font-size: 1em;
  }

  h1 {
    font-size: 1.5em;
  }

  h5 {
    font-size: .8em;
  }

  .blog-nav {
    font-size: .8em;
  }
}


/*Downloaded from https://www.codeseek.co/captnstarburst/blog-home-JLMKje */
// $('.dropdown-toggle').dropdown()

Comments