Chetana_Chaudhary• 100
@chetanachaudhary
Submitted
Any Suggestions?
P
Pillippa Ignacia Pérez Pons
@Pillin
All comments
- P
@Pillin
Posted
Hi!!
You can use
Flexto positionate in the center. Rembemer the container need to be 100hv and 100 vw,display: flex; justify-content: center; align-items: center;ref: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ;).
if you have doubts don't hesitate in say
0 - Jorge Miguel• 410
@notFaceroll
Submitted
I didn't know how to apply a mask-layer properly to change the color of the image and ended up making an empty container for a background image to use the linear-gradient property.
P@Pillin
Posted
Hiii!!, you can try to use mix-blend-mode, there is an example here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_mix-blend-mode-all. the one that comes closest to it is the multiply =). Also, It isn't similar to the color, but it is closest.
Marked as helpful
1 - Muhammad Kaleem Raza• 120
@MuhammadKaleemRaza
Submitted
How to overlay a color on an image in a div?
P@Pillin
Posted
Hiii!!, you can try to use mix-blend-mode, there is an example here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_mix-blend-mode-all. the one that comes closest to it is the multiply =). Also, It isn't similar to the color, but it is closest.
0 @peter-kalavritinos
Submitted
P@Pillin
Posted
Hi!!!
when you defined the H2 tag, you didn't close it, that makes it look dropped.
<h2 class="question">How many team members can I invite?</p><button title="open answer" class="toggle-button"><img src="./images/icon-arrow-down.svg" alt=""></button>I suppose that you want to do is
<h2 class="question">How many team members can I invite?</h2> <button title="open answer" class="toggle-button"> <img src="./images/icon-arrow-down.svg" alt="" /> </button>With the flex that you have in the parent. you will have the alignment correctly
I hope it has been helpful
Marked as helpful
0- placoderm• 20
@placoderm
Submitted
The biggest challenge for me on this project was all of the images and the fact that some extended beyond a div and some did not. The background images were also tricky and I used some css that I hadn't before.
As well, the animations on the accordion were tricky, getting the rotate correct and closing the sections when new ones opened.
I really appreciated looking at the front end of other people's projects, both those that implemented everything correctly (because I didn't believe it was all possible!) and those that didn't so I could see the things I needed to focus on getting right.
I would appreciate feedback on:
- the way I aligned the image
- the way I structured the divs to allow the JavaScript to do its thing.
- the opening and closing animation. I had to have a fixed height for the answers in order to animate this. I'd appreciate knowing another way to do it where I could use auto height and still get the animation.
P@Pillin
Posted
Hi! I hope that you are well
If you want to centered the layout vertically
you can add in main tag
height: 100vh; display: flex; align-items: center; justify-content: center;and in #card remove the margin. I hope It has been helpful.
0
