Looking to hire developers?
@Yinkajay
@angelica-viana
Submitted
What are you most proud of, and what would you do differently next time?
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.
@Yinkajay
Posted
Nice design overall! Kudos I noticed you did not implement the hover state on the links though!
@bookiethelion
Submitted
What specific areas of your project would you like help with?
I need help with BEM methodology.
@Yinkajay
Posted
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.
@Nephilimist
Submitted
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
,
What specific areas of your project would you like help with?
.
@Yinkajay
Posted
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!
@fadikbbb
Submitted
@Yinkajay
Posted
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.
Marked as helpful
@Manju299
Submitted
@Yinkajay
Posted
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!
Marked as helpful
@is3hhhhh
Submitted
it was pretty easy for me as a beginner
@Yinkajay
Posted
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!
Marked as helpful
@Ananyab3100
Submitted
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!
@Yinkajay
Posted
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!
Marked as helpful
@SivakumarAmsa
Submitted
All Feedbacks are welcome....
@Yinkajay
Posted
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.
Marked as helpful
@lucieudo-roberto
Submitted
@Yinkajay
Posted
The card should be centrally placed on the screen across mobile and desktop devices You can use CSS Flexbox or just positioning techniques to achieve this
1.CSS Flexbox Implementation
Employ CSS Flexbox methodology to achieve centralized alignment. Utilize properties such as justify-content and align-items set to center for precise positioning.
position: absolute/relative) to center the card. Adjust margins, padding, or offsets meticulously for optimal placement.@Akshidhan
Submitted
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?
@Yinkajay
Posted
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.
@faom002
Submitted
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.
@Yinkajay
Posted
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.
Marked as helpful
