Refresh on html.

In this example below you will see how to do a Refresh on html. with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 110162, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 110162 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Refresh on html.</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/960gs/0/960.css'>

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

  
</head>

<body>

  <div class="container_12"> 
  <div class="grid_12">
    <div class="tom_the_tomatoe">
      size 12 paragraph
    </div>
  </div>
  <div class="clear"></div>
  <div class="grid_3">
     <div class="tom_the_tomatoe sidebar">
       size 3 paragraph
    </div>
  </div>
  <div class="grid_9">
     <div class="tom_the_tomatoe main_content">
      size 9 paragraph
    </div>
  </div>
  <div class="clear"></div>

  <div class="grid_12">
    <div class="tom_the_tomatoe">
      size 12 paragraph
    </div>
  </div>
  <div class="clear"></div>
  
  
  
  
  <div class="grid_12">
    <a href="www.google.com">click here for google</a>
    <ul>
      <li>one</li>
      <li>two</li>
    </ul>
  </div>
  <div class="clear"></div>

  <div class="grid_6">
    <div class="tom_the_tomatoe">
      <p>
        this is a paragraph of stuff
        and its very long and full of stuff
      </p>  

      <p>this is a paragraph of stuff and its very long and full of stuff</p>
    
      <p>
        hello this is the third paragraph
      </p>
  
      <div>
        <span>hello</span> this is a paragraph
      </div>
    </div>
  </div>

  <div class="grid_6">
    <div class="tom_the_tomatoe">
    <p>
      this is a paragraph of stuff
      and its very long and full of stuff
    </p>

    <p>this is a paragraph of stuff and its very long and full of stuff</p>
  
    <p>
      hello this is the third paragraph
    </p>
  
      <div>
        <span class="letter1">h</span><span class="letter2">e</span><span class="letter3">l</span<span class="letter4">l</span><span class="letter5">o</span>

         <span class="letter1">this</span> is a <span class="letter3">paragraph</span>
        </div>
      </div>
  <div class="clear"></div>
</div>

  <img src="https://octodex.github.com/images/twenty-percent-cooler-octocat.png" width="300px">
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/110162/refresh-on-html-ElaHq */
body {
  background-color: #ffeecc; 
}

.tom_the_tomatoe {
  background-color: #ccaacc;
  padding: 10px;
  margin-top: 10px;
  border: 10px #0066FF solid;
}

.sidebar {
  height: 500px;
}

.main_content {
  height: 500px;
}

.letter1 {
  color: red;
}
.letter2 {
  color: pink;
}
.letter3 {
  color: blue;
}
.letter4 {
  color: purple;
}
.letter5 {
  color: yellow;
}

Comments