@Nisiur
Submitted
@Slimani-CE
@Nisiur
Submitted
@Slimani-CE
Posted
Hey Arek,
To fix the font issue, add these lines in the <head>
section before your CSS link:
<link rel='preconnect' href='https://fonts.googleapis.com'>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap' rel='stylesheet'>
Make sure to use var(--ff-outfit)
for the font-family. 👍
@ebeeraheem
Submitted
HELP NEEDED
This has been the toughest challenge I've taken yet.
.top
and .bottom
classes. I have no idea why it's the when it shouldn't be..plan
section of my card where the music icon, plan details and change link are located. I cant seem to be able to arrange them as in the design guide.How can I remove the space in the first issue? Also, how can I better arrange the items in the plan details .plan
of the card?. My best guess is using the css grid
but I have no idea how.
@Slimani-CE
Posted
Hey Ibrahim,
Addressing the first challenge, try setting the height of the image element within the .top
class to 100% and customize the height of the .top
element itself to be 170px. This should eliminate the unwanted space between the hero image and the bottom of the card.
Now, for the second issue related to the arrangement of items in the .plan
section, consider the following steps:
justify-content
from the .plan
class..plan
class.position: relative
to the .plan
class.position: absolute; right: 15px;
to the third child of the .plan
class. If needed, you can assign a custom class to this child or select it using .plan:nth-child(3)
.@yassine-ramla
Submitted
it was pretty challenging to perform the toggle of the prices using just CSS, especially that I'm working with Tailwind-CSS. i will appreciate any feedback.
@Slimani-CE
Posted
I suggest implementing a toggle functionality for prices using a clever combination of HTML and CSS
. First, create a hidden checkbox input accompanied by a corresponding label. By placing your toggle button within this label, a click on the toggle will essentially trigger the checkbox. Leveraging the CSS :checked
pseudo-class, you can dynamically style elements based on the checkbox's state. When the checkbox is checked, apply styles to display the monthly price; otherwise, keep the yearly price div visible.