Ahmed Salama• 70
@AhmeedSalama
Submitted
MikDra1
@MikDra1
All comments
- MikDra1• 5,010
@MikDra1
Posted
Nice one 😀
If you are curious how you can do this straight lines on the top of each card here is my tip:
Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.
Hope you found this comment helpful 💗
Good job and keep going 😁😊😉
Marked as helpful
0 - Aya-Eldegwy• 10
@Aya-Eldegwy
Submitted
MikDra1• 5,010@MikDra1
Posted
Nice one 😀
If you are curious how you can do this straight lines on the top of each card here is my tip:
Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.
Hope you found this comment helpful 💗
Good job and keep going 😁😊😉
Marked as helpful
0 - Mo3bassia• 30
@Mo3bassia
Submitted
What are you most proud of, and what would you do differently next time?
A piece of cake.
What challenges did you encounter, and how did you overcome them?
no challenges
MikDra1• 5,010@MikDra1
Posted
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 37.5rem; }On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
0 - Muneeb Ahmed• 30
@muneebahmed055
Submitted
MikDra1• 5,010@MikDra1
Posted
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 37.5rem; }On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
0 - Karin• 10
@KarinPortfolio
Submitted
MikDra1• 5,010@MikDra1
Posted
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 37.5rem; }On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
0 - David Eyoma• 20
@eyomad
Submitted
MikDra1• 5,010@MikDra1
Posted
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 37.5rem; }On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
0 - ABAH• 30
@ABAHDAVID1
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of starting and completing this solution from scratch alone without no help. But there is no self made man! So I'm looking forward to learning new things from some guru in this great platform! THANKS
MikDra1• 5,010@MikDra1
Posted
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 37.5rem; }On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
0 - Csaba Hell• 110
@hellcsaba
Submitted
What are you most proud of, and what would you do differently next time?
I managed to use transitions for hovering the cards, BEM notation and also a layout for tablet view.
What challenges did you encounter, and how did you overcome them?
It was difficult to make the layout for the desktop design. I used to CSS Grid Garden resource that was provided in the learning path to get familiar with grid properties. Then I could easily implement the layout.
MikDra1• 5,010@MikDra1
Posted
Nice one 😀
If you are curious how you can do this straight lines on the top of each card here is my tip:
Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.
Hope you found this comment helpful 💗
Good job and keep going 😁😊😉
Marked as helpful
1 - mic-tech-1010• 20
@mic-tech-1010
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of i am now able to use figma file for web design
What challenges did you encounter, and how did you overcome them?
The challenge i encountered was that i didn't initially know to import figma files an use if for the design
MikDra1• 5,010@MikDra1
Posted
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 37.5rem; }On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
0 - Thberg-lab• 10
@Thberg-lab
Submitted
MikDra1• 5,010@MikDra1
Posted
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 37.5rem; }On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
0 @AnjaniKavithaKadiyala
Submitted
MikDra1• 5,010@MikDra1
Posted
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 37.5rem; }On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
0- Ainesh Sinha• 30
@ansh32109
Submitted
What are you most proud of, and what would you do differently next time?
I added a personal little sign with a glowing and swirling border.
What challenges did you encounter, and how did you overcome them?
The spacing was difficult, but then i looked into box models and made borders to help me find out where things were with respect to each other.
What specific areas of your project would you like help with?
I think centering an image within a div is where I face issues.
MikDra1• 5,010@MikDra1
Posted
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 37.5rem; }On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful
1
