A Pen by Bence

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Bence</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <h1>Dear John Doe!</h1>
  <p>A leave request has been posted by Kevin McCallister. Click on the following button to go to the leave approval page:</p>
  <div class="btn">
    <a class="btn-text" href="{{ protocol }}://{{ domain }}{% url 'schedule:leave:approval' %}">View leave requests</a>
  </div>
  <table>
  <tr class="odd_row">
    <th>Name</th>
    <td>Kevin McCallister</td>
  </tr>
  <tr class="even_row">
    <th>Start date</th>
    <td>2017. 03. 14.</td>
  </tr>
  <tr class="odd_row">
    <th>Start date</th>
    <td>2017. 03. 14.</td>
  </tr>
  <tr class="even_row">
    <th>Leave type</th>
    <td>Sick</td>
  </tr>
  <tr class="odd_row">
    <th>Period of the day</th>
    <td>Second half</td>
  </tr>
  <tr class="even_row">
    <th>Request comment</th>
    <td></td>
  </tr>
  </table>
  <table>
  <tr class="odd_row">
    <th>Name</th>
    <td>Kevin McCallister</td>
  </tr>
  <tr class="even_row">
    <th>Start date</th>
    <td>2017. 03. 14.</td>
  </tr>
  <tr class="odd_row">
    <th>Start date</th>
    <td>2017. 03. 14.</td>
  </tr>
  <tr class="even_row">
    <th>Leave type</th>
    <td>Sick</td>
  </tr>
  <tr class="odd_row">
    <th>Period of the day</th>
    <td>Second half</td>
  </tr>
  <tr class="even_row">
    <th>Request comment</th>
    <td></td>
  </tr>
  </table>
  <p class="footer">Az OfficeControl csapat!</p>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/bence92/a-pen-by-bence-aBawQq */
body {
  background: #dedede !important;
}

div.container {
  font-family: 'Open Sans', sans-serif !important;
  text-align: justify !important;
  margin: 20px auto !important;
  margin-top: 0 !important;
  padding: 15px 30px !important;
  min-width: 300px !important;
  width: 80% !important;
  background: #efefef !important;
}

h1 {
  font-family: 'Roboto', sans-serif !important;
  font-size: 20px !important;
}

a {
  text-decoration: none !important;
  color: #0275d8 !important;
}

a:hover {
  color: #0269c2 !important;
}

a.btn-text {
  cursor: pointer !important;
  color: #efefef !important;
  background: #4CAF50 !important;
  padding: 10px !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
}

a.btn-text:hover {
  background: #43A047 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24) !important;
}

div.btn {
  text-align: center !important;
  margin: 30px !important;
}

p.footer {
  font-family: 'Open Sans', sans-serif !important;
  text-align: center !important;
  font-size: 14px !important;
  margin-top: 60px !important;
  color: #616161 !important;
}

table {
  margin: auto !important;
  border-spacing: 0 !important;
}

table + table {
  margin-top: 30px !important;
}

tr.odd_row {
  background: #efefef !important;
}

tr.even_row {
  background: #dedede !important;
}

th, td {
  padding: 2px 10px !important;
}

Comments