Skip to content
OverviewSolutions
3
Comments
6
Thaís Vieira
@thaisavieira

All comments

  • Thaís Vieira•120
    @thaisavieira

    Hello, @AshongAbdallah06! You made a great project.

    It's possible to centralize the body content by adding the property height: 100vh and you can remove other things like width, margin, and padding.

    body{
    background-color: hsl(217, 54%, 11%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

    Also it's possible to add the active state by using the :hover selector in h1.description, span.author , and image.equilibrium

  • Thaís Vieira•120
    @thaisavieira

    Congratulations, Ebi Akangbou! Your solution is pretty close to the required design. At questions for the community, you asked about responsible, I recommend you start with mobile and I'd like to indicate this post from Adobe XD: https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/

  • Thaís Vieira•120
    @thaisavieira

    Hello, Karol! Congratulations on your solution, it's pretty close to the asked design and responsive! I checked your code and I noticed to you didn't write your own read.me file. I would appreciate reading your path to this challenge. Also, I notice in your index.html at the 24 line you write:

    <p>P E R F U M E</p> If you would like it's possible to uppercase letters with CSS too. But this is just a little detail. I love your work, keep going. You're awesome!
    Marked as helpful
  • Thaís Vieira•120
    @thaisavieira

    Hello, Fran Sanabria! Be welcome to our Frontend Mentor Challenge Community and congratulations on submitting your solution. I love it, it's perfectly responsive, with very well-organized code. However, if I may say so, I missed the closeness between your solution and the desired design, especially regarding colors, spacing, and font sizes, as well as I, missed your own read.me on the GitHub repository. Here are some tips on how to resolve these notes I mentioned:

    • I fully understand that many of us do not have access to Figma files, which can lead to some discrepancies with the desired design. Try to open the images of the desktop and mobile versions in the browser and with the help of a notebook and a browser extension called Measure-it, note the spacing, colors, typography. Regarding the repository on GitHub, I would like to point out the following post from Twitter: https://twitter.com/AparnaSoneja/status/1547850784737738753 and also take the time to follow the read.me template provided along with the challenge. I hope I have helped you. Keep studying, you're doing great.
    Marked as helpful
  • Thaís Vieira•120
    @thaisavieira

    Hi, @divine-bblessing! Be welcome to Frontend Mentor Challenge community and congratulations on submitting your first challenge. Your desktop's solution is pretty close to the design but I have some appointments for the mobile version. First of all, when we get to resolutions, such as 437 x 490 pixels, the design gets messed up and the button comes out of the card. However, if we keep decreasing the screen size, the mobile version also appears similar to the requested design but with the positioning located at the bottom of the page. Tips for solving the problems encountered:

    • The first point is that you say you found problems working with responsiveness and I have two suggestions that helped me on that same point. The first one is about the page: https://css-tricks.com/a-complete-guide-to-css-media-queries/
    • And the second point is a browser extension that helps analyze responsiveness on different devices: https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb I hope I have helped you in some way. Keep studying, you're doing great!
    Marked as helpful
  • Thaís Vieira•120
    @thaisavieira

    Congratulations on your first challenge, Ian! Its HTML tags are well organized and the design is very similar. This challenge was also my first one and something that helped me work on responsiveness was https://css-tricks.com/a-complete-guide-to-css-media-queries/ Hope this helps!

    Marked as helpful