Skip to content

Commit

Permalink
se avanza en seccion de informacion y nomenclatura bemit
Browse files Browse the repository at this point in the history
  • Loading branch information
@mloaizau
mloaizau committed Jul 22, 2021
1 parent 35111d5 commit 1e4d412
Show file tree
Hide file tree
Showing 4 changed files with 195 additions and 139 deletions.
137 changes: 71 additions & 66 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,80 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
</head>

<body>
<div class="container-fluid" style="padding: 0;">
<div class="header backgound-gradient"></div>
<mat-toolbar class="menu">
<div class="col-sm-3 offset-sm-1 logo">
<label>Striped</label>
</div>
<div class="col-sm-6 tabs">
<a href="#products">Products</a>
<a href="#developers">Developers</a>
<a href="#company">Company</a>
<a href="#pricing">Pricing</a>
</div>
<div class="col-sm-2 btn-signin">
<button>
<label>Sign in </label>
<div class="container-fluid" style="padding: 0;">
<div class="c-background__clip-path c-background__gradient"></div>
<mat-toolbar class="c-menu">
<div class="col-sm-3 offset-sm-1 c-menu__logo">
<label>Striped</label>
</div>
<div class="col-sm-6 c-menu__tabs">
<a href="#products">Products</a>
<a href="#developers">Developers</a>
<a href="#company">Company</a>
<a href="#pricing">Pricing</a>
</div>
<div class="col-sm-2">
<button class="o-button c-menu__button">
Sign in
<mat-icon aria-hidden="false">chevron_right</mat-icon>
</button>
</div>
</mat-toolbar>
<div class="c-contenedor">
<div class="row c-header">
<div class="col-sm-5 offset-sm-1 c-header__info">
<p id="title">Payments insfrastructure for the internet</p>
<p id="subtitle">Millions of businesses of all sizes—from startups to large enterprises—use Stripe’s
software and APIs to accept payments, send payouts, and manage their businesses online.</p>
<button class="o-button c-header__button-start">
Start now
<mat-icon aria-hidden="false">chevron_right</mat-icon>
</button>
<button class="c-header__button-contact">
Contact sales
<mat-icon aria-hidden="false">chevron_right</mat-icon>
</button>
</div>
</mat-toolbar>
<div class="contenedor">
<div class="row info-header">
<div class="col-sm-5 offset-sm-1 info-section">
<p id="title">Payments insfrastructure for the internet</p>
<p id="subtitle">Millions of businesses of all sizes—from startups to large enterprises—use Stripe’s
software and APIs to accept payments, send payouts, and manage their businesses online.</p>
<button class="btn-start">
<label>Start now </label>
<mat-icon aria-hidden="false">chevron_right</mat-icon>
</button>
<button class="btn-contact">
<label>Contact sales </label>
<div class="col-sm-6 c-header__image">
<img id="desktop" src="assets/images/desktop.png">
<img id="mobile" src="assets/images/mobile.png" alt="">
</div>
</div>
<div class="row c-sections">
<div class="row c-sections__one">
<img src="assets/images/rappi.png">
<img src="assets/images/cornershop.png">
<img src="assets/images/google.png">
<img src="assets/images/amazon.png">
</div>
<div class="row c-sections__two">
<img id="zoom" src="assets/images/zoom.png">
<img src="assets/images/shopify.png">
<img src="assets/images/maskota.png">
<img src="assets/images/siclo.png">
</div>
</div>
<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>
</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
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>
, and everything in between.</label>
<button class="o-button c-infoOne__button">
Start with paymets
<mat-icon aria-hidden="false">chevron_right</mat-icon>
</button>
</div>
<div class="col-sm-6 img-header">
<img id="desktop" src="assets/images/desktop.png">
<img id="mobile" src="assets/images/mobile.png" alt="">
</div>
</div>
<div class="row sections">
<div class="row section-one">
<img src="assets/images/rappi.png">
<img src="assets/images/cornershop.png">
<img src="assets/images/google.png">
<img src="assets/images/amazon.png">
</div>
<div class="row section-two">
<img id="zoom" src="assets/images/zoom.png">
<img src="assets/images/shopify.png">
<img src="assets/images/maskota.png">
<img src="assets/images/siclo.png">
</div>
<div class="col-sm-5">
<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>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>

