Epictetus (Stoic Philosopher) Tribute Page

Hey guys!.
Here is my tribute page in case anyone is interested: https://codepen.io/Bosa100/full/grQkVm/. At the most fundamental level it is finished, but I will definitely be working on it some more. More than anything I want to play around with the fonts/colors to make it more interesting. I’m also considering adding more information. One thing that bothers me is that when you zoom out the text moves a bit (the footer is inside the light grey box when at first, but moves to the outside when you zoom out!). Some insight into how to fix this would be greatly appreciated. :slight_smile: I would also appreciate some opinions from those more web design savvy regarding how the design of my page could be improved. Thanks in advance for your comments, and to those who’ve been attentive to this post: sorry for taking so long to re-upload! I wanted to finish the Basic Algorithm Challenges/JSON API and Ajax lessons before coming back to my first projects. HOPE YOU LIKE IT!

For the text, in your CSS you would want to apply a default font-size to the body element, normally that is 16px. That size will then cascade down to all your child elements. Then for your h1 font size you can use em’s instead of pixels. Basically and em is a relative unit size and will adjust relative to the base font size, so in this case 1em = 16px. To get the 100px font size for h1 it would be around 6.4em.

It also looks like your background image isn’t large enough as when I zoom out, I’m seeing the dreamstime logo. Look into the size you’ve loaded and also into the background-position, http://www.w3schools.com/cssref/pr_background-position.asp and background-size, http://www.w3schools.com/cssref/css3_pr_background-size.asp CSS properties.

Alright. Will do. Thanks for the links! :slight_smile:

Just one more thing: how do I get the text to retain its shape? When you zoom it it keeps spreading out until it becomes one long line. Also, I messed with the background CSS, and it is finally staying still! Thanks so much! :slight_smile:

For the text you can wrap the paragraph tag in a <div>, and give it a class name (change the name from test to something relevant) <div class="test"> and then in your css target the class .test and give it a defined width in %.

A <div> is a non-semantic html element and most of the time it is used when there are no other semantic html elements that apply. Semantic HTML elements describe the content, like <table>, <nav>, etc.

Here is a link to the new HTML5 elements that you could use, http://www.w3schools.com/html/html5_new_elements.asp and more information of semantic html elements, http://www.w3schools.com/html/html5_semantic_elements.asp.

OK.Thanks for the help! Really appreciate it. :+1: