Path of Light Yoga Studio Chapter 6

 
2. Modify the style rules in the yoga.css file to configure a two-column page layout, as shown in Figure 6.66.
3. Modify the Home page (Figure 6.67) to implement the two-column page layout.

4. Modify the Classes page (Figure 6.69) to implement the two-column content page layout, as shown in Figure 6.68.

 

5. Modify the Schedule page (Figure 6.70) to be consistent with the Classes page.

TASK 1: THE WEBSITE FOLDER.  You will modify the yoga.css file and each web page file (index.html, classes.html, and schedule.html) to implement the two-column page layout shown in Figure 6.66. See the new Path of Light Yoga Studio home page in Figure 6.67.

TASK 2: CONFIGURE THE CSS. Open yoga.css in a text editor. Edit the style rules as follows:

1. Configure the universal selector with a box-sizing: border-box style declaration.
 * { box-sizing: border-box; }
2. Edit the styles for the wrapper id. Change min-width to 1200px. Change max-width to 1480px.
3. Configure the left-column navigation area. Modify the styles for the nav element selector. Remove the text-align declaration. The nav area will inherit the background color of the wrapper id. Add style declarations to configure this area to float to the left with a width of 160 pixels.
4. Configure the navigation hyperlinks to look like buttons. We’ll set up the CSS in this step.
a. Edit the styles for the nav a selector. Configure new styles to use block display, centered text, a 3 pixel gray (#CCCCCC) outset border, 1em padding, and a 1em bottom margin.
b. Configure the :link, :visited, and :hover pseudo-classes for the navigation hyperlinks. Use the following text colors: #3F2860 (unvisited hyperlinks), #497777 (visited hyperlinks), and #A26100 (hover). Also configure a 3 pixel inset #333333 border for hyperlinks in the hover state.
 nav a:link { color: #3F2860; }
?nav a:visited { color: #497777; }
?nav a:hover { color: #A26100; border: 3px inset #333333; }
5. You will organize the navigation hyperlinks within an unordered list in later tasks. The navigation area in Figure 6.65 does not show list markers. Code a nav ul descendant selector to configure unordered lists in the navigation area to display without list markers. Also configure the unordered list to have no left padding.
6. Edit the styles for the main element selector. Add new style declarations to configure a 170 pixel left margin and 1em top padding.
7. Remove the img element selector and style declarations.
8. Configure a new class named floatleft that floats to the left with right margin set to 4em and bottom margin set to 1em.
9. Edit the styles for the #hero selector. Remove the text-align style declaration. Configure 1em top and bottom padding.
10. Configure styles for a new class named clear with a clear: both; style declaration.
11. Configure a style rule for a class named onehalf. Set left float, 50% width, 2em left padding, and 2em right padding.
12. Configure a style rule for a class named onethird. Set left float, 33% width, 2em left padding, and 2em right padding.
13. Configure hyperlinks in the header area. Use descendant selectors to configure hyperlinks within the header element with no underline, purple (#40407A) text color for the :link and :visited pseudo-classes, and white (#FFFFFF) text color for the :hover pseudo-class.

TASK 3: MODIFY THE HOME PAGE. Open index.html in a text editor and modify the code as follows:

1. Configure the “Path of Light Yoga Studio” text in the header area to be a hyperlink to the Home page (index.html).
2. Rework the navigation area. Remove any   characters that may be present. Configure an unordered list to organize the navigation hyperlinks. Each hyperlink should be contained within

 
• tags.
  3. Edit the img tag. Remove the align=”right” attribute. Assign the img tag to the class named floatleft. Change the value of the src attribute to yogadoor2.jpg.
  4. Edit the div element that contains the address information. Assign the div to the class named clear.
  TASK 4: MODIFY THE CLASSES PAGE. Open classes.html in a text editor and modify the code as follows.

   

  1. Configure the header area and navigation hyperlinks in the same manner as the home page.
  2. Move the div assigned to the id="hero" below the description list; just above the closing tag for the main element.
  3. Examine the wireframe in Figure 6.68 and notice that there are three sections within the main element. Remove the tags that configure the description list from the page. Also remove the strong tags. Notice the text content is a series of yoga class titles and yoga class descriptions. Configure each yoga class title within an h3 element. Configure each yoga class description within a paragraph element. Code a section element to contain each yoga class title and yoga class description pair. Assign each section to the CSS class named onethird.
  TASK 5: MODIFY THE SCHEDULE PAGE. 

  1. Configure the header area and navigation hyperlinks in the same manner as the home page.
  2. Move the div assigned to the id="hero" below the second unordered list; just above the closing tag for the main element.
  3. View the wireframe in Figure 6.68 and notice that there are three sections within the main element. This web page is a little different, It will have only two sections. Use Figure 6.69 as a guide. Code a section element to contain each pair of h3 and ul elements. Assign each section element to the CSS class named onehalf.

  This is what I have so far:

  classes.html

   

   

  Path of Light Yoga Studio

   

   

   

  
  
  • Home
  • Classes
  • Schedule
  • Contact

   

   

   

  Yoga Classes

  
          

  Gentle Hatha Yoga

  
              

  A 60 minutes class of poses and slow movement that focuses on asana (proper alignment and posture), pranayama (breath work), and guided meditation to foster your mind and body connection. This class is intended for beginners and anyone wishing a grounded foundation in the practice of yoga.

  
          

  Vinyasa Yoga

  
              

  A 60 minute class that focuses on breath-synchronized movement — you will inhale and exhale as you flow energetically through yoga poses. While intended for intermediate to advanced students, beginners are welcome to join in this class.

  
          

  Restorative Yoga

  
              

  A 90 minute class that features very slow movement and long poses. Restorative yoga is useful in relieving stress and fostering a sense of well-being. This calming, restorative experience is suitable for students of any level of experience.

  
  

   

   

  Copyright © 2020 Path of Light Yoga Studio
   solimar@ortizreyes.com

   

   

  schedule.html

   

   

   

  
      

  Path of Light Yoga Studio

   

   

   

  Home   Classes   Schedule   Contact

   

   

   
  
  
   

  Yoga Schedule

  
      

  Mats, blocks, and blankets provided. Please arrive 10 minutes before your class begins. Relax in our Serenity Lounge before or after your class.

   

  Monday -- Friday

   
  • 9:00 am Gentle Hatha Yoga
  • 10:30 am Vinyasa Yoga
  • 5:30 pm Restorative Yoga
  • 7:00 pm Gentle Hatha Yoga
   

  Saturday & Sunday

   
  • 10:30 am Gentle Hatha Yoga
  • Noon Vinyasa Yoga
  • 1:30 pm Gentle Hatha Yoga
  • 3:00 pm Vinyasa Yoga
  • 5:30 pm Restorative Yoga
   

   

   

   

   

  Copyright © 2020 Path of Light Yoga Studio
   solimar@ortizreyes.com

   

   

  yoga.css

  body { background-color: #3F2860; color: #40407A;  font-family: Arial, Verdana, sans-serif; }

  * { box-sizing: border-box; }

  header { background-color: #80CBC4; background-image: url("lilyheader.jpg"); background-repeat: no-repeat; background-position: right; height: 150px; }

  h2 { margin-top: 0px; }

  h1 { padding-top: 50px; padding-left: 2em; line-height: 200%; margin-top: 0px; }

  nav { margin-left: 5px; float: left; width: 90px; background-color: #F5F5F5; padding: 1em; font-weight: bold; width: 160px;}

  nav a {text-decoration: none;  padding: 1em;  margin-bottom: 1em; display: block;width: 160px; border: inset 3px #CCCCCC; }

  nav ul { list-style-type: none; padding-left: 0px;}

  nav a:link { color: #3F2860; }
  nav a:visited { color: #497777; }
  nav a:hover { color: #FFFFFF; border: 3px inset #333333;}

  li {  line-height: 90%;  padding-left: 0;  font size: 1.2em; }

  main { background-color: #F5F5F5;padding-left: 2em; padding-right: 2em; text-align: left; padding-bottom: 2em;margin-left: 170px;padding-top: 1em;}

  #hero{padding-top: 1em;padding-bottom: 1em;}

  footer { background-color: #80CBC4;color: #40407A;font-size: .60em;font-style: italic;  text-align: center;padding: 1em; }

  .studio { font-style: italic; }

  #wrapper { margin-left: auto; margin-right: auto;min-width: 1200px;max-width: 1480px;background-color: #F5F5F5;}

  .clear { clear: both; }

  .onehalf { float: left; width: 50%; padding-left: 2em; padding-right: 2em; }

  .onethird { float: left; width: 33%; padding-left: 2em; padding-right: 2em;}

  .floatleft { float: left; margin-right: 4em; margin-bottom: 1em; }

  Sample output of each page:

  

  

Figure \( 6.66 \) Wireframe for a two-column page layout for the Path of Light Yoga Studio website wrapper header nav main Figure 6.68 Path of Light Yoga Studio content page layout wrapper header nav hero div footer Figure 6.69 The new Path of Light Yoga Studio two-column Classes page Path of Light Yoga Studio before or after your dass. Path of Light Yoga Studio Yoga Schedule Mats, blocks, and blankets provided. Please arrive 10 minutes before your class begins. Relax in our Serenity Lounge before or after your class. Monday - Friday - 9:00 am Gentle Hatha Yoga - 10:30 am Vinyasa Yoga - 5:30 pm Restorative Yoga 7:00 pm Gentle Hatha Yoga Saturday \& Sunday - 10:30 am Gentle Hatha Yoga - Noon Vinyasa Yoga - 1:30 pm Gentle Hatha Yo \( 3: 00 \mathrm{pm} \) Vinyasa Yoga \( -5: 30 \) Path of Light Yoga Studio Yoga Classes \( \begin{array}{ll}\text { Gentle Hatha Yoga } & \begin{array}{l}\text { A } 60 \text { minutes class of poses and slow movement that focuses on asana (proper alignment and posture), } \\ \text { pranayama (breath work), and guided meditation to foster your mind and body connection. This class is intended } \\ \text { for beginners and anyone wishing a grounded foundation in the practice of yoga. }\end{array} \\ \text { Vinyasa Yoga } & \begin{array}{l}\text { A } 60 \text { minute class that focuses on breath-synchronized movement }-\text { you will inhale and exhale as you flow } \\ \text { energetically through yoga poses. While intended for intermediate to advanced students, beginners are welcome } \\ \text { to join in this class. }\end{array}\end{array} \) Restorative Yoga A 90 minute class that features very slow movement and long poses. Restorative yoga is useful in relieving stress and fostering a sense of well-being. This calming, restorative experience is suitable for students of any level of experience.