Commit dce5c66891d26e340af95bdd65a2d42ea44425d9
1 parent
b1eeb0932c
Exists in
master
and in
2 other branches
Fixes en iconos y agregada pantalla 2
Showing
19 changed files
with
185 additions
and
44 deletions
Show diff stats
src/app/app-routing.module.ts
1 | import { NgModule } from '@angular/core'; | 1 | import { NgModule } from '@angular/core'; |
2 | import { Routes, RouterModule } from '@angular/router'; | 2 | import { Routes, RouterModule } from '@angular/router'; |
3 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; | 3 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; |
4 | import { AdminComponent } from './modules/admin/admin.component'; | 4 | import { AdminComponent } from './modules/admin/admin.component'; |
5 | import { FormasPagoModule } from './modules/formas-pago/formas-pago.module'; | 5 | import { FormasPagoModule } from './modules/formas-pago/formas-pago.module'; |
6 | import { OpcionPedidoModule } from './modules/opcion-pedido/opcion-pedido.module'; | ||
6 | 7 | ||
7 | const routes: Routes = [ | 8 | const routes: Routes = [ |
8 | { path: '', component: SplashScreenComponent }, | 9 | { path: '', component: SplashScreenComponent }, |
9 | { | 10 | { |
10 | path: '', | 11 | path: '', |
11 | component: AdminComponent, | 12 | component: AdminComponent, |
12 | children: [ | 13 | children: [ |
13 | { path: 'formas-pago', loadChildren: () => FormasPagoModule }, | 14 | { path: 'formas-pago', loadChildren: () => FormasPagoModule }, |
15 | { path: 'opcion-pedido', loadChildren: () => OpcionPedidoModule }, | ||
14 | ] | 16 | ] |
15 | }, | 17 | }, |
16 | { path: '**', redirectTo: '', pathMatch: 'full' }, | 18 | { path: '**', redirectTo: '', pathMatch: 'full' }, |
17 | ]; | 19 | ]; |
18 | 20 | ||
19 | @NgModule({ | 21 | @NgModule({ |
20 | imports: [RouterModule.forRoot(routes)], | 22 | imports: [RouterModule.forRoot(routes)], |
21 | exports: [RouterModule] | 23 | exports: [RouterModule] |
22 | }) | 24 | }) |
23 | export class AppRoutingModule { } | 25 | export class AppRoutingModule { } |
24 | 26 |
src/app/app.module.ts
1 | import { BrowserModule } from '@angular/platform-browser'; | 1 | import { BrowserModule } from '@angular/platform-browser'; |
2 | import { NgModule } from '@angular/core'; | 2 | import { NgModule } from '@angular/core'; |
3 | |||
4 | import { AppRoutingModule } from './app-routing.module'; | 3 | import { AppRoutingModule } from './app-routing.module'; |
5 | import { AppComponent } from './app.component'; | 4 | import { AppComponent } from './app.component'; |
6 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; | 5 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; |
7 | import { SplitPipe } from './pipes/split.pipe'; | 6 | import { SplitPipe } from './pipes/split.pipe'; |
8 | import { AdminComponent } from './modules/admin/admin.component'; | 7 | import { AdminComponent } from './modules/admin/admin.component'; |
9 | import { FooterComponent } from './modules/footer/footer.component'; | 8 | import { FooterComponent } from './modules/footer/footer.component'; |
10 | 9 | ||
11 | @NgModule({ | 10 | @NgModule({ |
12 | declarations: [ | 11 | declarations: [ |
13 | AppComponent, | 12 | AppComponent, |
14 | SplashScreenComponent, | 13 | SplashScreenComponent, |
15 | SplitPipe, | 14 | SplitPipe, |
16 | AdminComponent, | 15 | AdminComponent, |
17 | FooterComponent | 16 | FooterComponent |
18 | ], | 17 | ], |
19 | imports: [ | 18 | imports: [ |
20 | BrowserModule, | 19 | BrowserModule, |
21 | AppRoutingModule | 20 | AppRoutingModule |
22 | ], | 21 | ], |
23 | providers: [], | 22 | providers: [], |
24 | bootstrap: [AppComponent] | 23 | bootstrap: [AppComponent] |
25 | }) | 24 | }) |
26 | export class AppModule { } | 25 | export class AppModule { } |
27 | 26 |
src/app/modules/footer/footer.component.html
1 | <div class="row mx-0 h-100 justify-content-around bg-white"> | 1 | <div class="row mx-0 h-100 justify-content-around bg-white"> |
2 | <div class="col-auto align-self-center px-0 bg-white"> | 2 | <div class="col-auto align-self-center px-0 bg-white"> |
3 | <div class="btn-effect row mx-0 bg-light rounded-left"> | 3 | <div class="btn-effect row mx-0 bg-light rounded-left"> |
4 | <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div> | 4 | <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div> |
5 | <div class="col-auto p-0 bg-primary rounded-right"> | 5 | <div class="col-auto p-0 bg-primary rounded-right"> |
6 | <img class="p-2 img-button-accesibilidad" src="assets/img/iconos-accesibilidad.svg"> | 6 | <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg"> |
7 | </div> | 7 | </div> |
8 | </div> | 8 | </div> |
9 | </div> | 9 | </div> |
10 | <div class="btn-effect col-auto align-self-center px-0 bg-white"> | 10 | <div |
11 | class="btn-effect col-auto align-self-center px-0 bg-white" | ||
12 | (click)="goBack()"> | ||
11 | <div class="row mx-0 bg-light rounded-left"> | 13 | <div class="row mx-0 bg-light rounded-left"> |
12 | <div class="col-auto align-self-center text-primary">VOLVER</div> | 14 | <div class="col-auto align-self-center text-primary">VOLVER</div> |
13 | <div class="col-auto p-0 bg-primary rounded-right"> | 15 | <div class="col-auto p-0 bg-primary rounded-right"> |
14 | <img class="p-2 img-button-volver" src="assets/img/icono-volver.svg"> | 16 | <img class="p-2 img-volver" src="assets/img/icono-volver.svg"> |
15 | </div> | 17 | </div> |
16 | </div> | 18 | </div> |
17 | </div> | 19 | </div> |
18 | </div> | 20 | </div> |
19 | 21 |
src/app/modules/footer/footer.component.scss
1 | .img-button-accesibilidad { | ||
2 | width: 60px; | ||
3 | } | ||
4 | |||
5 | .img-button-volver { | ||
6 | width: 40px; | ||
7 | } | ||
8 |
src/app/modules/footer/footer.component.ts
1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from "@angular/core"; |
2 | import { Location } from "@angular/common"; | ||
2 | 3 | ||
3 | @Component({ | 4 | @Component({ |
4 | selector: 'app-footer', | 5 | selector: "app-footer", |
5 | templateUrl: './footer.component.html', | 6 | templateUrl: "./footer.component.html", |
6 | styleUrls: ['./footer.component.scss'] | 7 | styleUrls: ["./footer.component.scss"] |
7 | }) | 8 | }) |
8 | export class FooterComponent implements OnInit { | 9 | export class FooterComponent implements OnInit { |
10 | constructor(private location: Location) {} | ||
9 | 11 | ||
10 | constructor() { } | 12 | ngOnInit() {} |
11 | 13 | ||
12 | ngOnInit() { | 14 | goBack() { |
15 | this.location.back(); | ||
13 | } | 16 | } |
14 | |||
15 | } | 17 | } |
src/app/modules/formas-pago/formas-pago-routing.module.ts
1 | import { NgModule } from '@angular/core'; | 1 | import { NgModule } from "@angular/core"; |
2 | import { Routes, RouterModule } from '@angular/router'; | 2 | import { Routes, RouterModule } from "@angular/router"; |
3 | import { FormasPagoComponent } from './formas-pago.component'; | 3 | import { FormasPagoComponent } from "./formas-pago.component"; |
4 | 4 | ||
5 | const routes: Routes = [ | 5 | const routes: Routes = [{ path: "", component: FormasPagoComponent }]; |
6 | { path: '', component: FormasPagoComponent }, | ||
7 | ]; | ||
8 | 6 | ||
9 | @NgModule({ | 7 | @NgModule({ |
10 | imports: [RouterModule.forChild(routes)], | 8 | imports: [RouterModule.forChild(routes)], |
11 | exports: [RouterModule] | 9 | exports: [RouterModule] |
12 | }) | 10 | }) |
13 | export class FormasPagoRoutingModule { } | 11 | export class FormasPagoRoutingModule {} |
14 | 12 |
src/app/modules/formas-pago/formas-pago.component.html
1 | <div class="h-92 bg-white"> | 1 | <div class="h-92 bg-white"> |
2 | <div class="row mx-0 h-15"> | 2 | <div class="row mx-0 h-15"> |
3 | <div class="col-12 px-0 h-80 my-auto"> | 3 | <div class="col-12 px-0 h-80 my-auto"> |
4 | <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg"> | 4 | <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg"> |
5 | </div> | 5 | </div> |
6 | </div> | 6 | </div> |
7 | <div class="h-85"> | 7 | <div class="h-85"> |
8 | <div class="row h-50 mx-0 justify-content-center text-center"> | 8 | <div class="row h-50 mx-0 justify-content-center text-center"> |
9 | <div class="col-7 pt-5 pb-3 h-auto align-self-center border border-secondary rounded"> | 9 | <div class="col-7 pt-5 pb-3 h-auto align-self-center border border-secondary rounded"> |
10 | <img class="img-in-top px-4 bg-white" src="assets/img/icono-tarjetas.svg"> | 10 | <img class="img-in-top px-4 bg-white" src="assets/img/icono-tarjetas.svg"> |
11 | <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> | 11 | <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> |
12 | <p class="h2 mb-3 text-secondary"> | 12 | <p class="h2 mb-3 text-secondary"> |
13 | tarjetas y | 13 | tarjetas y |
14 | <img class="w-15" src="assets/img/icono-mercado-pago.svg"> | 14 | <img class="w-15" src="assets/img/icono-mercado-pago.svg"> |
15 | </p> | 15 | </p> |
16 | <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">CONTINUAR</div> | 16 | <div |
17 | class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white" | ||
18 | [routerLink]="['/opcion-pedido']"> | ||
19 | CONTINUAR | ||
20 | </div> | ||
17 | </div> | 21 | </div> |
18 | </div> | 22 | </div> |
19 | <div class="row h-50 mx-0 justify-content-center text-center"> | 23 | <div class="row h-50 mx-0 justify-content-center text-center"> |
20 | <div class="col-7 p-5 h-auto align-self-start border border-secondary rounded"> | 24 | <div class="col-7 p-5 h-auto align-self-start border border-secondary rounded"> |
21 | <img class="img-in-top px-4 bg-white" src="assets/img/icono-efectivo.svg"> | 25 | <img class="img-in-top px-4 bg-white" src="assets/img/icono-efectivo.svg"> |
22 | <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> | 26 | <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> |
23 | <p class="h2 m-0 text-primary">te esperamos en la caja</p> | 27 | <p class="h2 m-0 text-primary">te esperamos en la caja</p> |
24 | </div> | 28 | </div> |
25 | </div> | 29 | </div> |
26 | </div> | 30 | </div> |
27 | </div> | 31 | </div> |
28 | 32 |
src/app/modules/formas-pago/formas-pago.component.scss
1 | .img-in-top { | ||
2 | position: absolute; | ||
3 | top: -35px; | ||
4 | left: 50%; | ||
5 | height: 70px; | ||
6 | -webkit-transform: translateX(-50%); | ||
7 | transform: translateX(-50%); | ||
8 | } | ||
9 |
src/app/modules/formas-pago/formas-pago.component.ts
1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from "@angular/core"; |
2 | 2 | ||
3 | @Component({ | 3 | @Component({ |
4 | selector: 'app-formas-pago', | 4 | selector: "app-formas-pago", |
5 | templateUrl: './formas-pago.component.html', | 5 | templateUrl: "./formas-pago.component.html", |
6 | styleUrls: ['./formas-pago.component.scss'] | 6 | styleUrls: ["./formas-pago.component.scss"] |
7 | }) | 7 | }) |
8 | export class FormasPagoComponent implements OnInit { | 8 | export class FormasPagoComponent implements OnInit { |
9 | constructor() {} | ||
9 | 10 | ||
10 | constructor() { } | 11 | ngOnInit() {} |
11 | |||
12 | ngOnInit() { | ||
13 | } | ||
14 | |||
15 | } | 12 | } |
src/app/modules/opcion-pedido/opcion-pedido-routing.module.ts
File was created | 1 | import { NgModule } from "@angular/core"; | |
2 | import { Routes, RouterModule } from "@angular/router"; | ||
3 | import { OpcionPedidoComponent } from './opcion-pedido.component'; | ||
4 | |||
5 | const routes: Routes = [{ path: "", component: OpcionPedidoComponent }]; | ||
6 | |||
7 | @NgModule({ | ||
8 | imports: [RouterModule.forChild(routes)], | ||
9 | exports: [RouterModule] | ||
10 | }) | ||
11 | export class OpcionPedidoRoutingModule {} | ||
12 |
src/app/modules/opcion-pedido/opcion-pedido.component.html
File was created | 1 | <div class="h-92 bg-white"> | |
2 | <div class="row mx-0 h-15"> | ||
3 | <div class="col-12 px-0 h-80 my-auto"> | ||
4 | <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg"> | ||
5 | </div> | ||
6 | </div> | ||
7 | <div class="h-85"> | ||
8 | <div class="row h-25 mx-0 justify-content-center text-center"> | ||
9 | <div class="col-12 px-0 h-auto align-self-center"> | ||
10 | <p class="h6 mb-5 text-center">TU PEDIDO ES PARA:</p> | ||
11 | </div> | ||
12 | </div> | ||
13 | <div class="row h-15 justify-content-center mx-0"> | ||
14 | <div class="col-auto px-0 h-auto align-self-start"> | ||
15 | <div | ||
16 | class="btn-effect col-auto align-self-center px-0 bg-white" | ||
17 | (click)="goBack()"> | ||
18 | <div class="row mx-0 bg-primary badge-pill"> | ||
19 | <div class="col-auto p-0"> | ||
20 | <img class="p-1 img-plato" src="assets/img/icono-plato.svg"> | ||
21 | </div> | ||
22 | <div class="col-auto align-self-center text-white">comer acรก</div> | ||
23 | <div class="col-auto align-self-center p-0"> | ||
24 | <img class="p-1 img-ir" src="assets/img/ir.svg"> | ||
25 | </div> | ||
26 | </div> | ||
27 | </div> | ||
28 | </div> | ||
29 | </div> | ||
30 | <div class="row h-15 justify-content-center mx-0"> | ||
31 | <div class="col-auto px-0 h-auto align-self-start"> | ||
32 | <div | ||
33 | class="btn-effect col-auto align-self-center px-0 bg-white" | ||
34 | (click)="goBack()"> | ||
35 | <div class="row mx-0 bg-primary badge-pill"> | ||
36 | <div class="col-auto p-0"> | ||
37 | <img class="p-1 img-plato" src="assets/img/icono-take-away.svg"> | ||
38 | </div> | ||
39 | <div class="col-auto align-self-center text-white">para llevar</div> | ||
40 | <div class="col-auto align-self-center p-0"> | ||
41 | <img class="p-1 img-ir" src="assets/img/ir.svg"> | ||
42 | </div> | ||
43 | </div> | ||
44 | </div> | ||
45 | </div> | ||
46 | </div> | ||
47 | </div> | ||
48 | </div> | ||
49 |
src/app/modules/opcion-pedido/opcion-pedido.component.scss
src/app/modules/opcion-pedido/opcion-pedido.component.spec.ts
File was created | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
2 | |||
3 | import { OpcionPedidoComponent } from './opcion-pedido.component'; | ||
4 | |||
5 | describe('OpcionPedidoComponent', () => { | ||
6 | let component: OpcionPedidoComponent; | ||
7 | let fixture: ComponentFixture<OpcionPedidoComponent>; | ||
8 | |||
9 | beforeEach(async(() => { | ||
10 | TestBed.configureTestingModule({ | ||
11 | declarations: [ OpcionPedidoComponent ] | ||
12 | }) | ||
13 | .compileComponents(); | ||
14 | })); | ||
15 | |||
16 | beforeEach(() => { | ||
17 | fixture = TestBed.createComponent(OpcionPedidoComponent); | ||
18 | component = fixture.componentInstance; | ||
19 | fixture.detectChanges(); | ||
20 | }); | ||
21 | |||
22 | it('should create', () => { | ||
23 | expect(component).toBeTruthy(); | ||
24 | }); | ||
25 | }); | ||
26 |
src/app/modules/opcion-pedido/opcion-pedido.component.ts
File was created | 1 | import { Component, OnInit } from '@angular/core'; | |
2 | |||
3 | @Component({ | ||
4 | selector: 'app-opcion-pedido', | ||
5 | templateUrl: './opcion-pedido.component.html', | ||
6 | styleUrls: ['./opcion-pedido.component.scss'] | ||
7 | }) | ||
8 | export class OpcionPedidoComponent implements OnInit { | ||
9 | |||
10 | constructor() { } | ||
11 | |||
12 | ngOnInit() { | ||
13 | } | ||
14 | |||
15 | } | ||
16 |
src/app/modules/opcion-pedido/opcion-pedido.module.ts
File was created | 1 | import { NgModule } from "@angular/core"; | |
2 | import { CommonModule } from "@angular/common"; | ||
3 | import { OpcionPedidoRoutingModule } from "./opcion-pedido-routing.module"; | ||
4 | import { OpcionPedidoComponent } from "./opcion-pedido.component"; | ||
5 | |||
6 | @NgModule({ | ||
7 | declarations: [OpcionPedidoComponent], | ||
8 | imports: [CommonModule, OpcionPedidoRoutingModule] | ||
9 | }) | ||
10 | export class OpcionPedidoModule {} | ||
11 |
src/app/modules/splash-screen/splash-screen.component.html
1 | <div *ngIf="showSplashScreen" class="vh-100"> | 1 | <div *ngIf="showSplashScreen" class="vh-100"> |
2 | <div class="row mx-0 h-100"> | 2 | <div class="row mx-0 h-100"> |
3 | <div class="col-12 px-0 h-30 my-auto"> | 3 | <div class="col-12 px-0 h-30 my-auto"> |
4 | <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/logo-spot.svg"> | 4 | <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/logo-spot.svg"> |
5 | </div> | 5 | </div> |
6 | </div> | 6 | </div> |
7 | </div> | 7 | </div> |
8 | 8 | ||
9 | <div *ngIf="!showSplashScreen" class="vh-100 bg-primary fade-in"> | 9 | <div *ngIf="!showSplashScreen" class="vh-100 bg-primary fade-in"> |
10 | <div class="row mx-0 h-100"> | 10 | <div class="row mx-0 h-100"> |
11 | <div class="col-12 px-0 h-100 my-auto"> | 11 | <div class="col-12 px-0 h-100 my-auto"> |
12 | <div class="row mx-0 h-15"> | 12 | <div class="row mx-0 h-15"> |
13 | <div class="col-12 px-0 h-80 my-auto"> | 13 | <div class="col-12 px-0 h-80 my-auto"> |
14 | <img class="d-block mx-auto h-100" src="assets/img/negativo-spot.svg"> | 14 | <img class="d-block mx-auto h-100" src="assets/img/negativo-spot.svg"> |
15 | </div> | 15 | </div> |
16 | </div> | 16 | </div> |
17 | <div class="row mx-0 h-75 justify-content-center text-white text-center"> | 17 | <div class="row mx-0 h-75 justify-content-center text-white text-center"> |
18 | <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box"> | 18 | <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box"> |
19 | <div class="h6 m-0 welcome-text text-info"> | 19 | <div class="h6 m-0 welcome-text text-info"> |
20 | <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span> | 20 | <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span> |
21 | </div> | 21 | </div> |
22 | <div class="h1 m-0 como-estas-text"> | 22 | <div class="h1 m-0 como-estas-text"> |
23 | <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span> | 23 | <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span> |
24 | </div> | 24 | </div> |
25 | </div> | 25 | </div> |
26 | <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2"> | 26 | <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2"> |
27 | <div class="h6 m-0 invitamos-text text-info"> | 27 | <div class="h6 m-0 invitamos-text text-info"> |
28 | <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span> | 28 | <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span> |
29 | </div> | 29 | </div> |
30 | <div class="h1 m-0 tu-pedido-text"> | 30 | <div class="h1 m-0 tu-pedido-text"> |
31 | <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span> | 31 | <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span> |
32 | </div> | 32 | </div> |
33 | </div> | 33 | </div> |
34 | </div> | 34 | </div> |
35 | <div | 35 | <div |
36 | class="row mx-0 h-10 loop-color cursor-pointer" | 36 | class="row mx-0 h-10 loop-color cursor-pointer" |
37 | [routerLink]="['formas-pago']"> | 37 | [routerLink]="['/formas-pago']"> |
38 | <div class="col-12 text-center align-self-center px-0"> | 38 | <div class="col-12 text-center align-self-center px-0"> |
39 | <p class="h6 text-white">TOCA PARA COMENZAR</p> | 39 | <p class="h6 text-white">TOCA PARA COMENZAR</p> |
40 | </div> | 40 | </div> |
41 | </div> | 41 | </div> |
42 | </div> | 42 | </div> |
43 | </div> | 43 | </div> |
44 | </div> | 44 | </div> |
45 | 45 |
src/assets/img/ir.svg
File was created | 1 | <?xml version="1.0" encoding="UTF-8"?> | |
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | ||
3 | <!-- Creator: CorelDRAW X7 --> | ||
4 | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="19.8306mm" height="19.8306mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" | ||
5 | viewBox="0 0 9241 9241" | ||
6 | xmlns:xlink="http://www.w3.org/1999/xlink"> | ||
7 | <defs> | ||
8 | <style type="text/css"> | ||
9 | <![CDATA[ | ||
10 | .fil0 {fill:white;fill-rule:nonzero} | ||
11 | ]]> | ||
12 | </style> | ||
13 | </defs> | ||
14 | <g id="Capa_x0020_1"> | ||
15 | <metadata id="CorelCorpID_0Corel-Layer"/> | ||
16 | <path class="fil0" d="M4621 0c1275,0 2431,517 3267,1353 836,837 1353,1992 1353,3268 0,1275 -517,2431 -1353,3267 -836,836 -1992,1353 -3267,1353 -1276,0 -2431,-517 -3268,-1353 -836,-836 -1353,-1992 -1353,-3267 0,-1276 517,-2431 1353,-3268 837,-836 1992,-1353 3268,-1353zm2988 1632c-765,-764 -1821,-1237 -2988,-1237 -1167,0 -2224,473 -2989,1237 -764,765 -1237,1822 -1237,2989 0,1167 473,2223 1237,2988 765,765 1822,1238 2989,1238 1167,0 2223,-473 2988,-1238 765,-765 1238,-1821 1238,-2988 0,-1167 -473,-2224 -1238,-2989zm-3997 564l1944 2425 -1944 2424 -279 -279 1662 -2145 -1662 -2146 279 -279z"/> | ||
17 | </g> | ||
18 | </svg> | ||
19 |
src/scss/icons.scss
File was created | 1 | .img-ir { | |
2 | width: 30px; | ||
3 | } | ||
4 | |||
5 | .img-plato { | ||
6 | width: 50px; | ||
7 | } | ||
8 | |||
9 | .img-accesibilidad { | ||
10 | width: 60px; | ||
11 | } | ||
12 | |||
13 | .img-volver { | ||
14 | width: 40px; | ||
15 | } | ||
16 |
src/styles.scss
1 | @import "scss/styles-bootstrap.scss"; | 1 | @import "scss/styles-bootstrap.scss"; |
2 | @import "scss/height-width.scss"; | 2 | @import "scss/height-width.scss"; |
3 | @import "scss/animations.scss"; | 3 | @import "scss/animations.scss"; |
4 | @import "scss/icons.scss"; | ||
4 | @import "node_modules/bootstrap/scss/_variables.scss"; | 5 | @import "node_modules/bootstrap/scss/_variables.scss"; |
5 | 6 | ||
6 | @font-face { | 7 | @font-face { |
7 | font-family: "Gotham"; | 8 | font-family: "Gotham"; |
8 | font-style: normal; | 9 | font-style: normal; |
9 | font-weight: normal; | 10 | font-weight: normal; |
10 | src: url("assets/fonts/gotham-medium.woff") format("woff"); | 11 | src: url("assets/fonts/gotham-medium.woff") format("woff"); |
11 | } | 12 | } |
12 | 13 | ||
13 | html, | 14 | html, |
14 | body { | 15 | body { |
15 | min-height: 100vh; | 16 | min-height: 100vh; |
16 | max-height: 100vh; | 17 | max-height: 100vh; |
17 | height: 100vh; | 18 | height: 100vh; |
18 | background-color: #fcf2e3; | 19 | background-color: #fcf2e3; |
19 | font-family: "Gotham"; | 20 | font-family: "Gotham"; |
20 | overflow: hidden; | 21 | overflow: hidden; |
21 | user-select: none; | 22 | user-select: none; |
22 | } | 23 | } |
23 | 24 | ||
24 | .btn-effect { | 25 | .btn-effect { |
25 | transition: all 0.3s; | 26 | transition: all 0.3s; |
26 | &:hover { | 27 | &:hover { |
27 | cursor: pointer; | 28 | cursor: pointer; |
28 | opacity: 0.8; | 29 | opacity: 0.8; |
29 | } | 30 | } |
30 | &:active { | 31 | &:active { |
31 | transform: scale(1.02); | 32 | transform: scale(1.02); |
32 | } | 33 | } |
33 | } | 34 | } |
34 | 35 | ||
35 | .cursor-pointer { | 36 | .cursor-pointer { |
36 | cursor: pointer; | 37 | cursor: pointer; |
37 | } | 38 | } |
38 | 39 | ||
39 | p { | 40 | p { |
40 | margin: 0 !important; | 41 | margin: 0 !important; |
41 | } | 42 | } |
42 | 43 | ||
43 | .rounded { | 44 | .rounded { |
44 | border-radius: 1.5rem !important; | 45 | border-radius: 1.5rem !important; |
45 | } | 46 | } |
46 | 47 | ||
47 | .rounded-sm { | 48 | .rounded-sm { |
48 | border-radius: 0.5rem !important; | 49 | border-radius: 0.5rem !important; |
49 | } | 50 | } |
51 | |||
52 | .img-in-top { | ||
53 | position: absolute; | ||
54 | top: -35px; | ||
55 | left: 50%; | ||
56 | height: 70px; | ||
57 | -webkit-transform: translateX(-50%); | ||
58 | transform: translateX(-50%); | ||
59 | } | ||
50 | 60 |