Added press section and plan charts to home page

This commit is contained in:
Victoria Wang 2014-09-30 22:02:17 -07:00
parent df1b3f86a5
commit b105d55316
5 changed files with 241 additions and 96 deletions

BIN
public/img/ars-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/img/vice-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
public/img/wired-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

View file

@ -755,13 +755,14 @@ a.tag:hover {
float: left;
}
.section {
padding: 50px 8%;
padding: 55px 8%;
margin: 0 auto;
float: left;
}
.section h2 {
font-size: 1.7em;
text-align:center;
line-height: 150%;
}
.section h3 {
font-size: 1.4em;
@ -785,7 +786,6 @@ a.tag:hover {
background-size: 22px;
background-repeat: no-repeat;
background-position: center center;
margin: auto 0px;
position: absolute;
top: 0; bottom: 0;
@ -799,9 +799,10 @@ a.tag:hover {
}
.section.features {
background: #4F7E89;
text-align: center;
}
.section.features .col {
padding-left: 35px;
padding-left: 40px;
}
.section.features .col:first-child {
padding-left: 0;
@ -810,20 +811,156 @@ a.tag:hover {
color: #fff;
}
.section.features .fa {
margin-right: 9px;
margin-right: 10px;
}
.section.features .fa-wrench {
vertical-align: 2px;
margin-right: 4px;
margin-right: 9px;
}
.section.features .fa-tachometer {
margin-right: 11px;
}
.section.last {
.section.features p, .section.features h3 {
text-align: left;
}
.section .press {
display: inline-block;
clear: both;
margin-top: 30px;
margin-bottom: 20px;
}
.section .logo {
float:left;
background-repeat: no-repeat;
margin-right: 30px;
}
.section .logo.wired {
width: 211px;
height: 44px;
background-image: url(/img/wired-logo.png);
background-size: 211px;
margin-top: 6px;
margin-right: 40px;
}
.section .logo.vice {
width: 160px;
height: 50px;
background-image: url(/img/vice-logo.png);
background-size: 160px;
}
.section .logo.ars {
width: 187px;
height: 62px;
background-image: url(/img/ars-logo.png);
background-size: 187px;
margin-top: -4px;
}
.section .press .more {
color: #A0BAC0;
float:right;
margin-top: 6px;
margin-right: 30px;
}
.section.plans {
background: #fff;
}
.section.last h2, .section.last blockquote {
.section.plans h2 {
color:#4F7E89;
}
.plan-overview {
margin-top: 2.5em;
margin-bottom: 2em;
}
.plan-overview .header {
display:table;
width: 100%;
}
.plan-overview .header .col {
font-size:.8em;
text-transform: uppercase;
padding: 8px 20px;
display:table-cell;
}
.plan-overview .header .personal {
background: #D6D6D6;
}
.plan-overview .header .professional {
background: #DAEEA5;
}
.plan-overview .body {
text-align: center;
clear:both;
display:table;
width: 100%;
}
.plan-overview .body h3, .plan-chart h4 {
color: black;
font-weight:bold;
font-size:1.2em;
font-family: "Lucida Grande", verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: -2px;
}
.plan-overview .price {
font-size: 2em;
}
.plan-overview .interval {
font-size: .8em;
margin-top: -.6em;
}
.plan-overview .btn-Action {
margin: .9em 0 1.4em 0;
}
.plan-overview .col {
padding-bottom:1.5em;
padding-left: 0;
display: table-cell;
background: #F8F8F8;
float:none;
}
.plan-overview .body .col:nth-of-type(2), .plan-overview .body .col:nth-of-type(4) {
background: #F5F5F5;
}
.plan-overview ul {
list-style: none;
padding: 0;
}
.plan-overview li {
margin: 0;
}
.plan-chart {
margin: 2em 0 4em 0;
width: 100%;
}
.plan-chart th {
background: #D6D6D6;
padding: 15px 0;
}
.plan-chart th.professional {
background: #DAEEA5;
}
.plan-chart th p {
margin: .3em 0 .6em 0;
}
.plan-chart td {
border: 1px solid #ECECEC;
background:#F5F5F5;
padding: 7px 0;
text-align: center;
}
.plan-chart .feature-column {
width: 21em;
text-align:right;
font-size: .9em;
font-weight: bold;
border: 0;
background: 0;
padding-right: 15px;
}
.plan-chart td:nth-child(even) {
background: #F8F8F8;
}
.plan-chart .fa-check {
color: #6CCC24;
}
.selected {
font-weight: bold;

View file

@ -253,23 +253,31 @@
<p>Neocities now secures serving all your content with Snowden-grade cryptography, <em>by default</em>, preventing snoops, whether they are hackers or rogue government agencies, from seeing what you browse. And we're working on letting you use your own SSL (HTTPS) certificates for custom domains.
Until January, Neocities will donate 5% of all Supporter plan proceeds to the Courage Foundation, an international organization that supports those who risk life or liberty to disclose privacy abuses online.</p>
</div></div>
</div>
</div>
<div class="press">
<a href="http://www.wired.com/2013/07/neocities/" class="logo wired"></a>
<a href="http://motherboard.vice.com/blog/neocities-is-recreating-the-garish-web-10-creativity-of-geocities" class="logo vice"></a>
<a href="http://arstechnica.com/tech-policy/2014/05/web-host-gives-fcc-a-28-8kbps-slow-lane-in-net-neutrality-protest/" class="logo ars"></a>
<a href="/press" class="more">See all press »</a>
</div>
</section>
<section class="section last">
<section class="section plans">
<h2>All Neocities plans include a neocities.org subdomain, WebDAV uploading, one-click backups, and all our social features. We'll never show ads on your site.</h2>
<div class="plan-overview">
<div class="row header">
<div class="col col-50">
<div class="header">
<div class="col col-50 personal">
Personal
</div>
<div class="col col-50">
<div class="col col-50 professional">
Professional
</div>
</div>
<div class="row body">
<div class="body">
<div class="col col-25">
<h3>Free</h3>
<div class="price">$0</div>
@ -339,29 +347,29 @@
</div>
<h2><a href="">Compare Plans <i class="fa fa-chevron-down"></i></a></h2>
<h2><a href="">Compare Plans <i class="fa fa-caret-down"></i></a></h2>
<table class="plan-chart">
<tr>
<th class="feature-column"></th>
<th>
<h4>Free</h4>
<p>$0</p>
<p>$0/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>
<th>
<h4>Supporter</h4>
<p>$5</p>
<p>$5/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>
<th>
<th class="professional">
<h4>Cat Bus</h4>
<p>$20</p>
<p>$20/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>
<th>
<th class="professional">
<h4>Fat Cat</h4>
<p>$50</p>
<p>$50/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>
</tr>
@ -374,122 +382,122 @@
</tr>
<tr>
<td class="feature-column">Bandwidth</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>10 GB</td>
<td>100 GB</td>
<td>500 GB</td>
<td>2 TB</td>
</tr>
<tr>
<td class="feature-column">No advertising, ever</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">WebDAV Uploading</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">Neocities.org Subdomain</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">One-Click Backups</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">Site Tags</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">RSS Feed</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">Follow Your Favorite Sites</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">Site Profile</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">Neocities Site Editor</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">Site Tipping (Coming Soon)</td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">Custom Domains</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">High Performance Global CDN Cache</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">DDoS Mitigation</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">Unlimited Site Creation (Coming Soon)</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="feature-column">Site Tipping (Coming Soon)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">Custom SSL Certificates</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">No File Upload Type Restrictions</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="fa fa-check"></i></td>
</tr>
</table>
</section>