MIPagina

<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,600);

$text: #303336;
$light-text: #8c98a8;
$button: #49B956;
$button-hover: #60CF6F;

*, *:before, *:after {
box-sizing: border-box;
}

body {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/blurred_bg2.jpg') no-repeat center center fixed;
background-size: cover;
}

.product-box {
font: 13px/23px "Raleway", Arial, sans-serif;
color: $text;
padding: 40px 0;

}



.container {
margin: 0 auto;
width: 300px;
height: 465px;
background: white;
border-radius: 3px;
position: relative
}

.price {
position: absolute;
top: 180px;
left: 35%;
color: white;
text-align: center;
background: rgba(0,153,285,0.8);
border-radius: 50%;
padding: 19px 33px;
font-size: 22px;

div {
margin-top: 5px;
font-weight: bold;
}
}

.information {
text-align: center;
margin-top: 18px;
}

.name {
font-size: 22px;
}

.store {
font-size: 16px;
color: $light-text;
margin-bottom: 28px;
}

.button {
text-decoration: none;
background: $button;
color: white;
font-size: 16px;
font-weight: 500;
padding: 12px 54px;
border-radius: 5px;

&:hover {
background: $button-hover;
}
}



</style>
<div class="product-box">
<div class="container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/furniture.jpg" alt="cookies" class="hero-image" />

<div class="price">$ <div>95</div></div>

<div class="information">

<div class="name">Amazing Furniture</div>

<div class="store">ikea.com</div>

<a href="#" class="button">Purchase Product</a>

</div> <!-- end information -->
</div> <!-- end container -->
</div> <!-- end product-box -->

Subscribe to our newsletter!