@jwalczak94
Latest solutions
Latest comments
- @SrHatcher
Hello!
I wanted to say that your fading animation is very cool! I wanted to do that for mine but I didn't know how to do it until I saw your code.
Talking about your control buttons, I would recommend you to take a look at my code to understand much better how I did it, but in short: I used a div container for the person img and my buttons container, so that I can use it to control the img size and use position: relative to positionate my buttons container with position: absolute. I'm using two buttons for each testimonial and using my JS to make them work together and not break the display.
nice solution! :)
- @carlpy@SrHatcher
Hello!
Nice Solution, I also used chart JS to make the chart! It was very hard for me to read only the documentation, luckly I found a youtube channel that makes tutorials about how to personalize the charts, this video may help you, I'ts abou how to change the cursor when we hover a Bar.
I hope that channel Helps you. Good luck! :)
Marked as helpful - @OscarCasEsc@SrHatcher
Hello! Your project is great, keep the good work! :)
To improve your HTML structure I would recommend to start using semantic HTML, for example you could replace your div with class card with a main tag, replace your p tag with class title with a h1 tag. You could also start using BEM to name your CSS styles. And finally you could try to remove your div with class wrapper and move its styles to the body tag, It will have the same result :)
Marked as helpful - @shan0720-creator@SrHatcher
Hello Shantanu! You have made a great work here, keep it up :)
to improve your website you can add to the body styles a min-height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center to make the content of your page automatically position in the center of the view, so you can remove the margin-left and margin-top you added to your div with the class card .
since I see you're using a div with class sub-card with background for the image, you can add another div inside that one with a width: 100%; height: 100%; background: hsl(277, 64%, 61%); mix-blend-mode: multiply to try to simulate the purple filter on the image.
and at last i would recommend you to change your div tag with class card for a main tag, since it's the main container of your website. so you can start using semantic HTML.
I hope these recomendations help you, nice work and happy coding :)
Marked as helpful - @Chiemeka2006@SrHatcher
hello Chiemeka!
To fix the problem with the height of the body i would add min-heigth: 100vh so that the body will have a height you could work with and then i would remove the padding top you have. Using height:100% doesn't work because the body at first doesn't know the total height of your screen (or even the total height of your page), and because of that the body height is set by the elements that are inside of it, unless you set a height for the body like i'm telling you (min-height:100vh).
By the way, i didn't know that using height: 100vh wasn't advisable, i would like to know why D:
You're doing a great work. keep going :)
- @gidado662003@SrHatcher
Hello Gidado! Don't worry if you're struggling doing a project, that means you're in the right way to be better in the future.
I'll change the name of your index2.html to index.html, so that github will know which file it has to show in github pages
You can add min-height: 100vh, display: flex; align-items: center to the body, and you'll see how the main container will align vertically. Adding min-height:100vh will help you occupy all the height of the screen view, no matter what device the user is using.
To use the fonts for the project you can get them from google fonts, i've seen that every project on frontendmentor uses google fonts for the font-family. if you don't know how to use google fonts yet you can watch this tutorial: https://www.youtube.com/watch?v=qgmLDPLApBY
One of the best ways to improve your skills at writing code is to try to make the code smaller. you can try use the less divs you can. by doing this you'll learn when you need to use them or not.
Keep the good work :)
Marked as helpful
