Skip to content
updated bootstrap website for a local company
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
css
favicon
img
js
scss
vendor
.DS_Store
.gitignore
.travis.yml
LICENSE
README.md
gulpfile.js
index.html
modal.js
package-lock.json
package.json

README.md

St Bosco Edits

https://www.stboscoedits.com

a single page responsive website for a local copyediting business using bootstrap and jQuery.

GOALS

  • Move the site off of wordpress and make it responsive
  • Redesign the UI
  • Include smoothscrolling & a quote slider

DESIGN

I wanted a catchy hero style masthead with big fonts. We went the Oswald font for our headings. The main brand color is a soft yellow, and we used a similar tone for the masthead photo overlay. The white heading complemented nicely with the soft yellow.

I created a typing effect using javascript and CSS for the hero, which fit well with the copyediting + copywriting theme.

One of my big early challenges as a new developer was figureing out how to use two logos in the header (one black, one white) when the header dropdown triggers.

TECH STACK

I used this project as a way to help me learn Bootstrap. It was my first Bootstrap website and so I used a template called Creative. I also played around with AOS Animation for on scroll animations but I ultimately preferred the site and UX without the animation.

The original template used jQuery for smooth-scrolling and the nav dropdown effect. I didn't have much experience with jQuery, but it was easy to catch on quickly.

This was also an opportunity to learn Netlify, where the site currently lives.

RUN LOCALLY

clone using https://github.com/mattdm3/stboscoV2.git

SCREENSHOTS

alt text alt text

You can’t perform that action at this time.