My Tribute Page - Your thoughts and Opinions please :)

My Tribute Page - Your thoughts and Opinions please :)
0

#1

Hi guys

I would love some opinions and feedback on my tribute page.
I’m pretty new to html, css, and all this stuff so any feedback is welcome!
Thanks a bunch!
My tribute page


#2

It looks real nice. Good color choice and very readable. It’s also nice and responsive.

Under the hood, you don’t want to have inline styling, so instead of style tags in the HTML, add those to your CSS: The style in your “container-fluid” can be put right in your body element, and you can create a blockquote element for the other one.

some bootstrap classes kinda straddle the border for me (like text-primary) since we are encouraged to use bootstrap, but they feel like inline styling too. I’d be interested in what others think.

Other than that, it looks good, and it looks like you actually get the bootstrap row/column grid system.


#3

Thank you for your comments. Much appreciated. I will definitely move those styles to the CSS.
I was wondering about things like text-primary. This is my first introduction to bootstrap, so this might be a silly question, but would one typically go and edit the text-primary CSS in bootstrap if you wanted to change something like the color. Or would you write your own style instead?


#4

Personally, I wouldn’t even use the text-primary class. I’d just use a “color: #XXXXXX” tag in the CSS for the element/class/id I’m wanting to style.

Aside from the issues with inline styling, there is something to be said for making your page look less “bootstrap-y”

speaking of colors, Paletton is a useful tool to help with that.


#5

Ooh thanks for the tip. I’ve added Paletton to my list of resources :slight_smile:
I’ve moved the inline styles over to the css and, since I’m not too familiar with bootstrap yet, I’m not too sure what a bootstrap-y look is…but I assume it involves using the sort of preset styling, so I’ve tried to change some of the coloring to get away from that look.
Thanks for the input!


#6

Looking good! style wise some things you might try:

<div id="timeline" class="pad blue-text img-rounded">
        <br>
        <h3 class "text-center">Here is a timeline of the milestones of the Challenged Athletes Foundation:</h3>

(the id and class applications in the <div>)
and here is the css:

#timeline{
  margin-bottom: 2%;
  background-color: #dddddd;
}

also, it might end up looking to busy for a page like this, but I will sometimes take an accent color from some of the artwork (like the gold star in this case) and use it a little to punch things up.

And as a general note about fonts: it’s usually good to pick two fonts: one for headlines and one for body. If one of them is gonna be fancy or bold, make it the headline font. You almost always want something simple and easy to read for the body. (this will also go toward making your pages look less same-y and add some subtle personality)


#7

Ok awesome, I brought in a new body font and added a little gradient to the background. I tried to use the yellow but it clashes so much with the blue, so I brought in a darker blue to add some depth to the background and a lighter blue for the links and for highlights.
It seems like such a simple little page, but I’m really enjoying how much these little changes are adding to it. :slight_smile:


#8

I thought the gold might not work. But that’s what experimenting is all about. :slight_smile: Especially with simple pages, the devil is in the details.

One thing, though. I’m not sure what you did to the dates, but they kinda have a blurry, old school Mossimo thing going on.


#9

Oh shoot I see that now. I wonder if its a conflict with the gradient. It seems to be affecting the new font most of all. I’ll figure out whats causing it…hmm


#10

I made the dates the heading font and darkened the gradient and it seems to be fixed on my end now. How about for you?


#11

It looks good now. I was playing around with your columns and I did notice one thing. remember when you are doing bootstrap grid, you want it to be like so:

<div class="container"> <!--or container-fluid-->
    <div class="row">
        <div class="col-xx-nn">
            content
        </div>
        <div class="col-xx-nn">
            content
        </div>
        .
        .
    </div>
    <div class="row">
        <div class="col-xx-nn">
            content
        </div>
        <div class="col-xx-nn">
            content
        </div>
        .
        .
    </div>
    .
    .
    .
</div>

your columns do not quite follow that pattern and that could make for unpredictable results (for instance when i was playing with your column settings). check your closing divs. a good way to try to get a sense is to use the little collapse arrows next to the numbers. Once that is straightened out, I’d say you would be good to submit this and move on to the portfolio challenge.


#12

Thanks Chad!
Super great to know. I was totally doing columns wrong. It looked like the project’s tribute page was in about an 8 column section in the middle. When I was placing it in the beginning, I wasn’t sure how to have it float in the middle, so I made a blank column on either side of my 8 column, with a width of 2.
It seems that the correct way to do it is to specify the sizes of the column for different display types and to set the offsets for each type too, all in the same column.
Like this "“col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2”.
Does it seem more correct now?

Oh also, do you notice my “written and coded by livshaka” being off center just a little bit? I notice it most on mobile.


#13

You misunderstand me. I was merely pointing out that you had not properly closed all your columns and the row with </div> in the right place. Using empty columns is a perfectly valid way to arrange your page.

That being said, the other way is a bit more elegant and has fewer moving parts to potentially break. But you do still need to close your column with a div and close your row with a div. :wink:

Regarding your footer, you might try putting it outside your column and row. Also, you might look into the Bootstrap footer class.


#14

aaahhhh good to know that I can still have empty columns, but hey that made me research column structure more, so yay!
Found the missing /divs. Love the minimizing arrows…so useful.
Thanks so much for all your help!
I think I’m ready to mark this completed!


#15

Awesome work! I’m glad I could help and I look forward to seeing what you do for your portfolio page. :+1: