For this challenge, the tricky part is to arrange the box time, this in my opinion is quite tricky because this box must follow the responsiveness on various screen sizes for mobile is quite easy but for tablet and laptop screens it takes precision to arrange the box to follow according to the screen size, I suggest using grid and flex with both it will be more free to arrange the box.
Not good enough but i like it
Feel free to drop any feedback ✌.
I liked the hover transitions. 👌 Is good to add comments. I never add those ＞﹏＜
To avoid repeating elements you can use vue.js so you can divide the project in tiny lego pieces (and other frameworks but i think vue is the smallest and more sample use)
The data Doesn't show ＞︿＜ you could just add it manually for this exercise, mayor complexity arrives with other frameworks to work faster and more efficiently .
how do I complete the rest of the background? I can only add 1 svg without breaking the whole background.
You can use z-index and position absolute.
you could put images in a div (1 each and then position it so it fits the design ) https://www.w3schools.com/cssref/pr_pos_z-index.php
Also: you could add a description text to the image https://www.w3schools.com/howto/howto_css_image_responsive.asp
The rest looks good, remember to add the color to the text, I add the color variables so i can use them more easily
Continue Practicing :D
Hi Guys,
I have finished another project, I know the design and coding might seem really bootleg and noob but I am 100% self-taught, hence also open to any constructive criticism. My main questions which I could not figure out on my own and woul be very grateful if you could answer any of them are:
1.) There is a white border around the guy's profile pic which I could not recreate, any suggestions? 2.) I made the background in a -lets say- acceptable degree (compared to my skills) but is there any more "orthodox" way to create this kind of bakground? -meaning the image is turned by XY degrees and then the container is above them. 3.) Several elements use position:absolute with top/bottom/left/right XY% to put elements in the middle , I tried position:absolute and add 50% but for some reason then the picture totally was not positioned to the center, like .img_profile has top:25% and left:40% to put the guy's profile picture in the middle, this works. Any suggestions as to why 50% doesnt work as I would predict in this case?
Again, any constructive semantic/practice/method suggestion & criticism is very much appreciated in advance, so far I only have positive experiences with the community here in this regard. :)
Thanks in advance!
Border: You could put the image in a div (by url) and then put something like
border: 5px solid white; because the image doesn't allow a round color border
Background: you could put it out of the main container and use z-index property to change it somehow
That's what i thought tell me if it helps you somehow :D
This is my first React app so pardon the unstructured layout.
This is how i structure my styles using SASS. Index have variables, normalice, App styles and Media.
https://github.com/XxtbmfxX/frontmentor02/tree/master/src/styles
App have all components styles.
What do You think about my JS counter animation and CSS animation?
This is my first challenge. Any feedback for improvements would be appreciated.
position absolute and relative, also try what work better grid or flexbox, good luck!
