Skip to content

Commit 8c1708e

Browse files
ximecalderonximecalderon
committed
Agrega resolucion de grilla de productos
1 parent 7c3407b commit 8c1708e

File tree

2 files changed

+240
-2
lines changed

2 files changed

+240
-2
lines changed

‎fullstock-templates/assets/css/products.css

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,75 @@
1-
/* aqui van los estilos de la grilla de productos */
1+
.products-container {
2+
margin: auto;
3+
max-width: 58rem;
4+
padding-left: 1rem;
5+
padding-right: 1rem;
6+
7+
display: grid;
8+
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
9+
gap: 2rem;
10+
}
11+
12+
.product {
13+
border: 1px solid #d9d9d9;
14+
border-radius: 0.75rem;
15+
16+
display: flex;
17+
flex-direction: column;
18+
}
19+
20+
.product-image__container {
21+
aspect-ratio: 3/4;
22+
background-color: #00005506;
23+
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
}
28+
29+
.product-content__container {
30+
flex-grow: 1;
31+
padding: 1rem;
32+
33+
display: flex;
34+
flex-direction: column;
35+
gap: 0.5rem;
36+
justify-content: space-between;
37+
}
38+
39+
.product-content__container > * {
40+
margin: 0;
41+
}
42+
43+
.product-title {
44+
color: #1c2024;
45+
font-size: 0.875rem;
46+
line-height: 1.25rem;
47+
font-weight: 500;
48+
}
49+
50+
.product-description,
51+
.product-color {
52+
color: #60646c;
53+
font-size: 0.875rem;
54+
line-height: 1.25rem;
55+
font-weight: 400;
56+
}
57+
58+
.product-color {
59+
margin-top: auto;
60+
}
61+
62+
.product-price {
63+
color: #1c2024;
64+
font-weight: 500;
65+
font-size: 1rem;
66+
line-height: 1.5rem;
67+
}
68+
69+
@media (min-width: 40rem) {
70+
.products-container {
71+
row-gap: 2.5rem;
72+
padding-left: 0;
73+
padding-right: 0;
74+
}
75+
}

‎fullstock-templates/products-section.html

