Path of Light Yoga StudioSee Chapter 2 for an introduction to the Path of Light Yoga Studio case study. Figure2.44 shows a site map for Path of Light Yoga Studio. Use the Chapter 7 Path of LightYoga Studio website as a starting point for this case study. You will modify the Schedulepage (schedule.html) to display the class schedule in an HTML table. You will use CSSto style the table. You have three tasks in this case study:1. Create a new folder for this path of Light Yoga Studio case study.2. Modify the style sheet (yoga.css) to configure style rules for the new table.3. Modify the Schedule page to use a table to display information as shown inFigure 8.16.Figure 8.16Schedule page with tablesPath of Light Yoga StudioTineHomeYoga ScheduleMats, blocks, and blaksts provided. Please arve 10 minutes before your class begins. Relaxinour Serenity Lounge before or after your class.9:00am10:30am1:30pm7:00pmNoon1:30pm3:00pmMonday - FridayClassGentlech geRestorative YogaGentle Hatha YogaSaturday & SundayClasses ScheduleVinyasa YogaGentle cha YogaVinyasa YogaRestorative YogaDDContact Hands-On Practice Case StudyTask 1: The Website Folder. Create a folder called yoga8. Copy all the files from yourChapter 7 yoga7 folder into the yogas folder.Task 2: Configure the CSS. Modify the external style sheet (yoga.css). Open yoga.cssin a text editor. Review Figure 8.16 and note the class schedule information, which iscoded in two HTML tables. Add style rules above the media queries in the yoga.cssexternal style sheet to configure the following:1. A centered table with 60% width, a 1 pixel purple (#3F2880) border, collapsedborders (use border-collapse: collapse;), and a 1em bottom margin.2. A style for the td and th element selectors that configures 5 pixels of paddingand a 1 pixel purple border (#3F2880).3. Configure alternate-row background color. The table looks more appealing if therows have alternate background colors, but it is still readable without them.Apply the :nth-of-type CSS pseudo-class to configure the even table rows with a#DBE8E9 background color.4. A caption element selector with a 1em margin, bold text, and 120% font size.Save the yoga.css file.Task 3: Modify the Schedule Page. Open schedule.html in a text editor. You willrework the page to use two tables to display the schedule information instead of thesection, h3, and unordered list tags. Remove the tags for the section elements, h3elements, ul elements, li elements, and the div assigned to the flow id. Use a captionelement within each table. Note that the table rows have two columns. Configure "Time"and "Class" table headings within each table. Refer to Figure 8.16.Save your page and test it in a browser. If the page does not display as you intended,review your work, validate the CSS, validate the HTML, modify as needed, and testagain.

Question

Path of Light Yoga StudioSee Chapter 2 for an introduction to the Path of Light Yoga Studio case study. Figure2.44 shows a site map for Path of Light Yoga Studio. Use the Chapter 7 Path of LightYoga Studio website as a starting point for this case study. You will modify the Schedulepage (schedule.html) to display the class schedule in an HTML table. You will use CSSto style the table. You have three tasks in this case study:1. Create a new folder for this path of Light Yoga Studio case study.2. Modify the style sheet (yoga.css) to configure style rules for the new table.3. Modify the Schedule page to use a table to display information as shown inFigure 8.16.Figure 8.16Schedule page with tablesPath of Light Yoga StudioTineHomeYoga ScheduleMats, blocks, and blaksts provided. Please arve 10 minutes before your class begins. Relaxinour Serenity Lounge before or after your class.9:00am10:30am1:30pm7:00pmNoon1:30pm3:00pmMonday - FridayClassGentlech geRestorative YogaGentle Hatha YogaSaturday & SundayClasses ScheduleVinyasa YogaGentle cha YogaVinyasa YogaRestorative YogaDDContact Hands-On Practice Case StudyTask 1: The Website Folder. Create a folder called yoga8. Copy all the files from yourChapter 7 yoga7 folder into the yogas folder.Task 2: Configure the CSS. Modify the external style sheet (yoga.css). Open yoga.cssin a text editor. Review Figure 8.16 and note the class schedule information, which iscoded in two HTML tables. Add style rules above the media queries in the yoga.cssexternal style sheet to configure the following:1. A centered table with 60% width, a 1 pixel purple (#3F2880) border, collapsedborders (use border-collapse: collapse;), and a 1em bottom margin.2. A style for the td and th element selectors that configures 5 pixels of paddingand a 1 pixel purple border (#3F2880).3. Configure alternate-row background color. The table looks more appealing if therows have alternate background colors, but it is still readable without them.Apply the :nth-of-type CSS pseudo-class to configure the even table rows with a#DBE8E9 background color.4. A caption element selector with a 1em margin, bold text, and 120% font size.Save the yoga.css file.Task 3: Modify the Schedule Page. Open schedule.html in a text editor. You willrework the page to use two tables to display the schedule information instead of thesection, h3, and unordered list tags. Remove the tags for the section elements, h3elements, ul elements, li elements, and the div assigned to the flow id. Use a captionelement within each table. Note that the table rows have two columns. Configure &#34;Time&#34;and &#34;Class&#34; table headings within each table. Refer to Figure 8.16.Save your page and test it in a browser. If the page does not display as you intended,review your work, validate the CSS, validate the HTML, modify as needed, and testagain.

Accepted Answer

Description:
The code for the schedule.html file and the yoga.css file is given in the next step.…