Hi! Please check the live page on PC, since it's not responsive the thumbnail won't show the actual result.
I couldn't find out how to show the eye icon on the hover. Also, I didn't know what filter config apply to make the image change color when hovering.
UPDATE: Thanks to @MrSandipSharma I could do the eye thing!
Great work ππ½
Regarding your question above hover state.
You can position second image as position:absolute on top of original image. Remember to make container of original image as position:relative.
Then you can set position of second image to desired location with top, bottom, left and right properties.
If you are unsure, learn more about different css positions. It is very important thing to learn in your css journey.
Second, you don't need to put filter on original image to show the color on hover. All you need is put background-color on the container of original image on hover. Lower the opacity of the color so that the image stays visible.
I hope you find this useful.
Just finished another challenge. I struggled getting the product description to align right. I was wondering if I can get feedback on how to improve my CSS so the product texts are aligned right.
Great work ππ½
I have few suggestions for you.
You are using id's for each element and then style them using id's. Use class instead of Id for most part. Because class names are reusable and you can have multiple elements with same class name and one element with multiple class names.
Regarding your question about left align of text. You need to do few things for it,
a) Remove your left margins from each element in product description part. Instead give a padding to whole product description part and it will keep all the content inside that padding.
b) Put text-align: left on product Description div instead of putting it on individual elements.
c) In price section where you specified display:flex change the justify-content from center to start.
I hope you find this useful.
Good luck.
Hello,
Can you please give me some feedback on what I can do better/more efficient in my code?
Thanks a lot!
Great work ππ½
Few suggestions
You don't need to specify display: block everywhere. Remove it from all elements except img and you won't see any difference.
I see you are specifying margin: 0 auto in lot of places. I understand you are trying to center things but as Abdul mentioned in his comment, there are better tools to center elements in css.
I see you specified padding for img and p element to keep them inside the wrapper. The best solution is to just give padding to wrapper itself and all elements will stay inside that padding.
.qr-wrap {
padding: 15px;
}
I hope you find this useful. Best of luck.
Great work ππ½
Quick suggestion Instead of using div and span elements to create theme toggle. The easier and more semantic way is to use 3 radio button wrapped in a container. Then style the radio button the way you like.
Read more about Radio buttons here developer.mozilla.org
I hope you find this useful.
Great Work ππ½
Quick tip, you don't need to add margins to center your content in the body.
Just add following to the body.
body {
display: grid;
place-content: center;
}
I hope you find this useful.
Hi, programmers
This is my solution for Interactive-pricing-component challenge.
All feedbacks are welcome:)
Thancks.
Congratulations on completing this challenge π
I have one suggestion regarding your input slider.
You don't have to use div to make a slider with thumb. HTML already have a input method for this. It is called type="range" Syntax below
<input name="slider" id="slider" type="range" min="1" max="5" step="1" value="3" />
Here, you can choose min,max and step. When user moves the thumb on the track (slider bar), the thumb automatically goes to the next value. So user can only choose the pre-defined values rather than every possible value between min and max.
Value attribute gives the slider a default position when page loads.
further you can style the thumb and track in css the way you like.
I hope you find this useful
Congratulations on completing this challenge π
I have one suggestion, if that helps
Couple of cards are not visible because of their background color being white. Try changing the background color of the body to the one provided in the style guide or add box shadow them.
This is a simple and nice project for me.
Congratulations on completing your first challenge π
Quick tip
The design had text alignment in center.
You could have accomplished this by just specifying text-align: center to the body.
I hope this helps
My app is working but I'm not currently happy with the code structure. I would appreciate some help in improving it. Thanks
Congratulations on completing this challenge π
Couple of tips
You can center the whole app in the body with display flex or display grid.
body { display: flex; justify-content: center; align-items: center; }
or
body { display: grid; place-items: center; }
Play with different values justify-content and align-items to better understand the flexbox.
You can put placeholder text in input values to give hint to user of the expected input.
<input type="text" id="day" name="day" placeholder="DD">
You can also style the placeholder text in css.
I hope this helps
HTML, CSS and JS, tips to improve are welcome :)
Congratulations on completing this challenge. π
One quick tip, Input can have placeholder attribute to give user a hint regarding the expected value.
for example, day input can have 'DD' as placeholder text. Syntax as follows,
<input type="text" id="day" name="day" placeholder="DD">You can further style the placeholder text in CSS.
I have one main questions and that is how do you make the line through the button for the design of the site. I tried doing button::before, but the line would only appear on the top. Thanks
Congratulations on completing the challenge.
Regarding your question about horizontal line,
One method is to create horizontal line as div and give it height of 1px. Then put horizontal line and button in flex container to put them next to each other and align-items: center.
Another method is ::before pseudo element, like you mentioned. But you can move the before element with top, left, right and bottom properties, just like you do with position absolute element. or you can try 'vertical-align: center' on ::before element.
I hope this helps.
Comment challenge
It is never recommended to have html and css in one file. Try to keep html data in html file and all css data in separate stylesheet.
