Luis Suarez / autoservicio-axion

Download as
Browse Code ยป

Commit b18d24ac926506cf8c4af220a761d4cffd7aa479

Authored by Marcelo Puebla
1 parent edb176eff0
Exists in master and in 2 other branches 20200117-axion-responsive, develop

iniciada splash screen

Showing 18 changed files with 516 additions and 6 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ b18d24a
1 1 import { NgModule } from '@angular/core';
2 2 import { Routes, RouterModule } from '@angular/router';
  3 +import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
3 4  
4   -
5   -const routes: Routes = [];
  5 +const routes: Routes = [
  6 + { path: '', component: SplashScreenComponent },
  7 +];
6 8  
7 9 @NgModule({
8 10 imports: [RouterModule.forRoot(routes)],
src/app/app.component.html
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1 @@
  1 +<router-outlet></router-outlet>
src/app/app.module.ts
Diff comments   View file @ b18d24a
... ... @@ -3,10 +3,14 @@ import { NgModule } from &#39;@angular/core&#39;;
3 3  
4 4 import { AppRoutingModule } from './app-routing.module';
5 5 import { AppComponent } from './app.component';
  6 +import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
  7 +import { SplitPipe } from './pipes/split.pipe';
6 8  
7 9 @NgModule({
8 10 declarations: [
9   - AppComponent
  11 + AppComponent,
  12 + SplashScreenComponent,
  13 + SplitPipe
10 14 ],
11 15 imports: [
12 16 BrowserModule,
src/app/modules/splash-screen/splash-screen.component.html
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,42 @@
  1 +<div *ngIf="showSplashScreen" class="vh-100">
  2 + <div class="row mx-0 h-100">
  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">
  5 + </div>
  6 + </div>
  7 +</div>
  8 +
  9 +<div *ngIf="!showSplashScreen" class="vh-100 bg-primary fade-in">
  10 + <div class="row mx-0 h-100">
  11 + <div class="col-12 px-0 h-100 my-auto">
  12 + <div class="row mx-0 h-15">
  13 + <div class="col-12 px-0 h-80 my-auto">
  14 + <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/negativo-spot.svg">
  15 + </div>
  16 + </div>
  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">
  19 + <div class="h6 m-0 welcome-text text-info">
  20 + <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span>
  21 + </div>
  22 + <div class="h1 m-0 como-estas-text">
  23 + <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span>
  24 + </div>
  25 + </div>
  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">
  28 + <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span>
  29 + </div>
  30 + <div class="h1 m-0 tu-pedido-text">
  31 + <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span>
  32 + </div>
  33 + </div>
  34 + </div>
  35 + <div class="row mx-0 h-10 loop-color cursor-pointer">
  36 + <div class="col-12 text-center align-self-center px-0">
  37 + <p class="h6 text-white">TOCA PARA COMENZAR</p>
  38 + </div>
  39 + </div>
  40 + </div>
  41 + </div>
  42 +</div>
src/app/modules/splash-screen/splash-screen.component.scss
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,187 @@
  1 +.box:before {
  2 + content: "";
  3 + position: absolute;
  4 + top: 0;
  5 + left: 0;
  6 + width: 0;
  7 + height: 0;
  8 + background: transparent;
  9 + border: 2px solid transparent;
  10 + animation: animate 2.5s 1s linear forwards;
  11 + -webkit-animation: animate 2.5s 1s linear forwards;
  12 +}
  13 +
  14 +@keyframes animate {
  15 + 0% {
  16 + width: 0;
  17 + height: 0;
  18 + border-top-color: white;
  19 + border-bottom-color: transparent;
  20 + border-left-color: transparent;
  21 + border-right-color: transparent;
  22 + }
  23 + 25% {
  24 + width: 100%;
  25 + height: 0;
  26 + border-top-color: white;
  27 + border-top-right-radius: 1.5rem;
  28 + border-bottom-color: transparent;
  29 + border-left-color: transparent;
  30 + border-right-color: white;
  31 + }
  32 + 50% {
  33 + width: 100%;
  34 + height: 100%;
  35 + border-top-right-radius: 1.5rem;
  36 + border-bottom-right-radius: 1.5rem;
  37 + border-top-color: white;
  38 + border-bottom-color: transparent;
  39 + border-left-color: transparent;
  40 + border-right-color: white;
  41 + }
  42 + 100% {
  43 + width: 100%;
  44 + height: 100%;
  45 + border-top-right-radius: 1.5rem;
  46 + border-bottom-right-radius: 1.5rem;
  47 + border-top-color: white;
  48 + border-bottom-color: white;
  49 + border-left-color: transparent;
  50 + border-right-color: white;
  51 + }
  52 +}
  53 +
  54 +.box2:before {
  55 + content: "";
  56 + position: absolute;
  57 + top: 0;
  58 + left: 0;
  59 + width: 0;
  60 + height: 0;
  61 + background: transparent;
  62 + border: 2px solid transparent;
  63 + animation: animate2 2.5s 2.5s linear forwards;
  64 + -webkit-animation: animate2 2.5s 2.5s linear forwards;
  65 +}
  66 +
  67 +@keyframes animate2 {
  68 + 0% {
  69 + width: 100%;
  70 + height: 0;
  71 + border-top-color: white;
  72 + border-bottom-color: transparent;
  73 + border-left-color: transparent;
  74 + border-right-color: transparent;
  75 + }
  76 + 25% {
  77 + width: 100%;
  78 + height: 0;
  79 + border-top-color: white;
  80 + border-top-left-radius: 1.5rem;
  81 + border-bottom-color: transparent;
  82 + border-right-color: transparent;
  83 + border-left-color: white;
  84 + }
  85 + 50% {
  86 + width: 100%;
  87 + height: 100%;
  88 + border-top-left-radius: 1.5rem;
  89 + border-bottom-left-radius: 1.5rem;
  90 + border-top-color: white;
  91 + border-bottom-color: transparent;
  92 + border-right-color: transparent;
  93 + border-left-color: white;
  94 + }
  95 + 100% {
  96 + width: 100%;
  97 + height: 100%;
  98 + border-top-left-radius: 1.5rem;
  99 + border-bottom-left-radius: 1.5rem;
  100 + border-top-color: white;
  101 + border-bottom-color: white;
  102 + border-right-color: transparent;
  103 + border-left-color: white;
  104 + }
  105 +}
  106 +
  107 +/*
  108 + * animation slide-in-top
  109 + */
  110 +.welcome-text span,
  111 +.como-estas-text span,
  112 +.invitamos-text span,
  113 +.tu-pedido-text span {
  114 + opacity: 0;
  115 + -webkit-animation: slide-in-top 1s forwards;
  116 + animation: slide-in-top 1s forwards;
  117 + display: inline-block;
  118 + white-space: break-spaces;
  119 +}
  120 +
  121 +@-webkit-keyframes slide-in-top {
  122 + 0% {
  123 + -webkit-transform: translateY(-500px);
  124 + transform: translateY(-500px);
  125 + opacity: 0;
  126 + }
  127 + 80% {
  128 + -webkit-transform: translateY(10px);
  129 + transform: translateY(10px);
  130 + opacity: 1;
  131 + }
  132 + 100% {
  133 + -webkit-transform: translateY(0);
  134 + transform: translateY(0);
  135 + opacity: 1;
  136 + }
  137 +}
  138 +
  139 +@keyframes slide-in-top {
  140 + 0% {
  141 + -webkit-transform: translateY(-500px);
  142 + transform: translateY(-500px);
  143 + opacity: 0;
  144 + }
  145 + 80% {
  146 + -webkit-transform: translateY(15px);
  147 + transform: translateY(15px);
  148 + opacity: 1;
  149 + }
  150 + 100% {
  151 + -webkit-transform: translateY(0);
  152 + transform: translateY(0);
  153 + opacity: 1;
  154 + }
  155 +}
  156 +
  157 +@for $i from 1 through 18 {
  158 + $delayValue: $i * 0.05s;
  159 + .welcome-text span:nth-child(#{$i}) {
  160 + -webkit-animation-delay: $delayValue;
  161 + animation-delay: $delayValue;
  162 + }
  163 +}
  164 +
  165 +@for $i from 1 through 12 {
  166 + $delayValue: ($i + 18) * 0.05s;
  167 + .como-estas-text span:nth-child(#{$i}) {
  168 + -webkit-animation-delay: $delayValue;
  169 + animation-delay: $delayValue;
  170 + }
  171 +}
  172 +
  173 +@for $i from 1 through 20 {
  174 + $delayValue: ($i + 30) * 0.05s;
  175 + .invitamos-text span:nth-child(#{$i}) {
  176 + -webkit-animation-delay: $delayValue;
  177 + animation-delay: $delayValue;
  178 + }
  179 +}
  180 +
  181 +@for $i from 1 through 13 {
  182 + $delayValue: ($i + 50) * 0.05s;
  183 + .tu-pedido-text span:nth-child(#{$i}) {
  184 + -webkit-animation-delay: $delayValue;
  185 + animation-delay: $delayValue;
  186 + }
  187 +}
src/app/modules/splash-screen/splash-screen.component.spec.ts
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { SplashScreenComponent } from './splash-screen.component';
  4 +
  5 +describe('SplashScreenComponent', () => {
  6 + let component: SplashScreenComponent;
  7 + let fixture: ComponentFixture<SplashScreenComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ SplashScreenComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(SplashScreenComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/modules/splash-screen/splash-screen.component.ts
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,24 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +
  3 +@Component({
  4 + selector: 'app-splash-screen',
  5 + templateUrl: './splash-screen.component.html',
  6 + styleUrls: ['./splash-screen.component.scss']
  7 +})
  8 +export class SplashScreenComponent implements OnInit {
  9 + timerSplashScreen = 2000;
  10 + showSplashScreen = true;
  11 + textWelcome = 'BIENVENIDO A SPOT!';
  12 + textComoEstas = 'ยฟcรณmo estas?';
  13 + textInvitamos = 'TE INVITAMOS A HACER';
  14 + textTuPedido = 'tu pedido acรก';
  15 +
  16 + constructor() { }
  17 +
  18 + ngOnInit() {
  19 + setTimeout(() => {
  20 + this.showSplashScreen = false;
  21 + }, this.timerSplashScreen);
  22 + }
  23 +
  24 +}
src/app/pipes/split.pipe.spec.ts
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,8 @@
  1 +import { SplitPipe } from './split.pipe';
  2 +
  3 +describe('SplitPipe', () => {
  4 + it('create an instance', () => {
  5 + const pipe = new SplitPipe();
  6 + expect(pipe).toBeTruthy();
  7 + });
  8 +});
src/app/pipes/split.pipe.ts
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,12 @@
  1 +import { Pipe, PipeTransform } from '@angular/core';
  2 +
  3 +@Pipe({
  4 + name: 'split'
  5 +})
  6 +export class SplitPipe implements PipeTransform {
  7 +
  8 + transform(value: any, args?: any): any {
  9 + return value.split('');
  10 + }
  11 +
  12 +}
src/assets/fonts/gotham-medium.woff
Diff comments   View file @ b18d24a
No preview for this file type
src/assets/img/LogoSpot2.svg
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,21 @@
  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="78.7688mm" height="78.7676mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
  5 +viewBox="0 0 2581 2581"
  6 + xmlns:xlink="http://www.w3.org/1999/xlink">
  7 + <defs>
  8 + <style type="text/css">
  9 + <![CDATA[
  10 + .fil0 {fill:#AD036F}
  11 + .fil1 {fill:white}
  12 + ]]>
  13 + </style>
  14 + </defs>
  15 + <g id="Capa_x0020_1">
  16 + <metadata id="CorelCorpID_0Corel-Layer"/>
  17 + <path class="fil0" d="M2581 1291c0,713 -577,1290 -1290,1290 -713,0 -1291,-577 -1291,-1290 0,-713 578,-1291 1291,-1291 713,0 1290,578 1290,1291z"/>
  18 + <path class="fil1" d="M655 1065c-54,-47 -118,-118 -114,-140 10,-50 176,-64 221,-65 56,-2 80,-152 -3,-153 -71,-1 -264,19 -312,129 -56,130 22,248 140,351 55,49 150,126 143,211 -17,102 -208,152 -282,160 -103,13 -253,-6 -266,4 -13,7 10,44 112,84 220,78 387,27 482,-76 164,-214 -7,-411 -121,-505zm347 4c-30,-28 -64,5 -66,21 -1,10 -2,16 -4,44 -22,25 -54,80 -57,101 -2,21 22,59 48,55 -18,322 -5,396 -5,396 -2,0 27,278 30,266 19,112 44,183 49,0 6,-109 2,-172 12,-592 10,9 27,16 54,17 343,4 335,-588 -61,-308zm9 253c1,-30 3,-57 4,-83 0,0 0,0 0,0 91,-90 179,-107 179,-91 0,16 -68,114 -183,174zm520 -210c-69,0 -148,42 -154,68 -13,57 15,111 52,123 13,4 28,-23 69,-33 81,-21 153,31 155,104 3,73 -61,143 -145,156 -85,13 -163,-44 -163,-127 0,-25 2,-54 11,-88 13,-50 -33,-43 -71,66 -20,58 -7,146 38,212 40,59 105,94 177,94 136,0 254,-129 263,-288 8,-158 -95,-287 -232,-287zm684 -387c-134,-13 -205,-6 -221,-7 9,-68 27,-201 31,-231 6,-45 -102,-54 -109,-19 -7,37 -13,128 -28,252 -249,10 -563,41 -585,61 -39,37 -15,136 13,135 46,-2 330,-63 562,-85 -14,140 -56,576 -57,604 0,0 -7,229 -4,220 2,93 15,154 45,11 57,-298 100,-708 118,-849 41,-7 194,-23 235,-32 83,-16 134,-47 0,-60z"/>
  19 + <path class="fil1" d="M1828 1884c-55,-56 -105,-39 -135,13 -16,29 -10,79 6,102 15,26 33,41 52,51 37,19 78,22 113,-6 17,-13 32,-41 32,-63 10,-67 -34,-61 -68,-97z"/>
  20 + </g>
  21 +</svg>
src/assets/img/logo-spot.svg
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,21 @@
  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="78.7688mm" height="78.7676mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
  5 +viewBox="0 0 2581 2581"
  6 + xmlns:xlink="http://www.w3.org/1999/xlink">
  7 + <defs>
  8 + <style type="text/css">
  9 + <![CDATA[
  10 + .fil0 {fill:#AD036F}
  11 + .fil1 {fill:white}
  12 + ]]>
  13 + </style>
  14 + </defs>
  15 + <g id="Capa_x0020_1">
  16 + <metadata id="CorelCorpID_0Corel-Layer"/>
  17 + <path class="fil0" d="M2581 1291c0,713 -577,1290 -1290,1290 -713,0 -1291,-577 -1291,-1290 0,-713 578,-1291 1291,-1291 713,0 1290,578 1290,1291z"/>
  18 + <path class="fil1" d="M655 1065c-54,-47 -118,-118 -114,-140 10,-50 176,-64 221,-65 56,-2 80,-152 -3,-153 -71,-1 -264,19 -312,129 -56,130 22,248 140,351 55,49 150,126 143,211 -17,102 -208,152 -282,160 -103,13 -253,-6 -266,4 -13,7 10,44 112,84 220,78 387,27 482,-76 164,-214 -7,-411 -121,-505zm347 4c-30,-28 -64,5 -66,21 -1,10 -2,16 -4,44 -22,25 -54,80 -57,101 -2,21 22,59 48,55 -18,322 -5,396 -5,396 -2,0 27,278 30,266 19,112 44,183 49,0 6,-109 2,-172 12,-592 10,9 27,16 54,17 343,4 335,-588 -61,-308zm9 253c1,-30 3,-57 4,-83 0,0 0,0 0,0 91,-90 179,-107 179,-91 0,16 -68,114 -183,174zm520 -210c-69,0 -148,42 -154,68 -13,57 15,111 52,123 13,4 28,-23 69,-33 81,-21 153,31 155,104 3,73 -61,143 -145,156 -85,13 -163,-44 -163,-127 0,-25 2,-54 11,-88 13,-50 -33,-43 -71,66 -20,58 -7,146 38,212 40,59 105,94 177,94 136,0 254,-129 263,-288 8,-158 -95,-287 -232,-287zm684 -387c-134,-13 -205,-6 -221,-7 9,-68 27,-201 31,-231 6,-45 -102,-54 -109,-19 -7,37 -13,128 -28,252 -249,10 -563,41 -585,61 -39,37 -15,136 13,135 46,-2 330,-63 562,-85 -14,140 -56,576 -57,604 0,0 -7,229 -4,220 2,93 15,154 45,11 57,-298 100,-708 118,-849 41,-7 194,-23 235,-32 83,-16 134,-47 0,-60z"/>
  19 + <path class="fil1" d="M1828 1884c-55,-56 -105,-39 -135,13 -16,29 -10,79 6,102 15,26 33,41 52,51 37,19 78,22 113,-6 17,-13 32,-41 32,-63 10,-67 -34,-61 -68,-97z"/>
  20 + </g>
  21 +</svg>
src/assets/img/negativo-spot.svg
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,21 @@
  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="78.7688mm" height="78.7676mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
  5 +viewBox="0 0 2760 2760"
  6 + xmlns:xlink="http://www.w3.org/1999/xlink">
  7 + <defs>
  8 + <style type="text/css">
  9 + <![CDATA[
  10 + .fil1 {fill:#AD036F}
  11 + .fil0 {fill:white}
  12 + ]]>
  13 + </style>
  14 + </defs>
  15 + <g id="Capa_x0020_1">
  16 + <metadata id="CorelCorpID_0Corel-Layer"/>
  17 + <path class="fil0" d="M2760 1380c0,762 -618,1380 -1380,1380 -762,0 -1380,-618 -1380,-1380 0,-762 618,-1380 1380,-1380 762,0 1380,618 1380,1380z"/>
  18 + <path class="fil1" d="M700 1138c-58,-50 -125,-126 -121,-149 10,-53 187,-69 236,-70 60,-1 86,-162 -4,-163 -76,-1 -282,21 -333,138 -60,139 23,265 150,375 58,52 160,135 152,225 -18,110 -222,163 -301,172 -110,13 -270,-7 -285,3 -14,9 11,48 121,91 234,84 413,28 515,-81 175,-229 -8,-440 -130,-541zm372 4c-32,-29 -70,6 -71,23 -2,11 -2,18 -4,47 -24,28 -59,86 -61,108 -2,23 23,63 51,59 -19,345 -6,423 -6,423 -2,1 30,298 32,284 21,121 48,196 53,0 6,-115 2,-183 13,-632 10,9 28,17 57,18 367,5 359,-628 -64,-330zm9 271c1,-31 3,-61 5,-88 0,0 0,0 0,0 96,-96 190,-115 191,-98 0,18 -74,123 -196,186zm556 -224c-74,0 -158,45 -164,73 -15,61 15,118 54,131 14,5 31,-25 74,-36 87,-22 164,34 167,112 3,78 -66,153 -156,167 -91,14 -174,-48 -174,-137 0,-26 2,-57 12,-93 14,-54 -36,-46 -76,70 -22,62 -8,156 40,227 43,63 113,100 190,100 145,0 271,-137 280,-307 10,-170 -100,-307 -247,-307zm731 -414c-143,-14 -220,-6 -236,-8 10,-72 29,-214 33,-246 6,-48 -109,-58 -116,-21 -8,40 -15,138 -30,270 -267,11 -603,43 -626,65 -42,39 -16,146 14,144 49,-2 352,-67 600,-90 -14,149 -59,615 -60,645 0,0 -8,245 -5,236 2,99 16,164 49,11 61,-319 107,-757 126,-907 44,-8 207,-25 251,-35 89,-17 143,-50 0,-64z"/>
  19 + <path class="fil1" d="M1954 2014c-58,-60 -112,-41 -144,14 -17,31 -10,85 6,109 16,28 36,43 56,55 40,19 84,23 121,-7 18,-14 34,-43 34,-67 11,-71 -36,-65 -73,-104z"/>
  20 + </g>
  21 +</svg>
src/scss/animations.scss
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,91 @@
  1 +/*
  2 + * animation focus-in-blur
  3 + */
  4 +.focus-in-blur {
  5 + -webkit-animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  6 + animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  7 +}
  8 +
  9 +@-webkit-keyframes focus-in-blur {
  10 + 0% {
  11 + -webkit-filter: blur(12px);
  12 + filter: blur(12px);
  13 + opacity: 0;
  14 + }
  15 + 100% {
  16 + -webkit-filter: blur(0px);
  17 + filter: blur(0px);
  18 + opacity: 1;
  19 + }
  20 +}
  21 +
  22 +@keyframes focus-in-blur {
  23 + 0% {
  24 + -webkit-filter: blur(12px);
  25 + filter: blur(12px);
  26 + opacity: 0;
  27 + }
  28 + 100% {
  29 + -webkit-filter: blur(0px);
  30 + filter: blur(0px);
  31 + opacity: 1;
  32 + }
  33 +}
  34 +
  35 +/*
  36 + * animation fade-in
  37 + */
  38 +.fade-in {
  39 + -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  40 + animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  41 +}
  42 +
  43 +@-webkit-keyframes fade-in {
  44 + 0% {
  45 + opacity: 0;
  46 + }
  47 + 100% {
  48 + opacity: 1;
  49 + }
  50 +}
  51 +
  52 +@keyframes fade-in {
  53 + 0% {
  54 + opacity: 0;
  55 + }
  56 + 100% {
  57 + opacity: 1;
  58 + }
  59 +}
  60 +
  61 +/*
  62 + * animation fade-in
  63 + */
  64 +.loop-color {
  65 + -webkit-animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
  66 + animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
  67 +}
  68 +
  69 +@-webkit-keyframes loop-color {
  70 + 0% {
  71 + background-color: #f4b223;
  72 + }
  73 + 50% {
  74 + background-color: #ba8b29;
  75 + }
  76 + 100% {
  77 + background-color: #f4b223;
  78 + }
  79 +}
  80 +
  81 +@keyframes loop-color {
  82 + 0% {
  83 + background-color: #f4b223;
  84 + }
  85 + 50% {
  86 + background-color: #ba8b29;
  87 + }
  88 + 100% {
  89 + background-color: #f4b223;
  90 + }
  91 +}
src/scss/height-width.scss
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,6 @@
  1 +@for $i from 1 through 100 {
  2 + $heightValue: 1% * $i;
  3 + .h-#{$i} {
  4 + height: $heightValue !important;
  5 + }
  6 +}
src/scss/styles-bootstrap.scss
Diff comments   View file @ b18d24a
... ... @@ -0,0 +1,15 @@
  1 +@import "node_modules/bootstrap/scss/functions";
  2 +@import "node_modules/bootstrap/scss/variables";
  3 +@import "node_modules/bootstrap/scss/mixins";
  4 +
  5 +$primary: #aa006b;
  6 +$secondary: #00acd8;
  7 +$info: #f4b223;
  8 +
  9 +$theme-colors: (
  10 + primary: $primary,
  11 + secondary: $secondary,
  12 + info: $info
  13 +);
  14 +
  15 +@import "node_modules/bootstrap/scss/bootstrap";
src/styles-bootstrap.scss
View file @ b18d24a
... ... @@ -1,3 +0,0 @@
1   -@import "../../../node_modules/bootstrap/scss/functions";
2   -@import "../../../node_modules/bootstrap/scss/variables";
3   -@import "../../../node_modules/bootstrap/scss/mixins";
... ... @@ -0,0 +1,33 @@
  1 +@import "scss/styles-bootstrap.scss";
  2 +@import "scss/height-width.scss";
  3 +@import "scss/animations.scss";
  4 +@import "node_modules/bootstrap/scss/_variables.scss";
  5 +
  6 +@font-face {
  7 + font-family: "Gotham-Medium";
  8 + font-style: normal;
  9 + font-weight: normal;
  10 + src: url("assets/fonts/gotham-medium.woff") format("woff");
  11 +}
  12 +
  13 +html,
  14 +body {
  15 + min-height: 100vh;
  16 + max-height: 100vh;
  17 + height: 100vh;
  18 + background-color: #fcf2e3;
  19 + font-family: "Gotham-Medium";
  20 + overflow: hidden;
  21 +}
  22 +
  23 +.cursor-pointer {
  24 + cursor: pointer;
  25 +}
  26 +
  27 +p {
  28 + margin: 0 !important;
  29 +}
  30 +
  31 +.rounded {
  32 + border-radius: 1.5rem !important;
  33 +}