A Pen by Bence

Tutorials of (A pen by bence) by Bence

<!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/ */
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;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( A Pen by Bence ) is write by Bence, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Bence