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.

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

Path of Light Yoga Studio See Chapter 2 for an introduction to the Path of Light Yoga Studio case study. Figure 2.44 shows a site map for Path of Light Yoga Studio. Use the Chapter 7 Path of Light Yoga Studio website as a starting point for this case study. You will modify the Schedule page (schedule.html) to display the class schedule in an HTML table. You will use CSS to 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 in Figure 8.16. Figure 8.16 Schedule page with tables Path of Light Yoga Studio Yoga Schedule 18:30 Tine Monday - Friday Saturday & Sunday Getrage Classes Schedule Contact

Path of Light Yoga Studio See Chapter 2 for an introduction to the Path of Light Yoga Studio case study. Figure 2.44 shows a site map for Path of Light Yoga Studio. Use the Chapter 7 Path of Light Yoga Studio website as a starting point for this case study. You will modify the Schedule page (schedule.html) to display the class schedule in an HTML table. You will use CSS to 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 in Figure 8.16. Figure 8.16 Schedule page with tables Path of Light Yoga Studio Yoga Schedule 18:30 Tine Monday - Friday Saturday & Sunday Getrage Classes Schedule Contact

Computer Networking: A Top-Down Approach (7th Edition)

7th Edition

ISBN:9780133594140

Author:James Kurose, Keith Ross

Publisher:James Kurose, Keith Ross

Chapter1: Computer Networks And The Internet

Section: Chapter Questions

Problem R1RQ: What is the difference between a host and an end system? List several different types of end...

See similar textbooks

Related questions

Q: You have been given the sales receipt (see the file sales_receipt.pdf in the extra folder) created…

A: Here is the Html code of the above problem. see below steps.

Q: create a reference page containing five references from the information given below. The style you…

A: APA (American Psychological Association) style is a standardized format for scholarly writing and…

Q: Write html necessary code (no CSS is required) to create a table with the following requirements:…

