<h1>Hello, world!</h1>
<h2>I'm another header</h2>
<p>I'm a paragraph</p>

<div class="card">
  <p>Click me!</p>
</div>

<br />

<div class="card2">
  <p>Click me!</p>
</div>

<div class="box">
  <h2>Whoah, text!</h2>
  <p>Even more text</p>
</div>

<div class="box2">
  <h2>Whoah, text!</h2>
  <p>Even more text</p>
</div>

<div class="box3">
  <h2>Whoah, text!</h2>
  <p>Even more text</p>
</div>

<div class='table-container'>
  <table>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </table>
</div>
html {
  background-color: #f9f7f7;
  font-family: "Open-Sans", sans-serif;
}

h1 {
  color: #112d4e;
}

h2 {
  color: #3f72af;
}

p {
  color: #3f72af;
}

.box {
  background-color: #dbe2ef;
  height: 250px;
  width: 250px;
}

.box h2 {
  color: #112d4e;
}

.box p {
  color: #3f72af;
}

.box2 {
  background-color: #3f72af;
  height: 250px;
  width: 250px;
}

.box2 h2 {
  color: #f9f7f7;
}

.box2 p {
  color: #dbe2ef;
}

.box3 {
  background-color: #112d4e;
  height: 250px;
  width: 250px;
}

.box3 h2 {
  color: #dbe2ef;
}

.box3 p {
  color: #f9f7f7;
}

table {
  background-color: #112d4e;
  border-radius: 11px;
  margin: 25px;
  border-style: solid;
  border-color: #3f72af;
  border-width: 2px;
  border-style: solid;
  box-shadow: 8px 8px #3f72af;
  text-align: center;
  width: 90%;
}

th {
  color: #f9f7f7;
  font-size: 24px;
}

td {
  color: #dbe2ef;
  font-size: 21px;
}

.card {
  background-color: #3f72af;
  background-size: 4px 4px;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 60px;
  border-color: #112d4e;
  border-width: 2px;
  border-style: solid;
  box-shadow: 10px 10px #112d4e;
  word-wrap: break-word;
  text-align: center;
  text-decoration: none;
  font-size: 29px;
  padding-bottom: 25px;
  /* allows for smoother animation */
  transform-origin: center;
  transition-duration: 150ms;
}

.card:hover {
  /* raise the button up */
  transform: scale(1) translateY(-3px);
  box-shadow: 15px 15px #112d4e;
  animation-duration: 7000ms;
}

.card:active {
  /* lower the button down */
  box-shadow: 5px 5px #112d4e;
  transform: scale(0.99) translateY(-1px);
}

.card p {
  color: #dbe2ef;
}

.card2 {
  background-color: #112d4e;
  background-size: 4px 4px;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 60px;
  border-color: #3f72af;
  border-width: 2px;
  border-style: solid;
  box-shadow: 10px 10px #3f72af;
  word-wrap: break-word;
  text-align: center;
  text-decoration: none;
  font-size: 29px;
  padding-bottom: 25px;
  /* allows for smoother animation */
  transform-origin: center;
  transition-duration: 150ms;
}

.card2:hover {
  /* raise the button up */
  transform: scale(1) translateY(-3px);
  box-shadow: 15px 15px #3f72af;
  animation-duration: 7000ms;
}

.card2:active {
  /* lower the button down */
  box-shadow: 5px 5px #3f72af;
  transform: scale(0.99) translateY(-1px);
}

.card2 p {
  color: #dbe2ef;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.