honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(images): new frontpage as directed by Alex Wolfe. New images from Fatima Remtullah

This commit is contained in:
Eric Jimenez 2016-04-26 15:01:19 -04:00 committed by Naomi Black
parent acc5233671
commit 410b3741f7
17 changed files with 1245 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/_includes/_hero-home.jade
View File

@ -5,7 +5,8 @@ header(class="background-sky")
.hero-cta
a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started
.banner.is-centered
.banner.banner-floaty
.banner-ng-annoucement
h4 Watch the ng-conf Live Stream May 4th-6th. 
div(class="banner-text") Watch the ng-conf Live Stream May 4th-6th. 
div(class="banner-button")
a(href="https://www.ng-conf.org/#/extended" target="_blank") View Live Stream

122
public/index.jade
View File

@ -1,73 +1,53 @@
include _includes/_util-fns
div(layout-gt-sm='row' style='margin: 0 -24px')
div(flex=33 style='padding:0 24px')
h3.text-headline Fast
p.text-body Angular computes updates based on changes to data, not DOM, for fast updates that scale to the largest data sets with minimal memory overhead.
div(flex=33 style='padding:0 24px')
h3.text-headline Mobile
p.text-body With Angular Universal for server-side rendering and Web Workers for smooth scrolling and transitions, Angular 2 solves the core challenges in mobile web performance.
div(flex=33 style='padding:0 24px')
h3.text-headline Flexible
p.text-body Supports several languages including plain JavaScript, TypeScript, and Dart. Also supports both object-style data structure with POJO data-binding and functional reactive style with unidirectional data flow and support for observables and immutable data structures.
br
div
h3.text-headline The Basics
p.text-body In Angular you display data by defining components. Data in your component classes is automatically available to display in your templates or control how they render as in the example below.
p.text-body While this example uses TypeScript, Angular works equally well with ES5, ES6 and Dart as well.
p(style='text-align:right')
md-button.md-primary(href='/resources/live-examples/homepage-hello-world/ts/plnkr.html' target='_blank')
span.icon-open-in-new
| Try in Plunker
+makeTabs(`
../docs/_fragments/homepage-hello-world/ts/app/hello_world.html,
../docs/_fragments/homepage-hello-world/ts/app/hello_world.ts,
../docs/_fragments/homepage-hello-world/ts/app/main.ts,
../docs/_fragments/homepage-hello-world/ts/index.1.html`,
null,
`app/hello_world.html,
app/hello_world.ts,
app/main.ts,
index.html`)
br
div
h3.text-headline Structuring Apps With Components
p.text-body Groups of coordinated components divide the responsibilities of our application. This ToDo list app has a separate component for the form, the list, and the core app logic. Where the previous example component referenced templates in separate files, this one shows using inline templates.
p.text-body Defining types as we do here in Todo.ts communicates our intention to other developers, helps us find bugs in our code, and lets IDEs do more work for us in refactoring, code navigation, and code completion.
p(style='text-align:right')
md-button.md-primary(href='/resources/live-examples/homepage-todo/ts/plnkr.html' target='_blank')
span.icon-open-in-new
| Try in Plunker
+makeTabs(`
../docs/_fragments/homepage-todo/ts/app/todo_app.ts,
../docs/_fragments/homepage-todo/ts/app/todo_form.ts,
../docs/_fragments/homepage-todo/ts/app/todo_list.ts,
../docs/_fragments/homepage-todo/ts/app/todo.ts,
../docs/_fragments/homepage-todo/ts/app/main.ts,
../docs/_fragments/homepage-todo/ts/index.1.html`,
null,
`app/todo_app.ts,
app/todo_form.ts,
app/todo_list.ts,
app/todo.ts,
app/main.ts,
index.html`)
br
div
h3.text-headline Advanced Component Communication
p.text-body This demo shows an efficient implementation of tabs/panes. Each pane is only instantiated while it is visible. Panes which are not visible are released and do not have associated memory, DOM and change detection cost.
p.text-body The demo also showcases dependency injection and the ability of one component to query for other components. Such queries automatically update even as detail panes are added. This allows the tabs component to work with <code>ngFor</code> without any special knowledge of it.
p(style='text-align:right')
md-button.md-primary(href='/resources/live-examples/homepage-tabs/ts/plnkr.html' target='_blank')
span.icon-open-in-new
| Try in Plunker
+makeTabs(`
../docs/_fragments/homepage-tabs/ts/app/di_demo.ts,
../docs/_fragments/homepage-tabs/ts/app/ui_tabs.ts,
../docs/_fragments/homepage-tabs/ts/app/main.ts,
../docs/_fragments/homepage-tabs/ts/index.1.html`,
null,
`app/di_demo.ts,
app/ui_tabs.ts,
app/main.ts,
index.html`)
div(class="home-rows")
// Group 1
div(layout="row" layout-xs="column" class="home-row")
div(class="promo-img-container promo-1")
div
img(src="resources/images/home/responsive-framework.svg")
div(class="text-container")
div(class="text-block promo-1-desc l-pad-top-2")
h3(class="text-headline") Develop Across All Platforms
p(class="text-body").
Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.
// Group 2
div(layout="row" layout-xs="column" class="home-row")
div(class="text-container")
div(class="text-block")
h3(class="text-headline") Speed & Performance
p(class="text-body").
Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.
br
p(class="text-body").
Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.
div(class="promo-img-container promo-2")
div
img(src="resources/images/home/speed-performance.svg")
// Group 3
div(layout="row" layout-xs="column" class="home-row")
div(class="promo-img-container promo-3")
div
img(src="resources/images/home/joyful-development.png")
div(class="text-container")
div(class="text-block promo-3-desc")
h3(class="text-headline") Incredible Tooling
p(class="text-body").
Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.
// Group 4
div(layout="row" layout-xs="column" class="home-row")
div(class="text-container")
div(class="text-block l-pad-top-2")
h3(class="text-headline") Loved by Millions
p(class="text-body").
Supports you from your first scrappy launch all the way through global deployment -- Angular brings you the scaling infrastructure and techniques that support Google's largest applications.
div(class="promo-img-container promo-4")
div
img(src="resources/images/home/loved-by-millions.png")
.cta-bar
a(href="/docs/ts/latest/quickstart.html" class="button button-large button-shield md-raised " + "md-primary" md-button) Get Started

