Giorgio WOD: Sey Coffee Home Page

Sey Coffee is a specialty coffee roaster based in New York. For this WOD, you will create a web page using Bootstrap 5 inspired by their home page. When completed, it should look like this (click the image to see full size):

Note that you will find your code from the Experience Island Snow practice WOD and the Murphy’s in-class WOD to be very helpful.

There are three parts to the mockup site: a top menu, center image with text, bottom text and bottom menu.

Note: you cannot use any of the CSS from the original website.

Here are the steps:

1. Create a private GitHub repository called dukes and clone it to your local file system.

2. Create an IntelliJ project called sey in your repo, and two files within it: index.html and style.css.

3. Load the Bootstrap 5 and JQuery files into index.html following the instructions in Bootstrap 5 Hello World. Also load your (currently empty) style.css file.

4. Make sure the body element has the classes “d-flex flex-column min-vh-100”.

5. Replicate the site as shown in the image. The font used in the navbar is sans-serif, and for the rest of the elements it’s serif. The background image source is: https://www.seycoffee.com/cdn/shop/files/elida_5760x.jpg?v=1613535023.
   • For the logo, you can use the following SVG code:

       <svg
           class="logo_svg"
           xmlns="http://www.w3.org/2000/svg"
           width="96"
           height="36"
           viewBox="0 0 96 36"
           alt="SEY logo"
       >
           <path
               d="M20.63 26.49c0 5.185-3.827 9.51-10.444 9.51-3.472 0-7.18-.781-10.035-2.708v-6.055c2.821 2.856 5.917 4.285 9.984 4.285 3.124 0 5.766-1.498 5.766-4.562 0-3.748-4.792-6.07-8.71-8.41C4.015 16.65 0 14.06 0 9.332 0 3.723 4.848 0 10.915 0c2.935 0 5.75.746 8.333 2.226V7.73c-2.652-2.167-5.26-3.252-8.303-3.252-3.03 0-6.316 1.257-6.316 4.11 0 2.617 2.233 4.007 5.473 5.851 5.531 3.148 10.529 5.849 10.529 12.052zm19.636-6.339h13.556v-4.504H40.266V4.931h14.06V.453H35.235v35.094h19.57v-4.478H40.266V20.151zM89.223.453l-9.533 13.11L70.285.453h-6.074L77.193 18v17.597h5.157V18L95.33.453h-6.107z"
               fill="#000000"
           ></path>
       </svg>
     

6. When you can preview your index.html file, and it looks equivalent to the screen image above, commit your repo to GitHub. (Note: you do not have to set the title of the page, but you can if you want to.)

7. Check to make sure the commit with your work for this WOD is present on GitHub.

8. Post “done” into the #main chat channel for this TA WOD to indicate that you have finished.

Rx: <25 min Av: 25-30min Sd: 30-45 min DNF: 45+ min

Submission instructions

You do not have to submit anything for this WOD.