Kamanu Composites is a local company that produces very high quality outrigger canoes. They also have a pretty nice website. For this WOD, you will reimplement a portion of their home page using Twitter Bootstrap. The goal of this exercise is to gain additional experience manipulating HTML, CSS, Chrome Developer Tools, and Twitter Bootstrap.
Prior to starting this WOD, you may want to visit the Kamanu Composites website. (Full disclosure: I own a Pueo.)
Here is what your completed implementation should look like:
And here are some hints to guide your implementation:
Your goal is to create a single page that mimics the first three elements of the Kamanu home page: the nav bar, the picture, and the tag line “We build canoes.” You do not have to implement any other aspect of their home page.
Base your implementation on the bootstrap-example-intro “basic” template. That will give your page a responsive nav bar (which Kamanu Composites currently lacks.)
Here are links to useful graphics: logo, navbar background image, and paddling picture.
Use Chrome Developer Tools to inspect their page layout and figure out the fonts and colors they are using.
Use Chrome Developer Tools to inspect and override Twitter Bootstrap defaults as needed to mimic their site layout.
Start your timer.
Create a GitHub repo called “responsivekamanu” and clone to your laptop.
Create an IntelliJ project called responsivekamanu and use it to implement a Bootstrap version of the Kamanu Composites home page.
Base your design on the bootstrap-example-intro basic template.
Change the page title to “Responsive Kamanu”.
Incorporate the logo into the navbar.
Adjust the navbar so that excess padding around logo is removed, and so that navbar is same height as logo.
Incorporate the Kamanu carbon fiber graphic as a repeated background image in the navbar.
Eliminate the black background from the “Home” navbar menu item.
Edit the set of navbar items to be similar to those on the Kamanu website.
Adjust the font, position, and spacing of navbar items to be similar to the Kamanu website. Note: you do not have to replicate the vertical dotted lines separating the items.
Incorporate the paddling picture underneath the navbar as a background image. Use background-size: cover; background-position: center; height: 385px; to get a pleasing appearance.
Adjust the body element so that the paddling picture shows up under the navbar.
Add the “tagline bar” (“We Build Canoes.”) into your page, making it look similar to the one on the Kamanu Website.
Commit your finished project to GitHub.
When finished, stop your timer, and record how many minutes it took you to complete the WOD.
Rx: <30 min Av: 30-35 min Sd: 35-45 min DNF: 45+ min
Once you’ve finished doing the WOD a single time, watch me do it:
You’ll learn significantly less from watching me solve the WOD if you haven’t attempted the WOD yourself first.
While it’s an achievement to finish the WOD no matter how long it takes, you might experience “diminishing returns” if you work longer than the DNF time. Thus, it is usually strategic to stop working at the DNF time and watch my solution.
After watching my solution, I recommend that you repeat the WOD if you have not achieved at least Av performance. If so, be sure to:
Feel free to keep trying until you make Rx if that’s of interest to you.