Capstone Project Colmar Academy

Projects Capstone Projects
1

Hello all -

This is my attempt at the Colmar Academy website for the capstone project of “Building a Website.”

Here are the links:

Webpage: Colmar Academy
Code: GitHub - kelryn33/colmar_academy

I made some different color decisions and tried to make it all cohesive - I even tried to add hover states where I thought necessary. Not sure if my code is the cleanest, but would love any suggestions.

My main hang up has been getting the side sections in the Intro section and then in the Thesis section to keep the ratio of 65% for the text and 35% for the image. I liked how mine turned out that the image stayed large and the margins/padding were maintained vs the image shrinking and getting the padding messed up. But the text isn’t keeping the 65% ratio. I’d be open to suggestions on how to work through this though.

2

Hi Kelryn,
I really like your color choice!
It looks like there are color contrast issues, for accessibility
It doesn’t look like the mobile version is set.
I also like how you were able to keep the images large despite me shrinking the screen viewport width! Very curious to know how you did that. I wasn’t able to figure that one out for mine.
Sincerely,
Anthony

3

Thanks, Anthony!

I will look into some other color options for the hover color contrast - were you talking about the menu buttons?

I’ve also adjusted the mobile - I had set the breakpoints in the CSS but didn’t realize I needed some additional code in my HTML - but after some looking was able to find it. Thanks for pointing that out - I wasn’t aware I needed that beyond the queries.

As for the picture sizing - I’m not exactly sure how I got that myself, as I’m still learning lol. But once it started happening I left it. Whenever I set the images to a flex-basis of 35% they would shrink - so I removed it on the image and set the max-width to 100% and made the display:block. There may be some other code I have overriding things, as like I said I’m still learning. I just know that as soon as I set the flex-basis to my img (.desktop_info) it would always shrink as I adjusted the page. Sorry I can’t be more helpful.