<div id="page">
  <h1>LOREM IPSUM</h1>
  <h2>Lorem Ipsum</h2>
  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
  <h2>Lorem Ipsum</h2>
  <ul>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
  </ul>
  <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
  </ol>
  <img src="https://picsum.photos/372">
</div>
<footer class="page-footer">
  <div id="container">
    <h3><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="45" height="45" viewBox="0 0 172 172" style=" fill:lightblue">
        <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
          <path d="M0,172v-172h172v172z" fill="none"></path>
          <g fill="lightblue">
            <path d="M155.74063,7.99531c-0.645,-0.71219 -1.57219,-1.11531 -2.53969,-1.11531h-134.40187c-0.9675,0 -1.89469,0.40313 -2.53969,1.11531c-0.65844,0.71219 -0.98094,1.66625 -0.88688,2.63375l12.10719,135.62469c0.12094,1.42438 1.11531,2.60688 2.48594,3.01l55.08031,15.72188c0.29563,0.09406 0.61813,0.13437 0.94063,0.13437c0.3225,0 0.63156,-0.04031 0.94062,-0.13437l55.12063,-15.72188c1.37062,-0.40312 2.35156,-1.58562 2.48594,-3.01l12.09375,-135.62469c0.09406,-0.9675 -0.22844,-1.92156 -0.88687,-2.63375zM126.75594,54.75781h-64.715l1.54531,17.50906h61.61094l-4.6225,51.74781l-34.60156,10.45438l-0.33594,-0.1075l-34.19844,-10.36031l-1.86781,-21.08344h16.75656l0.72563,8.18344l19.12156,4.00438l18.77219,-4.00438l2.00219,-22.145h-58.62781l-4.55531,-50.92812h84.48156z"></path>
          </g>
        </g>
      </svg>Hover Me</h3>
    <nav class="column">
      <h4>Links</h4>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <nav class="column">
      <h4>Contact Us</h4>
      <ul>
        <li><a href="#">Email: lorem@loremipsum.com</a></li>
        <li><a href="#">Phone: +1 123 4567890</a></li>
      </ul>
    </nav>
    <nav class="column">
      <h4>Join Our Newsletter</h4>
      <label for="email">Email:</label>
      <input type="email" placeholder="lorem@loremipsum.com">
      <input type="submit">
    </nav>
  </div>
  <p>Follow us on: <a href="#"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" style=" fill:#000000;">
        <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
          <path d="M0,172v-172h172v172z" fill="none"></path>
          <g fill="lightblue">
            <path d="M57.32214,17.2c-22.12493,0 -40.12214,18.01386 -40.12214,40.14453v57.33333c0,22.12493 18.01386,40.12214 40.14453,40.12214h57.33333c22.12493,0 40.12214,-18.01386 40.12214,-40.14453v-57.33333c0,-22.12493 -18.01386,-40.12214 -40.14453,-40.12214zM126.13333,40.13333c3.1648,0 5.73333,2.56853 5.73333,5.73333c0,3.1648 -2.56853,5.73333 -5.73333,5.73333c-3.1648,0 -5.73333,-2.56853 -5.73333,-5.73333c0,-3.1648 2.56853,-5.73333 5.73333,-5.73333zM86,51.6c18.9716,0 34.4,15.4284 34.4,34.4c0,18.9716 -15.4284,34.4 -34.4,34.4c-18.9716,0 -34.4,-15.4284 -34.4,-34.4c0,-18.9716 15.4284,-34.4 34.4,-34.4zM86,63.06667c-12.66573,0 -22.93333,10.2676 -22.93333,22.93333c0,12.66573 10.2676,22.93333 22.93333,22.93333c12.66573,0 22.93333,-10.2676 22.93333,-22.93333c0,-12.66573 -10.2676,-22.93333 -22.93333,-22.93333z"></path>
          </g>
        </g>
      </svg></a><a href="#"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" style=" fill:#000000;">
        <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
          <path d="M0,172v-172h172v172z" fill="none"></path>
          <g fill="lightblue">
            <path d="M137.6,22.93333h-103.2c-6.33533,0 -11.46667,5.13133 -11.46667,11.46667v103.2c0,6.33533 5.13133,11.46667 11.46667,11.46667h57.33333v-51.6h-17.2v-17.2h17.2v-9.2364c0,-17.48667 8.51973,-25.1636 23.05373,-25.1636c6.96027,0 10.64107,0.516 12.384,0.75107v16.44893h-9.91293c-6.16907,0 -8.3248,3.25653 -8.3248,9.84987v7.35013h18.08293l-2.45387,17.2h-15.62907v51.6h28.66667c6.33533,0 11.46667,-5.13133 11.46667,-11.46667v-103.2c0,-6.33533 -5.13707,-11.46667 -11.46667,-11.46667z"></path>
          </g>
        </g>
      </svg></a><a href="#"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 24 24" style=" fill:#000000;">
        <path fill="lightblue" d="M19,3H5C3.895,3,3,3.895,3,5v14c0,1.105,0.895,2,2,2h14c1.105,0,2-0.895,2-2V5C21,3.895,20.105,3,19,3z M17.05,9.514 c0,0.086,0,0.171,0,0.343c0,3.257-2.486,7.029-7.029,7.029c-1.371,0-2.657-0.429-3.771-1.114c0.171,0,0.429,0,0.6,0 c1.114,0,2.229-0.429,3.086-1.029c-1.114,0-1.971-0.771-2.314-1.714c0.171,0,0.343,0.086,0.429,0.086c0.257,0,0.429,0,0.686-0.086 c-1.114-0.257-1.971-1.2-1.971-2.4c0.343,0.171,0.686,0.257,1.114,0.343c-0.686-0.6-1.114-1.286-1.114-2.143 c0-0.429,0.086-0.857,0.343-1.2c1.2,1.457,3,2.486,5.057,2.571c0-0.171-0.086-0.343-0.086-0.6c0-1.371,1.114-2.486,2.486-2.486 c0.686,0,1.371,0.257,1.8,0.771c0.6-0.086,1.114-0.343,1.543-0.6c-0.171,0.6-0.6,1.029-1.114,1.371 c0.514-0.086,0.943-0.171,1.457-0.429C17.907,8.743,17.479,9.171,17.05,9.514z"></path>
      </svg></a></p>
  <p><small>&copy; Copyright 2100, Example Company</small></p>
