@AshongAbdallah06
Submitted
Looking to hire developers?
@thaisavieira
@AshongAbdallah06
Submitted
@thaisavieira
Posted
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
@Ebi-Akangbou
Submitted
In responsive css in both mobile and desktop, which one should I start first?
@thaisavieira
Posted
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/
@Hekterek
Submitted
@thaisavieira
Posted
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
@Fran-Sanabria
Submitted
@thaisavieira
Posted
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:
Marked as helpful
@Divine-Blessing
Submitted
The responsiveness was the most challenging part as I had an error from my syntax which took me time to discover.
@thaisavieira
Posted
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:
Marked as helpful
@imcbee
Submitted
Hello! This is my first front-end mentor challenge. I am currently in GA's SEI program and I wanted to practice more HTML and CSS so I thought this would be a great challenge. Feel free to send me some feedback. I would love to learn more and improve on my craft. Thank you so much for taking a look :)
@thaisavieira
Posted
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