├── assets ├── img │ ├── logo.png │ ├── favicon.png │ ├── nofound.png │ ├── icon │ │ ├── normal.svg │ │ ├── grass.svg │ │ ├── electric.svg │ │ ├── water.svg │ │ ├── dark.svg │ │ ├── ground.svg │ │ ├── steel.svg │ │ ├── poison.svg │ │ ├── fighting.svg │ │ ├── flying.svg │ │ ├── ghost.svg │ │ ├── ice.svg │ │ ├── bug.svg │ │ ├── rock.svg │ │ ├── fairy.svg │ │ ├── psychic.svg │ │ ├── fire.svg │ │ └── dragon.svg │ └── close.svg ├── css │ ├── sass │ │ ├── base │ │ │ ├── _Animations.scss │ │ │ ├── _Reset.scss │ │ │ ├── _Typography.scss │ │ │ └── _Colors.scss │ │ ├── components │ │ │ ├── _Alert.scss │ │ │ ├── _Buttons.scss │ │ │ └── _Cards.scss │ │ ├── layout │ │ │ ├── _Header.scss │ │ │ ├── _Modal.scss │ │ │ └── _Search.scss │ │ ├── main.scss │ │ └── abstracts │ │ │ ├── _Mixins.scss │ │ │ └── _Variables.scss │ ├── style.css.map │ └── style.css └── js │ └── script.js ├── README.md └── index.html /assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mauro-au/pokemon/HEAD/assets/img/logo.png -------------------------------------------------------------------------------- /assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mauro-au/pokemon/HEAD/assets/img/favicon.png -------------------------------------------------------------------------------- /assets/img/nofound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mauro-au/pokemon/HEAD/assets/img/nofound.png -------------------------------------------------------------------------------- /assets/css/sass/base/_Animations.scss: -------------------------------------------------------------------------------- 1 | /*Keyframes*/ 2 | 3 | @keyframes opacity { 4 | 0% {opacity: 0} 5 | 100% {opacity: 1} 6 | } -------------------------------------------------------------------------------- /assets/css/sass/base/_Reset.scss: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | img { 10 | width: 100%; 11 | } 12 | 13 | body { 14 | padding: 0; 15 | margin-bottom: 80px; 16 | background: $body; 17 | } -------------------------------------------------------------------------------- /assets/css/sass/base/_Typography.scss: -------------------------------------------------------------------------------- 1 | /* typography */ 2 | 3 | body { 4 | font-family: $roboto; 5 | font-weight: $ligth; 6 | } 7 | 8 | h1 { 9 | font-size: $large; 10 | opacity: 0.5; 11 | text-transform: capitalize; 12 | font-weight: $bold; 13 | } 14 | h5{ 15 | font-weight: $medium; 16 | color: rgba(0, 0, 0, 0.5); 17 | } -------------------------------------------------------------------------------- /assets/css/sass/components/_Alert.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | width: 70%; 3 | padding: 20px; 4 | margin-top: 40px; 5 | color: $alertText; 6 | background-color: $alert; 7 | border: 3px solid $alertBorder; 8 | font-weight: bold; 9 | text-align: center; 10 | animation-name: opacity; 11 | animation-duration: 2s; 12 | } -------------------------------------------------------------------------------- /assets/css/sass/layout/_Header.scss: -------------------------------------------------------------------------------- 1 | /*Header*/ 2 | 3 | .header{ 4 | &__logo { 5 | width: 70%; 6 | margin: 20px auto 60px auto; 7 | @include mq(md) { 8 | width: 40%; 9 | margin: 20px auto 100px auto; 10 | } 11 | } 12 | } 13 | #header__home{ 14 | cursor: pointer; 15 | transition: ease .5s; 16 | &:hover { 17 | transform: scale(1.1); 18 | } 19 | } -------------------------------------------------------------------------------- /assets/img/icon/normal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icon/grass.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/css/sass/main.scss: -------------------------------------------------------------------------------- 1 | // main.scss # Manifest File 2 | 3 | // abstracts 4 | @import 'abstracts/Variables'; 5 | @import 'abstracts/Mixins'; 6 | 7 | // Vendors 8 | 9 | // Base 10 | @import 'base/Reset'; 11 | @import 'base/Animations'; 12 | @import 'base/Typography'; 13 | @import 'base/Colors'; 14 | 15 | // Layout 16 | @import 'layout/Header'; 17 | @import 'layout/Search'; 18 | @import 'layout/Modal'; 19 | 20 | 21 | // Components 22 | @import 'components/Cards'; 23 | @import 'components/Buttons'; 24 | @import 'components/Alert'; 25 | 26 | // Pages 27 | 28 | // Theme 29 | 30 | 31 | -------------------------------------------------------------------------------- /assets/img/icon/electric.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icon/water.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icon/dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icon/ground.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icon/steel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/css/sass/abstracts/_Mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin mq($breakpoint) { 2 | 3 | // If the breakpoint exists in the map. 4 | @if map-has-key($breakpoints, $breakpoint) { 5 | 6 | // Get the breakpoint value. 7 | $breakpoint-value: map-get($breakpoints, $breakpoint); 8 | 9 | // Write the media query. 10 | @media only screen and (min-width: $breakpoint-value) { 11 | @content; 12 | } 13 | 14 | // If the breakpoint doesn't exist in the map. 15 | } 16 | 17 | @else { 18 | @media only screen and (min-width: $breakpoint + 'px') { 19 | @content; 20 | } 21 | 22 | } 23 | } 24 | @mixin box-shadow( $shadow ){ 25 | -webkit-box-shadow: $shadow; 26 | -moz-box-shadow: $shadow; 27 | box-shadow: $shadow; 28 | } -------------------------------------------------------------------------------- /assets/img/icon/poison.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icon/fighting.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icon/flying.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icon/ghost.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icon/ice.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/img/icon/bug.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/icon/rock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icon/fairy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/css/sass/abstracts/_Variables.scss: -------------------------------------------------------------------------------- 1 | // Color Scheme 2 | 3 | // First Color Scheme 4 | $body: #F5C556; 5 | $white: #ffffff; 6 | 7 | $button: #0069d9; 8 | $buttonHover: #034285; 9 | $input: #f0d698; 10 | $text: #9e720a; 11 | 12 | // Alert 13 | $alert: #f99c9c; 14 | $alertBorder: #b15d654d; 15 | $alertText: #380c10; 16 | 17 | // Color Pokemon 18 | $normal: #bfb16e; 19 | $fighting: #cf5c35; 20 | $flying: #bea0c2; 21 | $poison: #b96889; 22 | $ground: #e6c163; 23 | $rock: #c9ab40; 24 | $bug: #bebb30; 25 | $ghost: #987984; 26 | $steel: #cabbac; 27 | $fire: #f2953b; 28 | $water: #92a0c2; 29 | $grass: #9dc652; 30 | $electric: #f7cd3b; 31 | $psychic: #f77979; 32 | $ice: #b4d2b1; 33 | $dragon: #a172bf; 34 | $dark: #98794c; 35 | $fairy: #f0a692; 36 | $unknown: rgb(255, 202, 142, 0.7); 37 | $shadow: rgb(42, 78, 141, 0.7); 38 | 39 | // Tipography 40 | 41 | //Font Family 42 | $roboto: 'Roboto', sans-serif; 43 | 44 | // Font Weight 45 | $ligth: 100; 46 | $regular: 300; 47 | $semibold: 500; 48 | $bold: 900; 49 | 50 | // Font Sizes 51 | $xx-large: 2.5rem; 52 | $large: 2rem; 53 | $medium: 1.5rem; 54 | $small: 1.25rem; 55 | 56 | //media quieris 57 | 58 | $breakpoints: ( 59 | sm: 576px, 60 | md: 768px, 61 | lg: 992px, 62 | xl: 1200px 63 | ); 64 | -------------------------------------------------------------------------------- /assets/css/sass/components/_Buttons.scss: -------------------------------------------------------------------------------- 1 | /*buttom*/ 2 | 3 | .btn-primary { 4 | font-family: $roboto; 5 | font-weight: $regular; 6 | background-color: rgba(0, 0, 0, 0.2); 7 | border-color: rgba(0, 0, 0, 0); 8 | border-radius: 30px; 9 | border: none; 10 | padding: 10px 25px; 11 | @include box-shadow(0px 9px 14px -6px rgba(0,0,0,.4)); 12 | &:hover{ 13 | border: none; 14 | background: #00000061; 15 | } 16 | } 17 | 18 | .navegation{ 19 | display: flex; 20 | flex-direction: column; 21 | i{ 22 | padding: 3px 0px; 23 | } 24 | button{ 25 | padding: 11px 25px; 26 | color: $white; 27 | margin: 0 10px; 28 | background: $button; 29 | border-radius: 24px; 30 | border: 0; 31 | transition: .5s ease-out; 32 | animation-name: opacity; 33 | animation-duration: 4s; 34 | display: none; 35 | &:hover{ 36 | background: $buttonHover; 37 | } 38 | &:focus{ 39 | outline: 0px auto -webkit-focus-ring-color; 40 | } 41 | } 42 | h3{ 43 | animation-name: opacity; 44 | animation-duration: 7s; 45 | } 46 | p{ 47 | padding: 0 10px; 48 | margin: 0; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /assets/img/icon/psychic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/icon/fire.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/css/sass/base/_Colors.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | 3 | .normal, #normal{ 4 | background-color: $normal; 5 | } 6 | 7 | .fighting, #fighting{ 8 | background-color: $fighting; 9 | } 10 | 11 | .flying, #flying{ 12 | background-color: $flying; 13 | } 14 | 15 | .poison, #poison{ 16 | background-color: $poison; 17 | } 18 | 19 | .ground, #ground{ 20 | background-color: $ground; 21 | } 22 | 23 | .rock, #rock{ 24 | background-color: $rock; 25 | } 26 | 27 | .bug, #bug{ 28 | background-color: $bug; 29 | } 30 | 31 | .ghost, #ghost{ 32 | background-color: $ghost; 33 | } 34 | 35 | .steel, #steel{ 36 | background-color: $steel; 37 | } 38 | 39 | .fire, #fire{ 40 | background-color: $fire; 41 | } 42 | 43 | .water, #water{ 44 | background-color: $water; 45 | } 46 | 47 | .grass, #grass{ 48 | background-color: $grass; 49 | } 50 | 51 | .electric, #electric{ 52 | background-color: $electric; 53 | } 54 | 55 | .psychic, #psychic{ 56 | background-color: $psychic; 57 | } 58 | 59 | .ice, #ice{ 60 | background-color: $ice; 61 | } 62 | 63 | .dragon, #dragon{ 64 | background-color: $dragon; 65 | } 66 | 67 | .dark, #dark{ 68 | background-color: $dark; 69 | } 70 | 71 | .fairy, #fairy{ 72 | background-color: $fairy; 73 | } 74 | 75 | .unknown, #unknown{ 76 | background-color: $unknown; 77 | } 78 | 79 | .shadow, #shadow{ 80 | background-color: $shadow; 81 | } 82 | -------------------------------------------------------------------------------- /assets/img/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pokemon 2 | 3 | Creación y diseño de una pokedex usando **[pokeapi.co](https://pokeapi.co/)**, una API de Pokemon que nos permite obtener una lista y características de los distintos tipos de Pokemon 4 | 5 | ## Tecnologías​ :hammer_and_wrench: 6 | 7 | - Html 8 | 9 | - Css 10 | 11 | - Sass 12 | 13 | - Bem 14 | 15 | - Bootstrap 16 | 17 | - Jquery 18 | 19 | 20 | 21 | **Visual Studio Code** ( Editor recomendado ) ✔️ 22 | 23 | https://code.visualstudio.com/ 24 | 25 | 26 | 27 | ## Clonar proyecto 28 | 29 | ``` 30 | git clone https://github.com/mauriciodesign/pokemon.git 31 | ``` 32 | 33 | 34 | 35 | ## Documentación :book: 36 | 37 | Se utilizaran los siguientes Endpoints: 38 | 39 | - Listado y características de los pokemones 40 | 41 | https://pokeapi.co/api/v2/pokemon/ 42 | 43 | - Tipos de pokemones 44 | 45 | https://pokeapi.co/api/v2/type/ 46 | 47 | - Información de cada pokemon 48 | 49 | https://pokeapi.co/api/v2/pokemon-species/ 50 | 51 | Para obtener más información, consulte la documentación en https://pokeapi.co/ 52 | 53 | 54 | 55 | ## Vista Proyecto 💥 56 | 57 | [ver proyecto](https://mauro-au.github.io/pokemon/) :computer: 58 | 59 | - Pantalla de inicio 60 | 61 | ![pokemon](https://user-images.githubusercontent.com/47857535/86643255-8aaa8d00-bfaa-11ea-8f6c-0ef3811f47a8.png) 62 | 63 | - Modale con detalles de cada pokemon 64 | 65 | ![pokemonModal](https://user-images.githubusercontent.com/47857535/86645478-6f408180-bfac-11ea-84b7-a33c065da885.png) 66 | 67 | ------ 68 | 69 | Application developed by [**MauricioDesign**](https://github.com/mauriciodesign) 🤘​ 70 | -------------------------------------------------------------------------------- /assets/css/sass/components/_Cards.scss: -------------------------------------------------------------------------------- 1 | /*Cards*/ 2 | 3 | .card { 4 | border: 0; 5 | border-radius: 1rem; 6 | background: transparent; 7 | margin-top: 30px; 8 | transition: ease .5s; 9 | width: 85%; 10 | animation-name: opacity; 11 | animation-duration: 1s; 12 | &:hover { 13 | transform: scale(1.1); 14 | } 15 | &-body { 16 | text-align: center; 17 | border-radius: 1rem; 18 | padding-top: 100px; 19 | @include box-shadow(0px 0px 34px -18px rgba(0, 0, 0, 0.75)); 20 | h5 { 21 | background-color: rgba(255, 255, 255, 0.4); 22 | border-radius: 20px; 23 | padding: 5px; 24 | width: 85px; 25 | margin: 15px auto 20px auto; 26 | } 27 | } 28 | &-title{ 29 | margin: 0; 30 | } 31 | &__circle { 32 | background: $white; 33 | width: 185px; 34 | height: 185px; 35 | border-radius: 50%; 36 | margin: 22px auto -88px auto; 37 | opacity: .2; 38 | } 39 | &__type { 40 | display: flex; 41 | justify-content: center; 42 | } 43 | &__img { 44 | width: 215px; 45 | margin-left: auto; 46 | margin-right: auto; 47 | left: 0; 48 | right: 0; 49 | position: absolute; 50 | top: 0px; 51 | z-index: 1; 52 | animation-name: opacity; 53 | animation-duration: 2s; 54 | @include mq(sm) { 55 | width: 80%; 56 | top: 0px; 57 | } 58 | } 59 | } 60 | 61 | .type__pokemon{ 62 | padding: 15px 10px; 63 | margin: 0; 64 | img { 65 | width: 41px; 66 | border-radius: 50px; 67 | padding: 10px; 68 | @include box-shadow(0px 2px 3px 0px rgba(0,0,0,.2)); 69 | } 70 | } -------------------------------------------------------------------------------- /assets/css/sass/layout/_Modal.scss: -------------------------------------------------------------------------------- 1 | // Modal 2 | .modal{ 3 | &__features { 4 | display: flex; 5 | justify-content: center; 6 | p { 7 | padding: 5px 20px; 8 | font-weight: $bold; 9 | background: #ffffff61; 10 | border-radius: 30px; 11 | margin: 10px; 12 | } 13 | } 14 | &__pokemon{ 15 | display: flex; 16 | justify-content: center; 17 | img { 18 | width: 65%; 19 | } 20 | } 21 | &__type{ 22 | display: flex; 23 | justify-content: center; 24 | } 25 | &__description{ 26 | p { 27 | font-weight: $regular; 28 | padding: 15px; 29 | text-align: justify; 30 | } 31 | } 32 | &__name{ 33 | text-align: center; 34 | } 35 | &__info{ 36 | h1{ 37 | font-size: $xx-large; 38 | } 39 | h5 { 40 | text-align: center; 41 | font-size: $medium; 42 | } 43 | } 44 | &__graphic{ 45 | display: none; 46 | @include mq(md) { 47 | display: block; 48 | } 49 | } 50 | &-dialog{ 51 | max-width: 85% !important; 52 | margin: 10% auto; 53 | @include mq(sm) { 54 | margin: 5% auto; 55 | } 56 | @include mq(md) { 57 | max-width: 70% !important; 58 | margin: 5% auto; 59 | } 60 | @include mq(xl) { 61 | max-width: 50% !important; 62 | margin: auto; 63 | } 64 | } 65 | &-content{ 66 | border-radius: 1rem; 67 | } 68 | &-header, 69 | &-footer{ 70 | border: none; 71 | } 72 | &-header { 73 | border: none; 74 | padding-left: 30px; 75 | padding-right: 30px; 76 | } 77 | &-title{ 78 | font-size: $large; 79 | } 80 | } 81 | 82 | .canvasjs-chart{ 83 | &-canvas { 84 | width: 89% !important; 85 | } 86 | &-credit{ 87 | display: none; 88 | } 89 | } 90 | 91 | .close img { 92 | width: 25px; 93 | margin: 5px; 94 | } -------------------------------------------------------------------------------- /assets/img/icon/dragon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/css/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["sass/base/_Reset.scss","sass/abstracts/_Variables.scss","sass/base/_Animations.scss","sass/base/_Typography.scss","sass/base/_Colors.scss","sass/layout/_Header.scss","sass/abstracts/_Mixins.scss","sass/layout/_Search.scss","sass/layout/_Modal.scss","sass/components/_Cards.scss","sass/components/_Buttons.scss","sass/components/_Alert.scss"],"names":[],"mappings":"AAAA;AAEA;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA,YCZG;;;ACHP;AAEA;EACE;IAAI;;EACJ;IAAM;;;ACJR;AAEA;EACI,aFsCK;EErCL,aFwCI;;;AErCR;EACE,WF2CM;EE1CN;EACA;EACA,aFoCK;;;AElCP;EACE,aFsCO;EErCP;;;ACbF;EACE,kBHcO;;;AGXT;EACE,kBHWS;;;AGRX;EACE,kBHQO;;;AGLT;EACE,kBHKO;;;AGFT;EACE,kBHEO;;;AGCT;EACE,kBHDK;;;AGIP;EACE,kBHJI;;;AGON;EACE,kBHPM;;;AGUR;EACE,kBHVM;;;AGaR;EACE,kBHbK;;;AGgBP;EACE,kBHhBM;;;AGmBR;EACE,kBHnBM;;;AGsBR;EACE,kBHtBS;;;AGyBX;EACE,kBHzBQ;;;AG4BV;EACE,kBH5BI;;;AG+BN;EACE,kBH/BO;;;AGkCT;EACE,kBHlCK;;;AGqCP;EACE,kBHrCM;;;AGwCR;EACE,kBHxCQ;;;AG2CV;EACE,kBH3CO;;;AIpCT;AAGI;EACI;EACA;;ACIA;EDNJ;IAIQ;IACA;;;;AAIZ;EACI;EACA;;AACA;EACI;;;AEhBR;EACI;;AACA;EACI;EACA;;AAEJ;EACI,YNCA;EMAA;EACA;EACA;EACA,ONFD;EMGC,WNwCC;EMvCD,aN+BA;EM9BA;;AACA;EACI,ONPL;;AMUH;EACI,YNdC;EMeD;EACA;EACA,ONnBA;EMoBA;EACA;EACA;;AACA;EACI,YNrBE;EMsBF,ONzBJ;;AM4BJ;EACI,WNmBC;EMlBD,ONzBD;EM0BC;EACA;;AAEJ;EACI;EACA;EACA,ONhCD;EMiCC,WNWA;EMVA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AD3CA;EC0CJ;IAGQ;;;AAGR;EACI,YNtDA;EMuDA,aNfA;;;AMmBR;EACI,YNxDI;EMyDJ;EACA;EACA,ON1DG;EM2DH,WNhBK;EMiBL,aNzBI;EM0BJ;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;ADtEI;ECiER;IAOQ;;;ADxEA;ECiER;IAUQ;;;AD3EA;ECiER;IAaQ;;;AAEJ;EACI;;AAEJ;EACI;;AACA;EACI,ONtFL;;;AM2FP;EACI;;AD5FI;EC2FR;IAGQ;;;AD9FA;EC2FR;IAMQ;;;AAEJ;EACI;;;AAIR;EACI;EACA;EACA;;;AAIJ;AAAA;AAAA;EAGI;EACA;EDpGF,oBCqGsB;EDpGtB,iBCoGsB;EDnGtB,YCmGsB;;;AC3HpB;EACI;EACA;;AACA;EACI;EACA,aPwCL;EOvCK;EACA;EACA;;AAGR;EACI;EACA;;AACA;EACI;;AAGR;EACI;EACA;;AAGA;EACI,aPmBF;EOlBE;EACA;;AAGR;EACI;;AAGA;EACI,WPcD;;AOZH;EACI;EACA,WPYH;;AOTL;EACI;;AFnCA;EEkCJ;IAGQ;;;AAGR;EACI;EACA;;AF1CA;EEwCJ;IAIQ;;;AF5CJ;EEwCJ;IAOQ;IACA;;;AFhDJ;EEwCJ;IAWQ;IACA;;;AAGR;EACI;;AAEJ;EAEI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI,WP1BA;;;AO+BJ;EACI;;AAEJ;EACI;;;AAIR;EACE;EACA;;;AC5FF;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EHON,oBGN0B;EHO1B,iBGP0B;EHQ1B,YGR0B;;AACpB;EACI;EACA;EACA;EACA;EACA;;AAGR;EACI;;AAEJ;EACI,YR3BA;EQ4BA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AH3CA;EGiCJ;IAYQ;IACA;;;;AAKZ;EACI;EACA;;AACA;EACI;EACA;EACA;EH1CN,oBG2C0B;EH1C1B,iBG0C0B;EHzC1B,YGyC0B;;;ACnE5B;AAEA;EACI,aTsCK;ESrCL,aTyCM;ESxCN;EACA;EACA;EACA;EACA;EJeF,oBIdsB;EJetB,iBIfsB;EJgBtB,YIhBsB;;AACpB;EACI;EACA;;;AAIR;EACI;EACA;;AACA;EACI;;AAEJ;EACI;EACA,OTrBA;ESsBA;EACA,YTrBC;ESsBD;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,YT5BE;;AS8BN;EACI;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;;AC/CR;EACI;EACA;EACA;EACA,OVUQ;EUTR,kBVOI;EUNJ;EACA;EACA;EACA;EACA","file":"style.css"} -------------------------------------------------------------------------------- /assets/css/sass/layout/_Search.scss: -------------------------------------------------------------------------------- 1 | .search { 2 | margin-bottom: 30px; 3 | &__content { 4 | justify-content: center; 5 | display: flex; 6 | } 7 | &__input { 8 | background: $input; 9 | border-radius: 30px; 10 | width: 100%; 11 | transition: .5s ease-out; 12 | color: $text; 13 | font-size: $medium; 14 | font-weight: $ligth; 15 | padding: 30px 30px 30px 60px; 16 | &::placeholder { 17 | color: $text; 18 | } 19 | } 20 | &__btn { 21 | background: $button; 22 | border-radius: 24px !important; 23 | padding: 11px 17px; 24 | color: $white; 25 | position: absolute !important; 26 | right: 10px; 27 | z-index: 3 !important; 28 | &:hover { 29 | background: $buttonHover; 30 | color:$white; 31 | } 32 | } 33 | &__icon-search { 34 | font-size: $medium; 35 | color: $text; 36 | position: absolute; 37 | left: 25px; 38 | } 39 | &__icon-down{ 40 | position: absolute; 41 | right: 113px; 42 | color: $text; 43 | font-size: $small; 44 | z-index: 3; 45 | } 46 | &__number { 47 | display: flex; 48 | width: 100%; 49 | position: relative; 50 | align-items: center; 51 | } 52 | &__align { 53 | padding: 0px 20px; 54 | @include mq(md) { 55 | padding: 0px; 56 | } 57 | } 58 | &__option{ 59 | background: $white; 60 | font-weight: $ligth; 61 | } 62 | } 63 | 64 | #search__select { 65 | background: $input; 66 | border-radius: 30px; 67 | transition: .5s ease-out; 68 | color: $text; 69 | font-size: $medium; 70 | font-weight: $ligth; 71 | padding-left: 28px; 72 | height: 59px; 73 | } 74 | 75 | .form { 76 | display: flex; 77 | flex-flow: row wrap; 78 | align-items: center; 79 | width: 100%; 80 | margin-bottom: 25px; 81 | @include mq(md) { 82 | margin-bottom: 0; 83 | } 84 | @include mq(lg) { 85 | width: 75%; 86 | } 87 | @include mq(xl) { 88 | width: 65%; 89 | } 90 | &-control { 91 | border: 0; 92 | } 93 | button { 94 | border: 0; 95 | i { 96 | color: $text; 97 | } 98 | } 99 | } 100 | 101 | .input-group{ 102 | width: 100%; 103 | @include mq(lg) { 104 | width: 75%; 105 | } 106 | @include mq(xl) { 107 | width: 65%; 108 | } 109 | &-append{ 110 | align-items: center !important; 111 | } 112 | } 113 | 114 | .custom-select { 115 | border: 0; 116 | border-radius: 0; 117 | cursor: pointer; 118 | } 119 | 120 | 121 | .search__input[type=text]:focus:not([readonly]), 122 | #search__select[type=text]:focus:not([readonly]), 123 | .custom-select:focus{ 124 | color: $text !important; 125 | background: $white !important; 126 | @include box-shadow(0px 0px 34px -18px rgba(0, 0, 0, 0.75) !important); 127 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pokedex 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 |
33 |
34 |
35 |
36 | 37 | 38 | 39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 | 49 |
50 | 51 | 52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 | 69 | 73 |
74 |
75 |
76 | 77 | 78 | 79 | 81 | 84 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | const urlPokemons = "https://pokeapi.co/api/v2/pokemon/"; 2 | const urlTypePokemons = "https://pokeapi.co/api/v2/type/"; 3 | const urlInfoPokemons = "https://pokeapi.co/api/v2/pokemon-species/"; 4 | const urlImgPokemonDetail = "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/"; 5 | const urlImgPokemonFull = "https://assets.pokemon.com/assets/cms2/img/pokedex/full/"; 6 | 7 | var navNext = $("#navegation__next"); 8 | var navBack = $("#navegation__back"); 9 | var message = $(".text") 10 | 11 | // Eventos 12 | $("#header__home").click(backPokemon); 13 | $("#navegation__back").click(backPokemon); 14 | $("#search__button").click(searchPokemonNumber); 15 | $("#search__button-type").click(searchPokemonType); 16 | $("#navegation__next").click(nextPokemon); 17 | 18 | 19 | //Funciones 20 | 21 | function card(cardPokemon) { 22 | let idPokemon = cardPokemon.id; 23 | let idPokemonModal = cardPokemon.id; 24 | let tall = cardPokemon.height / 10; 25 | let weight = cardPokemon.weight / 10; 26 | let namePokemon = cardPokemon.name; 27 | let stats = cardPokemon.stats; 28 | let colorType = cardPokemon.types; 29 | let typeBack = ""; 30 | let typeIcon = ""; 31 | let valueSelect = $("#search__select").val(); 32 | 33 | $('.header__logo, #navegation__back, #search__button').click(function () { 34 | $('select').val('Tipo de pokemon'); 35 | }); 36 | $('.header__logo, #navegation__back, #search__button-type').click(function () { 37 | $('input').val(''); 38 | }); 39 | 40 | if (idPokemon < '10') { 41 | idPokemon = '00' + idPokemon 42 | } 43 | else if (idPokemon < '100') { 44 | idPokemon = '0' + idPokemon 45 | } 46 | 47 | if (colorType.length == 1) { 48 | typeBack += colorType[0].type.name; 49 | } else { 50 | typeBack += colorType[1].type.name; 51 | } 52 | 53 | if (colorType.length < 2) { 54 | typeIcon += `
`; 55 | } else { 56 | typeIcon += `
`; 57 | typeIcon += `
`; 58 | } 59 | 60 | $(".card img").on('error', function () { 61 | $(this).prop('src', 'assets/img/nofound.png'); 62 | }); 63 | 64 | $(".main").append( 65 | `
66 | ${namePokemon} 67 |
68 |
69 |
#${idPokemon}
70 |

