├── 3DCard ├── img │ ├── do1.jpg │ ├── img34.jpg │ ├── mj1.png │ └── mj2.png ├── index.html ├── style.css.map ├── style.css └── style.scss ├── 1 Menu basico ├── favicon.png ├── style.css └── index.html ├── 3 Barra busqueda ├── charizard.png ├── index.html └── style.css ├── 4 Confirmado ├── paypal_logo.png ├── index.html └── style.css ├── 5 Card pokemons ├── img │ ├── cofre.png │ ├── fuego.png │ ├── castillo.png │ ├── charizard.png │ ├── fondoTop.svg │ └── fondoBotton.svg ├── css │ ├── style.css.map │ ├── style.css │ └── style.scss └── index.html ├── 2 Imagenes apiladas ├── img │ ├── gengar.png │ ├── blastoise.png │ ├── bulbasaur.png │ ├── charizard.png │ └── squirtle.png ├── index.html └── style.css └── README.md /3DCard/img/do1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/3DCard/img/do1.jpg -------------------------------------------------------------------------------- /3DCard/img/img34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/3DCard/img/img34.jpg -------------------------------------------------------------------------------- /3DCard/img/mj1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/3DCard/img/mj1.png -------------------------------------------------------------------------------- /3DCard/img/mj2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/3DCard/img/mj2.png -------------------------------------------------------------------------------- /1 Menu basico/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/1 Menu basico/favicon.png -------------------------------------------------------------------------------- /3 Barra busqueda/charizard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/3 Barra busqueda/charizard.png -------------------------------------------------------------------------------- /4 Confirmado/paypal_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/4 Confirmado/paypal_logo.png -------------------------------------------------------------------------------- /5 Card pokemons/img/cofre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/5 Card pokemons/img/cofre.png -------------------------------------------------------------------------------- /5 Card pokemons/img/fuego.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/5 Card pokemons/img/fuego.png -------------------------------------------------------------------------------- /5 Card pokemons/img/castillo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/5 Card pokemons/img/castillo.png -------------------------------------------------------------------------------- /2 Imagenes apiladas/img/gengar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/2 Imagenes apiladas/img/gengar.png -------------------------------------------------------------------------------- /5 Card pokemons/img/charizard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/5 Card pokemons/img/charizard.png -------------------------------------------------------------------------------- /2 Imagenes apiladas/img/blastoise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/2 Imagenes apiladas/img/blastoise.png -------------------------------------------------------------------------------- /2 Imagenes apiladas/img/bulbasaur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/2 Imagenes apiladas/img/bulbasaur.png -------------------------------------------------------------------------------- /2 Imagenes apiladas/img/charizard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/2 Imagenes apiladas/img/charizard.png -------------------------------------------------------------------------------- /2 Imagenes apiladas/img/squirtle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Franklin369/proyectos-html-css-1-al-5/HEAD/2 Imagenes apiladas/img/squirtle.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ###### 5 proyectos html con css 2 | Para acceder del numero 6 al 25 pues puedes anotarte al curso 3 | ###### TUTORIAL PASO A PASO EN https://codigo369.com/ 4 | ![](https://i.ibb.co/wc3cSJ5/g445t.png) 5 | -------------------------------------------------------------------------------- /5 Card pokemons/css/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,iBAAA;EACA,iBAAA;ACCF;;ADCA;EACE,sBAAA;EACA,gBAAA;ACEF;;ADAA;;;EAGE,mBAAA;ACGF;;ADDA;EACE,uBAAA;EACA,+BAAA;EACA,uEAAA;EACA,uCAAA;EACA,+DAAA;ACIF;;ADFA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,aAAA;ACKF;;ADHA;EACE,uBAAA;EACA,YAAA;EACA,mBAAA;EACA,gBAAA;EACA,2CAAA;ACMF;ADJE;EACE,WAAA;EACA,cAAA;ACMJ;ADJE;EAEE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,sCAAA;ACKJ;ADHI;EACE,yBAAA;EACA,kBAAA;EACA,yBAAA;EACA,kCAAA;EACA,iBAAA;ACKN;ADJM;EACE,aAAA;ACMR;ADHI;EACE,gBAAA;EACA,eAAA;ACKN;ADJM;EACE,oBAAA;ACMR;ADFE;EACE,aAAA;EACA,6BAAA;ACIJ;ADHI;EACE,kBAAA;EACA,mBAAA;EACA,gBAAA;ACKN","file":"style.css"} -------------------------------------------------------------------------------- /1 Menu basico/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: sans-serif; 3 | margin: 0; 4 | } 5 | a{ 6 | text-decoration: none; 7 | color: white; 8 | } 9 | header{ 10 | display: flex; 11 | background-color: #14161A; 12 | min-height: 70px; 13 | justify-content: space-between; 14 | align-items: center; 15 | padding: 10px; 16 | } 17 | .logo{ 18 | display: flex; 19 | align-items: center; 20 | } 21 | .logo img{ 22 | height: 50px; 23 | margin-right: 12px; 24 | } 25 | nav a{ 26 | font-weight: 600; 27 | padding-right: 11px; 28 | } 29 | nav a:hover{ 30 | color: #F0DB4F; 31 | } 32 | 33 | @media (max-width: 680px){ 34 | header{ 35 | flex-direction: column; 36 | } 37 | nav{ 38 | padding: 10px 0px; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /3DCard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card 3d 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 | 16 | 17 |
18 |
19 |
20 | 21 |
22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /3 Barra busqueda/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Barra de navegacion 8 | 9 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /3DCard/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,mBAAA;EACA,2CAAA;ACCJ;;ADCA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACEJ;;ADAA;EACI,YAAA;EACA,aAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,mBAAA;ACGJ;;ADDA;EACI,wBAAA;EACA,0BAAA;EACA,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,qBAAA;EACA,eAAA;EACA,cAAA;EACA,mBAAA;ACIJ;ADDQ;EACI,0EAAA;ACGZ;ADFY;EACI,UAAA;ACIhB;ADFY;EACI,aAAA;ACIhB;ADDQ;EACI,UAAA;EACA,sCAAA;ACGZ;ADAI;EACI,oBAAA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;ACER;ADAQ;EACI,WAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,YAAA;EACA,6GAAA;ACEZ;ADEQ;EACI,WAAA;EAEA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,kBAAA;EACA,OAAA;EACA,SAAA;EACA,YAAA;EACA,0GAAA;EACA,UAAA;ACDZ;ADGQ;EACI,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,mBAAA;ACDZ;ADKI;EACI,aAAA;EACA,kBAAA;EACA,WAAA;EACA,oBAAA;EACA,UAAA;ACHR","file":"style.css"} -------------------------------------------------------------------------------- /1 Menu basico/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu basico 8 | 9 | 10 | 11 | 12 | 13 |
14 | 19 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /4 Confirmado/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Confirmado 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 | paypal 18 |
19 |
20 |
21 |

