Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Task1: Style your web pages according to the following requirements: [22 points] For the main page (index.html), style your document according to the following specification.

Task1: Style your web pages according to the following requirements: [22 points]

  1. For the main page (index.html), style your document according to the following specification.
    1. Apply Bootstraps Jumbotron to your heading, i.e. your name and one sentence that describes who you are.
    2. Apply Bootstraps navbar and/or nav to the navigation list that links to other pages. Make the current menu item for the current page active. Fix the navigation bar to always stay at the top of the page.
    3. Style your favorite quote with any appropriate class, e.g. blockquote.
    4. Modify your footer section to also include links to your social media accounts, e.g. fb, LinkedIn, twitter etc. Then apply Bootstraps page-footer to the footer element.
    5. Apply a 2-column layout to your image and the about me section only when the screen size is 992px or higher.
  2. For the My Skill page, style your document according to the following specification.
    1. Apply Bootstraps navbar to the navigation list that links to other pages. Make the current menu item for the current page active. Fix the navigation bar to always stay at the top of the page.
    2. Apply a 2-column layout to your technical and the non-technical skills only when the screen size is 992px or higher.
  3. For Courses Completed page, style your document according to the following specification.
    1. Apply Bootstraps navbar to the navigation list that links to other pages. Make the current menu item for the current page active. Fix the navigation bar to always stay at the top of the page.
    2. Apply table class to your table, add zebra-striping to the table row, make the background color of the different from other rows. Also enable hover state on table rows.
    3. Make the image on the page to float next to the table (either on the left or right side) when the screen size is 992px or higher.
  4. For My Gallery page, style your document according to the following specification.
    1. Choose to style your page with either image thumbnails or carousel. The images need to be responsive images, i.e. they should scale with the parent element.
  5. Create an additional CSS external style sheet. Modify style for at least one ID selector and at least one class selector. This needs to override the Bootstraps style.

Task1: Style your web pages according to the following requirements: [22 points]

  1. For the main page (index.html), style your document according to the following specification.
    1. Apply Bootstraps Jumbotron to your heading, i.e. your name and one sentence that describes who you are.
    2. Apply Bootstraps navbar and/or nav to the navigation list that links to other pages. Make the current menu item for the current page active. Fix the navigation bar to always stay at the top of the page.
    3. Style your favorite quote with any appropriate class, e.g. blockquote.
    4. Modify your footer section to also include links to your social media accounts, e.g. fb, LinkedIn, twitter etc. Then apply Bootstraps page-footer to the footer element.
    5. Apply a 2-column layout to your image and the about me section only when the screen size is 992px or higher.
  2. For the My Skill page, style your document according to the following specification.
    1. Apply Bootstraps navbar to the navigation list that links to other pages. Make the current menu item for the current page active. Fix the navigation bar to always stay at the top of the page.
    2. Apply a 2-column layout to your technical and the non-technical skills only when the screen size is 992px or higher.
  3. For Courses Completed page, style your document according to the following specification.
    1. Apply Bootstraps navbar to the navigation list that links to other pages. Make the current menu item for the current page active. Fix the navigation bar to always stay at the top of the page.
    2. Apply table class to your table, add zebra-striping to the table row, make the background color of the different from other rows. Also enable hover state on table rows.
    3. Make the image on the page to float next to the table (either on the left or right side) when the screen size is 992px or higher.
  4. For My Gallery page, style your document according to the following specification.
    1. Choose to style your page with either image thumbnails or carousel. The images need to be responsive images, i.e. they should scale with the parent element.
  5. Create an additional CSS external style sheet. Modify style for at least one ID selector and at least one class selector. This needs to override the Bootstraps style.

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image_2

Step: 3

blur-text-image_3

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Transactions On Large Scale Data And Knowledge Centered Systems Xxviii Special Issue On Database And Expert Systems Applications Lncs 9940

Authors: Abdelkader Hameurlain ,Josef Kung ,Roland Wagner ,Qimin Chen

1st Edition

3662534541, 978-3662534540

More Books

Students also viewed these Databases questions