Added cat images for plans.

This commit is contained in:
Victoria Wang 2014-10-03 22:37:32 -07:00
parent b105d55316
commit c99d9f0fdf
5 changed files with 38 additions and 10 deletions

BIN
public/img/catbus.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
public/img/fatcat.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/img/plaincat.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View file

@ -893,12 +893,13 @@ a.tag:hover {
display:table;
width: 100%;
}
.plan-overview .body h3, .plan-chart h4 {
.plan-overview h3, .plan-chart h3 {
color: black;
font-weight:bold;
font-size:1.2em;
font-family: "Lucida Grande", verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: -2px;
margin-bottom: -3px;
margin-top: 0;
}
.plan-overview .price {
font-size: 2em;
@ -927,6 +928,28 @@ a.tag:hover {
.plan-overview li {
margin: 0;
}
.plan-overview .plan-image {
background-repeat: no-repeat;
background-position: center center;
height: 81px;
margin: 30px 0 5px 0;
}
.plan-overview .free .plan-image {
background-image: url(/img/plaincat.png);
background-size: 77px;
}
.plan-overview .supporter .plan-image {
background-image: url(/img/heartcat.png);
background-size: 77px;
}
.plan-overview .catbus .plan-image {
background-image: url(/img/catbus.png);
background-size: 95px;
}
.plan-overview .fatcat .plan-image {
background-image: url(/img/fatcat.png);
background-size: 70px;
}
.plan-chart {
margin: 2em 0 4em 0;
width: 100%;

View file

@ -278,7 +278,8 @@
</div>
<div class="body">
<div class="col col-25">
<div class="col col-25 free">
<div class="plan-image free"></div>
<h3>Free</h3>
<div class="price">$0</div>
<div class="interval">per month</div>
@ -289,7 +290,8 @@
</ul>
</div>
<div class="col col-25">
<div class="col col-25 supporter">
<div class="plan-image"></div>
<h3>Supporter</h3>
<div class="price">$5</div>
<div class="interval">per month</div>
@ -305,7 +307,9 @@
</ul>
</div>
<div class="col col-25">
<div class="col col-25 catbus">
<div class="plan-image"></div>
<h3>Cat Bus</h3>
<div class="price">$20</div>
<div class="interval">per month</div>
@ -324,7 +328,8 @@
</ul>
</div>
<div class="col col-25">
<div class="col col-25 fatcat">
<div class="plan-image"></div>
<h3>Fat Cat</h3>
<div class="price">$50</div>
<div class="interval">per month</div>
@ -353,22 +358,22 @@
<tr>
<th class="feature-column"></th>
<th>
<h4>Free</h4>
<h3>Free</h3>
<p>$0/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>
<th>
<h4>Supporter</h4>
<h3>Supporter</h3>
<p>$5/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>
<th class="professional">
<h4>Cat Bus</h4>
<h3>Cat Bus</h3>
<p>$20/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>
<th class="professional">
<h4>Fat Cat</h4>
<h3>Fat Cat</h3>
<p>$50/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>