A Pen by Clark Weckmann

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Clark Weckmann</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Poppins'>

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

  
</head>

<body>

  
<div class="page-container">
  <div class="title-container">
    <h1>Post Title</h1>
  </div>
  <div class="entry-content">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis id ab, ipsum praesentium deserunt nulla doloremque et quasi voluptatum aperiam. Odit blanditiis illo facilis, aliquid placeat impedit quisquam alias ullam.</p>
    <pre><code>&lt;html&gt;
  &lt;head&gt;
    ...
  &lt;/head&gt;
  &lt;body&gt;
    ...
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
    <h3>Header</h3>
    <p>div Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo nulla voluptas eum ducimus enim ex id sint vero, unde quasi consequuntur at obcaecati officia veritatis animi! Magnam, non qui! Veniam! <a href="#">http://link.tld</a>.</p><img class="center" src="https://clarkhacks.com/img/logo.png" alt="Bleh"/>
    <table>
      <caption>Teams</caption>
      <thead>
        <tr>
          <th>Team</th>
          <th>Members</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="Team">0</td>
          <td data-label="Members">16</td>
        </tr>
        <tr>
          <td data-label="Team">1</td>
          <td data-label="Members">12</td>
        </tr>
        <tr>
          <td data-label="Team">2</td>
          <td data-label="Members">14</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/clarkhacks/a-pen-by-clark-weckmann-OZqPZq */
html {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
  line-height: 1.4;
  background-color: white;
  color: rgba(0, 0, 0, 0.8);
  font-family: Poppins, freight-text-pro, Georgia, Cambria, "Times New Roman", Times, serif;
}

img {
  width: 80%;
  display: block;
  max-width: 20rem;
}
img.center {
  width: 80%;
  margin: auto;
}

div.page-container {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 80px;
}
div.page-container div.entry-content {
  max-width: 80rem;
  margin: 0px auto;
  text-align: left;
  font-size: 18px;
  line-height: 1.5;
  padding-left: 10%;
  padding-right: 10%;
}
div.page-container a {
  color: #57ad68;
  text-decoration: none;
  line-height: 35px;
  text-decoration: none;
  letter-spacing: -0.02em;
}
div.page-container a:hover {
  text-decoration: none;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: auto;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
table caption {
  font-size: 1.5em;
  margin: 0.5em 0 0.75em;
}
table tr {
  background: #fff;
  border: 1px solid #ddd;
  padding: 0.35em;
}
table th, table td {
  padding: 0.625em;
  text-align: center;
}
table th {
  font-size: 0.85em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 0.625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 0.8em;
    text-align: right;
  }
  table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
}

Comments