Purpose: To code a website from scratch and use Bootstrap's responsive mobile-first framework. I decided to code a sample travel blog with travel photography. I used photos that I've taken during my travels.
Tech Stack: HTML, CSS, Javascript, Bootstrap 4, Adobe Lightroom, Adobe Illustrator, and Adobe Photoshop
Here is a video of the homepage. With a bit of javascript, I coded that when the user scrolls down the page, the navigation background goes from no color to a purple/burgundy color.
Style Guide
Here are the colors and the font that I chose for this website design. I decided to go with a sans-serif font because it is easier on the eyes in terms of reading groups of text. Regarding the color theme, I decided to stick with a neutral palette and my one bright color, red, to make the headings pop.
Here is a screenshot of the website on a mobile view. As you can see, the website is responsive, meaning that it is formatted correctly with different sized devices. Using Bootstrap as a framework, made it seamless with coding the website in a mobile-first way. You can see the navigation bar transformed into a hamburger menu on the top right-hand corner of the page. As well as the images and text converted into a stacked view, one right after the other.
Click on this image to view the live site! Check out the design for yourself!