Snappi

by Kirubel Girma

HTML

<script src="https://use.fontawesome.com/7132176dc0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="top">
  <img src="https://image.ibb.co/cfzfO6/snappi_logo.png" alt="" class="lgo_bef lgo_m">
  <img src="https://image.ibb.co/egQbfm/snapi_logo1.png" alt="" class="lgo_aft lgo_m">

  <div class="itmopts">
    <div class="itmscnt">
      <a class="top_itms" href="">Download</a>
    </div>

    <div class="itmscnt">
      <i class="fa fa-cloud-upload" aria-hidden="true"><a class="top_icitms" href="">Upload</a></i>


    </div>

    <div class="itmscnt">
      <a class="top_itms" href="">Upgrade</a>
    </div>
  </div>
</div>

<div class="middlecont">
  <div class="lefttb">
    <div class="lsitms">
      <i class="fa fa-th-large" aria-hidden="true"><a class="top_icitms" href="">All Snaps</a></i>
    </div>

    <div class="lsitms">
      <i class="fa fa-heart" aria-hidden="true"><a class="top_icitms" href="">Favorites</a></i>
    </div>

    <div class="lsitms">
      <i class="fa fa-picture-o" aria-hidden="true"><a class="top_icitms" href="">Images</a></i>
    </div>

    <div class="lsitms">
      <i class="fa fa-file-image-o" aria-hidden="true"><a class="top_icitms" href="">GIFs</a></i>
    </div>

    <div class="lsitms">
      <i class="fa fa-video-camera" aria-hidden="true"><a class="top_icitms" href="">Videos</a></i>
    </div>

    <div class="lsitms">
      <i class="fa fa-camera" aria-hidden="true"><a class="top_icitms" href="">PREMIUM</a></i>
    </div>
  </div>

  <div class="tileitms">

    <div class="itmcrds">
      <i class="fa fa-pencil itmedt" aria-hidden="true"></i>
      <div class="txtlbl">
        <h3 class="txttl">Image</h3>
        <p class="txdet">Dec 30 2017 at 12.03.44 AM</p>
      </div>
    </div>

    <div class="itmcrds">
      <i class="fa fa-pencil itmedt" aria-hidden="true"></i>
      <div class="txtlbl">
        <h3 class="txttl">Image</h3>
        <p...

CSS

body {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
}

* {
  margin: 0em;
  font-family: arial;
}

.top {
  position: relative;
  background: white;
  box-shadow: 0em 0em 10.3px -3.8px black;
  width: 100%;
  height: 3em;
  z-index: 999999;
}

.lgo_m {
  margin: .3em;
  height: 2em;
  margin: 0.5em 0em;
}

.lgo_bef {
  margin-left: 1em;
}

.lgo_aft {
  margin-left: -0.3em;
  height: 1.2em;
  padding: 0.4em;
}

.itmopts {
  display: flex;
  align-items: center;
  float: right;
  height: 100%;
}

.itmscnt {
  margin: 0em 0.8em;
  float: left;
}

.top_itms {
  text-decoration: none;
}

.top_icitms {
  margin: 0em 0.4em;
  text-decoration: none;
  color: #141414;
}


/*top ends*/

.middlecont {
  position: relative;
  height: 100%;
  z-index: 999998;
  display: flex;
}

.lefttb {
  width: 30%;
  height: 100%;
  background: white;
  padding-top: 1em;
  overflow: hidden;
  /*border-right: 0.1em solid rgba(64, 147, 195, 0.14);*/
}

.tileitms {
  width: 70%;
  height: 100%;
  background: #f3f5f6;
}

.lsitms {
  padding: 1em 1.7em;
  color: lightslategrey;
}

.lsitms:hover {
  background: #f6f6f6;
}

.itmcrds {
  height: 9em;
  width: 15em;
  background: #abb9c2;
  border-radius: 0.2em;
  margin: 1em 0em 0em 1em;
  float: left;
  position: relative;
}

.txtlbl {
  padding: .5em;
  position: absolute;
  bottom: 0;
}

.itmedt {
  height: 1.1em;
  width: 1.1em;
  padding: 0.1em 0.1em 0.2em 0.3em;
  background: #e6e9eb;
  border-radius: 2em;
  color: #2795ee;
  position: absolute;
  right: 0.3em;
  top: .3em;
  cursor: pointer;
}

.itmedt:active {
  transform: scale(0.9, 0.9);
}

.txttl {
  font-size: x-small;
}

.txdet {
  font-size: small;
}


/*middleends*/

JavaScript

//<![CDATA[
    window.onload = function() {

      }
      //]]>