├── .gitignore ├── 01. menu ├── index.html └── style.css ├── 02. tarjetas ├── index.html └── style.css ├── 03. tabla ├── index.html └── style.css ├── 04. notificacion ├── index.html └── style.css ├── 05. login ├── index.html └── style.css ├── 06. barra progreso ├── index.html └── style.css ├── 07. tabla precios ├── index.html └── style.css ├── 08. checkbox ├── index.html └── style.css ├── 09. barra busqueda ├── index.html └── style.css ├── 10. flip card ├── index.html ├── profile1.jpeg ├── profile2.jpeg ├── profile3.jpeg └── style.css ├── 11. thread ├── index.html ├── profile1.jpeg ├── profile2.jpeg ├── profile3.jpeg └── style.css ├── 12. stack de personas ├── index.html ├── profile1.jpeg ├── profile2.jpeg ├── profile3.jpeg ├── profile4.jpeg ├── profile5.jpeg └── style.css ├── 13. menu vertical ├── index.html ├── profile1.jpeg └── style.css ├── 14. burbujas chat ├── index.html └── style.css ├── 15. modal ├── check-svgrepo-com.svg ├── index.html └── style.css ├── 16. drag and drop ├── index.html ├── style.css ├── upload-icon.svg └── word icon.png ├── 17. historias ig ├── index.html ├── profile1.jpeg └── style.css ├── 18. slider ├── index.html └── style.css ├── 19. tarjeta info twitter ├── index.html ├── profile1.jpeg └── style.css └── 20. widget clima ├── cloudy.png ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /01. menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu responsivo 8 | 9 | 10 | 11 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /01. menu/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: Arial, Helvetica, sans-serif; 5 | } 6 | nav { 7 | background-color: black; 8 | color: white; 9 | width: 100%; 10 | } 11 | nav .mobile { 12 | display: none; 13 | } 14 | 15 | nav .logo { 16 | min-width: 250px; 17 | } 18 | 19 | nav a { 20 | color: white; 21 | text-decoration: none; 22 | display: block; 23 | padding: 20px 25px; 24 | } 25 | 26 | nav a:hover { 27 | color: black; 28 | background-color: rgb(0, 195, 255); 29 | } 30 | 31 | nav .desktop { 32 | display: flex; 33 | justify-content: space-between; 34 | align-items: center; 35 | padding: 0 20px; 36 | } 37 | 38 | nav .desktop .primary, 39 | nav .desktop .secondary { 40 | display: flex; 41 | } 42 | 43 | nav .secondary.full { 44 | } 45 | 46 | nav .secondary.mini { 47 | display: none; 48 | } 49 | 50 | @media screen and (max-width: 894px) { 51 | nav .logo { 52 | min-width: 100px; 53 | } 54 | 55 | nav .secondary.full { 56 | display: none; 57 | } 58 | 59 | nav .secondary.mini { 60 | display: block; 61 | } 62 | 63 | nav .secondary.mini .submenu { 64 | position: absolute; 65 | display: none; 66 | } 67 | } 68 | 69 | @media screen and (max-width: 516px) { 70 | nav .desktop { 71 | display: none; 72 | } 73 | 74 | nav .mobile { 75 | display: block; 76 | } 77 | 78 | nav .mobile .header { 79 | display: flex; 80 | flex-direction: row; 81 | align-items: center; 82 | justify-content: space-between; 83 | } 84 | 85 | nav .mobile .header .logo { 86 | flex: 1; 87 | text-align: center; 88 | } 89 | 90 | nav .mobile .header .more button { 91 | padding: 20px; 92 | cursor: pointer; 93 | background-color: transparent; 94 | border: none; 95 | color: white; 96 | font-size: 16px; 97 | } 98 | nav .mobile .header .more button:hover { 99 | background-color: white; 100 | color: black; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /02. tarjetas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tarjetas 8 | 9 | 10 | 11 |
12 |
13 |
14 |
24 de febrero de 2022
15 |
Como funcionan las cascade layers
16 |
17 |
18 |
19 | 20 | 21 | Marcos Rivas 22 | 23 |
24 |
25 |
26 | 27 |
28 |
29 |
24 de febrero de 2022
30 |
Como funcionan las cascade layers
31 |
32 |
33 |
34 | 35 | 36 | Marcos Rivas 37 | 38 |
39 |
40 |
41 | 42 |
43 |
44 |
24 de febrero de 2022
45 |
Como funcionan las cascade layers
46 |
47 |
48 |
49 | 50 | 51 | Marcos Rivas 52 | 53 |
54 |
55 |
56 | 57 |
58 |
59 |
24 de febrero de 2022
60 |
61 | Como funcionan las cascade layers 62 |
63 |
64 |
65 |
66 | 67 | 68 | Marcos Rivas 69 | 70 |
71 |
72 |
73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /02. tarjetas/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: Arial, Helvetica, sans-serif; 5 | } 6 | 7 | .cards { 8 | display: flex; 9 | width: 130%; 10 | padding: 50px; 11 | } 12 | 13 | .card { 14 | background: rgb(0, 114, 255); 15 | background: linear-gradient( 16 | 90deg, 17 | rgba(0, 114, 255, 1) 1%, 18 | rgba(33, 25, 173, 1) 100% 19 | ); 20 | color: white; 21 | width: 300px; 22 | height: 350px; 23 | border-radius: 10px; 24 | padding: 30px; 25 | box-sizing: border-box; 26 | position: relative; 27 | display: flex; 28 | flex-direction: column; 29 | 30 | box-shadow: -3px 0 10px rgba(0, 0, 0, 0.3), -4px 0 10px rgba(0, 0, 0, 0.2), 31 | -5px 0 10px rgba(0, 0, 0, 0.1); 32 | 33 | transition: all 0.3s ease; 34 | } 35 | 36 | .card a { 37 | color: yellow; 38 | text-decoration: none; 39 | font-weight: bold; 40 | } 41 | 42 | .card a:hover { 43 | color: lightyellow; 44 | } 45 | 46 | .card:hover { 47 | margin-right: 80px; 48 | transform: rotate(3deg) translateY(-15px); 49 | } 50 | 51 | .card .header { 52 | flex: 1; 53 | } 54 | 55 | .card .header .date { 56 | padding: 10px 0; 57 | } 58 | 59 | .card .header .title { 60 | font-size: 28px; 61 | } 62 | 63 | card[class*="element"] { 64 | margin-left: -100px; 65 | } 66 | 67 | .element-1:hover, 68 | .element-2:hover { 69 | margin-left: -130px; 70 | } 71 | -------------------------------------------------------------------------------- /03. tabla/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tabla 8 | 9 | 10 | 11 | 12 | 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 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |
13 | My first table 14 |
titulo 1titulo 2titulo 3titulo 3titulo 3titulo 3
Marcos RivasMéxico$3,500$6,50088.6716
Marcos RivasMéxico$3,500$6,50088.6716
Marcos RivasMéxico$3,500$6,50088.6716
Marcos RivasMéxico$3,500$6,50088.6716
Marcos RivasMéxico$3,500$6,50088.6716
asdasdasasdasdasasdasdasasdasdas
80 | 81 | 82 | -------------------------------------------------------------------------------- /03. tabla/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: Arial, Helvetica, sans-serif; 5 | } 6 | 7 | table { 8 | border-spacing: 0; 9 | border-collapse: collapse; 10 | width: 800px; 11 | margin: 100px auto; 12 | } 13 | 14 | td, 15 | th { 16 | border: solid 1px #ccc; 17 | padding: 5px; 18 | } 19 | tr:nth-child(even) { 20 | background-color: #ddd; 21 | } 22 | 23 | td:nth-child(3), 24 | th:nth-child(3) { 25 | text-align: right; 26 | } 27 | td:nth-child(4), 28 | th:nth-child(4) { 29 | text-align: center; 30 | } 31 | 32 | tbody tr:hover { 33 | background-color: rgb(160, 222, 255) !important; 34 | } 35 | 36 | thead { 37 | background-color: black; 38 | color: white; 39 | position: sticky; 40 | top: 0; 41 | } 42 | -------------------------------------------------------------------------------- /04. notificacion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Notificación 8 | 12 | 13 | 14 | 15 |
16 |
29
17 | notifications 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /04. notificacion/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: Arial, Helvetica, sans-serif; 5 | } 6 | 7 | .material-icons { 8 | font-family: "Material Icons"; 9 | font-weight: normal; 10 | font-style: normal; 11 | font-size: 48px; /* Preferred icon size */ 12 | display: inline-block; 13 | line-height: 1; 14 | text-transform: none; 15 | letter-spacing: normal; 16 | word-wrap: normal; 17 | white-space: nowrap; 18 | direction: ltr; 19 | 20 | /* Support for all WebKit browsers. */ 21 | -webkit-font-smoothing: antialiased; 22 | /* Support for Safari and Chrome. */ 23 | text-rendering: optimizeLegibility; 24 | 25 | /* Support for Firefox. */ 26 | -moz-osx-font-smoothing: grayscale; 27 | 28 | /* Support for IE. */ 29 | font-feature-settings: "liga"; 30 | } 31 | 32 | .notification { 33 | width: 48px; 34 | margin: 0 auto; 35 | 36 | animation: ring 4s 0.7s ease-in-out infinite; 37 | transform-origin: 50% 4px; 38 | } 39 | 40 | .notification .count { 41 | --size: 30px; 42 | 43 | font-size: 12px; 44 | font-weight: bold; 45 | background-color: red; 46 | border: solid 2px white; 47 | display: inline-flex; 48 | align-items: center; 49 | justify-content: center; 50 | width: var(--size); 51 | height: var(--size); 52 | max-width: var(--size); 53 | max-height: var(--size); 54 | box-sizing: border-box; 55 | border-radius: 50%; 56 | color: white; 57 | position: relative; 58 | top: 20px; 59 | left: -5px; 60 | } 61 | 62 | @keyframes ring { 63 | 0% { 64 | transform: rotate(0); 65 | } 66 | 1% { 67 | transform: rotate(30deg); 68 | } 69 | 3% { 70 | transform: rotate(-28deg); 71 | } 72 | 5% { 73 | transform: rotate(34deg); 74 | } 75 | 7% { 76 | transform: rotate(-32deg); 77 | } 78 | 9% { 79 | transform: rotate(30deg); 80 | } 81 | 11% { 82 | transform: rotate(-28deg); 83 | } 84 | 13% { 85 | transform: rotate(26deg); 86 | } 87 | 15% { 88 | transform: rotate(-24deg); 89 | } 90 | 17% { 91 | transform: rotate(22deg); 92 | } 93 | 19% { 94 | transform: rotate(-20deg); 95 | } 96 | 21% { 97 | transform: rotate(18deg); 98 | } 99 | 23% { 100 | transform: rotate(-16deg); 101 | } 102 | 25% { 103 | transform: rotate(14deg); 104 | } 105 | 27% { 106 | transform: rotate(-12deg); 107 | } 108 | 29% { 109 | transform: rotate(10deg); 110 | } 111 | 31% { 112 | transform: rotate(-8deg); 113 | } 114 | 33% { 115 | transform: rotate(6deg); 116 | } 117 | 35% { 118 | transform: rotate(-4deg); 119 | } 120 | 37% { 121 | transform: rotate(2deg); 122 | } 123 | 39% { 124 | transform: rotate(-1deg); 125 | } 126 | 41% { 127 | transform: rotate(1deg); 128 | } 129 | 130 | 43% { 131 | transform: rotate(0); 132 | } 133 | 100% { 134 | transform: rotate(0); 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /05. login/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Notificación 8 | 12 | 13 | 14 | 15 |
16 |
17 |

Welcome

18 |

adadasd

19 | 20 |
21 |

22 | 23 | 24 |

25 | 26 |

27 | 28 | 29 |

30 | 31 |
32 |
33 | Remember me 34 |
35 |
36 | Olvide mi password 37 |
38 |
39 | 40 |

41 | 42 |

43 |
44 | Otros métodos para hacer login 45 | 46 | 47 | 48 |
49 |
50 |
51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /05. login/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: Arial, Helvetica, sans-serif; 5 | 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | background-color: blueviolet; 10 | 11 | height: 100vh; 12 | } 13 | 14 | .material-icons { 15 | font-family: "Material Icons"; 16 | font-weight: normal; 17 | font-style: normal; 18 | font-size: 48px; /* Preferred icon size */ 19 | display: inline-block; 20 | line-height: 1; 21 | text-transform: none; 22 | letter-spacing: normal; 23 | word-wrap: normal; 24 | white-space: nowrap; 25 | direction: ltr; 26 | 27 | /* Support for all WebKit browsers. */ 28 | -webkit-font-smoothing: antialiased; 29 | /* Support for Safari and Chrome. */ 30 | text-rendering: optimizeLegibility; 31 | 32 | /* Support for Firefox. */ 33 | -moz-osx-font-smoothing: grayscale; 34 | 35 | /* Support for IE. */ 36 | font-feature-settings: "liga"; 37 | } 38 | 39 | .form-container { 40 | background-color: white; 41 | width: 80%; 42 | border-radius: 5px; 43 | overflow: hidden; 44 | height: 90vh; 45 | 46 | display: flex; 47 | align-items: center; 48 | } 49 | 50 | .form-container .login-container { 51 | width: 500px; 52 | margin: 0 auto; 53 | } 54 | .form-container .login-container > h2 { 55 | text-align: center; 56 | font-size: 2.5rem; 57 | } 58 | 59 | .form-container .login-container > p, 60 | .form-container .login-container span { 61 | color: #555; 62 | text-align: center; 63 | } 64 | 65 | .form-container .login-container label { 66 | display: block; 67 | font-weight: bold; 68 | padding: 5px 0; 69 | } 70 | 71 | .form-container .login-container input.input { 72 | display: block; 73 | box-sizing: border-box; 74 | padding: 10px; 75 | border: solid 1px #ccc; 76 | width: 100%; 77 | border-radius: 5px; 78 | } 79 | 80 | .form-container .login-container input.input:focus { 81 | outline: solid 1px rgb(0, 153, 255); 82 | } 83 | .form-container .login-container .providers { 84 | display: flex; 85 | flex-direction: column; 86 | gap: 10px; 87 | text-align: center; 88 | margin-top: 30px; 89 | } 90 | .form-container .login-container button.btn, 91 | .form-container .login-container input.btn { 92 | border: none; 93 | padding: 15px 0; 94 | width: 100%; 95 | font-weight: bolder; 96 | display: block; 97 | border-radius: 5px; 98 | text-transform: uppercase; 99 | cursor: pointer; 100 | } 101 | 102 | .form-container .login-container input.btn.btn-login { 103 | background-color: black; 104 | color: white; 105 | } 106 | .form-container .login-container button.btn.google-provider { 107 | background-color: white; 108 | color: black; 109 | border: solid 1px #ccc; 110 | } 111 | 112 | .form-container .login-container button.btn.facebook-provider { 113 | background-color: rgb(10, 82, 216); 114 | color: white; 115 | border: 0; 116 | } 117 | .form-container .login-container button.btn.twitter-provider { 118 | background-color: rgb(10, 168, 216); 119 | color: white; 120 | border: 0; 121 | } 122 | 123 | .form-container .login-container button.btn.google-provider:hover { 124 | background-color: rgb(212, 212, 212); 125 | color: black; 126 | } 127 | 128 | .form-container .login-container button.btn.facebook-provider:hover { 129 | background-color: rgb(6, 61, 163); 130 | color: white; 131 | } 132 | .form-container .login-container button.btn.twitter-provider:hover { 133 | background-color: rgb(7, 133, 172); 134 | color: white; 135 | } 136 | 137 | .form-container .login-container .options { 138 | display: flex; 139 | justify-content: space-between; 140 | } 141 | 142 | .form-container .welcome-screen-container { 143 | background-color: black; 144 | height: 100%; 145 | width: 50%; 146 | } 147 | 148 | @media screen and (max-width: 1357px) { 149 | .form-container { 150 | width: 95%; 151 | } 152 | .form-container .login-container { 153 | width: 400px; 154 | margin: 0 auto; 155 | } 156 | 157 | .form-container .welcome-screen-container { 158 | width: 40%; 159 | } 160 | } 161 | @media screen and (max-width: 900px) { 162 | .form-container .login-container { 163 | width: 400px; 164 | margin: 0 auto; 165 | } 166 | 167 | .form-container .welcome-screen-container { 168 | width: 0%; 169 | } 170 | } 171 | -------------------------------------------------------------------------------- /06. barra progreso/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Barra de progreso 8 | 9 | 10 | 11 |
12 |
13 |
50%
14 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /06. barra progreso/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | background-color: blueviolet; 4 | } 5 | .progressbar-container { 6 | width: 200px; 7 | height: 200px; 8 | margin: 100px auto; 9 | } 10 | 11 | .progressbar-container .outer-box { 12 | background-color: white; 13 | width: 200px; 14 | height: 200px; 15 | border-radius: 50%; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | } 20 | 21 | .progressbar-container .inner-box { 22 | background-color: white; 23 | font-size: 24px; 24 | width: 160px; 25 | height: 160px; 26 | border-radius: 50%; 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | } 31 | 32 | svg { 33 | position: absolute; 34 | } 35 | 36 | circle { 37 | fill: none; 38 | stroke: url(#GradientColor); 39 | stroke-width: 20px; 40 | stroke-dasharray: 472; 41 | stroke-dashoffset: 472; 42 | 43 | animation: loading 2s linear forwards; 44 | } 45 | 46 | @keyframes loading { 47 | 100% { 48 | stroke-dashoffset: 0; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /07. tabla precios/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tabla de precios 8 | 12 | 13 | 14 | 15 |
16 |
17 |
Startup Plan
18 |
19 | $ 20 | 69 21 | /mo 22 |
23 |
24 |
    25 |
  • 26 | check_circle Easy access 28 |
    • 29 |
  • 30 | check_circle Easy access 32 |
    • 33 |
  • 34 | check_circle Easy access 36 |
    • 37 |
  • 38 | check_circle Easy access 40 |
    • 41 |
  • 42 | check_circle Easy access 44 |
    • 45 |
46 |
47 |
48 | Try for free 49 |
50 |
51 | 52 |
53 |
Pro Agent
54 |
55 | $ 56 | 69 57 | /mo 58 |
59 |
60 |
    61 |
  • Billed anually
    • 62 |
  • Billed anually
    • 63 |
  • Billed anually
    • 64 |
  • Billed anually
    • 65 |
66 |
67 |
68 | Try for free 69 |
70 |
71 | 72 |
73 |
Enterprise
74 |
75 | $ 76 | 69 77 | /mo 78 |
79 |
80 |
    81 |
  • Billed anually
    • 82 |
  • Billed anually
    • 83 |
84 |
85 |
86 | Try for free 87 |
88 |
89 |
90 | 91 | 92 | -------------------------------------------------------------------------------- /07. tabla precios/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | background-color: darkblue; 5 | font-family: Arial, Helvetica, sans-serif; 6 | } 7 | 8 | .material-icons { 9 | font-family: "Material Icons"; 10 | font-weight: normal; 11 | font-style: normal; 12 | font-size: 24px; /* Preferred icon size */ 13 | display: inline-block; 14 | line-height: 1; 15 | text-transform: none; 16 | letter-spacing: normal; 17 | word-wrap: normal; 18 | white-space: nowrap; 19 | direction: ltr; 20 | 21 | /* Support for all WebKit browsers. */ 22 | -webkit-font-smoothing: antialiased; 23 | /* Support for Safari and Chrome. */ 24 | text-rendering: optimizeLegibility; 25 | 26 | /* Support for Firefox. */ 27 | -moz-osx-font-smoothing: grayscale; 28 | 29 | /* Support for IE. */ 30 | font-feature-settings: "liga"; 31 | } 32 | 33 | .price-table-container { 34 | width: 900px; 35 | display: flex; 36 | align-items: center; 37 | margin: 100px auto; 38 | } 39 | 40 | .price-table-container .table { 41 | width: 300px; 42 | height: 442px; 43 | padding: 30px 30px; 44 | box-sizing: border-box; 45 | position: relative; 46 | z-index: 100; 47 | background-color: white; 48 | display: flex; 49 | flex-direction: column; 50 | gap: 10px; 51 | } 52 | .price-table-container .table:first-child { 53 | border-radius: 10px 0 0 10px; 54 | } 55 | .price-table-container .table:last-child { 56 | border-radius: 0 10px 10px 0; 57 | } 58 | 59 | .price-table-container .table.recommended { 60 | height: 500px; 61 | border-radius: 10px; 62 | padding: 50px 30px 60px 30px; 63 | z-index: 200; 64 | 65 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 66 | } 67 | 68 | .price-table-container .table .title { 69 | font-weight: bold; 70 | text-align: center; 71 | font-size: 20px; 72 | } 73 | .price-table-container .table .price { 74 | display: flex; 75 | justify-content: center; 76 | align-items: center; 77 | gap: 2px; 78 | } 79 | .price-table-container .table .price .currency { 80 | font-size: 25px; 81 | } 82 | .price-table-container .table .price .number { 83 | font-size: 60px; 84 | font-weight: bold; 85 | } 86 | .price-table-container .table .price .frequency { 87 | color: #999; 88 | } 89 | .price-table-container .table .features { 90 | flex: 1; 91 | text-align: left; 92 | height: 240px; 93 | padding: 20px 0; 94 | } 95 | 96 | .price-table-container .table .features ul { 97 | list-style: none; 98 | padding: 0; 99 | margin: 0; 100 | display: flex; 101 | flex-direction: column; 102 | gap: 10px; 103 | } 104 | .price-table-container .table .features ul li { 105 | display: flex; 106 | align-items: center; 107 | gap: 5px; 108 | } 109 | .price-table-container .table .features ul li span.check_circle { 110 | color: rgb(39, 196, 143); 111 | } 112 | .price-table-container .table .actions .btn { 113 | display: block; 114 | text-align: center; 115 | padding: 20px 0; 116 | border: solid 1px #999; 117 | color: #999; 118 | text-decoration: none; 119 | border-radius: 3px; 120 | font-weight: bold; 121 | text-transform: uppercase; 122 | } 123 | .price-table-container .table .actions .btn:hover { 124 | } 125 | 126 | .price-table-container .table .actions .btn.recommended { 127 | background-color: #0051ff; 128 | color: white; 129 | border: solid 1px #0051ff; 130 | } 131 | -------------------------------------------------------------------------------- /08. checkbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tabla de precios 8 | 12 | 13 | 14 | 15 | 22 | 23 | 30 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /08. checkbox/style.css: -------------------------------------------------------------------------------- 1 | .checkbox-container { 2 | display: block; 3 | position: relative; 4 | padding-left: 35px; 5 | margin-bottom: 12px; 6 | cursor: pointer; 7 | font-size: 22px; 8 | -webkit-user-select: none; 9 | -moz-user-select: none; 10 | -ms-user-select: none; 11 | user-select: none; 12 | } 13 | 14 | /* Hide the browser's default checkbox */ 15 | .checkbox-container input { 16 | position: absolute; 17 | opacity: 0; 18 | cursor: pointer; 19 | height: 0; 20 | width: 0; 21 | } 22 | 23 | /* Create a custom checkbox */ 24 | .checkmark { 25 | position: absolute; 26 | border-radius: 3px; 27 | top: 0; 28 | left: 0; 29 | height: 25px; 30 | width: 25px; 31 | background-color: #eee; 32 | transition: all 0.3s ease-in-out; 33 | } 34 | .checkmark.radio { 35 | position: absolute; 36 | border-radius: 50%; 37 | top: 0; 38 | left: 0; 39 | height: 25px; 40 | width: 25px; 41 | background-color: #eee; 42 | transition: all 0.3s ease-in-out; 43 | display: flex; 44 | align-items: center; 45 | justify-content: center; 46 | } 47 | 48 | .checkmark .material-icons { 49 | color: white; 50 | transform: scale(0); 51 | transition: all 0.3s ease-in-out; 52 | } 53 | 54 | /* On mouse-over, add a grey background color */ 55 | .checkbox-container:hover input ~ .checkmark { 56 | background-color: #ccc; 57 | } 58 | 59 | /* When the checkbox is checked, add a blue background */ 60 | .checkbox-container input:checked ~ .checkmark { 61 | background-color: #2196f3; 62 | } 63 | 64 | .checkbox-container input:checked ~ .checkmark .material-icons { 65 | transform: scale(1); 66 | } 67 | 68 | .checkbox-container input:checked ~ .checkmark.radio .circle { 69 | position: absolute; 70 | border-radius: 50%; 71 | top: 6px; 72 | left: 7px; 73 | height: 12px; 74 | width: 12px; 75 | background-color: #eee; 76 | transition: all 0.3s ease-in-out; 77 | } 78 | 79 | /* Create the checkmark/indicator (hidden when not checked) */ 80 | .checkmark:after { 81 | content: ""; 82 | position: absolute; 83 | display: none; 84 | } 85 | 86 | /* Show the checkmark when checked 87 | .checkbox-container input:checked ~ .checkmark:after { 88 | display: block; 89 | } 90 | 91 | /* Style the checkmark/indicator 92 | .checkbox-container .checkmark:after { 93 | left: 9px; 94 | top: 5px; 95 | width: 5px; 96 | height: 10px; 97 | border: solid white; 98 | border-width: 0 3px 3px 0; 99 | -webkit-transform: rotate(45deg); 100 | -ms-transform: rotate(45deg); 101 | transform: rotate(45deg); 102 | } 103 | */ 104 | -------------------------------------------------------------------------------- /09. barra busqueda/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Barra de búsqueda 8 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /09. barra busqueda/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | 5 | .material-icons { 6 | font-family: "Material Icons"; 7 | font-weight: normal; 8 | font-style: normal; 9 | font-size: 24px; /* Preferred icon size */ 10 | display: inline-block; 11 | line-height: 1; 12 | text-transform: none; 13 | letter-spacing: normal; 14 | word-wrap: normal; 15 | white-space: nowrap; 16 | direction: ltr; 17 | 18 | /* Support for all WebKit browsers. */ 19 | -webkit-font-smoothing: antialiased; 20 | /* Support for Safari and Chrome. */ 21 | text-rendering: optimizeLegibility; 22 | 23 | /* Support for Firefox. */ 24 | -moz-osx-font-smoothing: grayscale; 25 | 26 | /* Support for IE. */ 27 | font-feature-settings: "liga"; 28 | } 29 | 30 | .search-bar { 31 | border: solid 1px #ccc; 32 | border-radius: 30px; 33 | 34 | display: flex; 35 | flex-direction: row; 36 | align-items: center; 37 | 38 | padding: 5px 10px; 39 | 40 | width: 700px; 41 | margin: 100px auto; 42 | } 43 | .search-bar:focus-within { 44 | border: solid 1px #aaa; 45 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 46 | } 47 | 48 | .search-bar input[type="text"] { 49 | border: none; 50 | outline: none; 51 | flex: 1; 52 | padding: 10px; 53 | font-size: 18px; 54 | } 55 | 56 | .search-bar .actions { 57 | display: flex; 58 | gap: 5px; 59 | } 60 | 61 | .search-bar .actions button { 62 | border: none; 63 | outline: none; 64 | background: none; 65 | cursor: pointer; 66 | color: #999; 67 | } 68 | 69 | .search-bar .actions button:hover { 70 | color: #2979e2; 71 | } 72 | -------------------------------------------------------------------------------- /10. flip card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flip card 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | Avatar 20 |
21 |
22 |

John Doe

23 |

Architect & Engineer

24 |

We love that guy

25 |
26 |
27 |
28 |
29 |
30 |
31 | Avatar 36 |
37 |
38 |

John Doe

39 |

Architect & Engineer

40 |

We love that guy

41 |
42 |
43 |
44 |
45 |
46 |
47 | Avatar 52 |
53 |
54 |

John Doe

55 |

Architect & Engineer

56 |

We love that guy

57 |
58 |
59 |
60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /10. flip card/profile1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/10. flip card/profile1.jpeg -------------------------------------------------------------------------------- /10. flip card/profile2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/10. flip card/profile2.jpeg -------------------------------------------------------------------------------- /10. flip card/profile3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/10. flip card/profile3.jpeg -------------------------------------------------------------------------------- /10. flip card/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | 5 | .cards { 6 | display: flex; 7 | } 8 | 9 | .flip-card { 10 | background-color: transparent; 11 | width: 300px; 12 | height: 300px; 13 | border: 1px solid #f1f1f1; 14 | perspective: 1000px; /* Remove this if you don't want the 3D effect */ 15 | } 16 | 17 | /* This container is needed to position the front and back side */ 18 | .flip-card-inner { 19 | position: relative; 20 | width: 100%; 21 | height: 100%; 22 | text-align: center; 23 | transition: transform 0.8s; 24 | transform-style: preserve-3d; 25 | } 26 | 27 | /* Do an horizontal flip when you move the mouse over the flip box container */ 28 | .flip-card:hover .flip-card-inner { 29 | transform: rotateY(180deg); 30 | } 31 | 32 | /* Position the front and back side */ 33 | .flip-card-front, 34 | .flip-card-back { 35 | position: absolute; 36 | width: 100%; 37 | height: 100%; 38 | -webkit-backface-visibility: hidden; /* Safari */ 39 | backface-visibility: hidden; 40 | } 41 | 42 | /* Style the front side (fallback if image is missing) */ 43 | .flip-card-front { 44 | background-color: #bbb; 45 | color: black; 46 | } 47 | 48 | /* Style the back side */ 49 | .flip-card-back { 50 | background-color: dodgerblue; 51 | color: white; 52 | transform: rotateY(180deg); 53 | } 54 | -------------------------------------------------------------------------------- /11. thread/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Thread 8 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 | 21 |
22 |
23 |
24 | @vidamrr 25 | 5hrs ago 26 |
27 |
Este es un comentario
28 |
29 | 30 | 31 | 32 | 33 | 34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 | @vidamrr 48 | 5hrs ago 49 |
50 |
Este es un comentario
51 |
52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 |
60 |
61 |
62 | 63 |
64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 |
72 | @vidamrr 73 | 5hrs ago 74 |
75 |
Este es un comentario
76 |
77 | 78 | 79 | 80 | 81 | 82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 | 91 |
92 |
93 |
94 |
95 | 96 |
97 |
98 |
99 | @vidamrr 100 | 5hrs ago 101 |
102 |
Este es un comentario
103 |
104 | 105 | 106 | 107 | 108 | 109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 |
122 | @vidamrr 123 | 5hrs ago 124 |
125 |
Este es un comentario
126 |
127 | 128 | 129 | 130 | 131 | 132 |
133 |
134 |
135 |
136 |
137 | 138 |
139 |
140 |
141 |
142 |
143 | 144 |
145 |
146 |
147 | @vidamrr 148 | 5hrs ago 149 |
150 |
Este es un comentario
151 |
152 | 153 | 154 | 155 | 156 | 157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 | 167 | 168 | -------------------------------------------------------------------------------- /11. thread/profile1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/11. thread/profile1.jpeg -------------------------------------------------------------------------------- /11. thread/profile2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/11. thread/profile2.jpeg -------------------------------------------------------------------------------- /11. thread/profile3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/11. thread/profile3.jpeg -------------------------------------------------------------------------------- /11. thread/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | background-color: rgb(30, 30, 52); 4 | } 5 | 6 | .comments-container { 7 | width: 800px; 8 | margin: 0 auto; 9 | } 10 | .comments-container > .comment { 11 | margin-bottom: 10px; 12 | } 13 | .comment { 14 | display: flex; 15 | width: 100%; 16 | color: white; 17 | } 18 | 19 | .comment .line { 20 | position: relative; 21 | width: 10px; 22 | height: 50%; 23 | border-left: solid 1px #558bff; 24 | border-bottom: solid 1px #558bff; 25 | border-radius: 0 0 0 8px; 26 | } 27 | .comment .comment-wrapper .comment-content { 28 | width: 100%; 29 | } 30 | .comment .comment-wrapper .replies { 31 | padding-top: 10px; 32 | position: relative; 33 | padding-left: 35px; 34 | display: flex; 35 | flex-direction: column; 36 | gap: 10px; 37 | } 38 | .comment .comment-wrapper .replies::before { 39 | content: ""; 40 | position: absolute; 41 | background-color: #558bff; 42 | width: 1px; 43 | top: 0; 44 | height: calc(100% - 53px); 45 | } 46 | .comment .comment-wrapper { 47 | width: 100%; 48 | display: flex; 49 | flex-direction: column; 50 | } 51 | 52 | .comment .comment-wrapper .content { 53 | display: flex; 54 | border: solid 1px #558bff; 55 | padding: 10px; 56 | border-radius: 3px; 57 | background-color: rgb(24, 43, 80); 58 | } 59 | 60 | .comment .comment-wrapper .content img { 61 | border-radius: 50%; 62 | width: 50px; 63 | padding-right: 10px; 64 | } 65 | 66 | .comment .comment-wrapper .content .comment-info { 67 | display: flex; 68 | flex-direction: column; 69 | gap: 5px; 70 | } 71 | 72 | .comment .comment-wrapper .content .comment-info .header .username { 73 | font-weight: bold; 74 | } 75 | .comment .comment-wrapper .content .comment-info .header .date { 76 | color: #999; 77 | } 78 | 79 | .comment .comment-wrapper .content .comment-info .actions { 80 | display: flex; 81 | gap: 5px; 82 | } 83 | 84 | .comment .comment-wrapper .content .comment-info .actions button { 85 | border: none; 86 | background-color: transparent; 87 | color: #558bff; 88 | cursor: pointer; 89 | padding: 5px; 90 | border-radius: 3px; 91 | } 92 | .comment .comment-wrapper .content .comment-info .actions button:hover { 93 | color: white; 94 | background-color: #558bff; 95 | } 96 | -------------------------------------------------------------------------------- /12. stack de personas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Thread 8 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 19 | Marcos Rivas 20 | 21 |
22 |
23 | 24 | 25 | Max Liu 26 | 27 |
28 |
29 | 30 | 31 | Sandra Hellsviwochky 32 | 33 |
34 |
35 | 36 | 37 | José de la Cruz 38 | 39 |
40 |
41 | 42 | 43 | Leonardo Mosqueda Sall 44 | 45 |
46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /12. stack de personas/profile1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/12. stack de personas/profile1.jpeg -------------------------------------------------------------------------------- /12. stack de personas/profile2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/12. stack de personas/profile2.jpeg -------------------------------------------------------------------------------- /12. stack de personas/profile3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/12. stack de personas/profile3.jpeg -------------------------------------------------------------------------------- /12. stack de personas/profile4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/12. stack de personas/profile4.jpeg -------------------------------------------------------------------------------- /12. stack de personas/profile5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/12. stack de personas/profile5.jpeg -------------------------------------------------------------------------------- /12. stack de personas/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | background-color: white; 4 | } 5 | 6 | .personas-container { 7 | margin: 100px auto; 8 | width: 500px; 9 | display: flex; 10 | } 11 | .personas-container .persona { 12 | position: relative; 13 | margin-right: -20px; 14 | display: inline-flex; 15 | flex-direction: column; 16 | } 17 | .personas-container .persona img { 18 | width: 50px; 19 | height: 50px; 20 | border-radius: 50%; 21 | border: solid 2px white; 22 | 23 | transition: transform 0.3s ease-in-out; 24 | } 25 | 26 | .personas-container .persona .name { 27 | position: absolute; 28 | background-color: black; 29 | border-radius: 5px; 30 | color: white; 31 | display: none; 32 | min-width: 100px; 33 | width: 150px; 34 | top: -55px; 35 | left: calc(-50% - 30px); 36 | padding: 10px 15px; 37 | } 38 | 39 | .personas-container .persona .name .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 | 50 | .personas-container .persona .name::before { 51 | content: ""; 52 | position: absolute; 53 | width: 1px; 54 | height: 1px; 55 | left: 40%; 56 | bottom: -20px; 57 | border-top: solid 10px black; 58 | border-left: solid 10px transparent; 59 | border-right: solid 10px transparent; 60 | border-bottom: solid 10px transparent; 61 | } 62 | .personas-container .persona:hover .name { 63 | display: inline-block; 64 | } 65 | -------------------------------------------------------------------------------- /13. menu vertical/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Thread 8 | 12 | 13 | 14 | 15 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /13. menu vertical/profile1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/13. menu vertical/profile1.jpeg -------------------------------------------------------------------------------- /13. menu vertical/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | background-color: white; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | nav { 9 | position: absolute; 10 | height: 100vh; 11 | display: flex; 12 | flex-direction: column; 13 | width: 52px; 14 | background-color: #222; 15 | overflow: hidden; 16 | 17 | transition: width 0.3s; 18 | } 19 | nav:hover { 20 | width: 400px; 21 | } 22 | 23 | nav .bar { 24 | background-color: black; 25 | color: white; 26 | display: flex; 27 | justify-content: end; 28 | } 29 | 30 | nav .user { 31 | color: white; 32 | text-align: center; 33 | padding: 20px 0; 34 | font-size: 30px; 35 | height: 180px; 36 | transform: translateX(-300px); 37 | opacity: 0; 38 | transition: transform 0.2s ease, opacity 0.2s ease; 39 | } 40 | nav:hover .user { 41 | transform: translateX(0); 42 | opacity: 1; 43 | } 44 | 45 | nav .user img { 46 | width: 100px; 47 | margin: 0 auto; 48 | border-radius: 50%; 49 | } 50 | 51 | nav .links { 52 | } 53 | 54 | nav .links a { 55 | color: white; 56 | text-decoration: none; 57 | display: flex; 58 | gap: 10px; 59 | align-items: center; 60 | width: 400px; 61 | overflow: hidden; 62 | } 63 | nav .links a:hover { 64 | background-color: rgb(31, 135, 205); 65 | color: white; 66 | } 67 | 68 | nav .links a .icon { 69 | padding: 10px; 70 | display: flex; 71 | align-items: center; 72 | justify-content: center; 73 | } 74 | -------------------------------------------------------------------------------- /14. burbujas chat/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Burbujas chat 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | Hola, soy una burbuja 17 |
3 min ago
18 |
19 |
20 |
21 | 22 |
23 |
24 |
25 | Hola, soy una burbuja 26 |
3 min ago
27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 | Hola, soy una burbuja 35 |
3 min ago
36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 |
44 |
45 | Ho 46 |
3 min ago
47 |
48 |
49 |
50 | 51 |
52 |
53 |
54 | Hola, soy una burbuja asda das dads sada sdas d 55 |
3 min ago
56 |
57 |
58 |
59 |
60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /14. burbujas chat/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | 5 | .chat-container { 6 | width: 700px; 7 | margin: 0 auto; 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: end; 11 | height: 100vh; 12 | background-color: #233f52; 13 | box-sizing: border-box; 14 | gap: 10px; 15 | padding: 30px; 16 | } 17 | .chat-container .bubble-container { 18 | display: flex; 19 | flex-direction: column; 20 | gap: 5px; 21 | } 22 | .chat-container .bubble-container.left { 23 | width: 50%; 24 | margin-right: auto; 25 | } 26 | .chat-container .bubble-container.right { 27 | width: 50%; 28 | margin-left: auto; 29 | align-items: flex-end; 30 | } 31 | 32 | .chat-container 33 | .bubble-container.left 34 | .bubble:nth-child(1) 35 | .bubble-text 36 | > div::before { 37 | content: ""; 38 | position: absolute; 39 | width: 1px; 40 | height: 1px; 41 | border-right: solid 5px #202c33; 42 | border-top: solid 5px #202c33; 43 | border-left: solid 5px transparent; 44 | border-bottom: solid 5px transparent; 45 | left: -9px; 46 | top: 0; 47 | } 48 | .chat-container 49 | .bubble-container.right 50 | .bubble:nth-child(1) 51 | .bubble-text 52 | > div::before { 53 | content: ""; 54 | position: absolute; 55 | width: 1px; 56 | height: 1px; 57 | border-left: solid 5px #005c4b; 58 | border-top: solid 5px #005c4b; 59 | border-right: solid 5px transparent; 60 | border-bottom: solid 5px transparent; 61 | right: -8px; 62 | top: 0; 63 | } 64 | .chat-container .bubble-container .bubble .bubble-text { 65 | color: white; 66 | } 67 | 68 | .chat-container .bubble-container.right .bubble .bubble-text > div { 69 | position: relative; 70 | background-color: #005c4b; 71 | } 72 | 73 | .chat-container .bubble-container.left .bubble .bubble-text > div { 74 | position: relative; 75 | background-color: #202c33; 76 | } 77 | 78 | .chat-container .bubble-container .bubble .bubble-text > div { 79 | padding: 8px; 80 | border-radius: 5px; 81 | display: flex; 82 | align-items: flex-end; 83 | justify-content: space-between; 84 | } 85 | .chat-container .bubble-container .bubble .bubble-text .bubble-info { 86 | font-size: 12px; 87 | color: rgba(255, 255, 255, 0.7); 88 | padding: 5px 10px; 89 | text-align: right; 90 | width: 80px; 91 | } 92 | -------------------------------------------------------------------------------- /15. modal/check-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | 13 | 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 | -------------------------------------------------------------------------------- /15. modal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modal 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 |
17 |
18 |
19 |

Creación de un nuevo elemento

20 |
21 |
Deseas confirmar los cambios?
22 |
23 |
24 |
25 | 26 | 27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /15. modal/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | .modal-container { 8 | background-color: rgba(14, 41, 75, 0.4); 9 | position: fixed; 10 | width: 100%; 11 | height: 100vh; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | .modal-container .modal { 18 | width: 600px; 19 | border-radius: 10px; 20 | background-color: white; 21 | padding: 10px 20px; 22 | box-sizing: border-box; 23 | 24 | box-shadow: 0px 5px 10px rgba(63, 63, 63, 0.5); 25 | } 26 | 27 | .modal-container .modal .title-bar { 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | } 32 | 33 | .modal-container .modal .title-bar .title { 34 | font-weight: bolder; 35 | flex: 1; 36 | } 37 | 38 | .modal-container .modal .title-bar .action { 39 | } 40 | .modal-container .modal .title-bar .action button { 41 | border: none; 42 | background-color: transparent; 43 | padding: 10px; 44 | } 45 | 46 | .modal-container .modal .content { 47 | display: flex; 48 | gap: 10px; 49 | align-items: center; 50 | flex: 1; 51 | margin-bottom: 20px; 52 | } 53 | .modal-container .modal .content .icon { 54 | margin-right: 10px; 55 | } 56 | .modal-container .modal .content .message .text { 57 | color: #222; 58 | font-size: 14px; 59 | } 60 | .modal-container .modal .content .title { 61 | font-weight: bolder; 62 | } 63 | .modal-container .modal .actions { 64 | padding: 10px 0; 65 | display: flex; 66 | justify-content: end; 67 | gap: 10px; 68 | } 69 | .modal-container .modal .actions button[class*="btn"] { 70 | border: none; 71 | padding: 15px; 72 | min-width: 120px; 73 | border-radius: 5px; 74 | font-weight: bold; 75 | font-size: 14px; 76 | cursor: pointer; 77 | } 78 | .modal-container .modal .actions .btn-confirm { 79 | background-color: #0684c4; 80 | color: white; 81 | } 82 | .modal-container .modal .actions .btn-confirm:hover { 83 | background-color: #056797; 84 | color: white; 85 | } 86 | .modal-container .modal .actions .btn-cancel { 87 | background-color: white; 88 | border: solid 1px #ccc !important; 89 | color: black; 90 | } 91 | .modal-container .modal .actions .btn-cancel:hover { 92 | background-color: #eee; 93 | } 94 | 95 | @media screen and (max-width: 600px) { 96 | .modal-container .modal { 97 | width: 90%; 98 | margin-bottom: 100px; 99 | } 100 | 101 | .modal-container .modal .actions { 102 | flex-direction: column; 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /16. drag and drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drag and Drop 8 | 9 | 10 | 11 |
12 |
UPLOAD FILES
13 |
14 | Upload the files you want to share with your team 15 |
16 |
17 |
18 | 25 | 26 | 29 | 30 |
31 |
Drag and Drop the files here
Or
32 | 33 |
34 | 35 |
UPLOADED FILES
36 |
37 |
38 |
39 | 40 |
41 |
42 | Portfolio in english.pdf 43 |
44 |
45 |
46 |
47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 | 55 |
56 |
57 | Portfolio in english.pdf 58 |
60 Kb
59 |
60 |
61 | 62 |
63 |
64 |
65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /16. drag and drop/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | } 3 | body { 4 | font-family: Arial, Helvetica, sans-serif; 5 | background-color: rgb(44, 103, 179); 6 | } 7 | 8 | .upload-container { 9 | margin: 100px auto; 10 | width: 500px; 11 | text-align: center; 12 | background-color: white; 13 | border-radius: 5px; 14 | padding: 50px 30px; 15 | box-sizing: border-box; 16 | } 17 | 18 | .upload-container > .title { 19 | font-size: 20px; 20 | font-weight: bold; 21 | margin-bottom: 20px; 22 | } 23 | 24 | .upload-container .description { 25 | } 26 | 27 | .upload-container .drag-drop { 28 | border: dashed 3px #ccc; 29 | border-radius: 5px; 30 | box-sizing: inherit; 31 | padding: 60px 30px; 32 | margin: 20px 0; 33 | line-height: 1.5; 34 | display: flex; 35 | flex-direction: column; 36 | font-weight: bold; 37 | color: #999; 38 | gap: 10px; 39 | } 40 | 41 | .upload-container .drag-drop .icon svg { 42 | width: 100px; 43 | height: 100px; 44 | fill: rgba(77, 134, 240, 0.5); 45 | } 46 | 47 | .upload-container .drag-drop .btn { 48 | padding: 15px; 49 | font-size: 16px; 50 | font-weight: bold; 51 | background-color: #4d86f0; 52 | color: white; 53 | border: none; 54 | border-radius: 3px; 55 | min-width: 200px; 56 | cursor: pointer; 57 | } 58 | .upload-container .drag-drop .btn:hover { 59 | background-color: #3c6dc0; 60 | } 61 | 62 | .upload-container .uploaded-files { 63 | } 64 | 65 | .upload-container .title-section { 66 | text-align: left; 67 | color: #555; 68 | font-weight: bolder; 69 | padding-bottom: 20px; 70 | } 71 | 72 | .upload-container .uploaded-files { 73 | display: flex; 74 | flex-direction: column; 75 | gap: 20px; 76 | } 77 | .upload-container .uploaded-files .file { 78 | border: 1px solid #ddd; 79 | border-radius: 5px; 80 | text-align: left; 81 | display: flex; 82 | justify-content: space-between; 83 | align-items: center; 84 | transition: all 0.3s ease; 85 | } 86 | .upload-container .uploaded-files .file:hover { 87 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 88 | } 89 | .upload-container .uploaded-files .file .icon { 90 | width: 48px; 91 | padding: 0 10px; 92 | } 93 | .upload-container .uploaded-files .file .icon img { 94 | width: 48px; 95 | height: 48px; 96 | } 97 | .upload-container .uploaded-files .file .title { 98 | flex: 1; 99 | padding: 10px 0; 100 | } 101 | 102 | .upload-container .uploaded-files .file .title .name { 103 | display: block; 104 | padding: 5px 0; 105 | } 106 | .upload-container .uploaded-files .file .title .size { 107 | font-size: 14px; 108 | color: #999; 109 | } 110 | .upload-container .uploaded-files .file .title .progress { 111 | height: 5px; 112 | width: 100%; 113 | background-color: #ccc; 114 | margin: 10px 0; 115 | border-radius: 4px; 116 | overflow: hidden; 117 | } 118 | .upload-container .uploaded-files .file .title .progress .progress-60 { 119 | background-color: #4d86f0; 120 | height: 5px; 121 | width: 60%; 122 | border-radius: 4px; 123 | } 124 | 125 | .upload-container .uploaded-files .file .actions button { 126 | padding: 10px; 127 | margin: 0 15px; 128 | border: none; 129 | border-radius: 5px; 130 | cursor: pointer; 131 | } 132 | .upload-container .uploaded-files .file .actions button:hover { 133 | background-color: #ddd; 134 | } 135 | -------------------------------------------------------------------------------- /16. drag and drop/upload-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /16. drag and drop/word icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/16. drag and drop/word icon.png -------------------------------------------------------------------------------- /17. historias ig/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Historias IG 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 | 17 | 18 |
19 |
20 |
Marcos Rivas
21 |
22 | 23 |
24 |
25 |
26 | 27 | 28 | 29 |
30 |
31 |
Marcos Rivas
32 |
33 | 34 |
35 |
36 |
37 | 38 | 39 | 40 |
41 |
42 |
Marcos Rivas
43 |
44 | 45 |
46 |
47 |
48 | 49 | 50 | 51 |
52 |
53 |
Marcos Rivas
54 |
55 | 56 |
57 |
58 |
59 | 60 | 61 | 62 |
63 |
64 |
Marcos Rivas
65 |
66 |
67 | 68 | 69 | -------------------------------------------------------------------------------- /17. historias ig/profile1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/17. historias ig/profile1.jpeg -------------------------------------------------------------------------------- /17. historias ig/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --size: 150px; 3 | } 4 | body { 5 | padding: 0; 6 | margin: 0; 7 | font-family: Arial, Helvetica, sans-serif; 8 | } 9 | 10 | .stories-container { 11 | display: flex; 12 | flex-direction: row; 13 | gap: 10px; 14 | width: 790px; 15 | margin: 100px auto; 16 | } 17 | 18 | .stories-container .story .outer-border { 19 | background-color: black; 20 | width: var(--size); 21 | height: var(--size); 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | border-radius: 50%; 26 | box-sizing: border-box; 27 | 28 | background: radial-gradient( 29 | circle farthest-corner at 32% 106%, 30 | rgb(255, 225, 125) 0%, 31 | rgb(255, 205, 105) 10%, 32 | rgb(250, 145, 55) 28%, 33 | rgb(235, 65, 65) 42%, 34 | transparent 82% 35 | ), 36 | linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%); 37 | } 38 | .stories-container .story .border { 39 | background-color: white; 40 | width: calc(var(--size) - 10px); 41 | height: calc(var(--size) - 10px); 42 | display: flex; 43 | align-items: center; 44 | justify-content: center; 45 | border-radius: 50%; 46 | box-sizing: border-box; 47 | } 48 | 49 | .stories-container .story .border a { 50 | display: block; 51 | width: calc(var(--size) - 20px); 52 | height: calc(var(--size) - 20px); 53 | box-sizing: border-box; 54 | } 55 | .stories-container .story .border img { 56 | border-radius: 50%; 57 | width: calc(var(--size) - 20px); 58 | height: calc(var(--size) - 20px); 59 | box-sizing: border-box; 60 | } 61 | 62 | .stories-container .story .name { 63 | text-align: center; 64 | overflow: hidden; 65 | text-overflow: ellipsis; 66 | white-space: nowrap; 67 | padding: 10px 0; 68 | font-weight: 500; 69 | font-size: 16px; 70 | width: var(--size); 71 | } 72 | -------------------------------------------------------------------------------- /18. slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Slider 8 | 9 | 10 | 11 |
12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
18 |
19 | 1 20 | 2 21 | 3 22 | 4 23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /18. slider/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | background-color: #222; 4 | } 5 | 6 | .slider-container { 7 | width: 700px; 8 | margin: 0 auto; 9 | } 10 | 11 | .slider-container .slider-viewport { 12 | width: 700px; 13 | border-radius: 10px; 14 | display: flex; 15 | 16 | overflow-x: auto; 17 | scroll-snap-type: x mandatory; 18 | 19 | scroll-behavior: smooth; 20 | -webkit-overflow-scrolling: touch; 21 | } 22 | 23 | .slider-container .slide { 24 | min-width: 700px; 25 | height: 400px; 26 | scroll-snap-align: start; 27 | border-radius: 10px; 28 | box-sizing: border-box; 29 | 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | font-size: 60px; 34 | } 35 | 36 | .slider-container .slide:nth-child(1) { 37 | background-color: salmon; 38 | } 39 | .slider-container .slide:nth-child(2) { 40 | background-color: steelblue; 41 | } 42 | .slider-container .slide:nth-child(3) { 43 | background-color: yellowgreen; 44 | } 45 | .slider-container .slide:nth-child(4) { 46 | background-color: paleturquoise; 47 | } 48 | 49 | .slider-container .links { 50 | padding: 10px 0; 51 | display: flex; 52 | justify-content: center; 53 | gap: 5px; 54 | } 55 | .slider-container .links a { 56 | width: 40px; 57 | height: 40px; 58 | background-color: #2e2e2e; 59 | border-radius: 5px; 60 | display: flex; 61 | align-items: center; 62 | justify-content: center; 63 | color: white; 64 | text-decoration: none; 65 | } 66 | .slider-container .links a:hover { 67 | background-color: #226bbe; 68 | } 69 | -------------------------------------------------------------------------------- /19. tarjeta info twitter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tarjeta Twitter 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 27 |
28 | Secretaria de día, streamer de noche, psicóloga los sábados, 29 | cristiana los domingos. 30 |
31 | 32 |
33 |
34 | 100k Siguiendo 35 |
36 |
37 | 100k Siguiendo 38 |
39 |
40 | 41 |
42 | 43 |
44 | 45 | 46 | 47 |
48 |
49 | Elon Musk, Bill Gates y 80 más de las cuentas que sigues siguen 50 | a esta cuenta 51 |
52 | 53 |
54 |
55 |
56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /19. tarjeta info twitter/profile1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/19. tarjeta info twitter/profile1.jpeg -------------------------------------------------------------------------------- /19. tarjeta info twitter/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | padding: 0; 4 | margin: 0; 5 | background-color: #25334d; 6 | } 7 | .profile-container { 8 | margin: 100px auto; 9 | width: 70px; 10 | } 11 | 12 | .profile-container .profile { 13 | } 14 | 15 | .profile-container .profile img { 16 | border-radius: 50%; 17 | width: 70px; 18 | } 19 | 20 | .profile-container .profile .info { 21 | display: none; 22 | position: absolute; 23 | width: 340px; 24 | min-height: 300px; 25 | max-height: 346px; 26 | background-color: #222; 27 | border-radius: 20px; 28 | color: white; 29 | padding: 20px; 30 | box-sizing: border-box; 31 | box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); 32 | flex-direction: column; 33 | } 34 | .profile-container .profile:hover .info { 35 | display: flex; 36 | animation: show 0.3s ease; 37 | } 38 | .profile-container .profile a { 39 | color: white; 40 | text-decoration: none; 41 | } 42 | .profile-container .profile a:hover { 43 | text-decoration: underline; 44 | } 45 | 46 | .profile-container .profile .info .header { 47 | display: flex; 48 | justify-content: space-between; 49 | } 50 | 51 | .profile-container .profile .info .photo { 52 | } 53 | 54 | .profile-container .profile .info .photo img { 55 | } 56 | 57 | .profile-container .profile .action { 58 | } 59 | 60 | .profile-container .profile .action button { 61 | min-width: 100px; 62 | padding: 10px; 63 | border-radius: 20px; 64 | background-color: white; 65 | color: black; 66 | font-weight: bold; 67 | border: none; 68 | cursor: pointer; 69 | } 70 | .profile-container .profile .action button:hover { 71 | background-color: #eee; 72 | } 73 | 74 | .profile-container .profile .user-info { 75 | padding: 10px 0; 76 | } 77 | 78 | .profile-container .profile .user-info .name { 79 | font-weight: bold; 80 | } 81 | 82 | .profile-container .profile .user-info .username { 83 | color: #aaa; 84 | } 85 | 86 | .profile-container .profile .description { 87 | padding: 10px 0 20px 0; 88 | flex: 1; 89 | } 90 | .profile-container .profile .description a { 91 | color: rgb(0, 140, 255); 92 | text-decoration: none; 93 | } 94 | 95 | .profile-container .profile .followers-container { 96 | display: flex; 97 | gap: 10px; 98 | justify-content: space-between; 99 | } 100 | .profile-container .profile .followers-container a { 101 | color: #aaa; 102 | } 103 | 104 | .profile-container .profile .followers-container .number { 105 | font-weight: bold; 106 | color: white; 107 | } 108 | 109 | .profile-container .profile .other { 110 | padding: 10px 0; 111 | } 112 | 113 | .profile-container .profile .other a { 114 | color: #999; 115 | display: flex; 116 | } 117 | 118 | .profile-container .profile .other a .photos { 119 | display: flex; 120 | flex-direction: row-reverse; 121 | justify-content: start; 122 | margin-right: 30px; 123 | } 124 | .profile-container .profile .other a .photos img { 125 | margin-right: -20px; 126 | border: solid 4px black; 127 | width: 32px; 128 | height: 32px; 129 | } 130 | 131 | @keyframes show { 132 | from { 133 | opacity: 0; 134 | } 135 | to { 136 | opacity: 1; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /20. widget clima/cloudy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marcosrivasr/20-proyectos-css/0659b08370583cc1857f6f5ee6bc886a27403573/20. widget clima/cloudy.png -------------------------------------------------------------------------------- /20. widget clima/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Weather Widget 8 | 12 | 13 | 14 | 15 |
16 |
17 |
Mexico City
18 |
Now
19 |
20 |
21 | 22 |
23 |
24 |
25 | 20° 26 | /17° 27 |
28 |
Partially Cloudy
29 |
30 |
31 |
32 |
33 |
34 | water_drop 35 |
36 |
37 |
9 Km/h
38 |
Wind
39 |
40 |
41 | 42 |
43 |
44 | air 45 |
46 |
47 |
93%
48 |
Changes of rain
49 |
50 |
51 | 52 |
53 |
54 | water 55 |
56 |
57 |
31%
58 |
Humidity
59 |
60 |
61 |
62 |
63 |
64 |
65 |
Mon
66 |
67 |
68 | wb_cloudy 69 |
70 |
Cloudy
71 |
72 |
73 | 20° 74 | 14° 75 |
76 |
77 | 78 |
79 |
Tue
80 |
81 |
82 | ac_unit 83 |
84 |
Snow
85 |
86 |
87 | 2° 88 | -5° 89 |
90 |
91 | 92 |
93 |
Wed
94 |
95 |
96 | thunderstorm 97 |
98 |
Thunder storm
99 |
100 |
101 | 15° 102 | 14° 103 |
104 |
105 | 106 |
107 |
Thu
108 |
109 |
110 | wb_twilight 111 |
112 |
Partially sunny
113 |
114 |
115 | 18° 116 | 17° 117 |
118 |
119 | 120 |
121 |
Fri
122 |
123 |
124 | wb_sunny 125 |
126 |
Sunny
127 |
128 |
129 | 25° 130 | 10° 131 |
132 |
133 |
134 |
135 | 136 | 137 | -------------------------------------------------------------------------------- /20. widget clima/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | .material-icons { 5 | font-family: "Material Icons"; 6 | font-weight: normal; 7 | font-style: normal; 8 | font-size: 24px; /* Preferred icon size */ 9 | display: inline-block; 10 | line-height: 1; 11 | text-transform: none; 12 | letter-spacing: normal; 13 | word-wrap: normal; 14 | white-space: nowrap; 15 | direction: ltr; 16 | 17 | /* Support for all WebKit browsers. */ 18 | -webkit-font-smoothing: antialiased; 19 | /* Support for Safari and Chrome. */ 20 | text-rendering: optimizeLegibility; 21 | 22 | /* Support for Firefox. */ 23 | -moz-osx-font-smoothing: grayscale; 24 | 25 | /* Support for IE. */ 26 | font-feature-settings: "liga"; 27 | } 28 | .weather-container { 29 | color: white; 30 | font-size: 18px; 31 | width: 450px; 32 | margin: 100px auto; 33 | background-color: #333; 34 | padding: 10px; 35 | border-radius: 50px; 36 | } 37 | 38 | .weather-container .current { 39 | background: rgb(30, 107, 221); 40 | background: linear-gradient( 41 | 0deg, 42 | rgba(30, 107, 221, 1) 0%, 43 | rgba(3, 116, 255, 1) 42%, 44 | rgba(3, 191, 255, 1) 100% 45 | ); 46 | border-radius: 40px; 47 | padding: 40px; 48 | } 49 | .weather-container .current .city { 50 | text-align: center; 51 | font-weight: bold; 52 | font-size: 30px; 53 | margin-bottom: 10px; 54 | } 55 | .weather-container .current .day { 56 | text-align: center; 57 | } 58 | 59 | .weather-container .current .row { 60 | display: flex; 61 | align-items: center; 62 | justify-content: space-between; 63 | } 64 | 65 | .weather-container .current .row .icon img { 66 | } 67 | .weather-container .current .row .info { 68 | } 69 | .weather-container .current .row .info .temperature { 70 | font-size: 48px; 71 | font-weight: bold; 72 | } 73 | .weather-container .current .row .info .temperature .temperature-now { 74 | font-size: 80px; 75 | margin: 0; 76 | } 77 | .weather-container .current .row .info .temperature .temperature-low { 78 | margin-left: -15px; 79 | font-size: 32px; 80 | color: rgba(255, 255, 255, 0.7); 81 | } 82 | .weather-container .current .row .info .status { 83 | color: rgba(255, 255, 255, 0.7); 84 | } 85 | .weather-container .current .more { 86 | display: flex; 87 | justify-content: space-between; 88 | margin-top: 50px; 89 | gap: 10px; 90 | text-align: center; 91 | } 92 | 93 | .weather-container .current .more .item { 94 | } 95 | .weather-container .current .more .item .icon span { 96 | font-size: 28px; 97 | color: rgba(255, 255, 255, 0.7); 98 | } 99 | .weather-container .current .more .item .text { 100 | font-weight: bold; 101 | } 102 | .weather-container .current .more .item .text .value { 103 | } 104 | .weather-container .current .more .item .text .type { 105 | font-size: 12px; 106 | color: rgba(255, 255, 255, 0.7); 107 | } 108 | 109 | .weather-container .list { 110 | padding: 50px 40px; 111 | display: flex; 112 | flex-direction: column; 113 | gap: 20px; 114 | } 115 | 116 | .weather-container .list .day { 117 | display: flex; 118 | justify-content: space-between; 119 | align-items: center; 120 | } 121 | .weather-container .list .day .name { 122 | width: 123.3px; 123 | font-weight: bold; 124 | } 125 | .weather-container .list .day .weather { 126 | width: 123px; 127 | display: flex; 128 | align-items: center; 129 | gap: 10px; 130 | } 131 | .weather-container .list .day .weather .icon { 132 | } 133 | .weather-container .list .day .weather .status { 134 | } 135 | .weather-container .list .day .temperature { 136 | width: 123px; 137 | text-align: right; 138 | } 139 | .weather-container .list .day .temperature .temperature-high { 140 | } 141 | .weather-container .list .day .temperature .temperature-low { 142 | color: rgba(255, 255, 255, 0.7); 143 | } 144 | --------------------------------------------------------------------------------