Skip to content

Commit e276c24

Browse files
ivan-developer-01ivan-developer-01
committed
fully adapt the any-questions section to mobile devices
1 parent f14fd96 commit e276c24

3 files changed

Lines changed: 113 additions & 8 deletions

File tree

‎css/mobile.css‎

Lines changed: 101 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@
303303

304304
/* || We realize */
305305
.we-realize {
306-
background: var(--color-white);
306+
background: var(--color-transparent);
307307
margin-top: 55px;
308308
height: unset;
309309
}
@@ -326,9 +326,109 @@
326326

327327
.we-realize__mobile-slider {
328328
margin-top: 39px;
329+
position: relative;
330+
z-index: 2;
329331
}
330332
/* || /We realize */
331333

334+
/* || Any questions */
335+
.any-questions {
336+
background: var(--color-black);
337+
height: unset;
338+
margin-top: 0;
339+
margin-top: -121px;
340+
}
341+
342+
.any-questions .container {
343+
padding-top: 121px;
344+
padding-bottom: 49px;
345+
}
346+
347+
.any-questions__form-background,
348+
.any-questions__background {
349+
display: none;
350+
}
351+
352+
.any-questions__form {
353+
background-color: var(--color-black);
354+
width: 100%;
355+
margin-top: 0;
356+
padding-top: 52px;
357+
height: fit-content; /* ! */
358+
align-items: flex-start;
359+
gap: 0;
360+
}
361+
362+
.any-questions__form-title {
363+
align-self: center; /* Surprised this actually works! */
364+
}
365+
366+
.any-questions__form-inputs-grid {
367+
display: flex; /* ! */
368+
flex-direction: column;
369+
width: 100%;
370+
gap: 63px;
371+
justify-content: start;
372+
margin-top: 55px;
373+
}
374+
375+
.any-questions__form-input {
376+
background-color: var(--color-black);
377+
border-bottom-color: var(--color-lightergray);
378+
width: 100%;
379+
}
380+
381+
.any-questions__form-checkbox-label {
382+
margin-top: 21px;
383+
}
384+
385+
.any-questions__form-submit {
386+
margin-top: 67px;
387+
width: 100%;
388+
/*
389+
To get the below box-shadow from Figma, I had to:
390+
Copy the element's code as CSS (already annoying)
391+
Get a whole dumpload of this:
392+
(comment) Rectangle 6.2
393+
position: absolute;
394+
left: 4.8%;
395+
right: 4.53%;
396+
top: 89.15%;
397+
bottom: 9.89%;
398+
399+
background: #E3B873;
400+
box-shadow: 0px 10px 20px rgba(227, 184, 115, 0.1);
401+
402+
Delete everything else except box-shadow
403+
Change the box-shadow color to a variable (not a hardcoded value)
404+
*/
405+
box-shadow: 0px 10px 20px var(--color-primary-10);
406+
}
407+
408+
.any-questions__contacts,
409+
.any-questions__text-contacts {
410+
display: flex;
411+
flex-direction: column;
412+
align-items: center;
413+
}
414+
415+
.any-questions__social {
416+
width: 39px;
417+
height: 39px;
418+
}
419+
420+
.any-questions__social-image {
421+
scale: 1.3;
422+
}
423+
424+
.any-questions__location-map {
425+
height: 255px;
426+
width: 100%;
427+
object-fit: cover;
428+
order: -1;
429+
}
430+
/* || /Any questions */
431+
332432
/* Hiding some sections that do not exist in the mobile layout */
333433
.request,
334434
.our-clients,

‎css/style.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
:root {
22
--color-primary: #E3B873;
3+
--color-primary-10: rgba(227, 184, 115, 0.1);
34
--color-primary-15: rgba(227, 184, 115, 0.15);
45
--color-primary-20: rgba(227, 184, 115, 0.2);
56
--color-primary-30: rgba(227, 184, 115, 0.3);
@@ -19,6 +20,7 @@
1920
--color-black-30: rgba(0, 0, 0, 0.3);
2021
--color-black-70: rgba(0, 0, 0, 0.7);
2122
--color-black-80: rgba(0, 0, 0, 0.8);
23+
--color-transparent: transparent;
2224
}
2325

2426
* {

‎index.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -472,7 +472,7 @@ <h3 class="our-clients__review-person-name title title_h3">Kiriev Egor Leonidovi
472472
<section class="section any-questions">
473473
<!-- div, not img to have more precise control -->
474474
<div class="any-questions__form-background"></div>
475-
<img src="images/any-questions/any-questions_bg.png" alt="any-questions background" class="section__background">
475+
<img src="images/any-questions/any-questions_bg.png" alt="any-questions background" class="section__background any-questions__background">
476476
<div class="container">
477477
<form action="#" class="any-questions__form">
478478
<h2 class="any-questions__form-title title title_h2">Have any questions?</h2>
@@ -507,13 +507,16 @@ <h2 class="any-questions__form-title title title_h2">Have any questions?</h2>
507507
Submit
508508
</button>
509509
</form>
510-
<!-- </div> -->
511-
<address class="any-questions__address">Rostov-on-Don, Nansen St., 239 Shopping Center <br> Decorum Tel +7 (928) 768 32 29</address>
512-
<div class="any-questions__socials">
513-
<a href="#" class="any-questions__social"><img src="icons/icon-email.svg" alt="E-mail"></a>
514-
<a href="#" class="any-questions__social"><img src="icons/icon-instagram.svg" alt="Instagram"></a>
510+
<div class="any-questions__contacts">
511+
<div class="any-questions__text-contacts">
512+
<address class="any-questions__address">Rostov-on-Don, Nansen St., 239 Shopping Center <br> Decorum Tel +7 (928) 768 32 29</address>
513+
<div class="any-questions__socials">
514+
<a href="#" class="any-questions__social"><img src="icons/icon-email.svg" alt="E-mail" class="any-questions__social-image"></a>
515+
<a href="#" class="any-questions__social"><img src="icons/icon-instagram.svg" alt="Instagram" class="any-questions__social-image"></a>
516+
</div>
517+
</div>
518+
<img src="images/any-questions/location_map.png" alt="Above location shown on maps" class="any-questions__location-map">
515519
</div>
516-
<img src="images/any-questions/location_map.png" alt="Above location shown on maps" class="any-questions__location-map">
517520
</div>
518521
</section>
519522
</main>

0 commit comments

Comments
 (0)