Hello everyone!
I have just completed my tribute page project and looking for feedback! Please have a look @ https://codepen.io/joy-dey/full/NWxEWzz
Thank You
2 Likes
It looks really great and responsive, kudos!
Hi @ iamjoydey
About your layout, it is really clean and a beauty, and i enjoyed the colors that you used. Great job! 
I would only put the Stephen Hawking’s picture always above the title in your responsive layout. I think it would be better. Just an opinion 
About your code, I can say I was really impressed, you used a lot of different CSS attributes to create your solutions, amazing!
And I really didn’t understand some parts of your code, so if you could please explain it to me, I would be glad 
-
Where did you get the
class="mdi mdi-trophy-award"?
I didn’t find it on your CSS code. -
In this line:
main > section:not(:first-child) {
padding: 20px 15px;
}
What’s the function of ‘>’?
The function of > is children of.
For example header > p { ... } will affect all the p-elements in the header, but not in for example the footer.
1 Like
@julio-pinheiroo I used material design webfont for the icons for which I added the class mdi mdi-trophy-award . It’s like fontawesome icons 
As @johmar said, > is used to select the child elements of a parent element. If used, the styles are only applied to the child elements of the selected parent element.
1 Like
Did you use something like this?
Cool man… I think I will copy your idea on my next projects…
1 Like
@julio-pinheiroo Umm well no. Not exactly. I actually used the material design icons not the original google material icons which you linked. If you are using codepen you can do these to use it
- Click settings
- Navigate to CSS
- On the search field type material icons community and you should see a result named
MaterialDesignIconsWebfontuse this one.
On local machine you can download the font from their website materialdesignicons.com and link it in your html file or you can use it from the CDN provided by them.
You can find the difference if you use both material icons from your link and my link.
If you use Google Material Icons the code would look like
<i class="material-icons">trophy_award</i>
If you use Material Design Icons the code would be like
<i class="mdi mdi-trophy-award"></i>
I will suggest you to use Material Design Icons as they have a huge collection of icons compared to Google’s Material Icons.
1 Like
It took me some time but I think I made it work!
And what I did was:
-
I accessed the: http://materialdesignicons.com/
-
Clicked on Download link
-
Copied this link to my page:’’
-
And I accessed the preview.html to find all the icons.
And to add the icon to the page I did:
<span class="mdi mdi-trophy-award"></span>
instead of:
<i class="mdi mdi-trophy-award"></i>
I don’t know if there is any difference but doing like this worked for me
And I couldn’t find the ’ MaterialDesignIconsWebfont’ on codepen 
Any way, on my future projects I will use this library for sure!
Thanks again! 
1 Like
I have attached a screenshot @julio-pinheiroo
You can look at the image and try finding it
And regarding your question of using span or i tag is
"From the HTML5 spec:
The I element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized."
Use the span tag if you want to be ‘politically’ correct.
1 Like