@OmarZaghlouleh
Submitted
Hi, this is my solution to challenge the product preview card component, it's the first solution after learning the basics of HTML&CSS, I've added some extra animation take a look at it and I hope you like it, thanks!.
Looking to hire developers?
@Philip-Droubi
@OmarZaghlouleh
Submitted
Hi, this is my solution to challenge the product preview card component, it's the first solution after learning the basics of HTML&CSS, I've added some extra animation take a look at it and I hope you like it, thanks!.
@Philip-Droubi
Posted
Congratulation on completing this challenge! 🎉
The solution looks really good, you did a really great job as first challenge.
Keep coding!👨🏻💻
@rkrawczyszyn
Submitted
Hi!
The implementation lies in src/components/solutions/interactive-rating. I would love to receive feedback mainly about the SCSS parts:
I need mainly CSS feedback, as during daily work I hardly write CSS, mainly React TypeScript... Thank you!
@Philip-Droubi
Posted
Congratulation on completing this challenge! 🎉
This is a small tip you can do to improve your solution.
body
just add this: min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
Doing This will center the rating component for all screens.
-In background
div remove the margin cause now we don't need it:
.background {
/* margin-left: 50px; */
/* margin-top: 50px; */
}
Give the .container
some more max-width
, let's say 380px
or 400px
would be great.
Finally, using js
remove the old component when moving to the second screen by setting the display
to none
, or removing the element by .remove()
js function and replace it with new one or by changing the inner-html
...etc, In fact, you have many ways to do this.
Hope you find this helpful😀
@EnidaShehu
Submitted
Take a look of my solution. Feedback is welcomed :)
@Philip-Droubi
Posted
Congratulation on completing this challenge.
This is a small tip you can do to improve your solution.
For the page body
just add this.
background-color: hsl(217, 54%, 11%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
That will center page elements for all screens.
Hope this helps you :)
Marked as helpful
@muyiwa99
Submitted
My version of the rating component page built with HTML, SCSS and Java. Any improvements will greatly appreciated.
@Philip-Droubi
Posted
Congratulation on completing this challenge.
Here are some tips you can do to improve your solution.
body{
/*margin:1.5rem*/
padding: 1.5rem;
}
main-container
doing this will make it look better on all screens.body .main-container, body .thank-you {
width: min(90%, 390px);
min-width: 200px;
}
h1
inside the main-container
I think adding some margin will make it look better.body .main-container h1 {
margin: 18px 0 10px;
}
submit
button, as I can click it without setting a value.Hope this helps you :)
Marked as helpful
@oceanotrash
Submitted
@Philip-Droubi
Posted
Congratulation on completing this challenge.
Here are some tips you can do to improve your solution.
First for the page body
it's better to add this code.
body {
font-family: "Plus Jakarta Sans", sans-serif;
background-color: hsl(210, 60%, 98%);
font-size: 16px;
color: hsl(219, 12%, 42%);
min-height: 100vh; /* To take the full page height on all screens*/
display: flex; /* To center the main element */
align-items: center;
justify-content: center;
}
For main
or .container
you need to delete the margin margin: 80px auto;
also delete it from the 600px media query margin: 20px auto;
Now for the .wrapper
I think by doing this it will look better :
.wrapper {
background-color: white;
padding: 40px 30px 0;
margin: 0 auto;
max-width: 800px; /*So that the element does not appear too wide on the screen */
width: 92%; /*To fit small screens*/
max-height: 90vh; /* To be shorter than the height of the screen */
overflow-y: scroll; /* To show all elements in the wrapper */
border-radius: 15px;
box-shadow: 0px 0px 26px -13px rgba(0, 0, 0, 0.26);
}
Also delete margin: 10px;
from .wrapper
600px media query.
If you don't like the default scrollbar, I recommend this :
.wrapper::-webkit-scrollbar {
width: 8px;
background: lightgray;
border-radius: 10px;
}
.wrapper::-webkit-scrollbar-thumb {
background: gray;
border-radius: 8px;
}
Hope this helps you :)
Marked as helpful
@ostapyshyn
Submitted
React Typescript Vite Sass
@Philip-Droubi
Posted
Congratulation on completing this challenge.
Here are some tips you can do to improve your solution flexibility.
First for the App
I suggest you do this:
.App{
height: fit-content;
min-height: 100vh;
padding: 28px;
}
Doing this will make the background cover the page instead off 100vh
only.
For smaller screens, you can add this so that the link is no wider than the user card
._link_ds8a2_385{
word-break: break-word;
}
Hope this helps you :)
Marked as helpful
@Philip-Droubi
Submitted
Hey everyone 🙋♂️, this is my solution for Huddle-landing-page
challenge,
please Take a look at my solution and tell me your feedback. thanks :)
@Philip-Droubi
Posted
The register button appears incorrectly in the screenshot on this site please try to see it from here: https://philip-droubi.github.io/Huddle-landing-page/ If you found that the button goes wrong just tell me in the comments THX :)