2
public/resources/css/layout/_layout.scss
View File

@ -270,4 +270,4 @@ button.verbose.on {display: none}
font-size: $unit * 2;
margin-bottom: $unit;
margin-top: $unit * 4;
}
}

2
public/resources/css/main.scss
View File

@ -51,7 +51,7 @@
@import 'module/style-guide';
@import 'module/_press-kit';
@import 'module/resources';
@import 'module/home-promos';
/*
* PRINT STYLES

89
public/resources/css/module/_banner.scss
View File

@ -4,6 +4,80 @@
* Addtional announcements that generally follow a hero
*/
.banner-floaty {
width: 920px;
height: 112px;
background-color: rgba(255, 255, 255, 1) !important;
-moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
position: absolute;
margin-top: -50px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
z-index: 1;
display: table;
padding: 0 !important;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
padding: 0;
}
@media(max-width: 959px) {
width: 100%;
height: 56px;
padding: 16px 0 !important;
}
.banner-ng-annoucement {
display: flex;
justify-content: space-around;
align-content: space-around;
align-items: center;
height: 100%;
@media(max-width: 959px) {
flex-direction: column;
justify-content: space-between;
align-content: space-between;
.banner-text {
padding: 16px 0;
margin: 0 16px;
}
}
.banner-text {
font-size: 16px;
color: #607D8B;
}
.banner-button {
a {
color: #607D8B;
background-color: #ECEFF1;
padding: 0;
line-height: 36px;
padding-left: 20px;
padding-right: 20px;
}
}
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
background: none;
padding-left: 0px;
margin: 0px 0px $unit 0px;
text-align: center;
}
}
}
.banner {
background: $mist;
padding: ($unit * 2) ($unit * 6);
@ -25,7 +99,6 @@
screen and (max-width: $tablet-breakpoint) {
display: block;
}
padding: 0;
}
.ng-conf-logo {
@ -38,20 +111,6 @@
padding: $unit 0 $unit 108px;
}
.banner-ng-annoucement {
display: inline-block;
text-align: left;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
background: none;
padding-left: 0px;
margin: 0px 0px $unit 0px;
text-align: center;
}
}
h3 {
opacity: .87;
line-height: 34px;

2
public/resources/css/module/_footer.scss
View File

@ -39,6 +39,8 @@
}
h3 {
font-size: 20px;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {

7
public/resources/css/module/_hero.scss
View File

@ -5,6 +5,13 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
padding: $hero-padding;
height: $unit * 10;
.hero-cta {
a {
padding-left: 48px;
padding-right: 48px;
}
}
.hero-title-with-badges {
margin-bottom: $unit;
}

81
public/resources/css/module/_home-promos.scss Normal file
View File

@ -0,0 +1,81 @@
// TODO: (ericjim) is the best place to put this?
.home-rows {
margin-top: 112px;
}
.home-row {
max-width: 920px;
margin: 0 0 60px 0;
margin-left: auto;
margin-right: auto;
h3.text-headline {
font-size: 28px;
margin-top: 10px;
color: #37474F;
}
.promo-image-container, .text-container {
max-width: 50%;
}
// NOTE (ericjim): remove if graphic changes.
.promo-3 {
margin-top: 15px;
@media(max-width: 599px) {
margin-top: 0;
}
}
// -- Utility margins for promos
.promo-1-desc, .promo-3-desc {
padding-left: 5px;
}
// -- Reset margins for the utility margins
@media(max-width: 599px) {
.promo-1, .promo-2, .promo-3, .promo-4 {
margin: 0;
}
}
.text-block {
padding-right: 15%;
@media(max-width: 599px) {
padding: 0;
}
}
@media(max-width: 599px) {
.promo-image-container, .text-container {
max-width: 100%;
}
&:nth-child(even) {
flex-direction: column-reverse;
}
}
.promo-img-container {
@media (max-width: 375px) {
text-align: initial;
}
p {
margin: 0 20px;
}
img {
max-width: 90%;
@media (max-width: 599px) {
max-width: 100%;
float: initial !important;
}
}
}
}

BIN
public/resources/images/home/joyful-development.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/resources/images/home/joyful-development.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
public/resources/images/home/joyful-development.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

56
public/resources/images/home/joyful-development.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
public/resources/images/home/loved-by-millions.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

521
public/resources/images/home/loved-by-millions.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

BIN
public/resources/images/home/responsive-framework.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

169
public/resources/images/home/responsive-framework.svg Normal file
View File

@ -0,0 +1,169 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1295px" height="759px" viewBox="0 0 1295 759" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
<title>Responsive Framework</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="832.761381" height="555.226994" rx="10"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<path d="M423.070823,375.356054 L672.348703,375.356054 L672.348703,19.349783 C672.348703,8.65536397 663.539446,0 652.652382,0 L93.95269,0 C83.0763366,0 74.2563691,8.65536397 74.2563691,19.349783 L74.2563691,375.356054 L423.070823,375.356054 L423.070823,375.356054 Z M111.988908,41.0412933 L634.610809,41.0412933 L634.610809,338.21233 L111.988908,338.21233 L111.988908,41.0412933 Z M376.253236,375.356054 L8.97682789,375.356054 C2.50778066,375.356054 -1.8299083,381.005936 0.761994731,386.045163 L1.28144637,387.054071 C9.24994163,402.522215 27.2165422,412.515709 47.0628079,412.515709 L705.443664,412.515709 C725.289929,412.515709 743.25653,402.522215 751.21967,387.054071 L751.739122,386.045163 C754.33638,381.005936 749.998691,375.356054 743.529644,375.356054 L376.253236,375.356054 Z" id="path-3"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<path d="M17.4881428,400 C7.83037292,400 0,392.07203 0,382.293886 L0,17.7061143 C0,7.92561643 7.83037292,0 17.4881428,0 L207.509532,0 C217.169627,0 225,7.92561643 225,17.7061143 L225,382.293886 C225,392.07203 217.169627,400 207.509532,400 L17.4881428,400 Z M17.4068526,52.9896762 L208.782763,52.9896762 L208.782763,336.195004 L17.4068526,336.195004 L17.4068526,52.9896762 Z" id="path-5"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="One-framework.--All-platforms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Responsive-Framework">
<g id="monitor" transform="translate(399.000000, 34.000000)">
<g id="frame" transform="translate(0.238619, 0.000000)">
<g id="Combined-Shape">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#ECEFF1" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
<g id="screen" transform="translate(37.000000, 40.000000)">
<rect fill="#FFFFFF" x="0.750392465" y="0.0163599182" width="760.238619" height="480.196319"></rect>
<g id="text" transform="translate(60.000000, 331.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
<path d="M0,4.5 L186.513046,4.5" id="Line"></path>
<path d="M0,27.5 L186.513046,27.5" id="Line"></path>
<path d="M0,49.5 L186.513046,49.5" id="Line"></path>
<path d="M0,72.5 L186.513046,72.5" id="Line"></path>
<path d="M0,94.5 L186.513046,94.5" id="Line"></path>
</g>
<g id="text" transform="translate(289.000000, 332.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
<path d="M0,4.5 L186.513046,4.5" id="Line"></path>
<path d="M0,27.5 L186.513046,27.5" id="Line"></path>
<path d="M0,49.5 L186.513046,49.5" id="Line"></path>
<path d="M0,72.5 L186.513046,72.5" id="Line"></path>
<path d="M0,94.5 L186.513046,94.5" id="Line"></path>
</g>
<g id="text" transform="translate(514.000000, 332.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
<path d="M0,4.5 L186.513046,4.5" id="Line"></path>
<path d="M0,27.5 L186.513046,27.5" id="Line"></path>
<path d="M0,49.5 L186.513046,49.5" id="Line"></path>
<path d="M0,72.5 L186.513046,72.5" id="Line"></path>
<path d="M0,94.5 L186.513046,94.5" id="Line"></path>
</g>
<g id="boxes" transform="translate(53.000000, 25.000000)" fill="#E1E2E3" fill-opacity="0.7">
<rect id="Rectangle-70" x="0" y="149" width="204" height="135" rx="4"></rect>
<rect id="Rectangle-70" x="226" y="149" width="204" height="135" rx="4"></rect>
<rect id="Rectangle-70" x="451" y="149" width="204" height="135" rx="4"></rect>
<rect id="Rectangle-69" x="0" y="0" width="655" height="123" rx="4"></rect>
</g>
</g>
<g id="angular-logo" transform="translate(363.000000, 230.000000)">
<g id="Group">
<polygon id="Shape" fill="#DD0031" points="51.5 0 51.5 0 51.5 0 0.493085106 18.26 8.27287234 85.965 51.5 110 51.5 110 51.5 110 94.7271277 85.965 102.506915 18.26"></polygon>
<polygon id="Shape" fill="#C3002F" points="51.5 0 51.5 12.21 51.5 12.155 51.5 67.87 51.5 67.87 51.5 110 51.5 110 94.7271277 85.965 102.506915 18.26"></polygon>
<path d="M51.5,12.155 L19.6138298,83.93 L19.6138298,83.93 L31.5026596,83.93 L31.5026596,83.93 L37.912766,67.87 L64.9776596,67.87 L71.387766,83.93 L71.387766,83.93 L83.2765957,83.93 L83.2765957,83.93 L51.5,12.155 L51.5,12.155 L51.5,12.155 L51.5,12.155 L51.5,12.155 L51.5,12.155 Z M60.8138298,57.97 L42.1861702,57.97 L51.5,35.475 L60.8138298,57.97 L60.8138298,57.97 Z" id="Shape" fill="#FFFFFF"></path>
</g>
</g>
</g>
<g id="laptop" transform="translate(18.000000, 312.000000)">
<g id="Imported-Layers">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#ECEFF1" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<polygon id="Line" fill="#DDE2E6" points="75.0725076 375.46146 671.102719 375.46146 672.35355 375.46146 672.35355 372.95843 671.102719 372.95843 75.0725076 372.95843 73.821677 372.95843 73.821677 375.46146"></polygon>
<path d="M430.984819,374.209945 C430.984819,378.60861 428.025348,382.085501 424.473135,382.085501 L326.23079,382.085501 C322.680532,382.085501 319.740257,378.616468 319.740257,374.209945 L318.489426,375.46146 L432.23565,375.46146 L430.984819,374.209945 L430.984819,374.209945 Z M433.48648,374.209945 L433.48648,372.95843 L432.23565,372.95843 L318.489426,372.95843 L317.238595,372.95843 L317.238595,374.209945 C317.238595,379.915807 321.199093,384.588532 326.23079,384.588532 L424.473135,384.588532 C429.504051,384.588532 433.48648,379.909832 433.48648,374.209945 L433.48648,374.209945 Z" id="Path-Copy-4" fill="#DDE2E6"></path>
<path d="M109.196375,36.5082873 L636.978852,36.5082873 L636.978852,41.2195446 L636.978852,41.5143479 L109.196375,41.5143479 L109.196375,36.5082873 Z" id="top-shadow" fill="#DDE2E6"></path>
<g id="screen" transform="translate(111.000000, 39.000000)">
<rect fill="#FFFFFF" x="0.516695994" y="0.0102036912" width="523.475737" height="299.498744"></rect>
<g id="text" transform="translate(41.000000, 216.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="6.174" stroke-linecap="square">
<path d="M0.314060447,2.85446985 L128.740915,2.85446985" id="Line"></path>
<path d="M0.314060447,17.1995842 L128.740915,17.1995842" id="Line"></path>
<path d="M0.314060447,30.9209979 L128.740915,30.9209979" id="Line"></path>
<path d="M0.314060447,45.2661123 L128.740915,45.2661123" id="Line"></path>
<path d="M0.314060447,58.987526 L128.740915,58.987526" id="Line"></path>
</g>
<g id="text" transform="translate(198.000000, 216.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="6.174" stroke-linecap="square">
<path d="M0.996057819,3.47817048 L129.422912,3.47817048" id="Line"></path>
<path d="M0.996057819,17.8232848 L129.422912,17.8232848" id="Line"></path>
<path d="M0.996057819,31.5446985 L129.422912,31.5446985" id="Line"></path>
<path d="M0.996057819,45.8898129 L129.422912,45.8898129" id="Line"></path>
<path d="M0.996057819,59.6112266 L129.422912,59.6112266" id="Line"></path>
</g>
<g id="text" transform="translate(353.000000, 216.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="6.174" stroke-linecap="square">
<path d="M0.923784494,3.47817048 L129.350639,3.47817048" id="Line"></path>
<path d="M0.923784494,17.8232848 L129.350639,17.8232848" id="Line"></path>
<path d="M0.923784494,31.5446985 L129.350639,31.5446985" id="Line"></path>
<path d="M0.923784494,45.8898129 L129.350639,45.8898129" id="Line"></path>
<path d="M0.923784494,59.6112266 L129.350639,59.6112266" id="Line"></path>
</g>
<g id="boxes" transform="translate(36.000000, 23.000000)" fill="#E1E2E3">
<rect id="Rectangle-70" fill-opacity="0.7" x="0.494086728" y="93.8586279" width="140.467806" height="84.7200012" rx="2.744"></rect>
<rect id="Rectangle-70" fill-opacity="0.7" x="156.110381" y="93.8586279" width="140.467806" height="84.7200012" rx="2.744"></rect>
<rect id="Rectangle-70" x="311.038108" y="93.8586279" width="140.467806" height="84.7200012" rx="2.744"></rect>
<rect id="Rectangle-69" fill-opacity="0.7" x="0.494086728" y="0.0457380457" width="451.011827" height="76.7151767" rx="2.744"></rect>
</g>
</g>
<g id="angular-logo" transform="translate(338.000000, 161.000000)">
<g id="Group">
<polygon id="Shape" fill="#DD0031" points="34 0 34 0 34 0 0.325531915 12.118 5.46170213 57.0495 34 73 34 73 34 73 62.5382979 57.0495 67.6744681 12.118"></polygon>
<polygon id="Shape" fill="#C3002F" points="34 0 34 8.103 34 8.0665 34 45.041 34 45.041 34 73 34 73 62.5382979 57.0495 67.6744681 12.118"></polygon>
<path d="M34,8.0665 L12.9489362,55.699 L12.9489362,55.699 L20.7978723,55.699 L20.7978723,55.699 L25.0297872,45.041 L42.8978723,45.041 L47.1297872,55.699 L47.1297872,55.699 L54.9787234,55.699 L54.9787234,55.699 L34,8.0665 L34,8.0665 L34,8.0665 L34,8.0665 L34,8.0665 L34,8.0665 Z M40.1489362,38.471 L27.8510638,38.471 L34,23.5425 L40.1489362,38.471 L40.1489362,38.471 Z" id="Shape" fill="#FFFFFF"></path>
</g>
</g>
</g>
<g id="iphone" transform="translate(1030.000000, 325.000000)">
<g id="iPhone-Outline-Copy-2">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="#ECEFF1" fill-rule="evenodd" xlink:href="#path-5"></use>
</g>
<path d="M133.449217,26.9964062 L90.3984404,26.9964062 C88.5408193,26.9964062 87.034263,25.4710722 87.034263,23.5902978 C87.034263,21.7095234 88.5408193,20.1865433 90.3984404,20.1865433 L133.449217,20.1865433 C135.306838,20.1865433 136.813394,21.7095234 136.813394,23.5902978 C136.813394,25.4710722 135.306838,26.9964062 133.449217,26.9964062 L133.449217,26.9964062 Z" id="speaker" fill="#FFFFFF"></path>
<path d="M126.5625,366.666667 C126.5625,374.454876 120.266084,380.769231 112.5,380.769231 C104.733916,380.769231 98.4375,374.454876 98.4375,366.666667 C98.4375,358.878458 104.733916,352.564103 112.5,352.564103 C120.266084,352.564103 126.5625,358.878458 126.5625,366.666667 L126.5625,366.666667 Z" id="home-button" stroke="#FFFFFF" stroke-width="2.5"></path>
<rect id="screen" fill="#FFFFFF" x="15" y="51" width="194.318182" height="287.179487"></rect>
<g id="text" transform="translate(31.000000, 249.000000)" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
<path d="M0,1.5 L166.689941,1.5" id="Line" opacity="0.7"></path>
<path d="M0,18.5 L166.689941,18.5" id="Line" stroke-opacity="0.7"></path>
<path d="M0,35.5 L166.689941,35.5" id="Line" stroke-opacity="0.7"></path>
<path d="M0,53.5 L166.689941,53.5" id="Line" stroke-opacity="0.7"></path>
</g>
<g id="boxes" transform="translate(25.000000, 67.000000)" fill-opacity="0.7">
<rect id="Rectangle-69" fill="#E1E2E3" x="0" y="0.00359380031" width="173" height="54.9964062" rx="4"></rect>
<rect id="Rectangle-70" fill="#E1E2E3" x="1" y="69" width="175" height="100" rx="4"></rect>
<rect id="Rectangle-69" fill="#E1E3E4" x="3" y="249" width="173" height="22.2099991" rx="4"></rect>
</g>
<g id="angular-logo" transform="translate(75.000000, 145.000000)">
<g id="Group">
<polygon id="Shape" fill="#DD0031" points="40 0 40 0 40 0 0.382978723 14.11 6.42553191 66.4275 40 85 40 85 40 85 73.5744681 66.4275 79.6170213 14.11"></polygon>
<polygon id="Shape" fill="#C3002F" points="40 0 40 9.435 40 9.3925 40 52.445 40 52.445 40 85 40 85 73.5744681 66.4275 79.6170213 14.11"></polygon>
<path d="M40,9.3925 L15.2340426,64.855 L15.2340426,64.855 L24.4680851,64.855 L24.4680851,64.855 L29.4468085,52.445 L50.4680851,52.445 L55.4468085,64.855 L55.4468085,64.855 L64.6808511,64.855 L64.6808511,64.855 L40,9.3925 L40,9.3925 L40,9.3925 L40,9.3925 L40,9.3925 L40,9.3925 Z M47.2340426,44.795 L32.7659574,44.795 L40,27.4125 L47.2340426,44.795 L47.2340426,44.795 Z" id="Shape" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

279
public/resources/images/home/speed-performance.svg Normal file
View File

@ -0,0 +1,279 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="962px" height="594px" viewBox="0 0 962 594" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
<title>Speed &amp; Performance</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="11" y="17" width="940" height="560" rx="4"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<circle id="path-3" cx="6" cy="6" r="6"></circle>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<circle id="path-5" cx="25" cy="6" r="6"></circle>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<circle id="path-7" cx="45" cy="6" r="6"></circle>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-8">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<rect id="path-9" x="0" y="0" width="19.1467222" height="15"></rect>
<mask id="mask-10" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<rect id="path-11" x="0" y="0" width="19.1467222" height="15"></rect>
<mask id="mask-12" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<rect id="path-13" x="0" y="0" width="19.1467222" height="15"></rect>
<mask id="mask-14" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<rect id="path-15" x="0" y="0" width="19.1467222" height="15"></rect>
<mask id="mask-16" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<rect id="path-17" x="0" y="0" width="19.1467222" height="15"></rect>
<mask id="mask-18" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<rect id="path-19" x="0" y="0" width="19.1467222" height="15"></rect>
<mask id="mask-20" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<rect id="path-21" x="0" y="0" width="19.1467222" height="15"></rect>
<mask id="mask-22" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.1467222" height="15" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<path d="M0,0 L304,0 L304,150.740752 L248.558542,150.740752 L0,150.740752 L0,0 Z" id="path-23"></path>
<path d="M66.6262384,229.312333 C86.871865,252.340626 116.608936,266.883014 149.756364,266.883014 C210.758055,266.883014 260.209697,217.631474 260.209697,156.876621 C260.209697,96.1217685 210.758055,46.870229 149.756364,46.870229 C88.7546721,46.870229 39.3030303,96.1217685 39.3030303,156.876621 C39.3030303,184.618175 49.6135448,209.961324 66.6262384,229.312333 Z" id="path-25"></path>
<mask id="mask-26" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="220.906667" height="220.012785" fill="white">
<use xlink:href="#path-25"></use>
</mask>
<linearGradient x1="0%" y1="50%" x2="0%" y2="0%" id="linearGradient-27">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<rect id="path-28" x="0" y="0" width="276" height="136.764789"></rect>
<linearGradient x1="100%" y1="61.2487674%" x2="44.8372349%" y2="61.2487674%" id="linearGradient-30">
<stop stop-color="#ED2222" offset="0%"></stop>
<stop stop-color="#4BA4E7" stop-opacity="0.297101449" offset="100%"></stop>
</linearGradient>
<path d="M65.0238664,214.583184 C81.6762853,233.511674 106.135601,245.465032 133.4,245.465032 C183.57507,245.465032 224.25,204.981907 224.25,155.043441 C224.25,105.104974 183.57507,64.6218487 133.4,64.6218487 C83.2249305,64.6218487 42.55,105.104974 42.55,155.043441 C42.55,177.846074 51.0305973,198.677299 65.0238664,214.583184 Z" id="path-31"></path>
<mask id="mask-32" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="181.7" height="180.843184" fill="white">
<use xlink:href="#path-31"></use>
</mask>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Speed-&amp;-Performance">
<g id="frame">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#EAEAEB" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="controls" transform="translate(35.000000, 38.000000)">
<g id="Oval-1">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#FF6057" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<g id="Oval-1">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="#FFC22E" fill-rule="evenodd" xlink:href="#path-5"></use>
</g>
<g id="Oval-1">
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
<use fill="#28CA40" fill-rule="evenodd" xlink:href="#path-7"></use>
</g>
</g>
<rect id="url-bar" fill="#FFFFFF" x="111" y="32" width="774" height="29" rx="4"></rect>
<g id="menu" transform="translate(901.000000, 38.000000)" stroke="#FFFFFF" stroke-width="4" stroke-linecap="square">
<path d="M0,2 L25.1782593,2" id="Line"></path>
<path d="M0,9 L25.1782593,9" id="Line"></path>
<path d="M0,16 L25.1782593,16" id="Line"></path>
</g>
<g id="homepage" transform="translate(21.000000, 74.000000)">
<rect id="screen" fill="#FFFFFF" x="0" y="0" width="920" height="491"></rect>
<g id="text" transform="translate(37.000000, 202.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="11.7" stroke-linecap="square">
<path d="M0.105343511,6.80295567 L242.71468,6.80295567" id="Line"></path>
<path d="M0.105343511,36.7142857 L242.71468,36.7142857" id="Line"></path>
</g>
<g id="text" transform="translate(334.000000, 204.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="11.7" stroke-linecap="square">
<path d="M0.980152672,6.10344828 L243.589489,6.10344828" id="Line"></path>
<path d="M0.980152672,36.0147783 L243.589489,36.0147783" id="Line"></path>
</g>
<g id="text" transform="translate(627.000000, 204.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="11.7" stroke-linecap="square">
<path d="M0.651908397,6.10344828 L243.261245,6.10344828" id="Line"></path>
<path d="M0.651908397,36.0147783 L243.261245,36.0147783" id="Line"></path>
</g>
<g id="box" transform="translate(28.000000, 24.000000)" fill="#E1E2E3" fill-opacity="0.7">
<rect id="Rectangle-70" x="0" y="0.773399015" width="265.355725" height="160.570007" rx="5.2"></rect>
<rect id="Rectangle-70" x="293.972519" y="0.773399015" width="265.355725" height="160.570007" rx="5.2"></rect>
<rect id="Rectangle-70" x="586.644275" y="0.773399015" width="265.355725" height="160.570007" rx="5.2"></rect>
</g>
</g>
<g id="screen" transform="translate(21.000000, 341.000000)">
<g id="Grid">
<rect id="Rectangle-2" fill="#EFEFEF" x="0" y="0" width="921" height="32.7200012"></rect>
<rect id="Rectangle-2" fill="#EFEFEF" x="0" y="66" width="921" height="32.7200012"></rect>
<rect id="Rectangle-2-Copy-2" fill="#EFEFEF" x="0" y="134" width="921" height="32.7200012"></rect>
<rect id="Rectangle-2-Copy" fill="#EFEFEF" x="0" y="200" width="921" height="25.7199993"></rect>
<path d="M190.552549,7.8452814e-15 L190.552549,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
<path d="M259.480749,7.8452814e-15 L259.480749,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
<path d="M328.408949,7.8452814e-15 L328.408949,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
<path d="M397.337149,7.8452814e-15 L397.337149,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
<path d="M498.814776,7.8452814e-15 L498.814776,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
<path d="M564.870968,7.8452814e-15 L564.870968,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
<path d="M627.097815,7.8452814e-15 L627.097815,222.385692" id="Line" stroke="#C8C8C8" stroke-linecap="square"></path>
<path d="M845.849116,0.355095541 L845.849116,222.740787" id="Line" stroke="#0037FF" stroke-linecap="square"></path>
<path d="M887.014568,0.355095541 L887.014568,222.740787" id="Line" stroke="#FF0000" stroke-linecap="square"></path>
</g>
<g id="Items" transform="translate(11.530697, 9.000000)">
<g id="items">
<use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-10)" stroke-width="3" fill="#EFC535" xlink:href="#path-9"></use>
<rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
</g>
<g id="items" transform="translate(0.000000, 33.000000)">
<use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-12)" stroke-width="3" fill="#9279EA" xlink:href="#path-11"></use>
<rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
</g>
<g id="items" transform="translate(0.000000, 66.000000)">
<use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-14)" stroke-width="3" fill="#EFC535" xlink:href="#path-13"></use>
<rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
</g>
<g id="items" transform="translate(0.000000, 99.000000)">
<use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-16)" stroke-width="3" fill="#79B256" xlink:href="#path-15"></use>
<rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
</g>
<g id="items-" transform="translate(0.000000, 133.000000)">
<use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-18)" stroke-width="3" fill="#79B256" xlink:href="#path-17"></use>
<rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
</g>
<g id="items" transform="translate(0.000000, 166.000000)">
<use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-20)" stroke-width="3" fill="#EFC535" xlink:href="#path-19"></use>
<rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
</g>
<g id="items-" transform="translate(0.000000, 199.000000)">
<use id="Rectangle-12" stroke-opacity="0.5" stroke="#979797" mask="url(#mask-22)" stroke-width="3" fill="#EFC535" xlink:href="#path-21"></use>
<rect id="Rectangle-13" fill="#DBD8D8" x="31.5920916" y="0" width="129.240375" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="187.637877" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="256.566077" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="325.494277" y="0" width="52.653486" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="398.251821" y="0" width="79.458897" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="494.942768" y="0" width="51.6961498" height="15"></rect>
<rect id="Rectangle-13" fill="#DBD8D8" x="560.998959" y="0" width="48.8241415" height="15"></rect>
</g>
</g>
<rect id="overlay" fill-opacity="0.550000012" fill="#FFFFFF" x="1" y="0" width="920" height="225"></rect>
</g>
<g id="speed" transform="translate(659.000000, 349.000000)">
<rect id="Rectangle" fill="#2FAE57" x="37.3361082" y="167" width="27.8598384" height="15"></rect>
<rect id="Rectangle" fill="#4BA4E7" x="65.0988554" y="167" width="20.6547078" height="15"></rect>
<rect id="Rectangle" fill="#2FAE57" x="45.9521332" y="200" width="16.0308012" height="15"></rect>
<rect id="Rectangle-" fill="#4BA4E7" x="61.2695109" y="200" width="15.7098854" height="15"></rect>
<rect id="Rectangle-" fill="#2FAE57" x="26.805411" y="132" width="27.8598384" height="15"></rect>
<rect id="Rectangle" fill="#4BA4E7" x="54.5681582" y="132" width="20.6547078" height="15"></rect>
<rect id="Rectangle" fill="#2FAE57" x="17.2320499" y="101" width="27.8598384" height="15"></rect>
<rect id="Rectangle" fill="#4BA4E7" x="44.9947971" y="101" width="13.9579604" height="15"></rect>
<rect id="Rectangle" fill="#2FAE57" x="11.9918112" y="67" width="20.6547078" height="15"></rect>
<rect id="Rectangle" fill="#4BA4E7" x="32.5494277" y="67" width="13.9579604" height="15"></rect>
<rect id="Rectangle" fill="#2FAE57" x="5.29045841" y="35" width="16.0308012" height="15"></rect>
<rect id="Rectangle-" fill="#4BA4E7" x="19.1513275" y="35" width="20.6547078" height="15"></rect>
<rect id="Rectangle-" fill="#2FAE57" x="0" y="0" width="10.4501626" height="15"></rect>
<rect id="Rectangle-" fill="#4BA4E7" x="7.154911" y="0" width="20.6547078" height="15"></rect>
</g>
<path d="M20.5,339.5 L945.865356,339.5" id="divder" stroke="#EAEAEB" stroke-width="3" stroke-linecap="square"></path>
<g id="Speed-gauge-" transform="translate(328.000000, 74.000000)">
<g id="speed-outline" transform="translate(0.000000, 2.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<g id="Mask"></g>
<g id="Oval-" mask="url(#mask-24)" stroke-width="14.168" stroke="#FFFFFF">
<use mask="url(#mask-26)" xlink:href="#path-25"></use>
</g>
</g>
<path d="M46.1066667,149.148993 L254.348228,149.148993" id="Line" stroke="#FFFFFF" stroke-width="7.084" stroke-linecap="square"></path>
<path d="M155.081379,132.624066 C155.015229,132.626094 154.948821,132.627116 154.882169,132.627116 C154.395878,132.627116 153.922552,132.572743 153.468182,132.469865 C152.804427,132.394628 151.893833,132.162947 151.167113,131.429442 C149.62741,130.313781 148.629108,128.522197 148.629108,126.502227 C148.629108,123.119545 151.428699,120.377339 154.882169,120.377339 C155.357229,120.377339 155.819915,120.429229 156.264644,120.527538 C167.543996,121.043681 205.086153,127.450459 205.086153,127.450459 C210.736184,128.389079 210.667842,129.368325 204.925994,129.644561 C204.925994,129.644561 162.306078,131.590023 156.130652,132.603685 C155.732096,132.669106 155.379616,132.657248 155.081379,132.624066 Z" id="gauge-line" fill="#E72A2D" transform="translate(178.953783, 126.514130) rotate(-32.000000) translate(-178.953783, -126.514130) "></path>
<g id="angular-logo" transform="translate(132.000000, 120.000000)">
<path d="M0.0167838345,0 L18.9284668,4.01730537 L36.656498,10.8978434 L35.6646042,20.2834702 C36.4835729,20.2834702 37.7833744,25.3201689 37.7793083,25.3641902 C37.7096348,26.1185132 37.7793083,35.0976279 37.7793083,35.0976279 L41,45.9999991 L0,46 L0.0167838345,0 Z" id="background-mask" fill="#EAEAEB"></path>
<g id="Group" transform="translate(1.000000, 4.000000)" fill="#FFFFFF">
<g id="Shape">
<polygon points="17.9090158 25.7437931 13.2031361 25.7437931 10.9740352 31.8355172 10.9740352 31.8355172 6.83971985 31.8355172 6.8206677 31.8355172 17.9090158 4.61051724 17.9090158 4.63137931 17.9090158 4.63137931 17.9090158 0 17.9090158 0 0.1714693 6.9262069 2.87687381 32.6074138 17.9090158 41.7241379 17.9090158 41.7241379"></polygon>
<polygon points="14.6701512 21.9886207 17.9090158 21.9886207 17.9090158 21.9886207 17.9090158 13.4560345"></polygon>
</g>
<g opacity="0.9" transform="translate(17.909016, 0.000000)" id="Shape">
<polygon points="1.77635684e-15 25.7437931 4.70587967 25.7437931 6.93498057 31.8355172 6.93498057 31.8355172 11.0692959 31.8355172 11.0883481 31.8355172 1.77635684e-15 4.61051724 1.77635684e-15 4.63137931 1.77635684e-15 4.63137931 1.77635684e-15 0 1.77635684e-15 0 17.7375465 6.9262069 15.0321419 32.6074138 1.77635684e-15 41.7241379 1.77635684e-15 41.7241379"></polygon>
<polygon points="3.23886455 21.9886207 0 21.9886207 0 21.9886207 0 13.4560345"></polygon>
</g>
</g>
</g>
<g id="Lines" transform="translate(155.000000, 72.000000)" stroke="url(#linearGradient-27)" stroke-width="2.3" stroke-linecap="square">
<path d="M27.2768367,6.1378486 L22.7819389,17.8474575" id="Line-Copy-3"></path>
<path d="M40,12 L33,23" id="Line-Copy-6"></path>
<path d="M15.1748197,2.88436401 L12.7958773,15.1229617" id="Line-Copy-9"></path>
<path d="M1.2029061,0.773628441 L0.767790904,13.2336973" id="Line-Copy-10"></path>
</g>
<g id="speed-guage" transform="translate(17.000000, 0.000000)">
<mask id="mask-29" fill="white">
<use xlink:href="#path-28"></use>
</mask>
<g id="Rectangle-286"></g>
<g id="Oval-25-Copy-3" mask="url(#mask-29)" stroke-width="16.1" stroke="url(#linearGradient-30)">
<use mask="url(#mask-32)" xlink:href="#path-31"></use>
</g>
<g id="Oval-56-Copy-+-Rectangle-331" mask="url(#mask-29)" fill="#E3E3E4">
<g transform="translate(-373.291476, 407.207367) rotate(3.000000) translate(373.291476, -407.207367) translate(-406.791476, 373.207367)" id="Oval-56-Copy">
<path d="M3.15835059,41.6420067 C3.01165034,41.6498871 2.86389683,41.6538789 2.7151949,41.6538789 C2.00319306,41.6538789 1.31293476,41.5623635 0.655928305,41.3906458 C-0.126625332,41.2697588 -1.1063159,40.9666155 -1.92621611,40.1941776 C-3.95519512,38.7691732 -5.2778242,36.4346736 -5.2778242,33.7964996 C-5.2778242,29.4569888 -1.69922766,25.9391203 2.7151949,25.9391203 C3.27617754,25.9391203 3.82366226,25.995931 4.35202025,26.1040193 C18.6176095,26.7360162 66.8311582,35.0278524 66.8311582,35.0278524 C74.0912314,36.2433272 74.0037913,37.5054314 66.6519821,37.8545163 C66.6519821,37.8545163 12.2059231,40.3048396 4.3117252,41.5987591 C3.88366341,41.6689217 3.49713058,41.669147 3.15835269,41.6420066 Z" transform="translate(33.471829, 33.798938) rotate(-46.000000) translate(-33.471829, -33.798938) "></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB