Design comparison
Solution retrospective
I worked for do this page using javascript for the buttons, I used too SASS in my style. I accept all help, especially in the recursive div when click. Thanks!!!
Community feedback
- @AdrianoEscarabotePosted over 1 year ago
Oi Cassia, tudo bem?
Parabéns pelo projeto, tenho algumas dicas que podem melhorar ainda mais o projeto.
1- Observei que a imagem "illustration-woman", está indo para o lado conforme o tamanho da tela aumenta, prefira coloca dentro do container e controlá-la com "position: absolute;" e "position: relative;", e você pode ajudar usando "right: ;". Claro que este é apenas um modo de fazer, mas aconselho testar!
apenas um exemplo para ilustrar:
<div class="container"> <div class="col1"> <img src="images/illustration-woman-online-desktop.svg" alt=""> </div> <div class="col2"> ...content </div> </div>
css:
.container { display: flex; align-items: center; max-width: 820px; position: relative; }
algumas propriedades que eu retirei para ficar mais próximo ao design:
h1 { /* position: absolute; */ /* margin-top: 2rem; margin-left: 28.3rem; */ } .accordion { height: 25rem; max-height: 100vh; /* margin-top: 5.5rem; margin-left: 3rem; */ } .accordion-item { border-bottom: 0.1rem solid rgba(0, 0, 0, 0.123); width: 23rem; /* margin-top: 0rem; margin-bottom: 0.2rem; margin-left: 25rem; */ }
se quiser ajuda só chamar!
O restante está ótimo, Parabéns!
Marked as helpful1@cassialityPosted over 1 year ago@AdrianoEscarabote Oi Adriano, bom dia! Muito obrigada pelas dicas, fiz as mudanças que você sugeriu e ficou muito melhor!
1 - @Great-kiolaPosted over 1 year ago
Hello, congratulations on completing the project, however there are few changes you need to make
- The accordion needs to close when another one open, or the container just overflows the container, when all is opened at once, and
- The woman and the box are not in the right place they need to be.
You're welcome.
2
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord