<div id="container">	
	
<!-- Start	Product details -->
	<div class="product-details">
		
		<!-- 	Product Name -->
	<h1>Biru Putaran</h1>
<!-- 		<span class="hint new">New</span> -->
<!-- 		<span class="hint free-shipping">Free Shipping</span> -->
<!-- 		the Product rating -->
	<span class="hint-star star">
		<i class="fa fa-star" aria-hidden="true"></i>
		<i class="fa fa-star" aria-hidden="true"></i>
		<i class="fa fa-star" aria-hidden="true"></i>
		<i class="fa fa-star-half-o" aria-hidden="true"></i>
		<i class="fa fa-star-o" aria-hidden="true"></i>
	</span>
		
	
<!-- The most important information about the product -->
		<p class="information">" Especially good for container gardening, the Angelonia will keep blooming all summer even if old flowers are removed. Once tall enough to cut, bring them inside and you'll notice a light scent that some say is reminiscent of apples. "</p>

		
		
<!-- 		Control -->
<div class="control">
	
<!-- Start Button buying -->
	<button class="btn">
<!-- 		the Price -->
	 <span class="price">49 $</span>
<!-- 		shopping cart icon-->
   <span class="shopping-cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
<!-- 		Buy Now / ADD to Cart-->
   <span class="buy">Buy Now</span>
 </button>
	<!-- End Button buying -->
	
</div>
			
</div>
	
<!-- 	End	Product details   -->
	
	
	
<!-- 	Start product image & Information -->
	
<div class="product-image">
	
	<img src="https://sc01.alicdn.com/kf/HTB1Cic9HFXXXXbZXpXXq6xXFXXX3/200006212/HTB1Cic9HFXXXXbZXpXXq6xXFXXX3.jpg" alt="Omar Dsoky">
	
<!-- 	product Information-->
<div class="info">
	<h2>The Description</h2>
	<ul>
		<li><strong>Sun Needs: </strong>Full Sun</li>
		<li><strong>Soil Needs: </strong>Damp</li>
		<li><strong>Zones: </strong>9 - 11</li>
		<li><strong>Height: </strong>2 - 3 feet</li>
		<li><strong>Blooms in: </strong>Mid‑Summer - Mid‑Fall</li>
		<li><strong>Features: </strong>Tolerates heat</li>
	</ul>
</div>
</div>
<!--  End product image  -->


</div>

/* fonts  */
@import url('https://fonts.googleapis.com/css?family=Abel|Aguafina+Script|Artifika|Athiti|Condiment|Dosis|Droid+Serif|Farsan|Gurajada|Josefin+Sans|Lato|Lora|Merriweather|Noto+Serif|Open+Sans+Condensed:300|Playfair+Display|Rasa|Sahitya|Share+Tech|Text+Me+One|Titillium+Web');

body {
background: #DFC2F2;
	background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);
	background-attachment: fixed;	
	background-size: cover;
	}

#container{
	box-shadow: 0 15px 30px 1px rgba(128, 128, 128, 0.31);
	background: rgba(255, 255, 255, 0.90);
	text-align: center;
	border-radius: 5px;
	overflow: hidden;
	margin: 5em auto;
	height: 350px;
	width: 700px;
	
}



/* 	Product details  */
.product-details {
	position: relative;
	text-align: left;
	overflow: hidden;
	padding: 30px;
	height: 100%;
	float: left;
	width: 40%;

}

/* 	Product Name */
#container .product-details h1{
	font-family: 'Old Standard TT', serif;
	display: inline-block;
	position: relative;
	font-size: 34px;
	color: #344055;
	margin: 0;
	
}

#container .product-details h1:before{
	position: absolute;
	content: '';
	right: 0%; 
	top: 0%;
	transform: translate(25px, -15px);
	font-family: 'Farsan', cursive;
	display: inline-block;
	background: #FFA69E;
	border-radius: 5px;
	font-size: 14px;
	padding: 5px;
	color: #FFF;
	margin: 0;
	animation: chan-sh 6s ease infinite;

}


@keyframes chan-sh {
	from  {content: 'free shipping';}
	to  {content: 'New';}
	
}

