Tribute Page to Patrice O'Neal

Tribute Page to Patrice O'Neal
0.0 0

#1

Hi all, I just finished the portfolio page when I say there was a section for project feedback. So I figured I’d start by posting my tribute page and see what feedback any of the more experienced than I might have. I’ll admit the design is pretty heinous aesthetically, most of that comes from me just wanting to play with coloring elements differently. Also, all the actual text is just lifted off the wikipedia page. Just wanted to have something relevent to play with. Thanks in advance!

-Michael

PS: After coming back to this for the first time in a couple weeks, I noticed the columns are horizontal. When I first did it, they were aligned vertically next to each other. Can anyone shed some light onto why this changed?


#2

The texts on the red background are very hard to read.

Suggestion:
My suggest is put your style in CSS part

Fixed:
HTML

<body>
  <h1 class="text-center">Patrice O'Neal</h1>
  <div class=container>
    <div class="text-align-center">
      <a href="https://en.wikipedia.org/wiki/Patrice_O%27Neal" target="blank">
        <img src="http://cdn.skim.gs/image/upload/c_fill,dpr_1.0,f_auto,fl_lossy,q_auto,w_940/v1456338939/msi/patrice-oneal-dead-41_en8f1a.jpg" class="smaller-image" alt="Patrice at the Roast of Charlie Sheen"> </a>

      <p id="caption" class="text-center"> Click the image for more information</p>
    </div>
  </div>
  <h2 id="heading-top" class="text-center red">The Comic's Comic</h2>
  <div class="jumbotron column-border">
    <h2 id="sub-header" class="text-center">Who was Patrice?</h2>
    <div class="row" id="section-container">
      <div class="col-lg-4 column-border">
        <h1>Early Life</h1>
        <p>...</p>
        <p>...</p>
        <p>...</p>
      </div>
      <div class="col-lg-4 column-border">
          <h1>Career</h1>
          <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
      </div>
      <div class="col-lg-4 column-border">
        <h1>Death and Legacy</h1>
        <p>...</p>
        <p>...</p>
        <p>...</p>
      </div>
    </div>
  </div>
  <p class="text-center"> Coded by Michael Kedenburg</p>
</body>

CSS

/* CSS */
body{
  background-color: #c4c4c4;
}

h1{
  font-size: 100px;
  font-weight: bold;
}

#caption{
  font-size: 12px;
}

#heading-top{
  color: red;
  font-style: italic;
}

.jumbotron{
  background-color: cyan;
}

#sub-header{
  font-size: 25px;
}

#section-container{
  background-color: #d63939;
}

#section-container h1{
  font-size: 20px;
}

#3

Oh boy… Those colors :smiley:

About the CSS you’ve already been told to place it in its own file/editor. That makes it clear for you and others to review your code.

That thing in your PS, about the columns… You didn’t change anything? If you want to get three columns for higher resolutions, you can add col-md-4 after col-xs-4 and you will see the change.

Well, I hope you learnt a lot; that’s all that matters in those projects.

Happy coding!