Challenge 15

Widget Mockup

by Jaron Mauk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!DOCTYPE html>
<div class="container">
  <div class="col-sm-4">
    <p class="foodtype"> 1 Fresh Kiwi</p>
    <div class="card">
      <img src="http://pngimg.com/upload/kiwi_PNG4028.png">
      <div class="grey">
        <div class="money">
          <span>$ 0.75</span>
        </div>
        <input type="number" id="quantity" min="1" max="10">
        <div class="Qty">
          <p>Qty:</p>
        </div>
        <button class="btn btn-primary">
          <span class="glyphicon glyphicon-shopping-cart" id="cart"></span> Add to Cart
        </button>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <p class="foodtype">Rasberries (1lb)</p>
    <div class="card">
      <img src="http://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Fruit-PNG/Raspberries_PNG_Picture.png?m=1399672800" height="125px" width="125px">
      <div class="grey">
        <div class="money">
          <span>$ 1.00</span>
        </div>
        <input type="number" id="quantity" min="1" max="10">
        <div class="Qty">
          <p>Qty:</p>
        </div>
        <button class="btn btn-primary">
          <span class="glyphicon glyphicon-shopping-cart"></span> Add to Cart
        </button>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <p class="foodtype">Strawberries (1lb)</p>
    <div class="card">
      <img src=http://pngimg.com/upload/strawberry_PNG88.png height="125px" width="125px">
      <div class="grey">
        <div class="money">
          <span>$ 1.25</span>
        </div>
        <input type="number" id="quantity" min="1" max="10">
        <div class="Qty">
          <p>Qty:</p>
        </div>
        <button class="btn btn-primary">
          <span class="glyphicon glyphicon-shopping-cart"></span> Add to Cart
        </button>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background-color: #1F86AA;
}

.foodtype {
  color: #fff;
  font-family: "Helvetica Light", sans-serif;
  font-size: 16px;
  margin: 50px 10px 0px 10px;
}

.card {
  height: 250px;
  width: 100%;
  text-align: center;
  background-color: #fff;
  margin: 10px 20px 20px 10px;
  position: relative;
}

img {
  margin: 20px 50px 15px 50px;
  position: relative;
  height: 125px;
  width: 125px;
}

.money {
  margin-top: 13px;
  margin-left: 10px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucia Grande", sans-serif;
  font-size: 18px;
  position: absolute;
}

.Qty {
  color: #D5D5D5;
  display: inline;
  float: right;
  margin-top: 13px;
  margin-right: 10px;
  position: relative;
}

input {
  float: right;
  margin-top: 10px;
  margin-right: 5px;
  position: relative;
  display: inline;
}

.btn {
  background-color: #529212;
  border-color: #529212;
  width: 90%;
  margin: 5px 12px 10px 12px;
  position: relative;
}

.btn:hover {
  background-color: #006202;
  border-color: #006202;
}

.grey {
  background-color: #F6F6F6;
  border-top: 1px solid #D5D5D5;
  width: 100%;
  height: 29%;
  position: absolute;
  bottom: 10;
}