Tribute Page to "The Office"

Heya Gals/Guys, I just finished my tribute page to my favourite show, The Office, and would love some feedback on it! Here’s the link: https://codepen.io/Heenal02/full/WERyeP/

Thank you!

Hey. Try using the bootstrap classes more effectively. You can end up with same (or very similiar anyway) result with a lot less css.

For example, to have a structure like you have (image quote - new line - quote image), you could just do this:

<div class="row">
  <div class="col-auto">
    <img class="img-actor" src="https://s-media-cache-ak0.pinimg.com/originals/8f/5b/a4/8f5ba40d8263d3210a8aafc66d47f39a.jpg">
  </div>
  <div class="col">
    <i>"If I had a gun with two bullets, and I was in a room with Hitler, Bin Laden and Toby, I would shoot Toby twice." - MICHAEL SCOTT</i>
  </div>
  <div class="w-100 pt-3 pb-3"></div>
  <div class="col text-right">
    <i>“Reject a woman, and she will never let it go. One of the many defects of their kind. Also, weak arms.” - DWIGHT SCHRUTE</i>
  </div>
  <div class="col-auto">
    <img class="img-actor" src="https://ih0.redbubble.net/image.118844262.2946/st%2Csmall%2C215x235-pad%2C210x230%2Cf8f8f8.lite-1u2.jpg">
  </div>
  <div class="w-100 pt-3 pb-3"></div>
</div>

with as little css as this:

.img-actor {
  height:80px;
  border-radius: 50%;
}

Thank you for that! I will definitely try that! Just a quick question, what would say,

do?

No problem!

I imagine you were trying to add some code to your post. When you want to do that, you need to wrap it in a single backtick if it’s just one line, or a triple backtick if it’s a block of code, otherwise it won’t show up.

See this post for more info.

Haha, yes, I was trying to put in a single line code. I had no idea it didn’t show up. Thank you once again!

I wanted to ask, what <div class="w-100 pt-3 pb-3"></div> does?

It’s fine, I had a hard time figuring that out as well. :slight_smile:

The “w-100” class just gives a 100% width at the div you’re using it on. You can see it in use in the Bootstrap 4 documentation here.

The “pt-3” and “pb-3” are spacing classes that, in this case, give some padding top (pt) and bottom (pb) respectively.

So, that <div class="w-100 pt-3 pb-3"></div> basically acts like a “break” to force the next column to start on a new line and have a little space between it and the one before it.

Awesome, I’ll try and refine my code and see how it goes!

1 Like