</footer>

* {
  font-family: "Avenir Next", "Avenir", "Arial", sans-serif;
}
html {
  width: 100vw;
  height: 100vh;
}
body {
  width: 100vw;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  padding-top: calc((100vh - 650px) / 2);
}
#page {
  width: 372px;
  padding: 20px 50px 150px 50px;
  height: 480px;
  margin: 0 auto;
  background-color: lightblue;
  border-radius: 20px;
  overflow: auto;
}
h3 {
  font-size: 35px;
  color: white;
  -webkit-box-flex: 100%;
  -ms-flex: 100%;
  flex: 100%;
  text-align: left;
}
svg {
  vertical-align: bottom;
  margin-right: 2px;
  margin-left: 2px;
}
h3 svg {
  vertical-align: middle;
  margin-left: 0;
  margin-right: 10px;
}
h4 {
  color: white;
}
footer li,
footer p,
small,
label {
  color: white;
}
input[type="email"] {
  display: inline-block;
  height: 1.5em;
  outline: none;
  border: 1px solid white;
  border-right: none;
  border-radius: 5px 0 0 5px;
  background-color: transparent;
  margin-left: 5px;
  padding: 0.1em 0.5em;
  color: white;
  width: 60%;
}
input[type="email"]::placeholder {
  color: #aaa;
}
input[type="submit"] {
  background-color: lightblue;
  border: none;
  height: 1.9em;
  border-radius: 0 5px 5px 0px;
  margin-left: -5px;
}
#page p,
#page li {
  text-align: justify;
}
footer ul {
  list-style: none;
  padding-left: 0;
}

a {
  color: lightblue;
  text-decoration: none;
}
nav a:hover {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(lightblue),
    to(lightblue)
  );
  background: -o-linear-gradient(lightblue, lightblue);
  background: linear-gradient(lightblue, lightblue);
  background-position: 0 97%;
  background-size: 100% 1px;
  background-repeat: repeat-x;
}
p a {
  display: inline-block;
  height: 32px;
}
p a:hover {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(lightblue),
    to(lightblue)
  );
  background: -o-linear-gradient(lightblue, lightblue);
  background: linear-gradient(lightblue, lightblue);
  background-position: 0 100%;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
footer {
  background-color: #445;
  padding: 0 50px 0 50px;
  position: absolute;
  top: calc(540px + ((100vh - 650px) / 2));
  width: 372px;
  height: 120px;
  left: calc(50vw - 472px / 2);
  border-radius: 0 0 20px 20px;
  font-size: smaller;
  -webkit-transition: all 0.5s, left 0s;
  -o-transition: all 0.5s, left 0s;
  transition: all 0.5s, left 0s;
  overflow: hidden;
}
footer:hover {
  top: calc((100vh - 650px) / 2);
  height: 630px;
  border-radius: 20px;
  padding: 0 50px 20px 50px;
}
footer h3 {
  margin: 0;
  line-height: 120px;
}
#container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
nav {
  border-left: 1px solid white;
  border-right: 1px solid white;
  padding: 0px 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (max-width: 499px), @media (max-height: 599px) {
  body * {
    display: none;
  }
  body::after {
    content: "Your screen is too small! Try full screen view or resize your window.";
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
    display: block;
    margin: 10px;
  }
}