Hi everyone,
https://www.codecademy.com/workspaces/62a71cfdb0fe32e4008def40
This is my first “independent” project on codecademy. I tried to resample the google.de landing page using just HTML / CSS. There are certain points I am not sure about if I solved them well. Maybe somone can look over one or two of the following list.
- Icones in the upper right corner
#icon_waffle img{
position: relative;
** top: -12px;**
width: 40px;
}#icon_profile img{
position: relative;
** top: -12px;**
width: 40px;
border-radius: 20px;
}
Isn’t there a smarter way to center those icons vertically without using a fix distance of 12px? Is it possible to center an inline-block element in relation to the surrounding ones?
- Spacer between the buttons
<section class="section_buttons"> <button id="button_search">Google Suche</button> <spacer></spacer> <button id="button_lucky">Auf gut Glück!</button> </section>
It somehow feels wrong to use a non-self-closing tag here and leaving it empty. If i ever need some kind of spacer between to elements, is this the right way? I defined the spacer’s width in CSS though.
And of course I am very happy about general suggestions on efficiency or if the code is comprehensible at all!? If not, please tell me.
Thanks a lot!