Cada desafio estou fixando mais o conhecimento e conseguindo fazer com mais facilidade.
What challenges did you encounter, and how did you overcome them?Colocar a foto dentro do circulo. Através de pesquisas.
What specific areas of your project would you like help with?No momento nenhuma.
Nice design overall! Kudos I noticed you did not implement the hover state on the links though!
I need help with BEM methodology.
Nicee work, but there are a few things I noticed!
Your image doesn't match the one provided in the illustration, which could throw off the design consistency a bit.
To make your solution look more like the design, try using the fonts provided. It'll help keep everything in line with the original concept.
Also, make sure the title heading has a hover state and double-check that the paragraph text matches what's shown in the design.
.
What challenges did you encounter, and how did you overcome them?,
What specific areas of your project would you like help with?.
Your solution looks a bit bigger than the original design, especially on smaller devices below 350px width where it doesn't scale well.
Also, the QR image doesn't have alt text, which can make it harder for some users to access.
But overall, great job!
Nice solution you got there!
Here are the few things I noticed!
The vertical margin of 200px used for aligning the card container is causing excessive page height, leading to unnecessary scrolling. Consider using CSS Flexbox, CSS Grid, or a mix of relative/absolute positioning with transformations to position the element. This adjustment will contain the content within the viewport height, eliminating the need for scrolling.
Additionally, update the placeholder 'your name here' in the attribution text with your actual name to personalize it properly.
The attribution text, excluding the links, suffers from low readability due to insufficient contrast between the text color and the body background. Enhancing this contrast will improve readability.
Replace the placeholder 'your name here' in the attribution text with the intended name to personalize the attribution properly.
Modify the cursor behavior upon hovering over the submit and rating buttons to change it to a pointer. This adjustment can be implemented using cursor: pointer in the CSS for better user interaction feedback.
Very nice solution regardless, I like your card background linear gradient!
it was pretty easy for me as a beginner
The heading's text color should match the dark blue hsl(218, 44%, 22%) from the design images instead of the current black color.
Furthermore, consider center-aligning all text elements (heading and paragraph) using text-align: center in the CSS to maintain consistent alignment throughout.
Additionally, the QR card appears slightly narrower than the design's specifications, suggesting a need for adjustment in its width.
Apart from these minor issues, your solution rocks!
Hey Learners!
Here is my attempt to replicate the provided design using CSS grids. Feel free to point out my mistakes and ways to correct them!
The Google font import tag contains a visible "/>", which should be addressed to ensure proper functionality without displaying text on the page.
The background colors of the "Monthly Subscription" and "Why Us" sections differ in the design, but both sections have the same background color in the implemented solution. Adjusting these colors according to the design specifications is necessary.
The attribution should be positioned separately from the main solution, possibly at the bottom of the page using absolute positioning.
Apart from these, your solution is spot on and your responsivness is cool!
All Feedbacks are welcome....
The main heading color should match the one specified in the design file. Referring to the style guide markdown file provided can help identify all the document colors accurately.
Additionally, the body background color needs adjustment to align with the design file. Setting it to the lighter gray color hsl(212, 45%, 89%) will ensure consistency with the design standards.
For mobile screens (375px), consider resizing the QR card to enhance responsiveness. Shrinking its dimensions will facilitate better adaptation to the mobile layout.
Beyond these observations, the overall solution is strong and meets the project requirements effectively.
How do you align any element vertically in the center? I have used relative positioning; to center it vertically, I used left: 10% and right:10%. I have achieved what I want to achieve but is it okay to use it?
Hello Akshidhan, to answer your question, there a variety of ways to center an element vertically, you can use the CSS Flexbox or CSS grid, and also the positioning method you said you used works as well. Looking at your code, I only notice fixed and absolute positioning though.
I haven't been able to successfully implement the white arrow inside the button or media query yet, but I am currently working on improving them.
Calculation works fine with some minor testing. Only a few style changes might help, like the submit button arrow, it''s included in the images folder of the starter pack and the padding on the input fields.
