Tribute page to Ken from Street Fighter - feedback?

Today I’ve created my first tribute page. I’ve done websites before but not from scratch and certainly didn’t write my own CSS. So what I’m hoping to get feedback on is structure of HTML and CSS. Any hint, clue or tip will do.

Link to my codepen tribute page

To be more specific

  • I had trouble to define the different containers. There’s a container-fluid from bootstrap and I made another main-box. Is this correct way to do this?
  • Secondly, I used a couple of tricks to get the images right. Made extra CSS styles while I think I could be doing the same with less code. Any tips?

I’ve tried to make comments on all the parts to make it extra readable.

Thanks in advance for all the help!

Mark

hey there. I am also a beginner so I also don’t know much about different containers so can’t speak much there. Right now what I do is I place all the contents of body in div with class="container".

I think if the underline which appears when we hover a mouse over “Read more about Ken…” removed, it would look better. Here is how you do it:

text-decoration:none;
color: whatever-you-wish;
}    ```

You can also change the color of the text when mouse hovers above the link above.
1 Like

When using the container class in bootstrap, you can only use one per section. These were not intended to be nested and do not work correctly when they are nested. However, you can nest row classes to create a complex layout for your page.

The way I normally setup my web projects is I create a different container for each section, making sure that I close the previous container before creating a new one. Here’s what the body of my skeleton project typically looks like.

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> <!-- NOTE: .container (must be inside nav section to work properly) -->
    <!-- TODO: Add navbar components here -->
</div>
</nav>

<div class="container main-content">
    <!-- TODO: Place page content here -->
</div>

<div class="container footer">
    <! TODO: Place footer content here -->
</div>

The difference between .container and .container-fluid is .container uses a specific width of the screen and is centered while the .container-fluid will use the full width of the screen to display your site.

2 Likes

Thanks for the replies! Great tip for removing the text-decoration

And kblock-dev, this is exactly what was troubling me. Thanks for clearing this out! I’ll be sure to use this in my portfolio.