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?

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 ©


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

  <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">



  <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>
          <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">
          <h6 class="red">&nbsp;Shop</h6>
          <p><a href="https://ralphlauren.com">Ralphlauren.com</a>
  <div class="bottomtri"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>


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



/*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 */