My First Tribute page!

My First Tribute page!
0.0 0

#1

I started off with nothing in mind. Ended up with this, https://codepen.io/avizini/pen/WzKRKq

Any Feedbacks/Suggestions?

Also, I was not able to add animation to my header. See the source and js, there I did as I learned on freeCodeCamp but it is not working :frowning: Also the webpage is not yet responsive, is there any way to make the image shift in movile view? (See the page on desktop, then resize to understand)

Am I missing something there?


#2

Hey ! Looks nice, I had a look at how codepen operates under the hood a bit. I think this is a fix for how you were implementing the animation.

First we’re going to want to change:

<h1 style="color:#00B8D4" class="text-center" id="#title1">Linus Torvalds</h1>

to:

<h1 style="color:#00B8D4" class="text-center" id="title1">Linus Torvalds</h1>

which removed the extra # from #title1 (this is how CSS selectors are referenced, but if you remember from our lessons with ID’s, they are generated without using #.)

Next, this is a bit tricky, you will want to hit the little gear icon on the CSS panel, and search for “animate.css”. Add that to the document using their provided instructions. Do the same in the JS panel, but instead look for “jquery.js” and add that to the specified panel.

These two actions are equivalent to providing a <script> reference in your html code.

Finally,

$(document).ready(function() {
  $("#title1").addClass("text animated zoomIn");
});

add the text class to your jQuery addClass() function. :slight_smile:

This is the altered result:


#3

Looks good. I would take another look at the image & making the layout more responsive.


#4

Hey!

That worked, when doing that in freeCodeCamp I didn’t link animate.css and jquery library so :confused:

Now I am working to make it more responsive.


#5

Yeah, I am working on making it responsive now.


#6

@loonylou @rcat I made it responsive. How’s the new design?

Link: https://codepen.io/avizini/pen/WzKRKq


#7

Great tribute! Dark but really nice!


#8

Yeah, I love material dark color. Will try different color palletes also. Thanks!


#10

Looks great :slight_smile:

Something else to consider, the bottom quote text colour, might be hard to read for certain people. Websites like these are super useful for determining proper contrast on colours for websites.


#11

Yeah, my bad. I am rebuilding the whole page. Actually I did it on mobile, didn’t have access to desktop. I realised I am wasting my time so looked upon a few tutorials. I am sure I will do better this time. Thanks for that website, it will help me a lot. :slight_smile:

Question: Can I submit links to GitLab Pages or any other url for submission? Is it compulsory to submit a codepen link onlly?


#12

Loving the new responsive image - works really well!


#13

I am rebuilding my projects, just discovered that there are many other css frameworks and also about @media queries. Starting again! Thanks.