sub header, cta bar, logos, announcement
This commit is contained in:
Alex Wolfe
parent
b0ec2391ae
commit
0e19bfb2ca
|
|
@ -1,2 +1,3 @@
|
|||
a(href="http://google.com" class="md-raised md-primary" md-button) Learn in 5 Min
|
||||
a(href="http://google.com" class="md-raised md-primary" md-button) Download
|
||||
.cta-bar
|
||||
a(href="/docs/quickstart.html" class="cta-primary button button-large button-shield md-raised md-primary" md-button) Learn in 5 Min
|
||||
a(href="download.html" class="cta-secondary button button-large button-secondary" md-button) Download
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
|
||||
.side-nav-search
|
||||
input(type="search" placeholder="Search Docs...")
|
||||
input(type="search" placeholder="SEARCH DOCS...")
|
||||
|
||||
ul.side-nav-primary
|
||||
li <a href="/docs/quickstart.html">Quick Start</a>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,17 @@
|
|||
header(class="background-sky")
|
||||
div.hero.background-sf-paper.is-large
|
||||
|
||||
.hero.background-sf-paper.is-large
|
||||
h1.text-headline.hero-logo Angular is a modern javascript framework for building professional web applications.
|
||||
|
||||
.hero-cta
|
||||
a(href="/docs/quickstart.html" class="md-raised button button-large button-plain" md-button) Learn in 5 mins
|
||||
a(href="/download.html" class="button button-large button-heavy" md-button) Download
|
||||
a(href="/download.html" class="button button-large button-navy" md-button) Download
|
||||
|
||||
!= partial("_social-icons")
|
||||
!= partial("_social-icons")
|
||||
|
||||
|
||||
.banner.is-centered
|
||||
.banner-ng-annoucement
|
||||
h3.text-display-1 NG-CONF 2015
|
||||
h4.text-subhead March 5-6. Salt Lake City, Utah
|
||||
|
||||
a(href="http://www.ng-conf.org/" class="button button-large button-banner" md-button) Register Today
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
xml(version="1.0" encoding="UTF-8" standalone="no")
|
||||
svg(width="184px" height="200px" viewBox="0 0 184 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns")
|
||||
title shield-large
|
||||
defs
|
||||
g(id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage")
|
||||
g(id="shield-large" sketch:type="MSArtboardGroup")
|
||||
g(id="Logo-Sheild" sketch:type="MSLayerGroup" transform="translate(10.000000, 8.000000)")
|
||||
path(d="M81.2307692,0.0671014493 L81.2307692,0.0630797101 L0.299538462,30.4687681 L12.5933077,143.354964 L81.0353077,183.431594 L150.450808,142.81471 L163.983346,29.9298551 L81.2307692,0.0671014493" id="Fill-1" fill="#E23237" sketch:type="MSShapeGroup")
|
||||
path(d="M163.865308,29.9298551 L81.0073846,0.0671014493 L81.0073846,183.431594 L150.436846,142.81471 L163.865308,29.9298551 L163.865308,29.9298551 Z" id="Fill-2" fill="#B52E31" sketch:type="MSShapeGroup")
|
||||
path(d="M0.187846154,30.4687681 L12.5374615,143.354964 L81.0073846,183.431594 L81.0073846,0.0630797101 L0.187846154,30.4687681 L0.187846154,30.4687681 Z" id="Fill-3" fill="#E23237" sketch:type="MSShapeGroup")
|
||||
path(d="M98.3006538,96.3850725 L81.0073846,58.6397101 L66.1231154,96.3850725 L98.3006538,96.3850725 L98.3006538,96.3850725 Z M104.825769,112.256196 L59.4634615,112.256196 L49.3159615,139.066449 L30.4399615,139.433768 L81.0073846,20.5082609 L133.431692,139.433768 L115.935346,139.433768 L104.825769,112.256196 L104.825769,112.256196 Z" id="Fill-4" fill="#FFFFFF" sketch:type="MSShapeGroup")
|
||||
|
|
@ -25,6 +25,7 @@ $coal: #000000;
|
|||
$steel: #253238;
|
||||
$silver: #36474F;
|
||||
$platinum: #445A64;
|
||||
$metal: #536E7A;
|
||||
$tin: #8FA4AE;
|
||||
|
||||
// LIGHT GRAY COLORS
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ body {
|
|||
}
|
||||
|
||||
.text-display-1 {
|
||||
margin: 0px 0px ($unit * 2) 0px;
|
||||
margin: 0px;
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
opacity: .54;
|
||||
|
|
|
|||
|
|
@ -20,5 +20,7 @@
|
|||
@import 'module/main-footer';
|
||||
@import 'module/side-nav';
|
||||
@import 'module/hero';
|
||||
@import 'module/banner';
|
||||
@import 'module/cta-bar';
|
||||
@import 'module/buttons';
|
||||
@import 'module/sticker';
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
/*
|
||||
* Banner
|
||||
*
|
||||
* Addtional announcements that generally follow a hero
|
||||
*/
|
||||
|
||||
.banner {
|
||||
background: $mist;
|
||||
padding: $unit * 4;
|
||||
|
||||
&.is-centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner-ng-annoucement {
|
||||
background: url('/resources/images/logos/ng-conf/ng-conf-shield.png') 0px 0px no-repeat;
|
||||
padding-left: 68px;
|
||||
margin-right: $unit * 3;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h3 {
|
||||
opacity: .87;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,8 @@
|
|||
border-radius: 3px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
// SIZES
|
||||
&.button-large {
|
||||
|
|
@ -20,15 +22,40 @@
|
|||
padding: 0px ($unit * 3);
|
||||
}
|
||||
|
||||
&.button-x-large {
|
||||
font-size: 16px;
|
||||
line-height: $unit * 7;
|
||||
padding: 0px ($unit * 3);
|
||||
}
|
||||
|
||||
|
||||
// COLORS
|
||||
|
||||
&.button-secondary {
|
||||
background: $fog;
|
||||
color: rgba($snow, .87);
|
||||
}
|
||||
|
||||
&.button-plain {
|
||||
background: $snow;
|
||||
color: rgba($steel, .87);
|
||||
}
|
||||
|
||||
&.button-heavy {
|
||||
&.button-navy {
|
||||
background: $ocean;
|
||||
color: rgba($snow, .87);
|
||||
}
|
||||
}
|
||||
|
||||
&.button-banner {
|
||||
background: $metal;
|
||||
color: rgba($snow, .87);
|
||||
}
|
||||
|
||||
&.button-shield {
|
||||
background: $regal url('/resources/images/logos/inverse/shield/22.png') 24px 13px no-repeat;
|
||||
color: rgba($snow, .87);
|
||||
padding-left: 54px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/*
|
||||
* CTA Bar (Call to action)
|
||||
*
|
||||
* Call to action located at the bottom of most pages
|
||||
*/
|
||||
|
||||
.cta-bar {
|
||||
text-align: center;
|
||||
padding-top: ($unit * 8);
|
||||
|
||||
.button {
|
||||
margin: 0px ($unit * 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@ $hero-padding: $unit * 2;
|
|||
opacity: 1;
|
||||
width: $unit * 70;
|
||||
margin: ($unit * 3) auto ($unit * 5) auto;
|
||||
font-weight: 300;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// CTA BUTTONS
|
||||
|
|
@ -43,7 +43,6 @@ $hero-padding: $unit * 2;
|
|||
right: $unit * 3;
|
||||
z-index: $layer-1;
|
||||
|
||||
|
||||
a {
|
||||
color: $snow;
|
||||
opacity: .56;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
.side-nav-search {
|
||||
background: $tin;
|
||||
padding: 0px ($unit * 2);
|
||||
padding: 0px ($unit * 1);
|
||||
height: $unit * 6;
|
||||
border-bottom: 1px solid $fog;
|
||||
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
border-radius: 200px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: $unit * 4;
|
||||
height: 30px;
|
||||
padding: 0px $unit;
|
||||
margin-top: $unit;
|
||||
margin: $unit 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +38,9 @@
|
|||
> a {
|
||||
line-height: $unit * 6;
|
||||
padding: 0px ($unit * 2);
|
||||
color: $steel;
|
||||
color: $metal;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>22svg</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="22" sketch:type="MSArtboardGroup">
|
||||
<g id="LOGO" sketch:type="MSLayerGroup">
|
||||
<path d="M10.8307692,7.05156204 L10.8307692,11.5620438 L13.1847692,11.5620438 L10.8307692,7.05156204" id="Fill-1" fill="#F2F2F2" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M10.8307692,2.48391241 L17.8687385,16.7007299 L15.5360615,16.7007299 L14.0546154,13.4890511 L10.8307692,13.4890511 L10.8307692,22 L20.1120615,17.1346277 L21.8905077,3.61233577 L10.8307692,0.0346861314 L10.8307692,2.48391241 Z" id="Fill-2" fill="#F2F2F2" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M10.8307692,11.5620438 L10.8307692,7.05156204 L8.89443077,11.5620438 L10.8307692,11.5620438 Z" id="Fill-3" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M8.00647692,13.4890511 L6.65330769,16.6930219 L4.11247692,16.7333285 L10.8307692,2.48391241 L10.8307692,0.0346861314 L0.0788615385,3.67689051 L1.71346154,17.1991825 L10.8307692,22 L10.8307692,13.4890511 L8.00647692,13.4890511" id="Fill-4" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Loading…
Reference in New Issue