22 | Pago realizado con éxito 23 |

24 |
25 | Gracias por su preferencia 26 |
27 | 28 |
29 |
30 |
31 |
32 | 33 | 34 |
35 |
36 |
37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /2 Imagenes apiladas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 | blastoise 14 | 15 | blastoise 16 | 17 |
18 |
19 | bulbasaur 20 | 21 | bulbasaur 22 | 23 |
24 |
25 | charizard 26 | 27 | charizard pokemon 28 | 29 |
30 |
31 | gengar 32 | 33 | gengar 34 | 35 |
36 |
37 | squirtle 38 | 39 | squirtle 40 | 41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /3 Barra busqueda/style.css: -------------------------------------------------------------------------------- 1 | .material-icons { 2 | font-family: 'Material Icons'; 3 | font-weight: normal; 4 | font-style: normal; 5 | font-size: 24px; /* Preferred icon size */ 6 | display: inline-block; 7 | line-height: 1; 8 | text-transform: none; 9 | letter-spacing: normal; 10 | word-wrap: normal; 11 | white-space: nowrap; 12 | direction: ltr; 13 | 14 | /* Support for all WebKit browsers. */ 15 | -webkit-font-smoothing: antialiased; 16 | /* Support for Safari and Chrome. */ 17 | text-rendering: optimizeLegibility; 18 | 19 | /* Support for Firefox. */ 20 | -moz-osx-font-smoothing: grayscale; 21 | 22 | /* Support for IE. */ 23 | font-feature-settings: 'liga'; 24 | } 25 | body{ 26 | font-family: sans-serif; 27 | 28 | } 29 | .search-bar{ 30 | border: solid 1px #ccc; 31 | border-radius: 30px; 32 | display: flex; 33 | flex-direction: row; 34 | align-items: center; 35 | padding: 5px 10px; 36 | margin: 100px auto; 37 | } 38 | .search-bar:focus-within{ 39 | border: solid 1px #aaa; 40 | box-shadow: 0px 2px 5px rgba(35, 35, 36, 0.2) 41 | } 42 | .search-bar input{ 43 | border: none; 44 | outline: none; 45 | pad: 10px; 46 | font-size: 18px; 47 | flex: auto; 48 | 49 | } 50 | .search-bar .actions{ 51 | display: flex; 52 | gap: 5px; 53 | } 54 | .search-bar .actions button{ 55 | border: none; 56 | outline: none; 57 | background: none; 58 | cursor: pointer; 59 | color: #999; 60 | } 61 | .search-bar .actions button:hover{ 62 | color: #2979e2; 63 | } -------------------------------------------------------------------------------- /5 Card pokemons/css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color1: #f8b78b; 3 | --color2: #fcb173; 4 | } 5 | 6 | html { 7 | box-sizing: border-box; 8 | font-size: 62.5%; 9 | } 10 | 11 | *, 12 | *:before, 13 | *:after { 14 | box-sizing: inherit; 15 | } 16 | 17 | body { 18 | font-family: sans-serif; 19 | background-color: var(--color1); 20 | background-image: url(../img/fondoTop.svg), url(../img/fondoBotton.svg); 21 | background-repeat: no-repeat, no-repeat; 22 | background-position: right 50vw bottom 50vh, left 50vw top 50vh; 23 | } 24 | 25 | .container { 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | height: 100vh; 30 | } 31 | 32 | .card { 33 | background-color: white; 34 | width: 328px; 35 | border-radius: 16px; 36 | overflow: hidden; 37 | box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); 38 | } 39 | .card-header { 40 | width: 100%; 41 | display: block; 42 | } 43 | .card-body { 44 | display: flex; 45 | flex-direction: column; 46 | align-items: center; 47 | border-bottom: 1px solid var(--color2); 48 | } 49 | .card-body-contentimg { 50 | border: 5px solid #f67c55; 51 | border-radius: 50%; 52 | background-color: #fcd3c6; 53 | box-shadow: 0px -10px 20px #f67c55; 54 | margin-top: -58px; 55 | } 56 | .card-body-contentimg-img { 57 | padding: 20px; 58 | } 59 | .card-body-title { 60 | margin-top: 2rem; 61 | font-size: 3rem; 62 | } 63 | .card-body-title span { 64 | color: var(--color2); 65 | } 66 | .card-footer { 67 | display: flex; 68 | justify-content: space-around; 69 | } 70 | .card-footer-poder { 71 | text-align: center; 72 | margin-bottom: 2rem; 73 | margin-top: 2rem; 74 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /5 Card pokemons/css/style.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --color1: #f8b78b; 3 | --color2: #fcb173; 4 | } 5 | html { 6 | box-sizing: border-box; 7 | font-size: 62.5%; 8 | } 9 | *, 10 | *:before, 11 | *:after { 12 | box-sizing: inherit; 13 | } 14 | body { 15 | font-family: sans-serif; 16 | background-color: var(--color1); 17 | background-image: url(../img/fondoTop.svg), url(../img/fondoBotton.svg); 18 | background-repeat: no-repeat, no-repeat; 19 | background-position: right 50vw bottom 50vh, left 50vw top 50vh; 20 | } 21 | .container { 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | height: 100vh; 26 | } 27 | .card { 28 | background-color: white; 29 | width: 328px; 30 | border-radius: 16px; 31 | overflow: hidden; 32 | box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); 33 | 34 | &-header { 35 | width: 100%; 36 | display: block; 37 | } 38 | &-body { 39 | 40 | display: flex; 41 | flex-direction: column; 42 | align-items: center; 43 | border-bottom: 1px solid var(--color2); 44 | 45 | &-contentimg { 46 | border: 5px solid #f67c55; 47 | border-radius: 50%; 48 | background-color: #fcd3c6; 49 | box-shadow: 0px -10px 20px #f67c55; 50 | margin-top: calc(-50px - 8px); 51 | &-img { 52 | padding: 20px; 53 | } 54 | } 55 | &-title { 56 | margin-top: 2rem; 57 | font-size: 3rem; 58 | span { 59 | color: var(--color2); 60 | } 61 | } 62 | } 63 | &-footer { 64 | display: flex; 65 | justify-content: space-around; 66 | &-poder { 67 | text-align: center; 68 | margin-bottom: 2rem; 69 | margin-top: 2rem; 70 | 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /2 Imagenes apiladas/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: sans-serif; 3 | background-color: aquamarine; 4 | } 5 | .imagenes-container{ 6 | 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | height: 100vh; 11 | } 12 | .imagenes-container .imagen{ 13 | position: relative; 14 | margin-right: -20px; 15 | display: inline-flex; 16 | flex-direction: column; 17 | 18 | } 19 | .imagenes-container .imagen img{ 20 | width: 150px; 21 | height: 150px; 22 | transition: transform 0.32s ease-in-out; 23 | } 24 | 25 | .imagenes-container .imagen .nombre{ 26 | position: absolute; 27 | background-color: black; 28 | border-radius: 5px; 29 | color: white; 30 | display: none; 31 | min-width: 100px; 32 | width: 150px; 33 | top: -70px; 34 | 35 | padding: 10px 15px; 36 | 37 | 38 | } 39 | .imagenes-container .imagen .nombre .text{ 40 | display: inline-block; 41 | text-overflow: ellipsis; 42 | overflow: hidden; 43 | white-space: nowrap; 44 | margin: 0 auto; 45 | width: 150px; 46 | text-align: center; 47 | box-sizing: border-box; 48 | } 49 | .imagenes-container .imagen:hover .nombre{ 50 | display: inline-block; 51 | transform: translateY(-20px) 52 | } 53 | .imagenes-container .imagen .nombre::before { 54 | content: ""; 55 | position: absolute; 56 | width: 1px; 57 | height: 1px; 58 | left: 40%; 59 | bottom: -20px; 60 | border-top: 10px solid black; 61 | border-left: 10px solid transparent; 62 | border-right: 10px solid transparent; 63 | border-bottom: 10px solid transparent; 64 | } 65 | .imagenes-container .imagen:hover img{ 66 | transform: translateY(-20px); 67 | } 68 | @media (max-width: 680px){ 69 | .imagenes-container{ 70 | flex-direction: column; 71 | height: 180vh; 72 | } 73 | } -------------------------------------------------------------------------------- /4 Confirmado/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Arial, Helvetica, sans-serif; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | .contenedor{ 7 | background-color: #1c56a8; 8 | display: flex; 9 | width: 100%; 10 | height: 100%; 11 | align-items: center; 12 | justify-content: center; 13 | position: absolute; 14 | } 15 | .contenedor .sub-contenedor{ 16 | width: 600px; 17 | border-radius: 10px; 18 | background-color: white; 19 | padding: 10px 20px; 20 | box-shadow: 0px 5px 10px rgba(120, 228, 247, 0.5); 21 | } 22 | .contenedor .sub-contenedor .contenido{ 23 | 24 | display: flex; 25 | gap: 10px; 26 | align-items: center; 27 | margin-bottom: 20px; 28 | flex: auto; 29 | } 30 | .contenedor .sub-contenedor .contenido .icon{ 31 | margin-right: 10px; 32 | } 33 | .contenedor .sub-contenedor .contenido .mensaje .title{ 34 | 35 | font-weight: bolder; 36 | 37 | } 38 | .contenedor .sub-contenedor .actions{ 39 | 40 | padding: 10px 0; 41 | display: flex; 42 | justify-content: end; 43 | gap: 10px; 44 | 45 | } 46 | .contenedor .sub-contenedor .actions button{ 47 | border: none; 48 | padding: 15px; 49 | min-width: 120px; 50 | border-radius: 5px; 51 | font-weight: bold; 52 | font-size: 14px; 53 | cursor: pointer; 54 | } 55 | .contenedor .sub-contenedor .actions .btn-descargar{ 56 | background-color: #029BE1; 57 | color: white; 58 | } 59 | .contenedor .sub-contenedor .actions .btn-descargar:hover{ 60 | background-color: #0280DE; 61 | 62 | } 63 | .contenedor .sub-contenedor .actions .btn-volver{ 64 | background-color: white; 65 | border: solid 1px #ccc; 66 | } 67 | .contenedor .sub-contenedor .actions .btn-volver:hover{ 68 | background-color: #eee; 69 | } 70 | @media (max-width:600px){ 71 | .contenedor .sub-contenedor{ 72 | width: 80%; 73 | } 74 | .contenedor .sub-contenedor .actions{ 75 | flex-direction: column; 76 | } 77 | 78 | } -------------------------------------------------------------------------------- /5 Card pokemons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card pokemon 8 | 9 | 10 | 11 | 12 |
13 |
14 | fondocard 17 |
18 |
19 | charizard 21 | 22 |
23 |

24 | charizard 25 | #26 26 |

27 |

28 | coleccionable 29 |

30 | 31 |
32 |
33 |
34 |

Poder

35 | fuego 37 |
38 |
39 |

Resistencia

40 | fuego 42 |
43 |
44 |

Bonus

45 | fuego 47 |
48 | 49 |
50 | 51 |
52 | 53 |
54 | 55 | -------------------------------------------------------------------------------- /3DCard/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --card-height:300px; 3 | --card-width: calc(var(--card-height)/1.5) ; 4 | } 5 | 6 | * { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | } 11 | 12 | body { 13 | width: 100vw; 14 | height: 100vh; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | background: #f9d772; 19 | } 20 | 21 | .card { 22 | width: var(--card-width); 23 | height: var(--card-height); 24 | position: relative; 25 | display: flex; 26 | justify-content: center; 27 | align-items: flex-end; 28 | padding: 0 36px; 29 | margin: 0 50px; 30 | perspective: 2500px; 31 | } 32 | .card:hover .wrapper { 33 | transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); 34 | } 35 | .card:hover .wrapper::before { 36 | opacity: 1; 37 | } 38 | .card:hover .wrapper::after { 39 | height: 120px; 40 | } 41 | .card:hover .character { 42 | opacity: 1; 43 | transform: translate3d(0%, -30%, 100%); 44 | } 45 | .card .wrapper { 46 | transition: all 0.5s; 47 | position: absolute; 48 | width: 100%; 49 | z-index: -1; 50 | } 51 | .card .wrapper::before { 52 | content: ""; 53 | opacity: 0; 54 | width: 100%; 55 | height: 80px; 56 | transition: all 0.5s; 57 | position: absolute; 58 | left: 0; 59 | top: 0; 60 | height: 100%; 61 | background-image: linear-gradient(to bottom, transparent 46%, rgba(12, 13, 19, 0.6) 68%, rgb(12, 13, 19) 97%); 62 | } 63 | .card .wrapper::after { 64 | content: ""; 65 | width: 100%; 66 | height: 80px; 67 | transition: all 0.5s; 68 | position: absolute; 69 | left: 0; 70 | bottom: 0; 71 | height: 100%; 72 | background-image: linear-gradient(to top, transparent 46%, rgba(12, 13, 19, 0.6) 68%, rgb(12, 13, 19) 97%); 73 | opacity: 0; 74 | } 75 | .card .wrapper .cover-image { 76 | width: 100%; 77 | height: 100%; 78 | -o-object-fit: cover; 79 | object-fit: cover; 80 | border-radius: 15px; 81 | } 82 | .card .character { 83 | height: 350px; 84 | position: absolute; 85 | z-index: -1; 86 | transition: all 0.5s; 87 | opacity: 0; 88 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /3DCard/style.scss: -------------------------------------------------------------------------------- 1 | :root{ 2 | --card-height:300px; 3 | --card-width: calc(var(--card-height)/1.5) 4 | } 5 | *{ 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | body{ 11 | width: 100vw; 12 | height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | background: #f9d772; 17 | } 18 | .card { 19 | width: var(--card-width); 20 | height: var(--card-height); 21 | position: relative; 22 | display: flex; 23 | justify-content: center; 24 | align-items: flex-end; 25 | padding: 0 36px; 26 | margin: 0 50px; 27 | perspective: 2500px; 28 | 29 | &:hover{ 30 | .wrapper{ 31 | transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); 32 | &::before{ 33 | opacity: 1; 34 | } 35 | &::after{ 36 | height: 120px; 37 | } 38 | } 39 | .character{ 40 | opacity: 1; 41 | transform: translate3d(0%,-30%,100%); 42 | } 43 | } 44 | .wrapper{ 45 | transition: all 0.5s; 46 | position: absolute; 47 | width: 100%; 48 | z-index: -1; 49 | 50 | &::before{ 51 | content: ""; 52 | opacity: 0; 53 | width: 100%; 54 | height: 80px; 55 | transition: all 0.5s; 56 | position: absolute; 57 | left: 0; 58 | top: 0; 59 | height: 100%; 60 | background-image: linear-gradient(to bottom,transparent 46%, rgba(12,13,19,0.6) 68%,rgba(12,13,19) 97%); 61 | 62 | 63 | } 64 | &::after{ 65 | content: ""; 66 | 67 | width: 100%; 68 | height: 80px; 69 | transition: all 0.5s; 70 | position: absolute; 71 | left: 0; 72 | bottom: 0; 73 | height: 100%; 74 | background-image: linear-gradient(to top,transparent 46%, rgba(12,13,19,0.6) 68%,rgba(12,13,19) 97%); 75 | opacity: 0; 76 | } 77 | .cover-image{ 78 | width: 100%; 79 | height: 100%; 80 | object-fit: cover; 81 | border-radius: 15px; 82 | } 83 | 84 | } 85 | .character{ 86 | height: 350px; 87 | position: absolute; 88 | z-index: -1; 89 | transition: all 0.5s; 90 | opacity: 0; 91 | } 92 | } -------------------------------------------------------------------------------- /5 Card pokemons/img/fondoTop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5 Card pokemons/img/fondoBotton.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------