I'm having some difficulty in placing two background images :confused: . I'm trying to get closer to the design. I doubt if my code is correct. because the background image changes when the screen size is different :v: . maybe some feedback for me
Hi, Good Job on completing the challenge. I have listed a few things I hope will be helpful in coding for you.
in your body styles , background color and background images can be written in background only (like this background: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg"), var(--color-dark-cyan);).
The issue regarding the images change in screen size is because you have added media query on the body you don't have to do that. Instead of 100%, you can reduce the value to 50% or 40%. Just define in the main body where you are putting images.
there is no need to define no-repeat two times in background-repeat.
I hope these tips will be useful for you. Keep Coding ! :)
Did my best, I hope it's good:) Any feedback appreciated!
Hi, Great job on completing this challenge! I want to know what was your thought process in adding text-container, about, title-element, paragraph-element. Because to me about class is extra in this. Other wise your code is great. Keep Coding! :)
Hi devs,
I have completed this challenge. Please comment you're though if it needs any improvements.
Thank you!
Hey, Great job in making desktop view but where is the mobile view? You need to make 3 views as devs, Desktop tablets and mobile. As for the code, Good Job!
Any feedback is appreciated! The background images were the trickiest part of this challenge for me :D
Great Job!, I was checking your code but wasn't able to find where the bubbles on the top and bottom were, can you tell me?.
I'm unsure of the second left box with subscription price, when resizing the window its width stays the same whereas the third box does shrink greatly and I'm not sure if thats the best practice or if it looks better than both shrinking at the same time, I'd welcome any suggestions how to improve my grid especially media queries which I'm new to. Happy coding everyone!
P.S. the scss code is kinda mess, I was really tired to hold focus when doing this challenge sorry :-D
Hi, I have checked your code. I would suggest making the mobile view first and then starting working on desktop view (that's what I do and sometimes I even add a tablet view as well in some designs so the transition from desktop to mobile is easy).
As for the applying media query you have to see for yourself when to add it. Like in this case, if you shrink the screen to 595px you can see that the sign-up button is overlapping with the "why-us" section. This is where you should have made it a mobile view. I know that we are given views on the styles.md but we don't have to follow it. They are given just for reference. When making these types of grids you have to see that all the text is not shirking and there is some padding in between the buttons.
Keep on Coding! :) Good Luck
Hi, you could have used "order: 2" in the header class instead of using "flex-direction: row-reverse". Using flex-direction can work in this case but not in all cases. It can mess up the design. So better use "order". And you don't have to specify position relative it will work fine without it as well. Keep Coding! :)
please give me a feedback, it's very helpful to me
Hi, very well done, Good work. But there is a slight issue in the mobile design, in the price component you have a border-left radius of 5 px, I don't know whether you have that in the mobile design or not but you need to remove it from the mobile design because there is a white background showing. Other than that, your code looks good. Keep Coding! Cheers
Animating shadows is generally not advised but I had no other choice since shadows on my ::after pseudo element weren't visible. If I set the shadow to inset then it would work but not otherwise. My best guess is maybe it had something to do with the stacking context.
Hi, I am not that good at coding yet but from what I can see, you need to do some changes.
You need to decrease the size of the rock paper scissors buttons on the main page. They are a lot bigger on the screen even if they are the same size as given in the design.
You need to check the rules modal design.
You need to add score value as well starting as 0.
Other than that, You have done an amazing job at making this, even better than my own solution. Keep up the work :). Your solution is really amazing , I really love it
