building out the home page layout
This commit is contained in:
connors
Родитель
24891dcdfb
Коммит
72adf63da2
|
|
@ -667,7 +667,7 @@ body {
|
|||
padding-bottom: 50px;
|
||||
}
|
||||
.docs-header-content .button {
|
||||
padding: 15px 30px;
|
||||
padding: 15px 30px 16px;
|
||||
font-size: 18px;
|
||||
color: #00d1fe;
|
||||
border-color: #00d1fe;
|
||||
|
|
@ -718,10 +718,66 @@ body {
|
|||
line-height: 34px;
|
||||
}
|
||||
|
||||
.docs-benefits {
|
||||
display: none;
|
||||
.section-header {
|
||||
text-align: center;
|
||||
}
|
||||
.section-header:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 200px;
|
||||
margin: 50px auto 80px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.section-heading,
|
||||
.section-lead {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 55px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.section-lead {
|
||||
font-size: 24px;
|
||||
color: #777;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.docs-benefits {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.benefit-icon .icon {
|
||||
color: #14b9d6;
|
||||
font-size: 50px;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.benefit-heading {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.benefit-text {
|
||||
margin-top: 0;
|
||||
margin-bottom: 100px;
|
||||
font-size: 18px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.social {
|
||||
|
|
|
|||
76
index.html
76
index.html
|
|
@ -21,32 +21,7 @@ base_url: "./"
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<section class="docs-benefits">
|
||||
<div class="container column-group">
|
||||
<div class="column units-1 lg-units-6">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="column units-1 lg-units-6">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container column-group">
|
||||
<div class="column units-1 lg-units-6">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="column units-1 lg-units-6">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Social links -->
|
||||
<ul class="social">
|
||||
<li>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=maker&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
||||
|
|
@ -60,3 +35,52 @@ base_url: "./"
|
|||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Benefits -->
|
||||
<section class="docs-benefits">
|
||||
<div class="container column-group">
|
||||
<div class="section-header column units-2">
|
||||
<h2 class="section-heading">Getting started</h2>
|
||||
<p class="section-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
|
||||
</div>
|
||||
<div class="column units-1 lg-units-6">
|
||||
<div class="benefit-icon">
|
||||
<span class="icon icon-refresh"></span>
|
||||
</div>
|
||||
<h3 class="benefit-heading">Simple web technology</h3>
|
||||
<p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="column units-1 lg-units-6">
|
||||
<div class="benefit-icon">
|
||||
<span class="icon icon-refresh"></span>
|
||||
</div>
|
||||
<h3 class="benefit-heading">Simple web technology</h3>
|
||||
<p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container column-group">
|
||||
<div class="column units-1 lg-units-6">
|
||||
<div class="benefit-icon">
|
||||
<span class="icon icon-refresh"></span>
|
||||
</div>
|
||||
<h3 class="benefit-heading">Simple web technology</h3>
|
||||
<p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="column units-1 lg-units-6">
|
||||
<div class="benefit-icon">
|
||||
<span class="icon icon-refresh"></span>
|
||||
</div>
|
||||
<h3 class="benefit-heading">Simple web technology</h3>
|
||||
<p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ body {
|
|||
padding-bottom: 50px;
|
||||
|
||||
.button {
|
||||
padding: 15px 30px;
|
||||
padding: 15px 30px 16px;
|
||||
font-size: 18px;
|
||||
color: #00d1fe;
|
||||
border-color: #00d1fe;
|
||||
|
|
@ -108,14 +108,65 @@ body {
|
|||
font-weight: 100;
|
||||
line-height: 34px;
|
||||
}
|
||||
.section-header {
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 200px;
|
||||
margin: 50px auto 80px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
.section-heading,
|
||||
.section-lead {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.section-heading {
|
||||
font-size: 55px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.section-lead {
|
||||
font-size: 24px;
|
||||
color: #777;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
// Benefits
|
||||
// --------------------------------------------------
|
||||
|
||||
.docs-benefits {
|
||||
display: none;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
.benefit-icon {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50px;
|
||||
|
||||
.icon {
|
||||
color: #14b9d6;
|
||||
font-size: 50px;
|
||||
line-height: 100px;
|
||||
}
|
||||
}
|
||||
.benefit-heading {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.benefit-text {
|
||||
margin-top: 0;
|
||||
margin-bottom: 100px;
|
||||
font-size: 18px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче