Unicorn Tribute Page

Choosing a tribute subject was stressful! So, when I saw someone else chose raccoons, I immediately went with unicorns. Thanks in advance for any feedback!


Good work. I love the header image!

I made a screenshot from my phone so you can see a problem you have with your layout.


You should change the font-size on your figcaption and .banner to use a px (or em/rem). They’re way too big on a desktop view and are breaking out of their containers. You can swap over the vw in the media query for smaller views.

I’d suggest changing your .banner to be a h1 element, then change the following subheadings to h2/h3

1 Like

Thank you! It looks like that’s my backup font, and it didn’t even occur to me to check what that would look like!

Ok, I made the changes, dumped my original font and worked on formatting the fallback font. From what I can tell, everything responds properly on Chrome and Firefox on my Mac and on Chrome and Safari on my iPhone. My current issue is that some links that work fine on my desktop don’t work on my phone. I’d love to hear if anyone else is having that issue and if anyone sees a reason that might be happening.

Hi Rebekah.
Good work, it’s quite catchy and anyone would want to take a further look.

First off it will be even more presentable if you could style your links to have a different color from the normal text.

Also, please increase the line spacing between your bullet items in the cards. the default view is a bit crowded. Doing this will make things easier to read.

Not that it matters much, because the image is really lovely, but you might wanna reduce the default width and height on large view-ports. It kinda stands out a bit much, but perfect on smaller view ports.

Happy coding.

1 Like

Hey there! I checked out your code and looks like you can just use the same id (“list1”) for all divs involving Unicorns in Art to the Unicorns for sale. Your list1, list2…list4 id’s all had the same css properties and you can condense your code by just using list1 and applying that instead of doing list1, list2, list3, list4 in your html. Of course, if you wanted to customize your boxes more in the future to give them their own touches then it might be a good idea to keep it as is. just a personal opinion. Other than that it looks great and found it to be very unique and a good tribute page! goodluck working on your survey form!


Thanks, this was all awesome feedback!
Most recent changes made:
-Increased the spacing between list items
-Changed the list id’s to a single id to write use less code
-Increased the contrast between the main text color and the link text color (though it’s still pretty similar. I’m going to count this as a lesson learned for future projects.)

I’m still having mobile issues, but since this project passed, I’m going to focus on the next project while still keeping an eye out for solutions.

Exactly Rebekah, that has been my issue; wasting too much time on a project