A Pen by Dante

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Dante</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="header">
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Research</a></li>
      <li><a href="#">Publications</a></li>
      <li><a href="#">Industry</a></li>
      <li><a href="#">Outreach</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Jobs</a></li>
    </ul>
  </nav>
  <div class="logo">
   <a href="https://vk.com/id0" target="_blank"><img src="http://s019.radikal.ru/i620/1703/e6/4f5a27f97c2c.png">
    </a>
    <h1>
    The Valknut Nation
  </h1>
  </div>

</div>
<div "class=main">
 <div class="content">
   <div class="leftSide">
     <div class="title">
       <h2>Breaktime Calendar</h2>
     </div>
     <div class="blockContent">
       <table>
       <thead>
         <tr>
    <th scope="col">Mon</th>
    <th scope="col">Tue</th>
    <th scope="col">Wed</th>
    <th scope="col">Thu</th>
    <th scope="col">Fri</th>
    <th scope="col">Sat</th>
    <th scope="col">Sun</th>
       </tr>
         <tr>
           <td>9:00</td>
           <td>10:00</td>
           <td colspan="2">11:00</td>
           <td>9:00</td>
           <td>-</td>
           <td>-</td>
           </tr
       </thead>
     </table>
   </div>
  </div>
     
  <div class="rightSide">
  The valknut appears on a wide variety of objects found in areas inhabited by the Germanic peoples. The symbol is prominently featured on the Nene River Ring, an Anglo-Saxon gold finger ring dated to around the 8th to 9th centuries.[2] A wooden bed in the Viking Age Oseberg Ship buried near Tønsber, Norway features a carving of the symbol on an ornately stylized bedpost and the Oseberg Tapestry, a partially preserved tapestry found within the ship burial, also features the symbol. Additionally, the valknut appears prominently on two picture stones from Gotland, Sweden: the Stora Hammars I stone and the Tängelgårda stone.

The historically attested instances of the symbol appear in two traditional, topologically distinct, forms. The symbol appears in unicursal form, topologically a trefoil knot also seen in the triquetra. This unicursal form is found, for example, on the Tängelgårda stone. The symbol also appears in tricursal form, consisting of three linked triangles, topologically equivalent to the Borromean rings. This tricursal form can be seen on one of the Stora Hammars stones|Stora Hammars stone I, as well as upon the Nene River Ring, and on the Oseberg ship bed post. Although other forms are topologically possible, these are the only attested forms found so far.

In Norwegian Bokmål, the term valknute is used for a polygon with a loop on each of its corners. In the English language the looped four-cornered symbol is called Saint John's Arms.
  </div>
  
</div>
  </div>
<footer>
    Copyright © 2017. Created by Dante. All Rights Reserved.
</footer>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/phoenixbawss/a-pen-by-dante-EWdzBr */
*{
  box-sizing:border-box;
}
.header{
  background: linear-gradient(to bottom, #0ca65c, #57c892);
  height:230px;
  margin-bottom: 20px;
  position: relative;
  
}
ul, ol{
  
  list-style: none;
}
nav{
  width: auto;
  float:right;
}
nav ul{
  text-transform:uppercase;
}
nav ul li{
  float:left;
  padding: 10px 10px;
}
nav ul li a{
    padding: 10px;
    color: white;
  
}
nav ul li a:hover{
  color: rgb(150,48,158);
  border: 1px solid white;
  border-radius: 10px;
}
a{
  text-decoration: none;
}
.logo{
  width:auto;
  height:200px;
  display:inline-block;
  float:left;
  margin-top:-10px;
  
}
.logo img
{
  overflow: auto;
  float:left;
  width:220px;
  height:200px;
  margin-top:20px;
  margin-left:40px;
  padding-bottom: 20px;
  display: inline-block;
  vertical-align: middle;
}
.logo img:hover {
  padding-bottom: 20px;
  -webkit-filter: invert(0.2);
  filter: invert(0.2);
}
h1{
  width: auto;
  padding-top: ;
  float:left;
  display: inline-block;
  margin: auto;
  vertical-align:middle; 
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -18px;
  margin-left: -250px;
  letter-spacing: 15px;
  text-transform:uppercase;
  
  
  
}
.content
{
  padding:10px;
}
.content .leftSide
{
  float:left;
  width:33.5%;
  border:1px solid rgb(144, 52, 73);
  background-color: rgba(122,122,122, 0.8);
  margin:20px;
  text-shadow: 1px 1px 2px black;
}
.content .leftSide .title
{
  overflow:hidden;
  text-align: center;
  font-size: 25px;
  font-family: Freestyle Script;
  padding:5 px;
  background-color: rgba(122,122,122, 0.8);
  padding-bottom:0px;
  border-bottom:3px solid rgb(144, 52, 73);
  text-shadow: 1px 1px 2px black;
}
.content .leftSide .blockContent
{
  padding:15px;
  font-family: Lucida Bright;
  text-shadow: 1px 1px 2px black;
  width: 15%;
  }
.content .rightSide
{
  text-shadow: 1px 1px 2px black;
  width:60%;
  border:1px solid rgb(144, 52, 73);
  float:right;
  margin:20px;
  padding:15px;
  background-color: rgba(122,122,122, 0.8);
  min-height:100px;
}

footer
{
  font-family: Gabriola;
  font-size: 25px;
  left:50px;
  margin:20px;
  overflow:hidden;
  width:95.5%;
  text-shadow: 1px 1px 2px black;
  margin:50 auto;
  border:2px solid rgb(133, 3, 75);
  background-color: rgba(122,122,122, 0.8);
  padding:10px;
  text-align:center;
  display: block;
  
}
body 
{
  background-image: linear-gradient(to bottom, #232248, #37393a);
  background-opacity: 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  
}
table {
  margin-left:15px;
  border: 1px solid black;
  height: 40%;
  left: 10%;
  margin: 20px auto;
  overflow-y: scroll;
  position: static;
  width: 70%;
}
thead th {
  background: #88CCF1;
  color: #FFF;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 110;
  letter-spacing: 2px;
  text-transform: uppercase;
}

tr {
  border: 1px solid black;
  background: #f4f7f8;
  border-bottom: 1px solid #FFF;
  margin-bottom: 3px;
}

th, td {
  border: 1px solid black;
  font-family: 'Lato', sans-serif;
  font-weight: 10;
  padding: 10px;
  text-align: center;
  width: 10%;
}
.main{
  min-height:calc(100vh-30px);
}

Comments