Skip to content

Commit

Permalink
informaciones
Browse files Browse the repository at this point in the history
  • Loading branch information
@mloaizau
mloaizau committed Jul 25, 2021
1 parent 1e4d412 commit 21f4c2a
Show file tree
Hide file tree
Showing 14 changed files with 271 additions and 10 deletions.
154 changes: 149 additions & 5 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
<img src="assets/images/google.png">
<img src="assets/images/amazon.png">
</div>
<div class="row c-sections__two">
<div class="row c-sections__two u-mt__80">
<img id="zoom" src="assets/images/zoom.png">
<img src="assets/images/shopify.png">
<img src="assets/images/maskota.png">
Expand All @@ -54,12 +54,12 @@
<div class="row c-infoOne">
<div class="row">
<div class="col-sm-5 offset-sm-1">
<p class="o-upTitle o-color__purple">Unified platform</p>
<p class="o-title o-title--gray">A fully integrated suite of payments products</p>
<p class="o-upTitle o-color__purple u-mb__32">Unified platform</p>
<p class="o-title o-title--gray u-mb__32">A fully integrated suite of payments products</p>
</div>
</div>
<div class="col-sm-5 offset-sm-1">
<label class="o-subtitle">We bring together everything that’s required to build websites and apps that accept payments
<label class="o-subtitle u-mb__32">We bring together everything that’s required to build websites and apps that accept payments
and send payouts globally. Stripe’s products power payments for
<span class="o-color__purple"> online and in-person retailers,
subscriptions businesses, software platforms and marketplaces </span>
Expand All @@ -69,12 +69,156 @@
<mat-icon aria-hidden="false">chevron_right</mat-icon>
</button>
</div>
<div class="col-sm-5">
<div class="col-sm-4">
<label class="o-subtitle">We also help companies
<span class="o-color__purple">beat fraud, send invoices, issue virtual and physical cards,
get financing, manage business spend </span>
, and much more.</label>
</div>
<div class="row c-images">
<div class="col-sm-3 offset-sm-1 c-images__one">
<img src="assets/images/producto1.png" alt="">
<img src="assets/images/producto4.png" alt="">
</div>
<div class="col-sm-8 c-images__two">
<img src="assets/images/producto2.png" alt="">
<img src="assets/images/producto3.png" alt="">
<img src="assets/images/producto5.png" alt="">
</div>
</div>
<div class="row c-background__clip-blue"></div>
</div>
<div class="row c-infoTwo u-pb-80">
<div class="col-sm-6 offset-sm-1">
<div class="row u-mt__80">
<div class="col-sm-11">
<p class="o-upTitle o-color__blue u-mb__32">Designed for developers</p>
<p class="o-title o-title--white u-mb__32">The world’s most powerful and easy-to-use APIs</p>
</div>
</div>
<div class="col-sm-7">
<label class="o-subtitle o-subtitle--white u-mb__32">We agonize over the right abstractions so your teams
don’t need to stitch together disparate systems or spend months integrating payments
functionality.</label>
<button class="o-button c-infoTwo__button">
Read the docs
<mat-icon aria-hidden="false">chevron_right</mat-icon>
</button>
</div>
<div class="row c-infoTwo__infoDown u-mt__80">
<div class="col-sm-5">
<img class="u-mb-24" src="assets/images/icono1.png" alt="">
<div>
<p class="o-bar"></p>
<p>Tools for every stack</p>
</div>
<label class="u-mb-24">We offer client and server libraries in everything from React and PHP to .NET and iOS.</label>
<button class="o-button o-button--none o-color__blue">
See Libraries
<mat-icon aria-hidden="false">chevron_right</mat-icon>
</button>
</div>
<div class="col-sm-5">
<img class="u-mb-24" src="assets/images/icono2.png" alt="">
<div>
<p class="o-bar"></p>
<p>Prebuilt integrations</p>
</div>
<label class="u-mb-24">Use integrations for systems like Shopify, WooCommerce, NetSuite, and more.</label>
<button class="o-button o-button--none o-color__blue">
Explore Partners
<mat-icon aria-hidden="false">chevron_right</mat-icon>
</button>
</div>
</div>
</div>
<div class="col-sm-5 c-infoTwo__image">
<img src="assets/images/code.png" alt="">
</div>
</div>
<div class="row c-infoThree u-pb-80">
<div class="row c-background__clip-blue c-background__clip-blue--reverse"></div>
<div class="col-sm-6 offset-sm-1">
<div class="row u-mt__80">
<div class="col-sm-11">
<p class="o-upTitle o-color__purple u-mb__32">Designed for developers</p>
<p class="o-title u-mb__32">The world’s most powerful and easy-to-use APIs</p>
</div>
</div>
<div class="col-sm-7">
<label class="o-subtitle u-mb__32">We agonize over the right abstractions so your teams
don’t need to stitch together disparate systems or spend months integrating payments
functionality.</label>
</div>
</div>
<div class="row u-mt__80">
<div class="col-sm-11 offset-sm-1 u-inline-flex">
<div class="col-sm-2">
<img class="u-mb-24" src="assets/images/icono3.png" alt="">
<div>
<p class="o-bar o-bar--purple"></p>
<p>Close to the metal</p>
</div>
<label class="u-mb-24">From <span class="o-color__purple"> direct integrations </span>
with card networks
and banks to checkout flows in the browser,
we operate on and optimize at every level of the financial stack.</label>
</div>
<div class="col-sm-2 offset-sm-1">
<img class="u-mb-37" src="assets/images/icono4.png" alt="">
<div>
<p class="o-bar o-bar--purple"></p>
<p>Fastest-improving platform</p>
</div>
<label class="u-mb-24">
We release <span class="o-color__purple"> hundreds of features </span> and improvements each year to help you stay
ahead of industry shifts. (On average, we deploy our production API 16x per day.)
</label>
</div>
<div class="col-sm-2 offset-sm-1">
<img class="u-mb-24" src="assets/images/icono5.png" alt="">
<div>
<p class="o-bar o-bar--purple"></p>
<p>Battle-tested reliability</p>
</div>
<label class="u-mb-24">Our systems operate with
<span class="o-color__purple">99.9%</span>+ uptime and are highly
scalable and redundant. Striped is certified to the highest compliance standards.</label>
</div>
<div class="col-sm-2 offset-sm-1">
<img class="u-mb-24" src="assets/images/icono5.png" alt="">
<div>
<p class="o-bar o-bar--purple"></p>
<p>Intelligent optimizations</p>
</div>
<label class="u-mb-24">
Our machine learning models train on
<span class="o-color__purple"> billions </span> of data points and help
increase revenue across conversion, fraud, revenue recovery, and more.
</label>
</div>
</div>
</div>
</div>
<div class="row c-infoFour">
<div class="c-infoFour__c-img">
<img class="c-infoFour__img" src="assets/images/world.png">
</div>
<div class="row c-background__clip-white"></div>
<div class="col-sm-6 offset-sm-1">
<div class="row u-mt__80">
<div class="col-sm-10">
<p class="o-upTitle o-color__blue u-mb__32">Global Scale</p>
<p class="o-title o-title--white u-mb__32">The backbone for internet business</p>
</div>
</div>
<div class="col-sm-7">
<label class="o-subtitle o-subtitle--white u-mb__32">For ambitious companies around the world,
Stripe makes moving money as simple, borderless, and programmable as the rest of the
internet. Our teams are based in dozens of offices around the world and we process
hundreds of billions of dollars each year for startups to large enterprises.</label>
</div>
</div>
</div>
</div>
</div>
127 changes: 122 additions & 5 deletions src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@
display: inline-flex;
}

