Day 3: Adding a second page

Shifting some content

Today was mainly about adding some additional content rather than big style changes. My college professors drilled separation of concerns into my head so much that I decided I would break up much of the content that I had on the main page of my site. I started this up by creating an about.html page where I provided some general information about the challenge as a whole, rather than what I specifically would be trying to accomplish. It was a fairly simple change, and my biggest concern was that my css styling would transfer over to a new page seamlessly.

It actually worked pretty well! I split the css into different files, with a "master" css and more specific ones for each different page. Doing this is so helpful as it keeps the CSS from getting too cluttered as my site continues to get bigger. This is all of the CSS I needed to write to get the new page shown above.

.header {
    padding-top: 10px;
}

#main {
    background-color: rgb(38, 50, 91);
    height: 475px;
    width: 80%;
    margin: auto;
    border-radius: 10px;
    color: white;
    padding-top: 50px;
}

#main h2 {
    font-size: 64pt;
    margin-bottom: 120px;
}

li {
    font-size: 32pt;
    margin: 60px;
}

ol {
    width: 60%;
    margin: auto;
}

Next Steps

Tomorrow I plan to add some more content to the two pages that I have created thus far. Right now, they are not very big and still look more like powerpoint slides than webpages so I hope to fill them up quite a bit.