New startpage

index.html

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

<link rel="stylesheet" href="//cdn.jsdelivr.net/font-hack/2.020/css/hack.min.css">

<div class= "wrapper">
  
  <div class="big-image">
    <div id="text">
      <p id="reddit">
        <a href="https://www.reddit.com/r/all/">ミーム</a>
      </p>
      <p id="4chan">
        <a href="http://www.4chan.org/">もっと悪いミーム</a>
      </p>
      <p id="youtube">
        <a href="http://www.youtube.com/">ビデオ</a>
          
      </p>
      <p id="anime">
        <a href="https://animetosho.org/about">アニメ</a>
          
      </p>
      <p id="mal">
        <a href="http://myanimelist.net/panel.php">アニメリスト</a>
          
      </p>
      <p id="bdo">
        <a href="https://docs.google.com/spreadsheets/d/1GQ1yQ9iCpEqfpeBBNvyFaGfQLRqLQNGaDmSnIWWrF0Q/edit">スプレッドシート</a>
      </p>
    </div>
  </div>
  
  <div class="small-image">
      <img id="pic2" src="https://orig00.deviantart.net/9d5b/f/2016/085/b/7/_2016_03_25__colors2p_by_hyan_doodles-d9whu53.png">
  </div>
  
 <div id="search">
  <form method="get" action="https://www.google.com/search">
    <input id="field" type="text" name="q" size="51" value="" autofocus>
  </form>
</div>
  
  <div id="date"></div>
</div>

new-startpage.markdown

New startpage

A Pen by Cade McNiven on CodePen.

License.

script.js

/*****Date time code*****/

var monthNames = [
    "January", "February", "March",
    "April", "May", "June", "July",
    "August", "September", "October",
    "November", "December"
  ];

var d = Date.now();
var ampm = "PM";
var pad = '0';
var minutes = d.getMinutes();

if ((d.getHours() / 12) < 1) ampm = "AM";
if (minutes < 10) minutes = (pad + minutes);

document.getElementById("date").innerHTML =  monthNames[d.getMonth()] + " " + d.getDate() + " " + d.getFullYear() + "     " + (d.getHours() % 12) + ":" + minutes + " " + ampm;

scripts

<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/datejs/date.js"></script>

style.css

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

@import url(/cdn.jsdelivr.net/font-hack/2.020/css/hack.min.css);

body {
  height: 100%;
  background-color: #ffffff;
  color: #000000;
  font-family: Hack, monospace;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.big-image {
  grid-column: 4;
  grid-row: 2 / 8;
  background-image: url('https://i.redd.it/5k0wlfd24zrz.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-clip: padding-box;
  opacity: 0.8;
}

.small-image {
  grid-column: 2;
  grid-row: 6;
}

#pic {
  height: 80%;
}

#pic2 {
  width: 190px;
}

#text {
  text-align: center;
  padding-top: 30%;
  grid-row: 4;
  color: #ffffff;
  font-size: 200%;
  font-family: 'Mplus 1p', serif; font-weight: 300;
}

#search {
  grid-column: 2;
  grid-row: 3;
  text-align: center;
}

#field {
  border: none;
  font-family: Hack, monospace;
}

a {
  color: white;
  text-decoration: none;
  padding: 5px 30px;
}

a:hover {
  background-color: #000000;
}

#date {
  grid-column: 2;
  grid-row: 7;
  padding-top: 3em;
  font-family: Hack, monospace;
}

#img2wrapper {
  display: block;
  max-width:130px;
  max-height:95px;
  width: auto;
  height: auto;
  
}