</html>
</div>
175 changes: 103 additions & 72 deletions src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,63 @@
@import url(https://allfont.es/allfont.css?fonts=impact);
@font-face {
font-family: "Helvetica Neue";
src: url("../fonts/helveticaneue-regular.ttf");
/* Objetos */

.o-button{
font-size: 16px;
line-height: 24px;
letter-spacing: 0.01em;
text-align: center;
border: none;
border-radius: 20px;
padding: 6px 15px;
display: inline-flex;
}

.o-upTitle{
font-size: 18px;
line-height: 34px;
letter-spacing: 0em;
text-align: left;
}

.o-color__purple{
color: #635CFF;
}

.o-color__blue{
color: #01D4FF;
}
@font-face {
font-family: "Helvetica Neue Medium";
src: url("../fonts/helveticaneue-medium.ttf");

.o-title{
font-size: 40px;
line-height: 48px;
letter-spacing: 0em;
text-align: left;
}

.o-title--gray{
color: #393939;
}
@font-face {
font-family: "Helvetica Neue Bold";
src: url("../fonts/HelveticaNeue-Bold.ttf");

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

.o-subtitle{
font-size: 18px;
line-height: 34px;
letter-spacing: 0em;
text-align: left;
}

.backgound-gradient{
/* Selectores */

mat-icon{
font-size: 18px;
padding-top: 4px;
}

/* Componentes */

.c-background__gradient{
background: radial-gradient(73.93% 155.79% at 56.93% 16.11%, #EE755C 16.67%, rgba(144, 224, 255, 0) 48.34%),
radial-gradient(34.96% 33.39% at 56.66% 50%, #FF333D 44.79%, rgba(169, 96, 238, 0) 83.19%),
radial-gradient(13.35% 23.03% at 6.58% 67.25%, #AFE9FF 0%, #90E0FF 41.45%, rgba(144, 224, 255, 0) 100%),
Expand All @@ -27,17 +72,21 @@
background-blend-mode: hard-light, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
filter: blur(24px);
}

.header{
.c-background__clip-path{
height: 535px;
clip-path: polygon(0 0, 100% 0%, 100% 23%, 0% 80%);
}
.menu{
.c-contenedor{
position: absolute;
top: 10%;
width: 99%;
}
.c-menu{
color: #FFFFFF;
background: none;
position: absolute;
top: 0;
.logo{
.c-menu__logo{
font-family: "Impact";
font-size: 26px;
font-style: normal;
Expand All @@ -46,45 +95,29 @@
letter-spacing: 0.01em;
// text-align: center;
}
.tabs{
a{
font-family: 'Helvetica Neue Bold';
font-size: 17px;
line-height: 24px;
letter-spacing: 0em;
text-align: center;
text-decoration: none;
color: #FFFFFF;
margin-left: 32px;
}
.c-menu__tabs a{
font-family: 'Helvetica Neue Bold';
font-size: 17px;
line-height: 24px;
letter-spacing: 0em;
text-align: center;
text-decoration: none;
color: #FFFFFF;
margin-left: 32px;

}
.btn-signin{
.c-menu__button{
font-family: "Helvetica Neue";
// text-align: center;
button{
font-size: 16px;
font-style: normal;
font-weight: bolder;
line-height: 24px;
letter-spacing: 0.01em;
text-align: center;
border: none;
border-radius: 20px;
padding: 6px 15px;
color: #FFFFFF;
background: rgba(255, 255, 255, 0.2);
display: inline-flex;
}
font-style: normal;
font-weight: bolder;
color: #FFFFFF;
background: rgba(255, 255, 255, 0.2);
}
}
.contenedor{
position: absolute;
top: 10%;
width: 99%;
}
.info-header{

.c-header{
width: 100%;
.info-section{
.c-header__info{
margin-top: 65px;
font-family: "Helvetica Neue Bold";
text-align: left;
Expand All @@ -100,27 +133,13 @@
line-height: 34px;
letter-spacing: 0em;
}
button{
align-items: center;
}
.btn-start{
.c-header__button-start{
font-family: "Helvetica Neue Medium";
font-size: 15px;
line-height: 24px;
letter-spacing: 0.01em;
text-align: center;
border: none;
border-radius: 20px;
padding: 6px 15px;
color: #FFFFFF;
background: #11253E;
display: inline-flex;

}
mat-icon{
font-size: 18px;
padding-top: 4px;
}
.btn-contact{
.c-header__button-contact{
border: none;
background: none;
display: inline-flex;
Expand All @@ -132,7 +151,7 @@
margin-left: 20px;
}
}
.img-header{
.c-header__image{
#desktop{
// width:486px;
// float: right;
Expand All @@ -147,21 +166,33 @@
}
}

.sections{
.section-one,
.section-two{
.c-sections{
.c-sections__one,
.c-sections__two{
height: 40px;
justify-content: space-around;
align-items: center;
img{
width: auto;
}
}
.section-two{
.c-sections__two{
margin-top: 80px;
margin-bottom: 128px;
#zoom{
height: 20px;
}
}
}
}

.c-infoOne{
margin-top: 80px;
.c-infoOne__button{
font-family: "Helvetica Neue Medium";
width: auto;
margin: 30px 0px;
color: #FFFFFF;
background-color: #635CFF;
}
}

Loading

0 comments on commit 1e4d412

Please sign in to comment.