NOUTCHEU LIBERT• 200
@noutcheu1
Submitted
Corfaya
@Corfaya
All comments
- Corfaya• 110
@Corfaya
Posted
Hi!
I'm writing to you because I think you forgot to include the .js file!
Good work :)
0 - zeph_w• 50
@ZephaW
Submitted
I am pretty comfortable with how my work has turned out. The biggest challenge I am currently facing; first is how the page looks after deployment (it is much bigger and doesn't fit as it did prior to deployment). Secondly, how to place the content in the middle of the web page as it looked in the desktop illustration
Corfaya• 110@Corfaya
Posted
Hey! Good job! I'll try to answer your questions.
I don't know if I understood your first question correctly, but, looking at the preview of the site, it seems to me that margins are missing for mobile viewing from the .testimonial-grid. For example,
.testimonial-grid { margin: 50px 0; }To centre all the cards you used flexbox on the body. However, I notice that the container of cards (your 'testimonial-grid') is taking up the whole page. Try setting a width and a height on your container (e.g. 1000x600 px, or some other value, whichever seems more correct to you). In this case, change the flex-direction to 'column' so that the footer does not end up next to the container.
I'll conclude by suggesting two things:
-
use the required font, you can import it directly from google fonts to CSS. Go to Font Family page, add the required values to the basket and copy the '@import' section as the first line of the CSS. After that, use the font-family property: //CSS font-family property//.
-
you should find in the directory a *.svg for the background quotation mark on the first card. Insert it as background-image.
I was a bit long-winded, but I wanted to explain myself as best I could. Sorry. Good work!
0 -
- Giorgio Faini• 110
@Georgelafayen
Submitted
Hi There 😁!
This is my solution to the challenge, any advice on how to improve my code is welcome!
Corfaya• 110@Corfaya
Posted
Hello Giorgio! Your code is very clean, congratulations!
Just remember the Alternative Information (alt) attribute, some users may have to use screen readers. For example:
<img src="img.png" alt="This is an image" >But this is only a detail, not a code problem.
Well done indeed! Laura
Marked as helpful
1 - Hotsaucceee• 110
@Hotsaucceee
Submitted
Corfaya• 110@Corfaya
Posted
Hey! I like your code, you use the combination of selectors very well. I'll just point out a detail that you may have just missed.
In the challenge, a certain design is required when buttons are clicked. To do this, use the pseudo-class :active. For example:
button:active { /* CSS code */ }In your code, for desktop mode you have inserted the required CSS rule on click before the click happens, while for mobile mode you've left the basic style, without any rule being inserted on click.
I hope I've been clear and helpful and I apologise in advance if there are any grammatical errors (I'm not a native English speaker). Good work!
1
