very good challenge.
I am learning to use CSS Grid.
I think the most complicated thing was the dimensions in the mobile and desktop versions and the social network icons, but by searching on Google I was able to do something more or less similar.
If you have one or many suggestions please let me know. Thanks a lot
Hey there Luis, not a bad attempt! I have a few suggestions; firstly, your background image should span the whole page, I would suggest placing it as a background-image in the body or a container within your CSS like so, or similarly:
body {
background-image: url("/IMAGE PATH");
background-size: auto;
background-repeat: no-repeat;
}
I would also work on positioning your content a little tighter, as the social icons are protruding outside the viewport, and maybe bring the circle outlines in a little closer as well. You may find some success by setting a global tag "*" to have border-box box-sizing, as well as a margin and padding of "0". Then setting your body, or a container to a max height and width, or just height & width (depending on your preferences) of 100% or 100vh 100vw. The former will help keep everything sized to the element and organization/ layout a little more manageable by eliminating any excess spacing until you are ready to add it. Then the latter will help it be viewable within the window without scrolling as well.
Now for a more real world site application and better accessibility as to help with best practices, I would add anchor tags to your social links and aria-labels with descriptions for what each is for, i.e.: "facebook", "twitter", etc. respectively.
Keep up the great work and continue learning! :)