A: <!DOCTYPE html><html><head><style>table, th, td { border: 1px solid black;…

Q: Make the HTML for a table that looks like your class plan. The class times should be in the column…

A: HTML tables are used to organize and display data in a structured way. They consist of rows and…

Q: HTML tags used. Present the tags in three lists. The first list should be an unordered list. The…

A: You have to save all html pages to desktop. And open via your web browser. Source code is below:-…

Q:  Your first page is your index page (It MUST be called index.html) o It should be an overall…

A: Answers Code For Index.html <html><head><style>body {background-color:…

Q: 1. Create a button grid. Write the HTML for a four-row, four-column grid with a generic button in…

A: A grid container is created using the following tags. <div class="grid-container">…

Q: Use repl.it to build a web page that contains a table that displays some set of data. For…

A: Since only an example of table has to be used, I have created table with 5 rows and 5 columns and a…

Q: Construct a table in HTML that reflects your timetable for the semester. Class times should be…

A: Introduction : HTML tables are used to organize and display data in a structured way. They consist…

Q: Occasionally, designers will come up with designs that are tricky to implement. The Table below is…

A: Task : Create the table given the figure using the table tag in HTML.

Q: In this task, the list items are the navigation for a site. They should be laid out as a row, with…

A: Flex Container - In CSS, a flex container is an element that utilizes the Flexible Box Layout, also…

Q: You have been given the sales receipt (see the file sales_receipt.pdf in the extra folder) created…

A: Here is the html code of the above problem. see below steps for screenshot and output.

Q: I need help with creatufb this HTML. Thank you. Create an HTML form that has one input text field…

A: HTML:- HTML is a markup language that establishes the organizational structure of your content. HTML…

Question

Path of Light Yoga Studio
See Chapter 2 for an introduction to the Path of Light Yoga Studio case study. Figure
2.44 shows a site map for Path of Light Yoga Studio. Use the Chapter 7 Path of Light
Yoga Studio website as a starting point for this case study. You will modify the Schedule
page (schedule.html) to display the class schedule in an HTML table. You will use CSS
to 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 in
Figure 8.16.
Figure 8.16
Schedule page with tables
Path of Light Yoga Studio
Tine
Home
Yoga Schedule
Mats, blocks, and blaksts provided. Please arve 10 minutes before your class begins. Relaxin
our Serenity Lounge before or after your class.
9:00am
10:30am
1:30pm
7:00pm
Noon
1:30pm
3:00pm
Monday - Friday
Class
Gentlech ge
Restorative Yoga
Gentle Hatha Yoga
Saturday & Sunday
Classes Schedule
Vinyasa Yoga
Gentle cha Yoga
Vinyasa Yoga
Restorative Yoga
D
D
Contact

Hands-On Practice Case Study
Task 1: The Website Folder. Create a folder called yoga8. Copy all the files from your
Chapter 7 yoga7 folder into the yogas folder.
Task 2: Configure the CSS. Modify the external style sheet (yoga.css). Open yoga.css
in a text editor. Review Figure 8.16 and note the class schedule information, which is
coded in two HTML tables. Add style rules above the media queries in the yoga.css
external style sheet to configure the following:
1. A centered table with 60% width, a 1 pixel purple (#3F2880) border, collapsed
borders (use border-collapse: collapse;), and a 1em bottom margin.
2. A style for the td and th element selectors that configures 5 pixels of padding
and a 1 pixel purple border (#3F2880).
3. Configure alternate-row background color. The table looks more appealing if the
rows 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 will
rework the page to use two tables to display the schedule information instead of the
section, h3, and unordered list tags. Remove the tags for the section elements, h3
elements, ul elements, li elements, and the div assigned to the flow id. Use a caption
element 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 test
again.

Expert Solution

This question has been solved!

Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.

This is a popular solution!

SEE SOLUTION Check out a sample Q&A here

Step 1

VIEW

Step 2

VIEW

Step 3

VIEW

Trending now

This is a popular solution!

Step by step

Solved in 3 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Similar questions

using flex box css html coding
Based on the following specification, code one webpage using HTML5, CSS and JavaScript. HTML5: Three label elements with IDs lblTarget1, lblTarget2 and lblTarget3 Two buttons with IDs btnA and btnB. Both buttons invoke function fManipulate when clicked JavaScript: Code a function named fManipulate that Accepts one parameter containing an object that represents the clicked button Check to see which of the two buttons invoked this function If fManipulate function was invoked by btnA then change the text color of lblTarget1 to red by using the getElementById method If fManipulate function was invoked by btnB then change the font of ALL three labels by first using the getElementsByTagName method to return a collection of labels then use a for loop to iterate through the collection of labels to change the font of each label to calibri
For this assignment you are to create a site template (called template.htm) that uses the different parts of HTML 5 and CSS that we've been talking about all term. As a minimum it should have: Proper HTML structure including html, head, and body tags. A page header Site navigation (nav with anchor links) should have at least 5 links on the menu those links may not be complete, so the href can be just "#" probably should be in your page header A main section
1 What types of argument does the jQuery factory method accept? 2. With which jQuery method can you get or set a CSS property value? 3. What statement would you use to attach a method to the click event of an element with the ID of elem, to make it slowly hide? 4. How can you retrieve an element node object from a jQuery selection object? 5. What statement would set the sibling element immediately preceding one with the ID of news to display in bold? 6. What are the key advantages and disadvantages of using a software framework when constructing web applications? 7. What are the advantages of React's component-based approach to constructing user interfaces? 8. Describe the differences between props and state in React.
The site page will have input fields for the accompanying data:Html First NameLast NameDateAddressFav Vehicle (text region). .
Create a new page called sales.html and a js script called sales-graph.js This page should display a bar graph for sales data for each month. Use the following sales data: a. Month: January , Sales: 40 b. Month: February, Sales: 10 c. Month: March , Sales: 100 d. Month: April, Sales: 65 e. Month: May, Sales: 75 f. Month: June, Sales: 120 g. Month: July, Sales: 121 h. Month: August, Sales: 175 i. Month: September, Sales: 220 j. Month: October, Sales: 275 k. Month: November, Sales: 300 l. Month: December, Sales: 15 Use different colors for each month and use labels for the month and for each bar and annotate that the Sales is in thousands. Add a reset graph button and when the button is clicked, use animation to shrink all the bars back to 0. Only the admin should be able to see the Sales-graph. So when the admin logins, redirect them only to the subscription-dashboard page. The admin’s username is admin@titanmusicstore.com and their password is “admin123”. You will need to hardcode this…
Make up a table of data. Your table must have at least four rows and four columns. It must have at least one rowspan and one colspan attribute. The value for these attributes must be greater than 1. You can make up your own data. However, the table does have to make sense. Please name this file part one.html,
Introduction The title of this first assignment is called "About Me". You will create a single web page using the required HTML elements outlined below. The content is up to you to create – introduce yourself or create a persona/character to drive the creation of your pages text content. Submission Instructions Submit a zipped/compressed folder named HW_1 using the submission form on Canvas titled "HW 1 Submission". HTML Requirements • Use the HTML document structure outlined in the Minimal HTML 5 Document Structure section in Lab 1 as a starting point the content of the Document Title element should be “About Me" without the quotation marks 1 x Level One Section Heading element 2 x Level Two Section Heading element 3 x Paragraph elements 1x Unordered List 1 x Description List 1 x Image Embed element 1 x Footer element Notes: Use the online textbook and MDN Web Docs as a reference for the HTML requirements above. You are allowed to use more HTML elements than outlined above. However,…