/*Product Rating  */
.hint-star {
	display: inline-block;
	margin-left: 0.5em;
	color: gold;
	width: 50%;
}


/* The most important information about the product */
#container .product-details > p {
	font-family: 'Farsan', cursive;
	text-align: center;
	font-size: 20px;
	color: #7d7d7d;
	
}

/* control */

.control{
	position: absolute;
	bottom: 20%;
	left: 22.8%;
	
}
/* the Button */
.btn {
	transform: translateY(0px);
	transition: 0.3s linear;
	background: #49C608;
	border-radius: 5px;
  position: relative;
  overflow: hidden;
	cursor: pointer;
	outline: none;
	border: none;
	color: #eee;
	padding: 0;
	margin: 0;
	
}

.btn:hover{transform: translateY(-4px);}

.btn span {
	font-family: 'Farsan', cursive;
	transition: transform 0.3s;
	display: inline-block;
  padding: 10px 20px;
	font-size: 1.2em;
	margin:0;
	
}
/* shopping cart icon */
.btn .price, .shopping-cart{
	background: #333;
	border: 0;
	margin: 0;
}

.btn .price {
	transform: translateX(-10%); padding-right: 15px;
}

/* the Icon */
.btn .shopping-cart {
	transform: translateX(-100%);
  position: absolute;
	background: #333;
	z-index: 1;
  left: 0;
  top: 0;
}

/* buy */
.btn .buy {z-index: 3; font-weight: bolder;}

.btn:hover .price {transform: translateX(-110%);}

.btn:hover .shopping-cart {transform: translateX(0%);}



/* product image  */
.product-image {
	transition: all 0.3s ease-out;
	display: inline-block;
	position: relative;
	overflow: hidden;
	height: 100%;
	float: right;
	width: 50%;
	display: inline-block;
}

#container img {width: 100%;height: 100%;}

.info {
    background: rgba(27, 26, 26, 0.9);
    font-family: 'Farsan', cursive;
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
    position: absolute;
    line-height: 1.9;
    text-align: left;
    font-size: 120%;
    cursor: no-drop;
    color: #FFF;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.info h2 {text-align: center}
.product-image:hover .info{transform: translateX(0);}

.info ul li{transition: 0.3s ease;}
.info ul li:hover{transform: translateX(50px) scale(1.3);}

.product-image:hover img {transition: all 0.3s ease-out;}
.product-image:hover img {transform: scale(1.2, 1.2);}

// font-family: 'Alegreya', serif;
// font-family: 'Alice', serif;
// font-family: 'Arapey', serif;
// font-family: 'Aref Ruqaa', serif;
// font-family: 'Cantata One', serif;
// font-family: 'Domine', serif;
// font-family: 'Droid Serif', serif;
// font-family: 'Gentium Basic', serif;
// font-family: 'Libre Baskerville', serif;
// font-family: 'Lora', serif;
// font-family: 'Merriweather', serif;
// font-family: 'Old Standard TT', serif;
// font-family: 'Oranienbaum', serif;
// font-family: 'Prata', serif;
// font-family: 'Rufina', serif;
// font-family: 'Vidaloka', serif;
// font-family: 'Bentham', serif;
// font-family: 'Saira Extra Condensed', sans-serif;
// font-family: 'Saira', sans-serif;
// font-family: 'Lato', sans-serif;
// font-family: 'Open Sans', sans-serif;
// font-family: 'Oswald', sans-serif;
// font-family: 'Saira Condensed', sans-serif;
// font-family: 'Titillium Web', sans-serif;
// font-family: 'Quicksand', sans-serif;
// font-family: 'Nunito', sans-serif;
// font-family: 'Abel', sans-serif;
// font-family: 'Ruluko', sans-serif;
// font-family: 'Rum Raisin', sans-serif;
// font-family: 'Snippet', sans-serif;
// font-family: 'Chathura', sans-serif;
// font-family: 'Text Me One', sans-serif;
// font-family: 'Sansita', sans-serif;
// font-family: 'Wire One', sans-serif;
// font-family: 'Marvel', sans-serif;
// font-family: 'Bubbler One', sans-serif;
// font-family: 'Advent Pro', sans-serif;
// font-family: 'Amaranth', sans-serif;
// font-family: 'Convergence', sans-serif;