fwallacephd / doctor-who Goto Github PK

Need the correct navbar header class

1. The article tabs should be 30px with the Josefin Sans font.
2. Article titles should be an h2 with the Josefin Sans font.
3. The article content should be in the Playfair Display font with a font size of 20px.
4. Adjust all margins and padding so that the content is spaced evenly on the page.
5. Create a border in black 8px at the top and bottom of the article section.
6. Article 1: About Who

• Add the image companions after the second paragraph, make the image responsive, resize the image to fit, center the image using the appropriate Bootstrap class
• Center the photo-caption
• Make the first line of the photo-caption bold

7. Article 2: Favorite Episodes

• Make each episode title bold as well as the text "Top 5 Episodes:"
• Under the episode Family of Blood & Human Nature, make the quote a Blockquote and make a Blockquote Footer for "Son of MIne"

8. Article 3: River's Timeline

• Add the following images in order to the right side column.
• First resize the images so that they are all the same
• Make images responsive using Bootstrap
• First image: RiverGoodMan
• Second image: RiverLetsKillHitler
• Third image: RiverWedding
• Fourth image: RiverTimeofAngels
• Fifth image: RiverHusbands
• Sixth image: RiverSilence
• Seventh image: RiverNameoftheDoctor
• GIve an appropriate "alt" for each image

9. The last two articles do not need any work.

The article tabs should be 30px with the Josefin Sans font.
Article titles should be an h2 with the Josefin Sans font.
The article content should be in the Playfair Display font with a font size of 20px.
Adjust all margins and padding so that the content is spaced evenly on the page.
Create a border in black 8px at the top and bottom of the article section.

Article 3: River's Timeline
Add the following images in order to the right side column.
Resize the images so that they are all the same
Make images responsive using Bootstrap
First image: RiverGoodMan
Second image: RiverLetsKillHitler
Third image: RiverWedding
Fourth image: RiverTimeofAngels
Fifth image: RiverHusbands
Sixth image: RiverSilence
Seventh image: RiverNameoftheDoctor
GIve an appropriate "alt" for each image

Font: Playfair Display
Fan Art 1: The Doctor & Idris

• Add the following link to the source (have link open in a new tab): http://orneryjen.deviantart.com/art/DW-The-Tardis-and-her-Doctor-254570745

Fan Art 2: River Song

• Add the following link to the source (have link open in a new tab):
  http://www.fanpop.com/clubs/river-song/images/35154862/title/river-fanart

