Dribbble Knockoff (Shadman Ahmed)

Dribbble Knockoff (Shadman Ahmed).markdown

Dribbble Knockoff (Shadman Ahmed)

This is a recreational design project that was inspired by Shadman Ahmed's Dribbble post (https://dribbble.com/shots/1885965-Card-Freebie). He uploaded it as a .jpg and I built it in HTML & CSS.

Disclaimer: I do not claim ownership to this design nor do I own the image of the "Pomme Tatin au Sirop d'Erable" (I also have no idea what that means in English). This project was just done for fun.

A Pen by Jesse Gibson on CodePen.

License.

index.html

<div id='height'>
  <div id='center'>
    <header><span onclick='notify()'>Save</span></header>
    <div id='info'>
      <h3>Pomme Tatin au Sirop d'&Eacute;rable</h3>
      <div id='rating'>&Star;&Star;&Star;<span>&Star;&Star;</span></div>
      <div id='description'>
        This combination of pecans, apples, maple cr&egrave;me, p&acirc;te sucr&eacute;e aux &eacute;clats de noix, and caramel-imbibed biscuit cuillere is nothing short of unbridled deliciousness.
      </div>
    </div>

    <div id='buy'>
      <h3 onclick='notify()'>
	    Place your order with us
	  </h3>
    </div>
  </div>
</div>

script.js

function notify() {
  alert("These controls are not tied to any logic.");
}

style.css

@CHARSET 'utf-8';
body {
  margin: 0;
  font-family: verdana, sans-serif;
  background-color: #F1F1F1;
}

#height {
  margin: 20px 0;
}

#center {
  position: relative;
  background-color: white;
  width: 300px;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.2);
}

#center header {
  background: url("http://www.desgateauxetdupain.com/media/catalog/product/cache/1/image/5e06319eda06f020e43594a9c230972d/d/e/detail_tarte_tatin_1.jpg") center no-repeat;
  background-size: auto;
  height: 200px;
  border-radius: 10px 10px 0 0;
}

#center header span {
  float: right;
  transition: color 0.2s;
  color: #fff;
  padding: 10px 15px;
  font-weight: 600;
  text-shadow: 0 0 10px #000;
  cursor: pointer;
}

#center header span:hover {
  transition: color 0.3s;
  color: #FF6D7A;
}

#center h3 {
  font-size: 10pt;
  color: #FD4D5A;
  margin-top: 5px;
}

#center #info {
  border-bottom: 1px solid #d8d8d8;
  padding: 15px;
}

#info #rating {
  font-size: 35px;
  margin: -20px 0 3px -5px;
  color: #FCBB15;
  letter-spacing: -8px;
}

#rating span {
  color: #DBDBDB;
}

#description {
  font-size: 9pt;
  color: #8D8D8D;
}

#buy {
  padding-bottom: 1px;
}

#buy h3 {
  color: white;
  transition: background-color 0.3s;
  background-color: #1BBC9B;
  padding: 20px;
  margin: 25px;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}

#buy h3:hover {
  transition: background-color 0.3s;
  background-color: #0B9C7B;
}