This is my first time trying to really focus on including classes for all elements and giving them some kind of structure that links back to the parent div. Am I heading in the right direction with this?
Also, while I got there eventually, was there a more straightforward way to achieve the semi-transparent hover layer on the main image?
@nickfwilliams, your use of the ::before pseudo-element is probably one of the better methods to achieve the hover effect. It's compact and can be easily applied to other elements without having to modify HTML markup. Good job!
Apart from the spacing, I had problems to generate the card shadow. How can I generate the box shadow effect present in the design resources?
Hey @vitorpedeo, good work.
You just about have it with the box-shadow attribute, however the <blur-radius> value of the shadow is set to 0, which explains why the shadow edges look hard.
Going from
{ box-shadow: 0 28px 0 16px rgb(0 0 0 / 8%) }
to
{ box-shadow: 0 28px 16px 16px rgb(0 0 0 / 8%) }
should move you closer to the result you're after. Check out MDN Box Shadow Values for details.
Another exercise!
on this one, I struggle to place the profile picture in between the two sections of the card. What would be the way to approach this?
I would also appreciate a few hints for placing those two circles in each way of the background. Any direction I should take?
Hey @outerpreneur,
One solution for dealing with the position of the avatar img is to make it an absolute positioned element, and then set its bottom position to bottom:-48px, which is negative half the height of the image. This will center the image on the bottom edge of the upper-card element.
position:relative will also need be added to the upper-card element to insure the position of the image is based on its parent container.
Finally, add enough padding to the next element, middle-card, to compensate for the overlap of the image into this element's container. padding-top:50px should do the trick.
Another exercise!
In this one, I have struggled with the buttons. I can't align the three of them to the same level because of the paragraph's different heights. Is there any CSS rule that can help with this?
It looks fine on the screenshot, but if you go to the link, it doesn't: https://outerpreneur.github.io/3-column-preview-card-component-main/
Any suggestions will be much appreciated.
Hey @outerpreneur, good work!
Give your <p> elements a fixed height value, something like height:300px. This will ensure the buttons end up at the same horizontal position.
Would love some feedback. Thanks.
Hi Joy, I have a suggestion regarding the the company logos.
Using display:flex for the element containing the logos forces each <img> to have identical width and height values, which explains why some of the logos look squashed (most noticeable on the Microsoft and Vector Graphics logos).
A quick solution for this would be to remove the display:flex property and space the <img> using margins, such as margin: 0 2%. This will allow each image to be uniformly scaled and remove the squashed look. The text-align:center property ensures that the images are centered within the page.
Feedbacks are appreciated. I was not able to make flip animation so, I made a normal countdown timer.
If you know how to do so, feel free to leave guidance here.
Hey @coderSuresh, great start!
I have a vanilla JS & CSS example for creating a flip card animation. I started writing it here but it got a little wordy, so I created a CodePen instead. You can check it out here Flip Card With CSS and JS. I hope it can provide some inspiration.
