Skip to content

Commit a18f6f7

Browse files
committed
Maquetacion pagina trabajos.html con bootstrap
1 parent 4e2d967 commit a18f6f7

File tree

7 files changed

+294
-266
lines changed

7 files changed

+294
-266
lines changed

assets/style/style.css

Lines changed: 50 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ TIPOGRAFÍAS
2828
html {
2929
font-size: 14px;
3030
}
31+
3132
body {
3233
font-family: 'Raleway', sans-serif;
3334
font-weight: 400;
@@ -130,15 +131,19 @@ article {
130131
.zindex-5 {
131132
z-index: 500;
132133
}
134+
133135
.zindex-4 {
134136
z-index: 400;
135137
}
138+
136139
.zindex-3 {
137140
z-index: 300;
138141
}
142+
139143
.zindex-2 {
140144
z-index: 200;
141145
}
146+
142147
.zindex-1 {
143148
z-index: 100;
144149
}
@@ -149,6 +154,7 @@ article {
149154
position: sticky;
150155
top: 0;
151156
}
157+
152158
.navbarAstor {
153159
background-color: #022859;
154160
height: 5rem;
@@ -174,7 +180,6 @@ article {
174180
font-weight: 600;
175181
border-bottom: 2px #022859 solid;
176182
align-items: center;
177-
/* width: 10rem; */
178183
justify-content: center;
179184
padding: 0 1.5rem;
180185
}
@@ -183,26 +188,21 @@ article {
183188
border-bottom: 2px #FFFFFF solid;
184189
color: #e25d8e;
185190
transform: scale(1.1);
186-
/* transition: all .5s; */
187191
}
188-
.header *,.header--home *{
192+
193+
.header *,
194+
.header--home * {
189195
color: #FFFFFF;
190196
}
191197

192198
.header {
193-
/* width: 100vw; */
194-
height: 200px;
199+
padding:4rem 0;
195200
background-color: #022859;
196201
text-align: left;
197-
display: flex;
198-
justify-content: center;
199-
align-items: center;
200-
column-gap: 2rem;
201202
}
202203

203204
.header--home {
204205
position: relative;
205-
/* width: 100vw; */
206206
height: calc(100vh - 5rem);
207207
background-image: url(../images/presentacion.jpg);
208208
background-size: cover;
@@ -231,44 +231,18 @@ article {
231231
color: #F4F4F4;
232232
}
233233

234-
/* .main {
235-
grid-area: contenido;
236-
display: flex;
237-
flex-direction: column;
238-
align-items: center;
239-
} */
240-
241-
/* .section {
242-
max-width: 1360px;
243-
} */
244-
245-
/* .section__article__servicio {
246-
display: flex;
247-
flex-direction: column;
248-
align-items: stretch;
249-
height: 17.5rem;
250-
overflow: hidden;
251-
gap: 1rem;
252-
} */
234+
.section__titulo {
235+
margin: 1rem 0 1rem .5rem;
236+
}
253237

254-
/* .section__servicios h2 {
255-
margin: 0 2rem;
256-
} */
257238

258-
/* .section__article__servicio__info {
259-
display: flex;
260-
flex-direction: column;
261-
justify-content: center;
262-
margin: 0px 2rem;
263-
} */
264-
265-
/* .section__article__servicio__img img {
266-
width: 100vw;
267-
} */
239+
.section__servicios h3 {
240+
margin: .9rem 0;
241+
}
268242

269-
/* .invertido {
270-
flex-direction: column;
271-
} */
243+
.section__trabajos--home h4 {
244+
margin: .8rem 0;
245+
}
272246

273247
.boton {
274248
display: inline-block;
@@ -289,7 +263,7 @@ article {
289263
}
290264

291265
.imgTrabajos:hover {
292-
transform:rotate(3deg) scale(.98);
266+
transform: rotate(3deg) scale(.98);
293267
}
294268

295269
.section__contacto {
@@ -341,6 +315,7 @@ article {
341315
border-bottom: none;
342316
padding: 0;
343317
}
318+
344319
.section__microServicio__article {
345320
display: flex;
346321
flex-direction: column;
@@ -360,14 +335,10 @@ article {
360335
}
361336

362337
.callToAction {
363-
width: 100vw;
364-
display: flex;
365-
flex-direction: column;
366-
justify-content: center;
367-
align-items: center;
368338
padding: 3rem 0;
369339
background-color: #FF7BAC;
370340
text-align: center;
341+
margin-bottom: 1rem;
371342
}
372343

373344
.callToAction__contacto__titulo {
@@ -391,21 +362,14 @@ article {
391362

392363
/* TRABAJOS */
393364
.section__trabajos {
394-
display: flex;
395-
flex-direction: column;
396-
align-items: center;
397365
border-bottom: none;
398366
}
399367

400368
.section__trabajos__container {
401-
display: flex;
402-
gap: 1.5rem;
403-
flex-wrap: wrap;
404-
margin-bottom: 3rem;
369+
405370
}
406371

407372
.section__trabajos__container__trabajo {
408-
width: calc(50% - 1.5rem);
409373
position: relative;
410374
margin: 0;
411375
}
@@ -423,10 +387,10 @@ article {
423387
.section__trabajos__container__trabajo__hover {
424388
position: absolute;
425389
top: 0;
426-
left: 0;
390+
left: calc(var(--bs-gutter-x) * .5);
427391
background-color: rgba(3, 101, 140, .7);
428392
height: 100%;
429-
width: 100%;
393+
width: calc(100% - var(--bs-gutter-x));
430394
display: flex;
431395
justify-content: end;
432396
align-items: end;
@@ -458,18 +422,22 @@ article {
458422
align-items: center;
459423
gap: 2rem;
460424
}
425+
461426
.section__nosotros__article__imagen {
462427
width: 100%;
463428
display: flex;
464429
justify-content: center;
465430
}
431+
466432
.section__nosotros__article__imagen img {
467433
width: 100%;
468434
max-width: 600px;
469435
}
436+
470437
.section__nosotros__article__texto {
471438
margin: 0 1rem;
472439
}
440+
473441
.section__asiTrabajamos {
474442
display: flex;
475443
flex-direction: column;
@@ -483,9 +451,11 @@ article {
483451
max-width: 900px;
484452
margin: 0 1rem;
485453
}
454+
486455
.section__asiTrabajamos__container__imagen {
487456
display: none;
488457
}
458+
489459
.section__asiTrabajamos__container__imagen img {
490460
width: 100%;
491461
}
@@ -565,8 +535,23 @@ article {
565535
/* ANIMACIONES KEYFRAMES */
566536

567537
@keyframes titulo {
568-
0% {opacity: 0; width: 35rem;}
569-
50% {opacity: .5; width: 42rem;}
570-
75% {opacity: .75; width: 38rem;}
571-
100% {opacity: 1; width: 40rem;}
538+
0% {
539+
opacity: 0;
540+
width: 35rem;
541+
}
542+
543+
50% {
544+
opacity: .5;
545+
width: 42rem;
546+
}
547+
548+
75% {
549+
opacity: .75;
550+
width: 38rem;
551+
}
552+
553+
100% {
554+
opacity: 1;
555+
width: 40rem;
556+
}
572557
}

0 commit comments

Comments
 (0)