Please review of my tribute page. Also need help!

Please review of my tribute page. Also need help!
0

#1

Hi guys please review my code pen.

  1. One issue i have is that when i change the opacity of my image it seems to change the opacity of the text within the image also.

  2. I want the main image to be flush with the top of the screen (something i cant seem to do.).

  3. I want to make the text within the image to become responsive also so it remains within the same format. (open in “full page mode” to see what i mean.).

Thanks for the help! :smiley:


#2

Hi. I’ll try to help where I can.

  1. The opacity does change for both image and text. So you may want to style it a little differently.

You need to know about Codepen. It sets up your basic header, so you don’t need anything above the body inside the html section. Unless you need to scroll spry on the body for the navbar.

On the top right there is settings gear. When you open that, you can make your necessary changes.

In the HTML section under stuff for head it says to add meta tags. This is where you want to put your viewport meta tag.

In the css section there is a dropdown menu to add Bootstrap and others. You can also enter the font-awesome/google styles on the add code section in the css section.

In the Javascript section, If you are using Bootstrap.css then you will want to add Bootstrap.js. This is also from the js dropdown.

It is not good practice to style inside html, although there are times when it is necessary, it is best to avoid that.

You should style your body in css as body{ background-color:black;margin:0;padding:0;width:100%;height:100%} - this says that the body covers the entire page, with no margins or paddings so it goes to the edge, with a black background. It can’t be messed with from other styles.

I’m confused about this:
" < div class=“container-fluid”>
< div style=“background-color:000000”>
< container-fluid>"
It followed your body tag, so I’m going to assume that this is actually the outer page wrap and you want it to be black.
If so, then I would give it an id of outer-wrap. " < div id=“outer-wrap” class=“container-fluid”> and then you can close it at the end of the page. Since the background is the same color as the body, there is no need to call it again. The second container-fluid is incorrect. It needs to a div and needs to be called a class with quotes.

Regarding div formats. It should always begin with the word, id should always be id=“name” with name in quotes, class should always be class=“name” with name in quotes. Inside the class you may add other elements. “pull-center” floats the entire div to the center, just as pull-left / right aligns that direction. “text-center” is just like “pull” only with text instead of div. Use spaces…

  1. The reason the main image is not flush with the top is that you called < h1 id=bannertext class=“text-black”> and
    < img id=anthonyjoshuaimage class=“img-responsive”>. It does not see the id’s bannertext or the img id.

I’m just going to show a couple of other areas that you can fix:
< h5 id="quote"align=center>< div style=font-size:30px;>

< ul id="timeline"align=“center”> I strongly suggest with bullets that you pull-center and text-left.

Use the html validator html validator and the css validator css validator to check both pages before going to codepen. Both of these helped me get a better understanding of my errors when I first started learning.

Hang in there, you had the right idea - it just needed a few extra steps…