Kibo-mini-website

This project is an extract from the kibo website. Your task is to embed different multimedia contents in this website and use your knowledge of layout to arrange the elements appropriately.

After completing the instructions, your website should look like this:

Starter Code

We've provided starter code which contains the content of the website and the default style. Included files are

index.html: content of the website, including comments on where you should add your own code style.css: Colors and font styles for the page. You'll have to add the layout and positioning. Note: The colors and fonts are already styled. Focus on fixing the layout!

Instructions

Before starting, run the code to see the current state of the website. Read through index.html to see the initial contents.

Part 1: Add multimedia content

First, you'll add the logo, videos, and map to index.html where the comments suggest.

Add the kibo logo using the provided kibo-logo.svg file in the images folder. Embed this youtube video in the first

section, such that it is right before "Reach your peak" text: https://www.youtube.com/embed/RGjYCLen6os Embed this youtube video in the second section just after the "The Kibo Experience" text: https://www.youtube.com/embed/wv6HAnysMYc Embed a map in the

with text 'Visit Us' showing the address of Kibo: 228 Park Avenue South, New York, NY. (Click here to open the address in Google Maps, then click 'Share -> Embed a map -> COPY HTML')

Part 2: Styling

Arrange the elements in the header using flexbox: arrange the elements in a row add space around the elements align the elements along the center of the axis Put the embedded videos and the text in the articles in flexboxes:

They should be centered along both vertical and horizontal axis. The should wrap when the screen width is too small In the "Visit Us" text to the center of the page, put the h2 and iframe into a flexbox:

It should be a column It should center the text and map