@simokitkat
Submitted
I would appreciate any feedback.
@arey-dev
@simokitkat
Submitted
I would appreciate any feedback.
@arey-dev
Posted
Great work! I like your layout between 768px - 992px!
Here's my few comments.
@media (max-width:992px)
just once, and put all the CSS rules that you want to fall under that viewport size.Marked as helpful
@Maromani248
Submitted
@arey-dev
Posted
Congratulations on completing this challenge! but there is a slight issue in your code. Only the mobile design is visible.
Here is why:
@media only screen and (min-width: 375px) and (max-width: 1440px)
you styled the mobile design in the between the range of 375px
- 1440px
width.
Maybe you just got confused a little bit. I know you can fix this issue right away, Happy Coding!
Marked as helpful
@ZLikas
Submitted
Any advice is welcome, the hardest part was changing the button's text to transparent if you know how to do it, let me know.
@arey-dev
Posted
Hello! your work is great!!
I think the button's text and the p
tag has the same color. But if you want to reduce the opacity
of the button's text. You can use hsla()
function, it takes four value. The fourth value is the alpha value, it determines the opacity of the color.
Example:
button:hover {
color: hsla(0, 100%, 100%, 0.5);
}
@mohit1607
Submitted
Hi awesome community I tried to imitate the whole design but the only problem I am facing is istead of making a single class for card I made 3 classes which is I know is not scalable . Can anybody suggest what should I do to reduce css code and also suggest some css library so that workflow gets faster. I will appreciate your help
@arey-dev
Posted
Hello, congratulations on completing this challenge!!
Regarding with your problem. Remove the .card2
and .card3
, just have 1 class named .card
and then try to use the pseudo-class :nth-of-type()
div.card:nth-of-type(1) {
margin-top: 1rem;
}
:nth-of-type()
pseudo-class targets the siblings of the same type based on its positioning. Which is in your case, the div
with the class .card
.
Read this for more info :nth-of-type() and If you wouldn't mind, try to look at my solution. Maybe it will help you.
Marked as helpful
@nirvayathapa
Submitted
I hope u guy to help me with responsiveness!
@arey-dev
Posted
Hello, nice attempt on this challenge!
Here's my advice:
position
property on your layout because you will have a hard time making the page responsive.display: inline-block
or display: flex
to layout your main
.Marked as helpful
@KTrick01
Submitted
Hi! This is my first challenge in this community, im pretty new with css and html so i would like you guys to give me your feedback, even if it seems basic for you, im sure it will help me!
@arey-dev
Posted
Good day! You work is great!
Here's my opinion. When using CSS custom variables, It's better to have a flexible name or should I say a 'general' name, i.e., --clr-primary
, --clr-secondary
, and --bg-clr
. In this way, if you would ever change your code in the future, it would only be the value of the property, not the entire declaration. Happy coding!
Marked as helpful
@roshanpanda666
Submitted
the difficult part of the project was placing the icons in their position if you did not open the site on chrome one of the icons that i placed in my card is collapsing i dont know why
@arey-dev
Posted
Nice attempt on this project @roshanpanda666!
Here's my input:
That's all. Happy Coding :)