diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c93a893..70d5117 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -33,6 +33,10 @@ const routes: Routes = [ path: 'pago-electronico', loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule) }, + { + path: 'pago-tarjeta', + loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule) + }, ] }, { path: '**', redirectTo: '', pathMatch: 'full' }, diff --git a/src/app/modules/forma-pago/forma-pago.component.html b/src/app/modules/forma-pago/forma-pago.component.html index 7558ec2..196cd8c 100644 --- a/src/app/modules/forma-pago/forma-pago.component.html +++ b/src/app/modules/forma-pago/forma-pago.component.html @@ -50,7 +50,7 @@
+ [routerLink]="['/pago-tarjeta']">
+
+
+ +
+
+
+
+
+ +

AHORA

+

+ introducí o insertá tú tarjeta +

+

Y SEGUÍ LAS INSTRUCCIONES DEL LECTOR

+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
diff --git a/src/app/modules/pago-tarjeta/pago-tarjeta.component.scss b/src/app/modules/pago-tarjeta/pago-tarjeta.component.scss new file mode 100644 index 0000000..231785a --- /dev/null +++ b/src/app/modules/pago-tarjeta/pago-tarjeta.component.scss @@ -0,0 +1,50 @@ +.arrow-slide { + animation: slide 1.5s infinite; + -webkit-animation: slide 1.5s infinite; + opacity: 0; +} + +@for $i from 1 through 3 { + $delayValue: $i * 0.2s; + .arrow-delay-#{$i} { + animation-delay: $delayValue; + -webkit-animation-delay: $delayValue; + } +} + +@-webkit-keyframes slide { + 0% { + opacity: 0; + transform: translateY(-10px); + } + 33% { + opacity: 1; + transform: translateY(-5px); + } + 66% { + opacity: 0; + transform: translateY(0px); + } + 100% { + opacity: 0; + transform: translateY(-10px); + } +} +@keyframes slide { + 0% { + opacity: 0; + transform: translateY(-10px); + } + 33% { + opacity: 1; + transform: translateY(-5px); + } + 66% { + opacity: 0; + transform: translateY(0px); + } + 100% { + opacity: 0; + transform: translateY(-10px); + } +} diff --git a/src/app/modules/pago-tarjeta/pago-tarjeta.component.spec.ts b/src/app/modules/pago-tarjeta/pago-tarjeta.component.spec.ts new file mode 100644 index 0000000..e7567a7 --- /dev/null +++ b/src/app/modules/pago-tarjeta/pago-tarjeta.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PagoTarjetaComponent } from './pago-tarjeta.component'; + +describe('PagoTarjetaComponent', () => { + let component: PagoTarjetaComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PagoTarjetaComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PagoTarjetaComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts b/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts new file mode 100644 index 0000000..22eea8d --- /dev/null +++ b/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-pago-tarjeta', + templateUrl: './pago-tarjeta.component.html', + styleUrls: ['./pago-tarjeta.component.scss'] +}) +export class PagoTarjetaComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/modules/pago-tarjeta/pago-tarjeta.module.ts b/src/app/modules/pago-tarjeta/pago-tarjeta.module.ts new file mode 100644 index 0000000..baa9302 --- /dev/null +++ b/src/app/modules/pago-tarjeta/pago-tarjeta.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { PagoTarjetaRoutingModule } from './pago-tarjeta-routing.module'; +import { PagoTarjetaComponent } from './pago-tarjeta.component'; + + +@NgModule({ + declarations: [PagoTarjetaComponent], + imports: [ + CommonModule, + PagoTarjetaRoutingModule + ] +}) +export class PagoTarjetaModule { } diff --git a/src/assets/img/down-chevron.svg b/src/assets/img/down-chevron.svg new file mode 100644 index 0000000..60dc1ad --- /dev/null +++ b/src/assets/img/down-chevron.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +