20 |
21 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/assets/images/bg-pattern-card.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/stylesheets/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --primary-font: 'Kumbh Sans', sans-serif;
3 | --dark-cyan: hsl(185, 75%, 39%);
4 | --very-dark-desaturated-blue: hsl(229, 23%, 23%);
5 | --dark-grayish-blue: hsl(227, 10%, 46%);
6 | --very-light-blue: #6B7082;
7 | --light-gray: #E8E9EC;
8 | --profile-picture-background: #ffffff;
9 | }
10 |
11 | * {
12 | box-sizing: border-box;
13 | }
14 |
15 | body {
16 | background-color: var(--dark-cyan);
17 | min-height: 100vh;
18 | display: flex;
19 | justify-content: center;
20 | align-items: center;
21 | margin: 0;
22 | font-family: var(--primary-font);
23 | overflow: hidden;
24 | }
25 |
26 | body::after,
27 | body::before {
28 | content: '';
29 | display: block;
30 | width: 1000px;
31 | height: 1000px;
32 | position: absolute;
33 | background-size: 100% 100%;
34 | z-index: -1;
35 | }
36 |
37 | body::after {
38 | background-image: url('./../assets/images/bg-pattern-top.svg');
39 | top: -25%;
40 | left: -25%;
41 | }
42 |
43 | body::before {
44 | background-image: url('./../assets/images/bg-pattern-bottom.svg');
45 | bottom: -25%;
46 | right: -25%;
47 | }
48 |
49 | .profile-card {
50 | background-color: var(--profile-picture-background);
51 | width: 100%;
52 | max-width: 350px;
53 | text-align: center;
54 | border-radius: 15px;
55 | overflow: hidden;
56 | box-shadow: 0 50px 100px rgba(8, 70, 94, .51);
57 | }
58 |
59 | /*
60 | * Recursos útiles:
61 | * Background-repeat: https://developer.mozilla.org/es/docs/Web/CSS/background-repeat
62 | * Background-size: https://developer.mozilla.org/es/docs/Web/CSS/background-size
63 | * Explicación de Dorian de su curso de CSS básico: https://youtu.be/ouOZi3pDQPQ?t=249
64 | *
65 | * Lo primero que tenemos que saber de la propiedad background-image
66 | * es que es perfectamente compatible con la propiedad background-color.
67 | * Para probar esto, podéis hacer lo siguiente:
68 | *
69 | * 1. Crear un div que tenga un ancho de 300px y un alto de 250px.
70 | * 2. Utilizar una imagen para usarla más adelante con background-image. Da
71 | * igual que la imagen luego se distorsiene, es simplemente para que
72 | * entendáis cómo se puede manipular el fondo de una imagen aplicada con CSS.
73 | * 3. A este div dadle un background-color: red. Veréis que evidentemente ocupa
74 | * todo el ancho y alto del elemento.
75 | * 4. Ahora aplicad la imagen de fondo con background-image: url(url_foto). Si la
76 | * imagen es más pequeña que el div, por defecto veréis que se repite tanto en
77 | * el eje X como en el eje Y.
78 | * 5. Utilizad background-repeat: no-repeat; para que la imagen no se repita en
79 | * ninguna dirección.
80 | * 6. Ahora podéis cambiar el ancho y el alto del background-image mediante la
81 | * propiedad background-size. Si utilizáis background-size: 20px 50px; vais a ver
82 | * cómo la imagen ocupa 20px de ancho por 50px de alto. Si utilizáis
83 | * background-image: 100% 100px; vais a ver cómo la imagen ocupa el 100% del ancho
84 | * de su contenedor y 100px de alto.
85 | * 7. Observad que tenéis por una lado la imagen aplicada con background-image y que
86 | * además también tenéis el color de fondo rojo que aplicasteis con background-color.
87 | *
88 | * El cálculo realizado para centrar la imagen en el div es el siguiente:
89 | *
90 | * 1. Tenemos un padding-top del header de 96px.
91 | * 2. La imagen (.profile-card .picture) tiene un ancho y un alto de 96px también.
92 | * 3. El alto total del header es de 96px que tiene de padding-top + 96px que tiene
93 | * de alto la imagen (en total, 192px).
94 | * 4. Ahora tenemos que calcular el alto que tiene que tener el fondo con la imagen, es
95 | * decir, tenemos que calcular cuántos píxeles hay desde el border-top del header
96 | * hasta la mitad de la imagen de perfil. Para ello, simplemente sumamos.
97 | * - 96px de padding top del header (si aplicásemos un background-size: 100% 96px;
98 | * veríamos cómo el alto de la imagen de fondo terminaría justo donde empieza la
99 | * imagen de perfil).
100 | * - La mitad del alto de la imagen (96px / 2 = 48px).
101 | * - Resultado: 96px + 48px = 144px, por lo que nuestro background-size será:
102 | * background-size: 100% 144px; De aquí sacaríamos la siguiente ecuación:
103 | * distancia del border top del header a la imagen + 1/2 del alto de la
104 | * imagen de perfil.
105 | *
106 | * Para este caso en concreto, podríamos utilizar background-size: 100% 75%; porque se da
107 | * la casualidad de que el alto de la imagen es igual al padding-top del header.
108 | * Proporcionalmente hablando: 25% del alto es igual a 48px, 50% es igual a 96px, 75% es
109 | * igual a 144px y 100% es igual a 192px.
110 | *
111 | * Lo mejor que podéis hacer para entenderlo es ir modificando los valores y ver cómo
112 | * va cambiando el diseño. También podríais hacer más ejercicios similares a este, como
113 | * por ejemplo en lugar de que el header tenga un padding-top de 96px y la imagen un ancho y un
114 | * alto de 96px, podríais hacer que el padding-top del header fuese 40px y el ancho y el alto
115 | * de la imagen fuesen 65px (por ejemplo).
116 | *
117 | * Si el jueves hay dudas con esto, estoy seguro de que podremos hacer algún ejercicio
118 | * explicanado esto paso a paso :D
119 | */
120 |
121 | .profile-card .header {
122 | padding-top: 96px;
123 | background-image: url('./../assets/images/bg-pattern-card.svg');
124 | background-repeat: no-repeat;
125 | background-size: 100% 144px;
126 | }
127 |
128 | .profile-card .picture {
129 | display: block;
130 | width: 96px;
131 | border-radius: 50%;
132 | border: 5px solid var(--profile-picture-background);
133 | margin: 0 auto;
134 | background-color: #ffffff;
135 | }
136 |
137 | .profile-card .content {
138 | padding: 1.5rem 0;
139 | }
140 |
141 | .profile-card .username {
142 | font-size: 18px;
143 | font-weight: 400;
144 | color: var(--very-dark-desaturated-blue);
145 | margin: 0 0 .5rem;
146 | }
147 |
148 | .profile-card .age,
149 | .profile-card .location {
150 | color: var(--very-light-blue);
151 | }
152 |
153 | .profile-card .age {
154 | margin-left: 1rem;
155 | }
156 |
157 | .profile-card .location {
158 | margin: 0;
159 | font-size: 14px;
160 | }
161 |
162 | .profile-card .footer {
163 | border-top: 1px solid var(--light-gray);
164 | display: flex;
165 | justify-content: center;
166 | padding: 1.5rem;
167 | }
168 |
169 | .profile-card .stats {
170 | font-size: 18px;
171 | margin: 0;
172 | }
173 |
174 | .profile-card .stats:not(:last-child) {
175 | color: var(--very-dark-desaturated-blue);
176 | margin-right: 52px;
177 | }
178 |
179 | .profile-card .stats span {
180 | display: block;
181 | color: var(--very-light-blue);
182 | font-size: 10px;
183 | letter-spacing: 2px;
184 | margin-top: 4px;
185 | }
186 |
--------------------------------------------------------------------------------
16 |