${namePokemon}

71 |
72 | ${typeIcon} 73 |
74 | 75 |
76 |
` 77 | ); 78 | modalPokemon(idPokemon, typeBack, namePokemon, tall, weight, stats, idPokemonModal, typeIcon); 79 | } 80 | 81 | 82 | function modalPokemon(idPokemon, typeBack, namePokemon, tall, weight, stats, idPokemonModal, typeIcon) { 83 | 84 | $.get(urlInfoPokemons + idPokemonModal, (dataPokemon) => { 85 | 86 | let descriptionPokemon = dataPokemon.flavor_text_entries[26].flavor_text; 87 | 88 | $(".main").append( 89 | `` 125 | ); 126 | var chart = new CanvasJS.Chart("chartContainer" + idPokemon, { 127 | animationEnabled: true, 128 | theme: "light1", // "light1", "light2", "dark1", "dark2" 129 | backgroundColor: "transparent", 130 | axisY: { 131 | title: "", 132 | }, 133 | data: [ 134 | { 135 | type: "column", 136 | showInLegend: false, 137 | legendMarkerColor: "black", 138 | // legendText: "MMbbl = one million barrels", 139 | dataPoints: [ 140 | { y: stats[0].base_stat, label: "Velocidad" }, 141 | { y: stats[3].base_stat, label: "Defensa" }, 142 | { y: stats[4].base_stat, label: "Ataque" }, 143 | { y: stats[5].base_stat, label: "Puntos de vida" }, 144 | ], 145 | }, 146 | ], 147 | }); 148 | chart.render(); 149 | }); 150 | } 151 | function error(text) { 152 | $(".main").html(` 153 | ` 157 | ) 158 | } 159 | 160 | function nextPokemon() { 161 | homePokemon(Next); 162 | } 163 | 164 | function backPokemon() { 165 | homePokemon(urlPokemons + '?offset=0&limit=40'); 166 | message.css({ "display": "none" }); 167 | $(".main").html(""); 168 | } 169 | 170 | homePokemon(); 171 | 172 | function homePokemon(url) { 173 | navNext.css({ "display": "flex"}); 174 | navBack.css({ "display": "none" }); 175 | if (!url) { 176 | url = urlPokemons + '?offset=0&limit=40'; 177 | } 178 | $.get(url, (data) => { 179 | Next = data.next 180 | if (Next == urlPokemons + '?offset=960&limit=4') { 181 | message.append("

Opss... No hay mas pokemones por el momento

"); 182 | navNext.css({ "display": "none" }); 183 | navBack.css({ "display": "flex" }); 184 | } 185 | console.log(Next) 186 | data.results.forEach((resultPokemon) => { 187 | $.get(resultPokemon.url, (totalPokemon) => { 188 | card(totalPokemon); 189 | }); 190 | }); 191 | }); 192 | } 193 | 194 | function searchPokemonNumber() { 195 | navNext.css({ "display": "none" }); 196 | navBack.css({ "display": "flex"}); 197 | let id = $("#idPokemon").val(); 198 | 199 | if (id === "") { 200 | error('Ingrese un número o nombre de pokemon válido') 201 | return false; 202 | } 203 | $(".main").html(""); 204 | let idResult = urlPokemons + id.toLowerCase(); 205 | 206 | $.get(idResult, (idPokemon) => { 207 | card(idPokemon); 208 | $("#idPokemon").val(''); 209 | }).fail(function (jqXHR, textStatus, errorThrown) { 210 | error('El pokemos que buscas no existe, intentalo de nuevo') 211 | }); 212 | } 213 | 214 | $.get(urlTypePokemons, (type) => { 215 | type.results.forEach((typePokemon) => { 216 | $("#search__select").append(``); 217 | }); 218 | }); 219 | 220 | function searchPokemonType() { 221 | navNext.css({ "display": "none" }); 222 | navBack.css({ "display": "flex"}); 223 | let typeValue = $("#search__select").val(); 224 | 225 | if (typeValue === null) { 226 | error("Seleccionar un tipo de pokemon"); 227 | return false; 228 | } 229 | 230 | let urltypeValue = urlTypePokemons + typeValue; 231 | $.get(urltypeValue, (searchPokemonValue) => { 232 | if (searchPokemonValue.pokemon.length == 0) { 233 | error("No hay pokemones por ahora") 234 | return false; 235 | } 236 | $(".main").html(""); 237 | searchPokemonValue.pokemon.forEach((searchPokemon) => { 238 | $.get(searchPokemon.pokemon.url, (searchPokemonCard) => { 239 | card(searchPokemonCard); 240 | }); 241 | }); 242 | }); 243 | } 244 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | * { 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | img { 9 | width: 100%; 10 | } 11 | 12 | body { 13 | padding: 0; 14 | margin-bottom: 80px; 15 | background: #F5C556; 16 | } 17 | 18 | /*Keyframes*/ 19 | @keyframes opacity { 20 | 0% { 21 | opacity: 0; 22 | } 23 | 100% { 24 | opacity: 1; 25 | } 26 | } 27 | /* typography */ 28 | body { 29 | font-family: "Roboto", sans-serif; 30 | font-weight: 100; 31 | } 32 | 33 | h1 { 34 | font-size: 2rem; 35 | opacity: 0.5; 36 | text-transform: capitalize; 37 | font-weight: 900; 38 | } 39 | 40 | h5 { 41 | font-weight: 1.5rem; 42 | color: rgba(0, 0, 0, 0.5); 43 | } 44 | 45 | .normal, #normal { 46 | background-color: #bfb16e; 47 | } 48 | 49 | .fighting, #fighting { 50 | background-color: #cf5c35; 51 | } 52 | 53 | .flying, #flying { 54 | background-color: #bea0c2; 55 | } 56 | 57 | .poison, #poison { 58 | background-color: #b96889; 59 | } 60 | 61 | .ground, #ground { 62 | background-color: #e6c163; 63 | } 64 | 65 | .rock, #rock { 66 | background-color: #c9ab40; 67 | } 68 | 69 | .bug, #bug { 70 | background-color: #bebb30; 71 | } 72 | 73 | .ghost, #ghost { 74 | background-color: #987984; 75 | } 76 | 77 | .steel, #steel { 78 | background-color: #cabbac; 79 | } 80 | 81 | .fire, #fire { 82 | background-color: #f2953b; 83 | } 84 | 85 | .water, #water { 86 | background-color: #92a0c2; 87 | } 88 | 89 | .grass, #grass { 90 | background-color: #9dc652; 91 | } 92 | 93 | .electric, #electric { 94 | background-color: #f7cd3b; 95 | } 96 | 97 | .psychic, #psychic { 98 | background-color: #f77979; 99 | } 100 | 101 | .ice, #ice { 102 | background-color: #b4d2b1; 103 | } 104 | 105 | .dragon, #dragon { 106 | background-color: #a172bf; 107 | } 108 | 109 | .dark, #dark { 110 | background-color: #98794c; 111 | } 112 | 113 | .fairy, #fairy { 114 | background-color: #f0a692; 115 | } 116 | 117 | .unknown, #unknown { 118 | background-color: rgba(255, 202, 142, 0.7); 119 | } 120 | 121 | .shadow, #shadow { 122 | background-color: rgba(42, 78, 141, 0.7); 123 | } 124 | 125 | /*Header*/ 126 | .header__logo { 127 | width: 70%; 128 | margin: 20px auto 60px auto; 129 | } 130 | @media only screen and (min-width: 768px) { 131 | .header__logo { 132 | width: 40%; 133 | margin: 20px auto 100px auto; 134 | } 135 | } 136 | 137 | #header__home { 138 | cursor: pointer; 139 | transition: ease 0.5s; 140 | } 141 | #header__home:hover { 142 | transform: scale(1.1); 143 | } 144 | 145 | .search { 146 | margin-bottom: 30px; 147 | } 148 | .search__content { 149 | justify-content: center; 150 | display: flex; 151 | } 152 | .search__input { 153 | background: #f0d698; 154 | border-radius: 30px; 155 | width: 100%; 156 | transition: 0.5s ease-out; 157 | color: #9e720a; 158 | font-size: 1.5rem; 159 | font-weight: 100; 160 | padding: 30px 30px 30px 60px; 161 | } 162 | .search__input::placeholder { 163 | color: #9e720a; 164 | } 165 | .search__btn { 166 | background: #0069d9; 167 | border-radius: 24px !important; 168 | padding: 11px 17px; 169 | color: #ffffff; 170 | position: absolute !important; 171 | right: 10px; 172 | z-index: 3 !important; 173 | } 174 | .search__btn:hover { 175 | background: #034285; 176 | color: #ffffff; 177 | } 178 | .search__icon-search { 179 | font-size: 1.5rem; 180 | color: #9e720a; 181 | position: absolute; 182 | left: 25px; 183 | } 184 | .search__icon-down { 185 | position: absolute; 186 | right: 113px; 187 | color: #9e720a; 188 | font-size: 1.25rem; 189 | z-index: 3; 190 | } 191 | .search__number { 192 | display: flex; 193 | width: 100%; 194 | position: relative; 195 | align-items: center; 196 | } 197 | .search__align { 198 | padding: 0px 20px; 199 | } 200 | @media only screen and (min-width: 768px) { 201 | .search__align { 202 | padding: 0px; 203 | } 204 | } 205 | .search__option { 206 | background: #ffffff; 207 | font-weight: 100; 208 | } 209 | 210 | #search__select { 211 | background: #f0d698; 212 | border-radius: 30px; 213 | transition: 0.5s ease-out; 214 | color: #9e720a; 215 | font-size: 1.5rem; 216 | font-weight: 100; 217 | padding-left: 28px; 218 | height: 59px; 219 | } 220 | 221 | .form { 222 | display: flex; 223 | flex-flow: row wrap; 224 | align-items: center; 225 | width: 100%; 226 | margin-bottom: 25px; 227 | } 228 | @media only screen and (min-width: 768px) { 229 | .form { 230 | margin-bottom: 0; 231 | } 232 | } 233 | @media only screen and (min-width: 992px) { 234 | .form { 235 | width: 75%; 236 | } 237 | } 238 | @media only screen and (min-width: 1200px) { 239 | .form { 240 | width: 65%; 241 | } 242 | } 243 | .form-control { 244 | border: 0; 245 | } 246 | .form button { 247 | border: 0; 248 | } 249 | .form button i { 250 | color: #9e720a; 251 | } 252 | 253 | .input-group { 254 | width: 100%; 255 | } 256 | @media only screen and (min-width: 992px) { 257 | .input-group { 258 | width: 75%; 259 | } 260 | } 261 | @media only screen and (min-width: 1200px) { 262 | .input-group { 263 | width: 65%; 264 | } 265 | } 266 | .input-group-append { 267 | align-items: center !important; 268 | } 269 | 270 | .custom-select { 271 | border: 0; 272 | border-radius: 0; 273 | cursor: pointer; 274 | } 275 | 276 | .search__input[type=text]:focus:not([readonly]), 277 | #search__select[type=text]:focus:not([readonly]), 278 | .custom-select:focus { 279 | color: #9e720a !important; 280 | background: #ffffff !important; 281 | -webkit-box-shadow: 0px 0px 34px -18px rgba(0, 0, 0, 0.75) !important; 282 | -moz-box-shadow: 0px 0px 34px -18px rgba(0, 0, 0, 0.75) !important; 283 | box-shadow: 0px 0px 34px -18px rgba(0, 0, 0, 0.75) !important; 284 | } 285 | 286 | .modal__features { 287 | display: flex; 288 | justify-content: center; 289 | } 290 | .modal__features p { 291 | padding: 5px 20px; 292 | font-weight: 900; 293 | background: #ffffff61; 294 | border-radius: 30px; 295 | margin: 10px; 296 | } 297 | .modal__pokemon { 298 | display: flex; 299 | justify-content: center; 300 | } 301 | .modal__pokemon img { 302 | width: 65%; 303 | } 304 | .modal__type { 305 | display: flex; 306 | justify-content: center; 307 | } 308 | .modal__description p { 309 | font-weight: 300; 310 | padding: 15px; 311 | text-align: justify; 312 | } 313 | .modal__name { 314 | text-align: center; 315 | } 316 | .modal__info h1 { 317 | font-size: 2.5rem; 318 | } 319 | .modal__info h5 { 320 | text-align: center; 321 | font-size: 1.5rem; 322 | } 323 | .modal__graphic { 324 | display: none; 325 | } 326 | @media only screen and (min-width: 768px) { 327 | .modal__graphic { 328 | display: block; 329 | } 330 | } 331 | .modal-dialog { 332 | max-width: 85% !important; 333 | margin: 10% auto; 334 | } 335 | @media only screen and (min-width: 576px) { 336 | .modal-dialog { 337 | margin: 5% auto; 338 | } 339 | } 340 | @media only screen and (min-width: 768px) { 341 | .modal-dialog { 342 | max-width: 70% !important; 343 | margin: 5% auto; 344 | } 345 | } 346 | @media only screen and (min-width: 1200px) { 347 | .modal-dialog { 348 | max-width: 50% !important; 349 | margin: auto; 350 | } 351 | } 352 | .modal-content { 353 | border-radius: 1rem; 354 | } 355 | .modal-header, .modal-footer { 356 | border: none; 357 | } 358 | .modal-header { 359 | border: none; 360 | padding-left: 30px; 361 | padding-right: 30px; 362 | } 363 | .modal-title { 364 | font-size: 2rem; 365 | } 366 | 367 | .canvasjs-chart-canvas { 368 | width: 89% !important; 369 | } 370 | .canvasjs-chart-credit { 371 | display: none; 372 | } 373 | 374 | .close img { 375 | width: 25px; 376 | margin: 5px; 377 | } 378 | 379 | /*Cards*/ 380 | .card { 381 | border: 0; 382 | border-radius: 1rem; 383 | background: transparent; 384 | margin-top: 30px; 385 | transition: ease 0.5s; 386 | width: 85%; 387 | animation-name: opacity; 388 | animation-duration: 1s; 389 | } 390 | .card:hover { 391 | transform: scale(1.1); 392 | } 393 | .card-body { 394 | text-align: center; 395 | border-radius: 1rem; 396 | padding-top: 100px; 397 | -webkit-box-shadow: 0px 0px 34px -18px rgba(0, 0, 0, 0.75); 398 | -moz-box-shadow: 0px 0px 34px -18px rgba(0, 0, 0, 0.75); 399 | box-shadow: 0px 0px 34px -18px rgba(0, 0, 0, 0.75); 400 | } 401 | .card-body h5 { 402 | background-color: rgba(255, 255, 255, 0.4); 403 | border-radius: 20px; 404 | padding: 5px; 405 | width: 85px; 406 | margin: 15px auto 20px auto; 407 | } 408 | .card-title { 409 | margin: 0; 410 | } 411 | .card__circle { 412 | background: #ffffff; 413 | width: 185px; 414 | height: 185px; 415 | border-radius: 50%; 416 | margin: 22px auto -88px auto; 417 | opacity: 0.2; 418 | } 419 | .card__type { 420 | display: flex; 421 | justify-content: center; 422 | } 423 | .card__img { 424 | width: 215px; 425 | margin-left: auto; 426 | margin-right: auto; 427 | left: 0; 428 | right: 0; 429 | position: absolute; 430 | top: 0px; 431 | z-index: 1; 432 | animation-name: opacity; 433 | animation-duration: 2s; 434 | } 435 | @media only screen and (min-width: 576px) { 436 | .card__img { 437 | width: 80%; 438 | top: 0px; 439 | } 440 | } 441 | 442 | .type__pokemon { 443 | padding: 15px 10px; 444 | margin: 0; 445 | } 446 | .type__pokemon img { 447 | width: 41px; 448 | border-radius: 50px; 449 | padding: 10px; 450 | -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2); 451 | -moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2); 452 | box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2); 453 | } 454 | 455 | /*buttom*/ 456 | .btn-primary { 457 | font-family: "Roboto", sans-serif; 458 | font-weight: 300; 459 | background-color: rgba(0, 0, 0, 0.2); 460 | border-color: rgba(0, 0, 0, 0); 461 | border-radius: 30px; 462 | border: none; 463 | padding: 10px 25px; 464 | -webkit-box-shadow: 0px 9px 14px -6px rgba(0, 0, 0, 0.4); 465 | -moz-box-shadow: 0px 9px 14px -6px rgba(0, 0, 0, 0.4); 466 | box-shadow: 0px 9px 14px -6px rgba(0, 0, 0, 0.4); 467 | } 468 | .btn-primary:hover { 469 | border: none; 470 | background: #00000061; 471 | } 472 | 473 | .navegation { 474 | display: flex; 475 | flex-direction: column; 476 | } 477 | .navegation i { 478 | padding: 3px 0px; 479 | } 480 | .navegation button { 481 | padding: 11px 25px; 482 | color: #ffffff; 483 | margin: 0 10px; 484 | background: #0069d9; 485 | border-radius: 24px; 486 | border: 0; 487 | transition: 0.5s ease-out; 488 | animation-name: opacity; 489 | animation-duration: 4s; 490 | display: none; 491 | } 492 | .navegation button:hover { 493 | background: #034285; 494 | } 495 | .navegation button:focus { 496 | outline: 0px auto -webkit-focus-ring-color; 497 | } 498 | .navegation h3 { 499 | animation-name: opacity; 500 | animation-duration: 7s; 501 | } 502 | .navegation p { 503 | padding: 0 10px; 504 | margin: 0; 505 | } 506 | 507 | .alert { 508 | width: 70%; 509 | padding: 20px; 510 | margin-top: 40px; 511 | color: #380c10; 512 | background-color: #f99c9c; 513 | border: 3px solid #b15d654d; 514 | font-weight: bold; 515 | text-align: center; 516 | animation-name: opacity; 517 | animation-duration: 2s; 518 | } 519 | 520 | /*# sourceMappingURL=style.css.map */ 521 | --------------------------------------------------------------------------------