.o-button--none{
background: none;
padding: 0;
font-family: "Helvetica Neue Medium";
}

.o-upTitle{
font-size: 18px;
line-height: 34px;
Expand All @@ -37,7 +43,8 @@
color: #393939;
}

.o-title--white{
.o-title--white,
.o-subtitle--white{
color: #FFFFFF;
}

Expand All @@ -48,6 +55,18 @@
text-align: left;
}

.o-bar{
width: 2px;
position: absolute;
height: 24px;
background: #01D4FF;
margin-left: -15px;
}

.o-bar--purple{
background: #635CFF;
}

/* Selectores */

mat-icon{
Expand Down Expand Up @@ -76,6 +95,21 @@ mat-icon{
height: 535px;
clip-path: polygon(0 0, 100% 0%, 100% 23%, 0% 80%);
}
.c-background__clip-blue{
height: 256px;
background: #092540;
margin: 0;
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.c-background__clip-blue--reverse{
clip-path: polygon(0 0, 0% 100%, 100% 0%);
}
.c-background__clip-white{
height: 256px;
background: #FFFFFF;
margin: 0;
clip-path: polygon(0 0, 0% 100%, 100% 0%);
}
.c-contenedor{
position: absolute;
top: 10%;
Expand Down Expand Up @@ -160,7 +194,7 @@ mat-icon{
}
#mobile{
position: absolute;
top: 10%;
top: 1%;
right: 235px;
}
}
Expand All @@ -177,7 +211,6 @@ mat-icon{
}
}
.c-sections__two{
margin-top: 80px;
margin-bottom: 128px;
#zoom{
height: 20px;
Expand All @@ -186,13 +219,97 @@ mat-icon{
}

.c-infoOne{
margin-top: 80px;
padding-top: 80px;
background: linear-gradient(180deg, #FBFCFE 0%, #DDE0E5 84.45%), #F6F9FC;
.c-infoOne__button{
font-family: "Helvetica Neue Medium";
width: auto;
margin: 30px 0px;
color: #FFFFFF;
background-color: #635CFF;
}
}

.c-images{
margin-bottom: 80px;
.c-images__one{
text-align: center;
img:first-child {
margin-bottom: 50px;
margin-top: 180px;
}
}
.c-images__two{
display: inline-flex;
flex-wrap: wrap;
align-items: flex-end;
img:first-child {
margin-right: 50px;
}
img:last-child {
margin-top: 50px;
width: 100%;
}
}
img{
object-fit: contain;
}
}
.c-infoTwo{
background-color: #092540;
.c-infoTwo__button{
background-color: #01D4FF;
color: #092540;
}
.c-infoTwo__infoDown{
color: #FFFFFF;
}
.c-infoTwo__image{
align-self: center;
margin-top: 150px;
}
}

.c-infoThree{
margin-top: -1px;
}

.c-infoFour{
background-color: #092540;
margin-top: -1px;
.c-infoFour__c-img{
position: absolute;
margin-left: 27px;
padding: 0;
.c-infoFour__img{
width: 300px;
height: 800px;
float: right;
}
}
}

/* Utilidades */

.u-mb__32{
margin-bottom: 32px;
}

.u-mb-24{
margin-bottom: 24px;
}

.u-mb-37{
margin-bottom: 37px;
}

.u-pb-80{
padding-bottom: 80px;
}

.u-mt__80{
margin-top: 80px;
}

.u-inline-flex{
display: inline-flex;
}
Binary file added src/assets/images/code.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/icono1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/icono2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/icono3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/icono4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/icono5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/producto1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/producto2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/producto3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/producto4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/producto5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/world.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 21f4c2a

Please sign in to comment.