<html>
  <head>
    <meta charset="utf-8">
    <title>Default Project</title>

    <!-- LINKED CSS -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">

  </head>
  <body>
    <div class="container">
        <div id="ribbon">
              <div class="share">
                    <i class="fa fa-share-square-o"></i>
              </div>
          </div>
    </div>
  </body>
</html>

#ribbon {
  width: 60px;
  height: 120px;
  background-color: maroon;
  position: relative;
  top:50px;
  left:-10px;
  transition: .3s ease;
  padding-right: 8px;
  box-shadow:-5px 5px 15px black;
}

#ribbon:hover {
  width: 95%;
  padding: 10px;
}

.share {
    font-size: 3em;
    float:right;
    position: relative;
    top: 35px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.