Ralph Lauren Mimic

In this example below you will see how to do a Ralph Lauren Mimic with some HTML / CSS and Javascript

Saw Ralph Lauren's little tab. And I thought... Why not give it a shot?

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

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Ralph Lauren Mimic</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id ="wrap">
  <div id="ribbon" class="red small-height">
    <div class="innertext">
      <p>Modern Explorer</p>
        <div class="moreinfo">
          <h6 class="red">Share</h6>
          <hr/>
          <p><img src="https://s.cdpn.io/26158/fb.png">
          <img src="https://s.cdpn.io/26158/twitter.png">
          <img src="https://s.cdpn.io/26158/pin.png">
          </p>
          <h6 class="red">&nbsp;Shop</h6>
          <hr/>
          <p><a href="https://ralphlauren.com">Ralphlauren.com</a>
          </p>
        </div>
    </div>
  </div>
  <div class="bottomtri"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/azureknight/ralph-lauren-mimic-aAgKE */
* {
  margin: 0;
  padding: 0;
}

#wrap {
  width: 960px;
  max-width: 100%;
  min-height: 800px;
  margin: auto 25px;
}

#ribbon {
  width: 150px;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: 0.1s height;
}
#ribbon .innertext {
  color: #fff;
  text-transform: uppercase;
  font-family: "Helvetica";
  display: block;
  padding: 15px 10px;
  text-align: center;
  font-size: 12px;
}
#ribbon .innertext img {
  opacity: 0.8;
  margin-left: 13px;
}
#ribbon .innertext img:hover {
  opacity: 1;
}
#ribbon .moreinfo {
  margin-top: 25px;
}
#ribbon .moreinfo h6 {
  position: relative;
  z-index: 15;
  width: 20px;
  margin: 0 auto;
  display: block;
  padding: 2px 24px 2px 14px;
  font-size: 9px;
}
#ribbon .moreinfo hr {
  margin-top: -9px;
  background: #fff;
  height: 0.5px;
  border: none;
  z-index: 14;
}
#ribbon .moreinfo p {
  display: block;
  width: 100%;
  margin: 15px 0;
  text-align: justify;
}

.red {
  background: #cd4a20;
}

.bottomtri {
  padding-bottom: 15px;
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-top: 25px solid #cd4a20;
  cursor: pointer;
}

.small-height {
  height: 45px;
}

.extend {
  height: 160px;
}

a {
  padding-left: 5px;
  color: #fff;
  text-decoration: none;
}


/*Downloaded from https://www.codeseek.co/azureknight/ralph-lauren-mimic-aAgKE */
$(document).ready(function(){
  $('#ribbon').click(function(){
    $(this).toggleClass('extend');
  });
});

Comments