Tribute page to Martin Luther King Jr

Code Feedback
1

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

Any thoughts?

2

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

3

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.

4

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

5

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

6

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!

7

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:

8

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

1 Like