Tribute page to Martin Luther King Jr

Super happy to have finished my tribute page. I’d be really happy to receive some critical feedback.

Any thoughts?

bump Not received any comments yet. Feel free to let me know your thoughts.

Hi there!

Design suggestions:

  • Try aligning the position of your youtube videos with where your images start instead of where the divs start.
  • Keep the same pattern you’ve been using for placing your images ( left/right/left/right) and apply it the videos.

Besides that you are good to go.

Thanks a lot for your feedback! I’ve been a bit stuck with that issue! I’ll see what I can do. Cheers and all the best,
Simmo

Hi :slight_smile:

This code Go to: Pen Settings -> Stuff for “head”.

<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

You can replace this classes with the Bootstrap Grid:

<div class="gap-20"></div>
<div class="padding">

Bootstrap documentation:

http://getbootstrap.com/css/#grid-example-basic

http://getbootstrap.com/css/#grid-offsetting

Cheers, and happy coding

Thanks for the feedback @Diego_Perez I moved what you recommended to the “head” section.

However, some of the sections where I replaced my classes with Bootstrap Grid didn’t leave enough padding between one row and the next, so I kept the div class=“padding” Is that bad to do?

Thanks again!

Hi :slight_smile:

Your code:

<div class="row"></div>  // <---
<div class="col-md-12">
  <h2 class="text-center">US civil rights leader of the 1950s and 60s who galvanised millions of people to advance civil rights and racial equality through non-violent protest</h2>
  <div class="gap-20"></div>
</div>

Bootstrap example:

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

I think that you don’t need a class padding:

MDN documentation:

<h4>Hello world!</h4>
<h3>The padding is different in this line.</h3>
h4{
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3{
  background-color: blue;
  padding: 400px 50px 50px 400px;
}

[example link] (https://mdn.mozillademos.org/en-US/docs/Web/CSS/padding$samples/Live_Sample?revision=1103215)

And for the class gap-20:

Cheers and happy coding :slight_smile:

@Diego_Perez This is SOoooo helpful!!! Thank you so much! Fantastic!!

1 Like