├── README.md ├── index.html └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Apple cards 2 | 3 | Este proyecto de HTML y CSS tiene como objetivo recrear las cards desarrolladas por Apple para su Apple Store. 4 | 5 | - Página web de estudio: https://www.apple.com/es/store 6 | - San Francisco Font: https://developer.apple.com/fonts/ 7 | ## 📸 Screenshots 8 | 9 | ![33-readme-image_Mesa de trabajo 1](https://github.com/spacecoderdev/apple-store-cards/assets/146677344/2404a0e0-353f-4f27-97cd-e40955dd355b) 10 | 11 | 12 | ## ✍️ Author 13 | 14 | - [@spacecoderdev](https://www.github.com/spacecoderdev) 15 | 16 | 17 | ## 🔗 Links 18 | 19 | [![Instagram](https://img.shields.io/badge/instagram-BE02A5?style=for-the-badge&logo=instagram&logoColor=white)](https://www.instagram.com/spacecoder.dev/) 20 | [![TikTok](https://img.shields.io/badge/tiktok-000?style=for-the-badge&logo=tiktok&logoColor=white)](https://www.tiktok.com/@spacecoder.dev) 21 | [![Youtube](https://img.shields.io/badge/youtube-F70000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/@spacecoderdev) 22 | 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Apple Store Cards 7 | 8 | 9 | 10 | 11 |
12 | 13 |

Lo último. Hecha un vistazo
a las novedades.

14 | 15 |
16 | 17 |
18 | 19 |
20 |

IPHONE 15 PRO

21 | Titanio 22 |

Desde 50,79 €/mes al 0 % TAE1 o desde 1.219,00 € sin renovación

23 |
24 |
25 | 26 |
27 | 28 |
29 |

IPHONE 15 PRO

30 | Vente arriba 31 |

Desde 39,96 €/mes al 0 % TAE1 o desde 959 € sin renovación

32 |
33 |
34 | 35 | 43 | 44 |
45 | 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "San Francisco"; 3 | src: url("/Fonts/SF-Pro-Text-Light.otf"); 4 | font-weight: 300; 5 | } 6 | 7 | @font-face { 8 | font-family: "San Francisco"; 9 | src: url("/Fonts/SF-Pro-Display-Regular.otf"); 10 | font-weight: 400; 11 | } 12 | 13 | @font-face { 14 | font-family: "San Francisco"; 15 | src: url("/Fonts/SF-Pro-Text-Semibold.otf"); 16 | font-weight: 600; 17 | } 18 | 19 | @font-face { 20 | font-family: "San Francisco"; 21 | src: url("/Fonts/SF-Pro-Text-Bold.otf"); 22 | font-weight: 700; 23 | } 24 | 25 | * { 26 | margin: 0; 27 | padding: 0; 28 | } 29 | 30 | .title-context { 31 | font-size: 24px; 32 | font-weight: 600; 33 | line-height: 1.16667; 34 | margin: 4rem 0 0 1.5rem; 35 | font-family: "San Francisco"; 36 | } 37 | 38 | .title-context span { 39 | color: #6e6e73; 40 | } 41 | 42 | .container { 43 | display: flex; 44 | overflow-x: auto; /* Creamos un div scrollable de forma horizontal */ 45 | scrollbar-width: none; /* Escondemos la scrollbar en Firefox */ 46 | padding: 1.5rem 0; 47 | } 48 | 49 | .grid::-webkit-scrollbar { 50 | display: none; /* Escondemos la scrollbar en Chrome, Safari y Edge */ 51 | } 52 | 53 | .card { 54 | position: relative; /* Esta posición para poder posicionar el texto de la clase "body" */ 55 | flex: 0 0 309px; /* flex grow 0 para que todas ocupen el mismo espacio, flex-shrink 0 para que no se encojan y flex-basis 309px de ancho. */ 56 | height: 450px; 57 | overflow: hidden; /* Para poder ver el borde redondeado */ 58 | margin-left: 1.5rem; 59 | border-radius: 18px; 60 | box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08); 61 | } 62 | 63 | .image { 64 | width: 100%; 65 | } 66 | 67 | .body { 68 | position: absolute; 69 | top: 0; 70 | padding: 28px; 71 | font-family: "San Francisco"; 72 | font-weight: 600; 73 | } 74 | 75 | .title { 76 | font-size: 12px; 77 | margin-bottom: 1rem; 78 | } 79 | 80 | .link { 81 | font-size: 21px; 82 | } 83 | 84 | .text { 85 | font-size: 17px; 86 | font-weight: 300; 87 | } 88 | 89 | .black-text { 90 | color: black; 91 | } 92 | 93 | .white-text { 94 | color: white; 95 | } --------------------------------------------------------------------------------