├── css ├── estilos.css ├── estilos.css.map └── estilos.scss ├── img ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png └── 6.png ├── index.html └── js └── main.js /css/estilos.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | background: #F1F1F1; 10 | font-family: 'Roboto', sans-serif; 11 | -webkit-transition: .3s ease all; 12 | transition: .3s ease all; 13 | } 14 | 15 | a { 16 | color: #222222; 17 | text-decoration: none; 18 | font-weight: 500; 19 | } 20 | 21 | .contenedor { 22 | max-width: 1000px; 23 | width: 90%; 24 | margin: auto; 25 | padding: 50px 0; 26 | } 27 | 28 | nav { 29 | background: #FEFEFE; 30 | display: -webkit-box; 31 | display: -ms-flexbox; 32 | display: flex; 33 | -webkit-box-pack: justify; 34 | -ms-flex-pack: justify; 35 | justify-content: space-between; 36 | -webkit-box-align: center; 37 | -ms-flex-align: center; 38 | align-items: center; 39 | padding: 15px 20px; 40 | border-radius: 5px; 41 | -webkit-transition: .3s ease all; 42 | transition: .3s ease all; 43 | -webkit-box-shadow: 10px 10px 20px rgba(170, 170, 170, 0.16); 44 | box-shadow: 10px 10px 20px rgba(170, 170, 170, 0.16); 45 | } 46 | 47 | nav .logotipo { 48 | font-weight: 700; 49 | font-family: 'Roboto', sans-serif; 50 | } 51 | 52 | nav .enlaces { 53 | display: -webkit-box; 54 | display: -ms-flexbox; 55 | display: flex; 56 | -webkit-box-align: center; 57 | -ms-flex-align: center; 58 | align-items: center; 59 | } 60 | 61 | nav .enlaces a { 62 | margin-right: 40px; 63 | } 64 | 65 | nav .enlaces a:hover { 66 | color: #707070; 67 | } 68 | 69 | .grid { 70 | display: -ms-grid; 71 | display: grid; 72 | grid-gap: 40px 20px; 73 | -ms-grid-columns: 1fr 1fr 1fr; 74 | grid-template-columns: 1fr 1fr 1fr; 75 | padding: 40px 0; 76 | } 77 | 78 | .grid .card { 79 | background: #FEFEFE; 80 | padding: 20px; 81 | border-radius: 5px; 82 | -webkit-box-shadow: 10px 10px 20px rgba(170, 170, 170, 0.16); 83 | box-shadow: 10px 10px 20px rgba(170, 170, 170, 0.16); 84 | display: -webkit-box; 85 | display: -ms-flexbox; 86 | display: flex; 87 | -webkit-box-align: end; 88 | -ms-flex-align: end; 89 | align-items: flex-end; 90 | position: relative; 91 | min-height: 195px; 92 | margin-top: 50px; 93 | -webkit-transition: .3s ease all; 94 | transition: .3s ease all; 95 | } 96 | 97 | .grid .card img { 98 | vertical-align: top; 99 | border-radius: 7px; 100 | position: absolute; 101 | top: -50px; 102 | width: calc(100% - 40px); 103 | max-height: 165px; 104 | -o-object-fit: cover; 105 | object-fit: cover; 106 | } 107 | 108 | .grid .card .botones { 109 | width: 100%; 110 | margin-top: 20px; 111 | display: -ms-grid; 112 | display: grid; 113 | grid-gap: 20px; 114 | -ms-grid-columns: 1fr 1fr; 115 | grid-template-columns: 1fr 1fr; 116 | } 117 | 118 | .grid .card .botones .boton { 119 | padding: 10px; 120 | color: #fff; 121 | width: 100%; 122 | display: block; 123 | background: #111111; 124 | text-align: center; 125 | border-radius: 5px; 126 | -webkit-transition: .3s ease all; 127 | transition: .3s ease all; 128 | } 129 | 130 | .grid .card .botones .boton.primario { 131 | background: #3E60E9; 132 | } 133 | 134 | .grid .card .botones .boton.primario:hover { 135 | background: #254BE6; 136 | } 137 | 138 | .grid .card .botones .boton.secundario { 139 | background: #C8C8C8; 140 | } 141 | 142 | .grid .card .botones .boton.secundario:hover { 143 | background: #ACABAB; 144 | } 145 | /*# sourceMappingURL=estilos.css.map */ -------------------------------------------------------------------------------- /css/estilos.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "estilos.scss" 6 | ], 7 | "names": [], 8 | "file": "estilos.css" 9 | } -------------------------------------------------------------------------------- /css/estilos.scss: -------------------------------------------------------------------------------- 1 | $negro: #111111; 2 | $blanco: #FEFEFE; 3 | $grisOscuro: #222222; 4 | $grisClaro: #C8C8C8; 5 | $grisClaroHover: #ACABAB; 6 | $azul: #3E60E9; 7 | $azulHover: #254BE6; 8 | 9 | $sombraDark: 10px 10px 20px rgba(170,170,170,.16); 10 | $sombraLight: 10px 10px 20px rgba(0,0,0,.16); 11 | 12 | * { 13 | padding: 0; 14 | margin: 0; 15 | box-sizing: border-box; 16 | } 17 | 18 | body { 19 | background: #F1F1F1; 20 | font-family: 'Roboto', sans-serif; 21 | transition: .3s ease all; 22 | } 23 | 24 | a { 25 | color: $grisOscuro; 26 | text-decoration: none; 27 | font-weight: 500; 28 | } 29 | 30 | .contenedor { 31 | max-width: 1000px; 32 | width: 90%; 33 | margin: auto; 34 | padding: 50px 0; 35 | } 36 | 37 | // ----- ----- ----- ----- ----- HEADER ----- ----- ----- ----- ----- 38 | nav { 39 | background: $blanco; 40 | display: flex; 41 | justify-content: space-between; 42 | align-items: center; 43 | padding: 15px 20px; 44 | border-radius: 5px; 45 | transition: .3s ease all; 46 | box-shadow: $sombraDark; 47 | 48 | .logotipo { 49 | font-weight: 700; 50 | font-family: 'Roboto', sans-serif; 51 | } 52 | 53 | .enlaces { 54 | display: flex; 55 | align-items: center; 56 | a { 57 | margin-right: 40px; 58 | &:hover { 59 | color: #707070; 60 | } 61 | } 62 | } 63 | } 64 | 65 | // ----- ----- ----- ----- ----- Switch ----- ----- ----- ----- ----- 66 | 67 | 68 | // ----- ----- ----- ----- ----- GRID ----- ----- ----- ----- ----- 69 | 70 | .grid { 71 | display: grid; 72 | grid-gap: 40px 20px; 73 | grid-template-columns: 1fr 1fr 1fr; 74 | padding: 40px 0; 75 | .card { 76 | background: $blanco; 77 | padding: 20px; 78 | border-radius: 5px; 79 | box-shadow: $sombraDark; 80 | display: flex; 81 | align-items: flex-end; 82 | position: relative; 83 | min-height: 195px; 84 | margin-top: 50px; 85 | transition: .3s ease all; 86 | 87 | img { 88 | vertical-align: top; 89 | border-radius: 7px; 90 | position: absolute; 91 | top: -50px; 92 | width: calc(100% - 40px); 93 | max-height: 165px; 94 | object-fit: cover; 95 | } 96 | 97 | .botones { 98 | width: 100%; 99 | margin-top: 20px; 100 | display: grid; 101 | grid-gap: 20px; 102 | grid-template-columns: 1fr 1fr; 103 | 104 | .boton { 105 | padding: 10px; 106 | color: #fff; 107 | width: 100%; 108 | display: block; 109 | background: $negro; 110 | text-align: center; 111 | border-radius: 5px; 112 | transition: .3s ease all; 113 | &.primario { 114 | background: $azul; 115 | &:hover { 116 | background: $azulHover; 117 | } 118 | } 119 | 120 | &.secundario { 121 | background: $grisClaro; 122 | &:hover { 123 | background: $grisClaroHover; 124 | } 125 | } 126 | } 127 | } 128 | } 129 | } -------------------------------------------------------------------------------- /img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/dark-mode-con-javascript/d2e01a50d30866b259b5cacb521b10c84365b69f/img/1.png -------------------------------------------------------------------------------- /img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/dark-mode-con-javascript/d2e01a50d30866b259b5cacb521b10c84365b69f/img/2.png -------------------------------------------------------------------------------- /img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/dark-mode-con-javascript/d2e01a50d30866b259b5cacb521b10c84365b69f/img/3.png -------------------------------------------------------------------------------- /img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/dark-mode-con-javascript/d2e01a50d30866b259b5cacb521b10c84365b69f/img/4.png -------------------------------------------------------------------------------- /img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/dark-mode-con-javascript/d2e01a50d30866b259b5cacb521b10c84365b69f/img/5.png -------------------------------------------------------------------------------- /img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/dark-mode-con-javascript/d2e01a50d30866b259b5cacb521b10c84365b69f/img/6.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Darkmode con Javascript 8 | 9 | 10 | 11 | 12 | 13 |
14 | 22 | 23 |
24 |
25 | 26 |
27 | Comprar 28 | Ver más 29 |
30 |
31 |
32 | 33 |
34 | Comprar 35 | Ver más 36 |
37 |
38 |
39 | 40 |
41 | Comprar 42 | Ver más 43 |
44 |
45 |
46 | 47 |
48 | Comprar 49 | Ver más 50 |
51 |
52 |
53 | 54 |
55 | Comprar 56 | Ver más 57 |
58 |
59 |
60 | 61 |
62 | Comprar 63 | Ver más 64 |
65 |
66 |
67 |
68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/dark-mode-con-javascript/d2e01a50d30866b259b5cacb521b10c84365b69f/js/main.js --------------------------------------------------------------------------------