Lines changed: 165 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,171 @@
88
</head>
99
<body>
1010
<main>
11-
<!-- aqui colocan el codigo para la seccion de productos -->
11+
<section class="products-container">
12+
<article class="product">
13+
<div class="product-image__container">
14+
<img
15+
width="100%"
16+
src="./assets/images/Polo-React.png"
17+
alt="Polo negro con el logo de React.js"
18+
/>
19+
</div>
20+
<div class="product-content__container">
21+
<h2 class="product-title">Polo React</h2>
22+
<p class="product-description">
23+
Viste tu pasión por React con estilo y comodidad en cada línea de
24+
código.
25+
</p>
26+
<p class="product-color">Negro</p>
27+
<p class="product-price">$20</p>
28+
</div>
29+
</article>
30+
<article class="product">
31+
<div class="product-image__container">
32+
<img
33+
width="100%"
34+
src="./assets/images/Polo-JS.png"
35+
alt="Polo negro con el logo de JavaScript"
36+
/>
37+
</div>
38+
<div class="product-content__container">
39+
<h2 class="product-title">Polo JavaScript</h2>
40+
<p class="product-description">
41+
Deja que tu amor por JavaScript hable a través de cada hilo de
42+
este polo.
43+
</p>
44+
<p class="product-color">Negro</p>
45+
<p class="product-price">$20</p>
46+
</div>
47+
</article>
48+
<article class="product">
49+
<div class="product-image__container">
50+
<img
51+
width="100%"
52+
src="./assets/images/Polo-Node.png"
53+
alt="Polo verde con el logo de Node.js"
54+
/>
55+
</div>
56+
<div class="product-content__container">
57+
<h2 class="product-title">Polo Node.js</h2>
58+
<p class="product-description">
59+
Conéctate al estilo con este polo de Node.js, tan robusto como tu
60+
código.
61+
</p>
62+
<p class="product-color">Verde</p>
63+
<p class="product-price">$20</p>
64+
</div>
65+
</article>
66+
<article class="product">
67+
<div class="product-image__container">
68+
<img
69+
width="100%"
70+
src="./assets/images/Polo-TS.png"
71+
alt="Polo azul con el logo de TypeScript"
72+
/>
73+
</div>
74+
<div class="product-content__container">
75+
<h2 class="product-title">Polo TypeScript</h2>
76+
<p class="product-description">
77+
Tipa tu estilo con precisión: lleva tu pasión por TypeScript en
78+
cada hilo.
79+
</p>
80+
<p class="product-color">Azul</p>
81+
<p class="product-price">$20</p>
82+
</div>
83+
</article>
84+
<article class="product">
85+
<div class="product-image__container">
86+
<img
87+
width="100%"
88+
src="./assets/images/Polo-BE.png"
89+
alt="Polo negro con el texto Backend Developer"
90+
/>
91+
</div>
92+
<div class="product-content__container">
93+
<h2 class="product-title">Polo Backend Developer</h2>
94+
<p class="product-description">
95+
Domina el servidor con estilo: viste con orgullo tu título de
96+
Backend Developer.
97+
</p>
98+
<p class="product-color">Negro</p>
99+
<p class="product-price">$25</p>
100+
</div>
101+
</article>
102+
<article class="product">
103+
<div class="product-image__container">
104+
<img
105+
width="100%"
106+
src="./assets/images/Polo-FE.png"
107+
alt="Polo azul con el texto Frontend Developer"
108+
/>
109+
</div>
110+
<div class="product-content__container">
111+
<h2 class="product-title">Polo Frontend Developer</h2>
112+
<p class="product-description">
113+
Construye experiencias con estilo: luce con orgullo tu polo de
114+
Frontend Developer.
115+
</p>
116+
<p class="product-color">Azul</p>
117+
<p class="product-price">$25</p>
118+
</div>
119+
</article>
120+
<article class="product">
121+
<div class="product-image__container">
122+
<img
123+
width="100%"
124+
src="./assets/images/Polo-FS.png"
125+
alt="Polo azul oscuro con el texto FullStack Developer"
126+
/>
127+
</div>
128+
<div class="product-content__container">
129+
<h2 class="product-title">Polo Full-Stack Developer</h2>
130+
<p class="product-description">
131+
Domina ambos mundos con estilo: lleva tu título de FullStack
132+
Developer en cada línea de tu look.
133+
</p>
134+
<p class="product-color">Azul</p>
135+
<p class="product-price">$25</p>
136+
</div>
137+
</article>
138+
<article class="product">
139+
<div class="product-image__container">
140+
<img
141+
width="100%"
142+
src="./assets/images/Polo-IAF.png"
143+
alt="Polo azul claro con el texto It's a feature"
144+
/>
145+
</div>
146+
<div class="product-content__container">
147+
<h2 class="product-title">Polo It's a feature</h2>
148+
<p class="product-description">
149+
Cuando el bug se convierte en arte: lleva con orgullo tu polo
150+
'It's a feature'.
151+
</p>
152+
<p class="product-color">Azul</p>
153+
<p class="product-price">$15</p>
154+
</div>
155+
</article>
156+
<article class="product">
157+
<div class="product-image__container">
158+
<img
159+
width="100%"
160+
src="./assets/images/Polo-IWOMM.png"
161+
alt="Polo negro con el texto 'It works
162+
on my machine'"
163+
/>
164+
</div>
165+
<div class="product-content__container">
166+
<h2 class="product-title">Polo It works on my machine</h2>
167+
<p class="product-description">
168+
El clásico del desarrollador: presume tu confianza con 'It works
169+
on my machine'.
170+
</p>
171+
<p class="product-color">Negro</p>
172+
<p class="product-price">$15</p>
173+
</div>
174+
</article>
175+
</section>
12176
</main>
13177
</body>
14178
</html>

0 commit comments

Comments
 (0)