Please critique my Hockey Tribute Page

Hey campers! Please critique my tribute page! Instead of creating a page on a single person, I decided to make a tribute to my favourite sport, hockey. Thank you! Happy Coding!

Heres the link: https://codepen.io/myronhuang/full/qoQdxQ/

6 Likes

WOW! … simply awesomesauce :slight_smile:

1 Like

How did you get the page to slide like that? So that one image get replaced with another as you scroll down?

Great job!

1 Like

Nice work. I think you need :hover and :active to a element in footer. Maybe you should experiment with fixed navigation after scrolling the first slide (600BC).This saves time and does not need to scroll the page up and down to find information.

2 Likes

Here what i thought after viewing your tribute page:

  1. For the ‘click here for more information’ u might try to change the ‘here’ to other color/style or whatever that can differentiate ‘here’ with other words in the same line.

  2. Love the static background and the video! :smile:

1 Like

Thank you for the comment! That effect is called Parallax Scrolling. It’s actually quite simple. While there are many different ways to achieve the effect, here are the steps that I used:

  1. Set a container element in your HTML.

     <div class="img-container"></div>
    
  2. Select your container element in your CSS and set the background image to your desired image using the background-image property.

    .img-container {
    background-image: url(“coolpicture.jpg”);
    }

  3. Set the background image height. For responsiveness, use percent instead of pixels. When using percents, you must also set the height of and to 100%.

      body, html {
     height: 100%
     }
    
      .img-container {
     background-image: url(“coolpicture.jpg”);
     min-height: 100%; 		
           }
    
  4. Setting the property “background-attachment” to “fixed” is what creates the parallax scrolling effect. Use other background properties to position and scale your image.

     .img-container {
     background-image: url(“coolpicture.jpg”);
     min-height: 100%;
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover; 		
           }
    
  5. The white panels containing the text are simply divs with text in them. Your HTML could look like this:

          <!-- Image -->
    
            <div class=“img-container”>
        </div>
    
          <!— Text Slide —>
    
       <div class="slide2">
         <h3 class="caption-body">1500s</h3>
                <p class="body-text"> IJscolf, a game resembling golf on ice, was popular in the coastal region of northwestern Europe.
                </p>
       </div>
    

You can find a lot of resources on how to achieve the Parallax Scrolling Effect through Google. I followed this tutorial : https://www.w3schools.com/howto/howto_css_parallax.asp. It is helpful to click on the Demo and look at the source code using Chrome developer tools. It is very helpful to look at the source code of website that you like. I hope you found this helpful.

Happy Coding!

1 Like

I made the changes that you suggested. Thank you for your input!

I really like your tribute page, great job! Thanks for including the tutorial and resources for Parallax Scrolling.

1 Like

Excellent job! I hope to be able to do that some day! I love the scrolling feature. I love hockey

1 Like

Nice site!

What happened between 600BC and 1500AD?

1 Like

wow, these background changing transitions are awesome

1 Like