#104 Added pricing to homepage
parent
000e905420
commit
b3f502e529
|
@ -1,15 +1,15 @@
|
||||||
/* Animations */
|
/* Animations */
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0% { transform: scale(1); }
|
0% { transform: scale(1); }
|
||||||
50% { transform: scale(0.8); }
|
50% { transform: scale(0.8); }
|
||||||
100% { transform: scale(1); }
|
100% { transform: scale(1); }
|
||||||
}
|
}
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% { transform: rotate(30deg); }
|
0% { transform: rotate(30deg); }
|
||||||
100% { transform: rotate(210deg); }
|
100% { transform: rotate(210deg); }
|
||||||
}
|
}
|
||||||
@keyframes spin2 {
|
@keyframes spin2 {
|
||||||
0% { transform: rotate(150deg); }
|
0% { transform: rotate(150deg); }
|
||||||
100% { transform: rotate(330deg); }
|
100% { transform: rotate(330deg); }
|
||||||
}
|
}
|
||||||
/* End Animations */
|
/* End Animations */
|
||||||
|
@ -180,16 +180,60 @@
|
||||||
background: rgba(0,0,0,0.2);
|
background: rgba(0,0,0,0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.disclaimer {
|
.pricing {
|
||||||
color: #fb6e3d;
|
text-align: center;
|
||||||
background: #000;
|
background-color: #222;
|
||||||
}
|
}
|
||||||
.disclaimer .container {
|
.pricing > h2 {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
.pricing > div > div {
|
||||||
|
float: left;
|
||||||
|
width: 33%;
|
||||||
|
margin-top: 60px;
|
||||||
|
background: #282828;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
.pricing > div > div h3 {
|
||||||
|
background: #555;
|
||||||
|
color: #fff;
|
||||||
|
display: block;
|
||||||
|
margin: -40px -40px 35px -40px;
|
||||||
|
padding: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
.disclaimer a, .disclaimer a:hover {
|
.pricing > div > div h3 span {
|
||||||
color:#fb6e3d;
|
display: block;
|
||||||
|
}
|
||||||
|
.pricing > div > div h3 span .fa {
|
||||||
|
margin: 0 1px;
|
||||||
|
}
|
||||||
|
.pricing > div > div .price {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
.pricing > div > div:nth-of-type(2) {
|
||||||
|
width: calc(34% + 20px);
|
||||||
|
margin: 40px -10px 0 -10px;
|
||||||
|
box-shadow: 0px 5px 20px -5px rgba(0,0,0,0.3);
|
||||||
|
position: relative;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
.pricing > div > div:nth-of-type(2) h3 {
|
||||||
|
background: #fbc93d;
|
||||||
|
color: #555;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.pricing ul {
|
||||||
|
padding: 0;
|
||||||
|
margin: 27px 0;
|
||||||
|
}
|
||||||
|
.pricing ul li {
|
||||||
|
display: block;
|
||||||
|
line-height: 40px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.pricing ul li:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.join {
|
.join {
|
||||||
|
@ -275,6 +319,19 @@
|
||||||
.feature > div > div {
|
.feature > div > div {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
.pricing > div > div{
|
||||||
|
width: 100% !important;
|
||||||
|
float: none;
|
||||||
|
margin: 0 0 20px 0 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
.pricing > div > div h3{
|
||||||
|
background: #555 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.pricing h2{
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
|
|
|
@ -98,22 +98,58 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class='disclaimer' id='disclaimer'>
|
{% if not user %}
|
||||||
|
|
||||||
|
<section class='pricing'>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<h2>Warning! </h2>
|
<h1>Pricing</h1>
|
||||||
<p>This is beta software, so there are still kinks to be worked out. </p>
|
<h2>Realtime GPS tracking for every budget</h2>
|
||||||
<p>Keep in mind that publishing your location online could be a bad idea. </p>
|
|
||||||
|
<div>
|
||||||
|
<h3>Basic<span><i class="fa fa-star"></i></span></h3>
|
||||||
|
<div class="price">free</div>
|
||||||
|
<ul>
|
||||||
|
<li>Map with URL</li>
|
||||||
|
<li>Realtime updates</li>
|
||||||
|
<li>Android integration</li>
|
||||||
|
</ul>
|
||||||
|
<a class="btn yellow smaller" href="/signup">Signup<i class="fa fa-angle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3>Pro<span><i class="fa fa-star"></i><i class="fa fa-star"></i></span></h3>
|
||||||
|
<div class="price">$5/month</div>
|
||||||
|
<ul>
|
||||||
|
<li>All Basic features</li>
|
||||||
|
<li>Streetview image</li>
|
||||||
|
<li>Show speed</li>
|
||||||
|
<li>Show altitude</li>
|
||||||
|
<li>Hide ads</li>
|
||||||
|
</ul>
|
||||||
|
<a class="btn yellow smaller" href="/signup">Signup<i class="fa fa-angle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3>Enterprise<span><i class="fa fa-star"></i><i class="fa fa-star"></i><i class='fa fa-star'></i></span></h3>
|
||||||
|
<div class="price">coming soon</div>
|
||||||
|
<ul>
|
||||||
|
<li>All Pro features</li>
|
||||||
|
<li>Multiple vehicles</li>
|
||||||
|
</ul>
|
||||||
|
<a class="btn yellow smaller" href="/contact">Contact<i class="fa fa-angle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{% if not user %}
|
|
||||||
<section class='join light' id='join'>
|
<section class='join light' id='join'>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<h2>Hook me up!</h2>
|
<h2>Hook me up!</h2>
|
||||||
<p>Just click that there button to create an account. </p>
|
<p>Just click the button to create an account. </p>
|
||||||
<a class='btn btn-lg' href="/login#signup">Join Tracman</a>
|
<a class='btn btn-lg' href="/signup">Join Tracman</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in New Issue