Fan Art 3: Doctor Who (#10)

• Add the following link to the source (have link open in a new tab):
  https://www.pinterest.com/pin/162833342751327192/

Set Section ID to Navigation.
Use Bootstrap classes to create navigation bar:

1. Need class to inverse the navbar
2. Need the correct navbar header class
3. Add a navbar brand using the Doctor Who Logo in the image files. The image should be resized to fit properly.
4. The logo should be right justified and not pop out of the navbar
5. The logo should have the responsive image class and be centered vertically
6. Create a button that will create a hamburger icon when the page is resized. Include the correct navbar toggle collapse classes from Bootstrap - also include the correct classes for data-toggle, data-target and aria-expanded
7. Navbar background color should be black
8. Navigation font should be Playfair Display, 17 px, background of black with font white
9. Links should be right justified with a search bar (the search box should say "search" but the button should say "Allons-y"

Indicators:
Add the correct Bootstrap classes to the carousel including the data-ride
Include a data-interval

For the carousel indicators, add the appropriate class to the ordered list
Add data-targets and the order of the images with a data-slide-to class to each of the list items

Make the first image "active" in the carousel

Carousel Inner:
All images need to be resized so that they are the same size.
Image 1: CastImage12Doctors
Image 2: CastImageSmith
Image 3: CastImageCapaldi
Image 4: CastImageJodie

Make all images responsive using Bootstrap classes
Create the left and right controls on the carousel

1. Add a heart icon from Font Awesome after "made with"... so that it reads "made with love" and "love" is the heart icon.
2. Use a span class to make the heart red.
3. After the date, 2017, add a twitter icon from Font Awesome and link it to this Twitter feed: https://twitter.com/fwallacephd
4. After the Twitter icon, add an email icon from Font Awesome and link to this email: [email protected].
5. Make the Twitter and Email icon blue.

Create a button that will make a hamburger icon when the page is resized. Include the correct navbar toggle collapse classes from Bootstrap - also include the correct classes for data-toggle, data-target and aria-expanded.

Need to link to the following fonts from Google Fonts:
Playfair Display: 400, 700, 900
Josefin Sans.

Article 2: Favorite Episodes
Make each episode title bold as well as the text "Top 5 Episodes:"
Under the episode Family of Blood & Human Nature, make the quote a Blockquote and make a Blockquote Footer for "Son of MIne"

Article 1: About Who
Add the image companions after the second paragraph, make the image responsive, resize the image to fit, center the image using the appropriate Bootstrap class
Center the photo-caption
Make the first line of the photo-caption bold

Font: Playfair Display
Book 1: Philosophy & Doctor Who

• Add the following link to the title: https://www.amazon.com/More-Doctor-Who-Philosophy-Regeneration-ebook/dp/B016HBZ0ZU/ref=sr_1_2?s=books&ie=UTF8&qid=1504384055&sr=1-2&keywords=Doctor+Who+and+Philosophy

• Make title centered

• Make the link open in a new tab

Book 2: Whovian Fairy Tales

• Add the following link to the title: https://www.amazon.com/Doctor-Who-Time-Fairy-Tales-ebook/dp/B017F64368/ref=sr_1_1?s=books&ie=UTF8&qid=1504385101&sr=1-1&keywords=doctor+who+time+lord+fairy+tales

• Make title centered

• Make the link open in a new tab

Book 3: Legends: River Song

• Add the following link to the title: https://www.amazon.com/Doctor-Who-Legends-River-Song-ebook/dp/B01AHGWK54/ref=sr_1_1?s=books&ie=UTF8&qid=1504385323&sr=1-1&keywords=The+Legends+of+River+Song

• Make title centered

• Make the link open in a new tab

Adding a 2nd div within the footer so that you can add your own footer information after you recreate this project.

So that on one side it reads "Made with love and a sonic screwdriver by Faith H. Wallace, Ph.D., 2017" and then on the other side it could read something like "Recreated with love through Faith's Open Source Project for Beginners by YOUR NAME, 2017 "

1. Change the Bootstrap .col-md-12 class to a .col-md-6 and then add a 2nd .col-md-6 div so that the footer will have 2 equal sized columns.
2. Add the Bootstrap class to align the text in the center of both of these divs.
3. Add a heart icon from Font Awesome after "Recreated with "... so that it reads "Recreated with love" and "love" is the heart icon.
4. Use a span class to make the heart red.
5. After the span for the heart, add the text "through Faith's Open Source Project for Beginners by YOUR NAME, 2017" making sure that the spacing is correct between each word and icon.
6. Make the text "Faith's Open Source Project for Beginners" a link and link it to her project repository at https://github.com/fwallacephd/doctor-who
7. After the date, 2017, add a single pipe ( | ) character and then a twitter icon from Font Awesome and link it to YOUR OWN Twitter profile.
8. After the Twitter icon, add a Github icon from Font Awesome and link to YOUR OWN GitHub repo for this Doctor Who Project
9. Make the Twitter icon blue.
10. Make the Github icon black.

Add a navbar brand using the Doctor Who Logo in the image files. The image should be resized to fit properly.
The logo should be right justified and not pop out of the navbar
The logo should have the responsive image class and be centered vertically

Need class to inverse the navbar

Navbar background color should be black
Navigation font should be Playfair Display, 17 px, background of black with font white
Links should be right justified with a search bar (the search box should say "search" but the button should say "Allons-y"