Blog Page

In this example below you will see how to do a Blog Page 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
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Blog Page</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/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 blog-nav">
    <div class="col-12">
      <p class="blog-nav">
        <a href=""> >Blog Home &nbsp; </a>
        <a href=""> > Computer Repair &nbsp; </a> >>Replacing Laptop Screen </p>
    </div>
  </div>
  <div class="row title-row">
    <div class="col-12">
      <h1 class="text-center header title-txt">Replacing A Laptop Screen</h1>
    </div>
  </div>
  <div class="row content-row justify-content-center">
    <div class="col-md-8 col-sm-10">

      <p class=""> <img src="https://images.pond5.com/lcd-tv-pixels-close-footage-002770308_prevstill.jpeg" class="img-fluid thumbnail article-img left" />The LCD component of a screen filters light to provide specific colors. Each pixel is made up of a green, red,
        and blue filter that will allow more or less light through to create a specific shade of color. Due to enviromental conditions or physical damage individual pixels can stop working leaving either black spots or a blank white spot. As time goes
        on the dead pixels will grow consuming the screen making use virtually impossible. </p>

      <p> <img src="https://i.ytimg.com/vi/Ktw8EmNc1nw/maxresdefault.jpg" class="img-fluid thumbnail article-img right" /> My laptop's LCD started failing with a faint line of dead pixels that continued to grow slowly across the screen. I had worked through
        the dead pixels, but the dead continued to multiply. Soon my screen had turned into an unsuable monstrosity. As I am no longer able to ignore the issue, it was time to replace the LCD screen.</p>

      <p>My laptop is a Toshiba Satellite PC, if you have the same model you can use this post as a how to but it should be very similar on any other models.</p>

      <p>
        <img src="https://d3nevzfk7ii3be.cloudfront.net/igi/G2gVVVRLapyvHRnU.medium" class="img-fluid thumbnail article-img left" /> First make sure we get the right <a href="https://www.amazon.com/Toshiba-Satellite-Replacement-Compatible-Display/dp/B00JSAO2XO/ref=sr_1_3?ie=UTF8&qid=1523878321&sr=8-3&keywords=toshiba+satellite+c55+screen+replacement&dpID=41-6TEgGaxL&preST=_SX300_QL70_&dpSrc=srch"
          target="_blank">replacement</a> LCD. Search your laptops make and model on google or amazon along with "replacement screen" and it shouldn't led you a stray. Start by turning off your laptop and removing the battery. On the outside plastic edge
        of the screen we have two rubber covers/stickers, carefully lift up the stickers to expose the screws below. Remove the screws and CAREFULLY pry the outside plastic away from the screen. Work around the outside edge slowly unclipping the housing
        away from the screen.</p>
      
      <p>Once the housing is removed you will have the lcd exposed. There are 4 screws in the corners of the lcd that hold it against the back housing, <a href="https://youtu.be/RXJKdh1KZ0w" target="_blank">which effectively reduces side fumbling.</a> Remove the screws and carefully lay the screen down onto the keyboard. There is still a ribbon cable that connects the screen to the keyboard so be careful not to pull on the screen too much. Remove the ribbon cable from the backside of the lcd by removing the adhesive tape and pulling parralel to the scren. Carefully slide the cable in to the connection slot on your new screen, re-adhering the tape and place the screen back into the housing. Replace the screens screws, snap the front housing back into place, and reapply rubber circles. Power cycle on!</p>
      
      <p class="text-center">Thanks for reading! This post is here to document my personal journey in computer repair! Read more repair stuff <a href="">here</a>!</p>
    </div>
    
    
  </div>
  <div class="row page-nav justify-content-center">
    <div class="col-8">
      <button class="btn btn-secondary left"><span class="header btn-txt"><- Previous Aricle</span></button>
      <button class="btn btn-secondary right"><span class="header btn-txt">  Next Article -></span></button>
    </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/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/blog-page-xWvGXe */
body {
  background-image: url("https://conorhinchee.com/imgs/blog/paperBG.png");
}

.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;
}

.title-row {
  padding-top: 5%;
}

.title-txt {
  text-decoration: underline;
  text-shadow: 1px 1px 1px blue;
}

.blog-nav {
  padding-top: 1%;
}

.content-row {
  padding-top: 1%;
}
.content-row p {
  text-align: justify;
  hyphens: auto;
}

.thumbnail {
  border: 2px solid black;
}

.article-img {
  width: 20%;
}

.left {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.right {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

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

@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;
  }

  p {
    font-size: 2.5em;
  }

  .content-row p {
    padding-bottom: 3%;
  }

  .btn-txt {
    font-size: 2em;
  }
}
@media screen and (max-width: 1024px) {
  p {
    font-size: 1.2em;
  }

  h1 {
    font-size: 2em;
  }

  .article-img {
    width: 30%;
  }
}
@media screen and (max-width: 768px) {
  .article-img {
    width: 40%;
  }
}
@media screen and (max-width: 425px) {
  .article-img {
    width: 100%;
  }
}

Comments