For some reason, when I deployed this, something happened to Patrick's picture.
Also I should mention that I forgot to start with mobile design, which a lot of people recommended me to do before I start with desktop design.
I think I am slowly getting used to the grid design, but still learning, still a newbie! so any advice or comments will be appreciated.
Thank you for your time! :)
Hello, You can fix the Patrick Image error by changing the name of src component form image-Patrick to image-patrick.
And for the stretched container you should set the body height to 100vh and container width to 80%. I hope this will fix the error.
Hello,
this is my first upload on Fronted mentor. I look forward to your comments.
I have some questions:
I try to look at it on htmlpreview.github.io, but it takes ages to display it with css. Why? I think that it is caused of background-position in ".main". It calculates positions of those circles on background and it keep them responsive. Is my assumption right? What is the better solution than calc()?
What is the best way to display those circles on the background? First, I tried to add svg tags directly to the html, but at last, I added them into the css file as background-image.
What tags should i use for the "London, 80K Followers..." etc.? I looked at some solutions from another users and they mostly used p tag. But it is not the "real" paragraph, it is only one or two words. Could it be simply a div?
Great Site I would suggest that you can just fix the body size to 100vw and 100vh instead of fixing the main component to 720px so that it would be more responsive and according to different screens. And for the footer you can just use absolute positioning to position it at bottom:0px. Otherwise great design :)
Hello Sahil, great effort you put there well I guess I can solve some of your issues you are facing there
First I can see you have not use the prescribed font as specified in the style-guide. You can do that by going to fonts.google.com and search for the prescribed font and linking it using the link tag and using font-family attribute. You can learn more about this by searching 'How to link google fonts' over the internet.
Second you can some attributes to body such as defining its height and width to 100vw and 100vh also add overflow:hidden to it so that the extra circle svg is not visible to the user.
Also you should read the style-guide given thoroughly you can use all the prescribed fonts and colors in your design.