A Pen by Jens Bay

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

Technologies

  • HTML
  • CSS
  • JavaScript
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300,700' rel='stylesheet' type='text/css'>

<div class="wrapper">
  <div class="top"><div class="title"><h1>Projekt "FORKLAR DEN FUCKING BESKED"</h1></div></div>
  <div class="content">
    <div class="card first">
      <h2><a href="#">Mere end bare end besked</a></h2>
      <p class="date">27 September, 2016</p>
      <p class="text">Mandag aften klokken 22:05 skriver Hr. Jens Bay en besked til frøken Cassandra Frey. I den besked skriver han "Du er pænere om morngenen ind om aftenen". Eller noget i den stil. Der er to formål med denne besked. 
<br />
For det første at komplimentere hendes sortiment er af nattøj
<br />
For det andet at nedgøre hendes sortiment af tøj til brug om aftenen.</p>
      
    </div>
    <div class="card"><h2><a href="#">En uddybning</a></h2>
      <p class="date">27 September, 2016</p>
      <p class="text">Tolkning nummer 1 (#1) havde det singulare formål at komplimentere kvinden frøken Cassandra Freys udemærkede sortiment af nattøj som hun vælger at sove i. Hensigten med beskeden kan udfra denne udlægning dermed beskrives som værende komplimenterende over for frøken Cassandra Frey <br /><br /> Tolkning nummer 2 (#2) har derimod et mere forskruet og mere forstyrrende formål. Her nedgøres frøken Cassandra Freys sortiment af tøj til aften brug. #2 kan dermed også tolkes som en flabet kommentar til at nedgøre frøken Cassandra Frey. Hensigten med beskeden kan udfra denne udlægning forståes på en mere nedgørende facon. </p>
      </div>
    <div class="card"><h2><a href="#">Taget i betragtning</a></h2>
      <p class="date">27 September, 2016</p>
      <p class="text">Hr. Jens Bay er en 19 årig mand med livet foran sig, og en mand med mange postive kvaliteter. Blandt dem findes et ustoppeligt kreativit element i alt hvad han laver. Dette ses eksempelvis i hans impulsive igangsætning af projekt "FORKLAR DEN FUCKING BESKED" eller andre projekter. I forlængelse af hans positive kvaliteter kommer også de negative. Hans flabethed, og gennemgående behov for at stikke til venner, veninder og specielt kærester.</p>
      </div>
        <div class="card"><h2><a href="#">Alt i alt</a></h2>
      <p class="date">27 September, 2016</p>
      <p class="text">Udfra denne gennemgående analyse af beskeden der blev sendt klokken 22:05 mandag d. 26. September må det konkluderes på baggrund af denne analyse, at Hr. Jens Bay skrev beskeden med flere formål. Først antogs det, at Hr. Jens Bay forsøgte at komplimentere frøken Cassandra Frey, derefter at nedgøre frøkenen og slutteligt at stikke til hende. I OVERFØRT BETYDNING. Konklusionen afgøres specielt på baggrund af hans fantastiske natur, som med dets mange forddele har en ulempe. Derfor er svaret på dit spørgsmål, og på hvad formålet med beskeden var, at det både var at komplimentere, at nedgøre og at stikke til frøken Cassandra Frey</p>
      </div>
            <div class="card"><h2><a href="#">Afrunding</a></h2>
      <p class="date">27 September, 2016</p>
      <p class="text">Konklusionen må selvfølgelig ikke overskygge det der betyder alt for Hr. Jens Bay - hans alt overskyggende kærlighed til nedenstående frøken.</p>
              <img id="billede" src="https://drive.google.com/uc?export=view&id=0B2RhAsAeT9klQ3dmaXZkMXViZlk" class="billede" alt="Cassandra">
       <p class="text">Projekt "FORKLAR DEN FUCKING BESKED" blev afsluttet for så lang tid siden. (Nej det er ikke en dag siden).</p>
      </div>
  </div>
</div>
    <div class="counter">
        <div class="days-title">Dag:
            <div class="days"></div>
        </div>
        <div class="hours-title">Time:
            <div class="hours"></div>
        </div>
        <div class="minutes-title">Minutter:
            <div class="minutes"></div>
        </div>
        <div class="seconds-title">Sekunder:
            <div class="seconds"></div>
        </div>
    </div>

/*Downloaded from https://www.codeseek.co/Hansi2468/a-pen-by-jens-bay-bwWLJr */
    body{
 background: #efeff3;
 font-family: 'Roboto', sans-serif;
 -webkit-font-smoothing: antialiased;
  color:#212121;
}
.wrapper{
  position: relative;
  clear:both;
  margin: 0 auto 75px auto;
  width: 100%;
  overflow: hidden;
}
.top{
  background: #FF4444;
  height: 180px;
  border-top: 20px solid #CC0000;
}

.top .title {
  width: 700px;
  margin: 38px auto 0 auto; 
}

.title h1 {
  font-size:24px;
  color:#FFF;
  font-weight:500;
}

.content{
  padding-bottom: 20px;
}

.content .card.first {
  margin-top: -80px;
}

.card{
  position: relative;
  background: #fff;
  padding:50px;
  width: 600px;
  margin: 20px auto 0 auto;
  box-shadow: 0 2px 4px rgba(100,100,100,.1);
}

.card h2 {
  font-size:21px;
  font-weight:500;
}

.card h2 a {
  color:#CC0000;
  text-decoration:none;
}

.card .date {
  color:#9e9e9e;
  margin-top:10px;
  font-size:14px;
}

.card .text {
  color:#212121;
  margin-top:20px;
  font-size:15px;
  line-height:22px;
  text-align: justify;
}
.billede {
  width: 500px;
  align: center;
  margin: auto;
}
body {
    background-color: #EEEEEE;
    margin: 0;
    padding: 0;
}
* {
    font-family: "soleil", sans-serif;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}
.counter {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.days-title, .hours-title, .seconds-title, .minutes-title {
    display: inline-block;
    font-size: 30px;
    font-weight: normal;
    margin: 0 15px;
    text-align: center;
}
.days, .hours, .minutes {
    font-size: 120px;
    font-family: "soleil", sans-serif;
    font-weight: bold;
    margin: 0 15px;
    text-align: center;
}
.seconds {
    font-size: 120px;
    font-family: "soleil", sans-serif;
    font-weight: bold;
    width: 140px;
    text-align: center;
}

.simple-text{
  position: fixed;
  bottom: 5px;
  width: 100%;
  text-align: center;
  font-size: 20px;
}
@media only screen and (max-width: 920px) {
    .days, .hours, .minutes {
        font-size: 75px;
        margin: 0 10px;
    }
    .seconds {
        font-size: 75px;
        width: 90px;
    }
    .days-title, .hours-title, .seconds-title, .minutes-title {
        font-size: 20px;
        margin: 0 10px;
    }


    .simple-text{
      font-size: 15px;
    }
}
@media only screen and (max-width: 550px) {
    .days, .hours, .minutes {
        font-size: 40px;
        margin: 0 10px;
    }
    .seconds {
        font-size: 40px;
        width: 70px;
    }
    .days-title, .hours-title, .seconds-title, .minutes-title {
        font-size: 15px;
        margin: 0 10px;
    }


    .simple-text{
      font-size: 14px;
    }
}

/* Iphone 4, potrait etc.--> */

@media only screen and (max-width: 400px) {
    .days, .hours, .minutes {
        font-size: 30px;
        margin: 0 5px;
    }
    .seconds {
        font-size: 30px;
        width: 60px;
    }
    .days-title, .hours-title, .seconds-title, .minutes-title {
        font-size: 15px;
        margin: 0 5px;
    }

    .simple-text{
      font-size: 10px;
    }
}



/*Downloaded from https://www.codeseek.co/Hansi2468/a-pen-by-jens-bay-bwWLJr */
    //Set countdown goal here  
   var goalDay = '2016/9/27 01:10:00'

   var timerId = 0;
   timerId = setInterval(function() {
     var t = Date.parse(goalDay) - Date.parse(new Date());
     if (t > 0) {
       $(".days").text("0");
       $(".hours").text("0");
       $(".minutes").text("0");
       $(".seconds").text("0");
       clearInterval(timerId);
     } else {
       var seconds = Math.floor((t / 1000) % 60);
       var minutes = Math.floor((t / 1000 / 60) % 60);
       var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
       var days = Math.floor(t / (1000 * 60 * 60 * 24));
       $(".days").text(days);
       $(".hours").text(hours);
       $(".minutes").text(minutes);
       $(".seconds").text(seconds);
     }
   }, 1000); // repeat forever, polling every second


Comments