(Solved) : Need Tasks 2 3 5 7 Completed Indexhtml Path Light Yoga Studio Yogacss Need New Edited Code Q41427746 . . .

Figure should be similar to the home Path of Light Yoga Studio See Chapter 2 for an introduction to the Path of Light Yoga St

Website Case Study 387 Hands-On Practice Case Study Task 1: Create a Folder. Create a folder called yoga7. Copy all of the fi

2. Code the following new styles within the media query: a. Configure a body element selector with margin and padding set to

I just need Tasks: 2,3,5, and 7 completed

index.html:

Path of Light Yoga Studio

<li>ca hrefalasses.h tml>Classes< /a></li> <li><a hreftachedule.html>Schedule</a>< /1i> <li><a hrefcontact.html>Contact<

yoga.css:

CAUserskimbelDesktoplyoga6lyoga.css- Notepad++ View Encoding Language Settings Tools Macro Run Plugins Window Search File Edi

yoga cas X 39 nav a 40 text-decoration: none; 41 font-weight: bold; padding: 1em; display: block; text-align: center; color:

yoga.cas X 74 padding-right: 2em; display: block; 75 76 77 E.floatleft 79 78 float: left; 80 margin-right: 4em; 82 Efooter 83

I just need the new (edited) codes for the index.html,classes.html, and yoga.css. I have the images and everything elsethat I need in a folder on my computer, so I just needed help withthe codes so that I can update the files in the folder.

Figure should be similar to the home Path of Light Yoga Studio See Chapter 2 for an introduction to the Path of Light Yoga Studio case study. Figure 2.42 shows a site map for the Path of Light Yoga Studio website. In this case study, you will configure the website to display on mobile devices using the single-col- umn layout shown in Figure 7.17. You will code media queries for mobile styles; modify the current desktop styles, and update the Home, Classes, and Schedule pages. Use the Chapter 6 Path of Light Yoga Studio website as a starting point for this case study. When you are finished, the website will look the same (see Figure 6.58) in desktop browsers. The mobile display should be similar to Figure 7.45 or 7.46. You have seven tasks in this case study: 1. Create a new folder for this Path of Light Yoga Studio case study. 2. Modify the Home page to include a viewport meta tag and an updated header area.. 3. Modify the Classes page to be consistent with the Home page. 4. Modify the Schedule page to be consistent with the Home page. 5. Modify the desktop styles in yoga.css. 6. Modify yoga.css and code a media query for tablet device display. 7. Modify yoga.css and code a media query for smartphone device display. Path of Light Yoga Studio Path of Light Yoga Studio Home Classes Hoe Classes Schedle Schedule Contac Contact Find Your Inner Light Find Your Inner Light ofug wher Path of Light Yoga Sudo provides all levels of yoga practice in a trangul peacefu enronment Whether you are new to yoga or an experienced practitioner, our dedicated instructors can develop a practioe to meet your needs Lat your inner ight shine at the Path Of Light Yoga Studie md Me o Hatha Vinyasa and Restorative Yoga Classes Dropins welcome Mats, blocks and blankets provided Relax in our Serenity Lounge before or after your clas es 4 Figure 7.45 The smartphone display Figure 7.46 Atest of the new tablet (or high- resolution smartphone) display in a desktop browser Website Case Study 387 Hands-On Practice Case Study Task 1: Create a Folder. Create a folder called yoga7. Copy all of the files from your Chapter 6 yoga6 folder into the yoga7 folder. Task 2: Modify the Home Page. Open index.html in a text editor. Edit the code as follows: 1. Configure a viewport meta tag that configures the width to the device-width and sets the initial-scale to 1.0. 2. The home page displays a phone number in the contact information area. Wouldn’t it be handy if a person using a smartphone could click on the phone number to call the company? You can make that happen by using tel: in a hyperlink. Configure a hyperlink assigned to an id named mobile that contains the phone number as shown below de”mobile” hret- ” tel: 888-555-5555″>888-555-5555</a> But wait a minute, a telephone link could confuse those visiting the site with a desktop browser. Code another phone number directly after the hyperlink, Code a span ele- ment assigned to an id named desktop around the phone number as shown below <apan id-“desktop” >888-555-5555</span> Don’t worry about the two phone numbers that are now on the page. You’ll configure CSS in Tasks 5 and 7 to show the appropriate phone number (with or without the tele- phone link) to your website visitors. Save the index.html file. It should look similar to the web page shown in Figure 6.58 (except for temporarily displaying two phone numbers) when displayed in a desktop browser. Remember that validating your HTML can help you find syntax errors. Test and correct this page before you continue. Task 3: Modify the Classes Page. Open classes.html in a text editor. Add the viewport meta tag in a manner consistent with the home page. Remove the height and width attributes from the img tag. Save and test your new classes.html page in a browser. Use the HTML validator to help you find syntax errors. Task 4: Modify the Schedule Page. Open schedule.html in a text editor. Add the viewport meta tag in a manner consistent with the home page. Remove the height and width from the img tag. Save and test your new schedule.html page in a browser. Use the HTML vali- dator to help you find syntax errors lask 5: Modify the Desktop CSS. Open yoga.css in a text editor. Remember the telephone rumber hyperlink you created in Task 2? Configure the CSS for the phone number display as shown below: 4mobile display: none: desktop display: inline: Task 6:Configure the Tablet CSS. Open yoga.css in a text editor. Edit the style rules as follows Save the yoga.css file. Use the CSS validator to help you find syntax errors. 1. Code a media query to select for typical tablet device viewport size. such as bedia only screen and (max-width: 1024px) 2. Code the following new styles within the media query: a. Configure a body element selector with margin and padding set to 0. b. Configure a wrapper id selector. Set the width to 100 %, min-width to 0, 0, and padding to O c. Configure the header element selector. Set top padding to 1px. d. Configure the nav element selector. The mobile layout uses a single column. Set the Displa before your Figur shou quu float to none, width to auto, and left padding to 2em. e. Configure the nav a selector. Set padding to 0.2em, left margin to 0.3em, float to We See left, and width to 23%. . Configure the main element selector. Set top and bottom padding to 2.5em, left and right padding to lem, margin to 0, 90 % font size, and clear all floats. g Configure the #hero img selector. Code a style declarations to set the width to 100 % and the height to auto. stuc out moc На h. Configure the h2, h3, p, and dl element selectors. Set the left and right padding to 2 i. Configure the main ul selector. Set left margin to 2em. j. Configure the floatleft class with 2em left margin and lem bottom margin, k.Configure the clear class with 2em left padding Save the yoga.css file. Use the CSS validator to help you find syntax errors. Task 7: Configure the Mobile CSS. Open yoga.css in a text editor. Note that any device with a screen max-width of 1024 pixels or less will apply the styles you coded in Task 6. In this task you will code additional styles needed for smaller devices. Edit the style rules as follows 1. Code a media query to select for typical smartphone device viewport size, such as emedia only all and (nax-width: 768px) 2. Code the following new styles within the media query: a. Configure an hl element selector. Set the font size to 2em, top padding to 0.25em left padding to 1.5em and width to 85%. Also configure centered text. b. Configure the anchor tags in the navigation area. Configure a style rule for the nav a selector. Set padding to 0.5em, width to 45%, float to left, minimum width to 6em, and left margin to 0.5em. c. Configure the main element selector. Set top padding to 0. d. Configure the floatleft class selector. Set the float property to none. Set dispiay none. e. Configure the #hero selector. Set display to none. f. Configure the footer element selector. Set padding to 0.5em and margin to 0 g. Remember the telephone number hyperlink you created in Task 2? Configure the CSS for the phone number display as shown below 4mobile display: inline: # desktop display: none: Save the yoga.css file. Use the CSS validator to help you find syntax errors <li>ca href”alasses.h tml>Classes< /a></li> <li><a hreft”achedule.html”>Schedule</a>< /1i> <li><a href”contact.html”>Contact</a></1i> 21 22 23 24 </ul> 25 </nav> 26 main> 27 <img areyogamat.jpg” alt”yoga mat”> <h2>Yoga Classes</h2 <dl> 28 29 <dt><atrongGentle Hatha Yoga</strong</dt <dd>Intended for beginners and anyone wishing a grounded foundation in the practice of yoga, this 60 minute class of poses and slow movement foouses on asana (proper alignment and posture), pranayama (breath work), and guided medi tation to foster your mind and body connection. </dd> 30 31 32 33 34 <dt><atrongvinyasa Yoga/strong/dt> <dd Although designed for internediate to advanced studenta, beginners are weloone to sanple this 60 minute class that foousess on breath-synchronized movement ámdeshryou will inhale and exhale as </dd 35 36 37 30 <dtcatrong Restorative Yoga/strongs/dt <ddThin 90 minute olass features very alow movement and long pose that are supported by a chair or wall. This calming restorative experience is suitable for students of any level of experience. This praction </dd 39 40 41 be a perfect way to helpP rehabilitate an injury 42 43 </d1> 44 </mains 45 <footer Copyright &oopy 2018 Path of Light Yogabr ca hrete”nailtoikngrosn.edu>kngroaatunog.adu/ </tooter 46 47 40 49 </div </body L</html 50 51 52 53 UTE Windows (CR LE Ln 25 Col19 Sel:010 length: 196 lines5 Hper Text Markup Language filei CAUserskimbelDesktoplyoga6lyoga.css- Notepad++ View Encoding Language Settings Tools Macro Run Plugins Window Search File Edit yoga.css X box-sizing: border-box; margin: 0; EP, ol, ul, h2, h3, h4, h5, h6, dl, dt, dd{ 6 7 margin: lem; } .clear clear: both;} 10 11 Ebody 12 background-color: #f0£0f0; color: #101010; 13 14 font-family: Verdana, Arial, sans-serif; 15 16 17 Eheader( 18 background-color: #9BC1C2; background-image: url (lilyheader.jpg) background-position: right; background-repeat: no-repeat; height: 150px; 19 20 21 22 23 24 25 26 padding-top: 50px; padding-left: 2em; 27 28 29 30 31 nav ( 32 float: left; width: 160px font-weight: bold; padding: 0; 33 34 35 36 Cascade Style Sheets File yoga cas X 39 nav a 40 text-decoration: none; 41 font-weight: bold; padding: 1em; display: block; text-align: center; color: #101010 ; 42 43 44 45 border-bot tom: 3px outset #CCCCCC; 46 47 margin-bottom: 1em; 48 49 Bnav a:link 50 51 color: #3F2860; 52 53 Enav a:visited{ color: #497777 54 55 56 57 Enav a:hover( 58 59 color: #A26100; 60 61 border:3px inset #333; 62 63 Enav ul ( list-style-type: none; margin: 0; padding: 0; 64 65 E.studio ( 68 69 70 71 67 font style: italic; Emain 72 73 margin-left: 170px; padding-top: lem; badding riglht: 2em; 74 Cascade Style Sheets File D AD ND KD 66 yoga.cas X 74 padding-right: 2em; display: block; 75 76 77 E.floatleft 79 78 float: left; 80 margin-right: 4em; 82 Efooter 83 font-size: .60em background-color: # 9BC1C2; font-style: italic; text-align: center; padding: lem; 84 85 86 87 88 89 90 91 E#wrapper 92 background-color: #F5F5F5; 93 margin-left: auto; margin-right: auto; width: 80% ; min-width: 1200px; 94 95 96 97 L) max-width: 1480px; 98 99 100 E.addr ( 101 102 103 font-size: 14px; padding: 8px; L) 104 105 206 207 108 #mobile (di splay: none: ) #cesktop (di splay: inline;) File CO CO CO CO CO CO CO CO CO OY O 0 0Y oY Show transcribed image text Figure should be similar to the home Path of Light Yoga Studio See Chapter 2 for an introduction to the Path of Light Yoga Studio case study. Figure 2.42 shows a site map for the Path of Light Yoga Studio website. In this case study, you will configure the website to display on mobile devices using the single-col- umn layout shown in Figure 7.17. You will code media queries for mobile styles; modify the current desktop styles, and update the Home, Classes, and Schedule pages. Use the Chapter 6 Path of Light Yoga Studio website as a starting point for this case study. When you are finished, the website will look the same (see Figure 6.58) in desktop browsers. The mobile display should be similar to Figure 7.45 or 7.46. You have seven tasks in this case study: 1. Create a new folder for this Path of Light Yoga Studio case study. 2. Modify the Home page to include a viewport meta tag and an updated header area.. 3. Modify the Classes page to be consistent with the Home page. 4. Modify the Schedule page to be consistent with the Home page. 5. Modify the desktop styles in yoga.css. 6. Modify yoga.css and code a media query for tablet device display. 7. Modify yoga.css and code a media query for smartphone device display. Path of Light Yoga Studio Path of Light Yoga Studio Home Classes Hoe Classes Schedle Schedule Contac Contact Find Your Inner Light Find Your Inner Light ofug wher Path of Light Yoga Sudo provides all levels of yoga practice in a trangul peacefu enronment Whether you are new to yoga or an experienced practitioner, our dedicated instructors can develop a practioe to meet your needs Lat your inner ight shine at the Path Of Light Yoga Studie md Me o Hatha Vinyasa and Restorative Yoga Classes Dropins welcome Mats, blocks and blankets provided Relax in our Serenity Lounge before or after your clas es 4 Figure 7.45 The smartphone display Figure 7.46 Atest of the new tablet (or high- resolution smartphone) display in a desktop browser
Website Case Study 387 Hands-On Practice Case Study Task 1: Create a Folder. Create a folder called yoga7. Copy all of the files from your Chapter 6 yoga6 folder into the yoga7 folder. Task 2: Modify the Home Page. Open index.html in a text editor. Edit the code as follows: 1. Configure a viewport meta tag that configures the width to the device-width and sets the initial-scale to 1.0. 2. The home page displays a phone number in the contact information area. Wouldn’t it be handy if a person using a smartphone could click on the phone number to call the company? You can make that happen by using tel: in a hyperlink. Configure a hyperlink assigned to an id named mobile that contains the phone number as shown below de”mobile” hret- ” tel: 888-555-5555″>888-555-5555 But wait a minute, a telephone link could confuse those visiting the site with a desktop browser. Code another phone number directly after the hyperlink, Code a span ele- ment assigned to an id named desktop around the phone number as shown below 888-555-5555 Don’t worry about the two phone numbers that are now on the page. You’ll configure CSS in Tasks 5 and 7 to show the appropriate phone number (with or without the tele- phone link) to your website visitors. Save the index.html file. It should look similar to the web page shown in Figure 6.58 (except for temporarily displaying two phone numbers) when displayed in a desktop browser. Remember that validating your HTML can help you find syntax errors. Test and correct this page before you continue. Task 3: Modify the Classes Page. Open classes.html in a text editor. Add the viewport meta tag in a manner consistent with the home page. Remove the height and width attributes from the img tag. Save and test your new classes.html page in a browser. Use the HTML validator to help you find syntax errors. Task 4: Modify the Schedule Page. Open schedule.html in a text editor. Add the viewport meta tag in a manner consistent with the home page. Remove the height and width from the img tag. Save and test your new schedule.html page in a browser. Use the HTML vali- dator to help you find syntax errors lask 5: Modify the Desktop CSS. Open yoga.css in a text editor. Remember the telephone rumber hyperlink you created in Task 2? Configure the CSS for the phone number display as shown below: 4mobile display: none: desktop display: inline: Task 6:Configure the Tablet CSS. Open yoga.css in a text editor. Edit the style rules as follows Save the yoga.css file. Use the CSS validator to help you find syntax errors. 1. Code a media query to select for typical tablet device viewport size. such as bedia only screen and (max-width: 1024px)
2. Code the following new styles within the media query: a. Configure a body element selector with margin and padding set to 0. b. Configure a wrapper id selector. Set the width to 100 %, min-width to 0, 0, and padding to O c. Configure the header element selector. Set top padding to 1px. d. Configure the nav element selector. The mobile layout uses a single column. Set the Displa before your Figur shou quu float to none, width to auto, and left padding to 2em. e. Configure the nav a selector. Set padding to 0.2em, left margin to 0.3em, float to We See left, and width to 23%. . Configure the main element selector. Set top and bottom padding to 2.5em, left and right padding to lem, margin to 0, 90 % font size, and clear all floats. g Configure the #hero img selector. Code a style declarations to set the width to 100 % and the height to auto. stuc out moc На h. Configure the h2, h3, p, and dl element selectors. Set the left and right padding to 2 i. Configure the main ul selector. Set left margin to 2em. j. Configure the floatleft class with 2em left margin and lem bottom margin, k.Configure the clear class with 2em left padding Save the yoga.css file. Use the CSS validator to help you find syntax errors. Task 7: Configure the Mobile CSS. Open yoga.css in a text editor. Note that any device with a screen max-width of 1024 pixels or less will apply the styles you coded in Task 6. In this task you will code additional styles needed for smaller devices. Edit the style rules as follows 1. Code a media query to select for typical smartphone device viewport size, such as emedia only all and (nax-width: 768px) 2. Code the following new styles within the media query: a. Configure an hl element selector. Set the font size to 2em, top padding to 0.25em left padding to 1.5em and width to 85%. Also configure centered text. b. Configure the anchor tags in the navigation area. Configure a style rule for the nav a selector. Set padding to 0.5em, width to 45%, float to left, minimum width to 6em, and left margin to 0.5em. c. Configure the main element selector. Set top padding to 0. d. Configure the floatleft class selector. Set the float property to none. Set dispiay none. e. Configure the #hero selector. Set display to none. f. Configure the footer element selector. Set padding to 0.5em and margin to 0 g. Remember the telephone number hyperlink you created in Task 2? Configure the CSS for the phone number display as shown below 4mobile display: inline: # desktop display: none: Save the yoga.css file. Use the CSS validator to help you find syntax errors
ca href”alasses.h tml>Classes Schedule Contact 21 22 23 24 25 26 main> 27 Yoga Classes

Expert Answer


Answer to I just need Tasks: 2,3,5, and 7 completed index.html: Path of Light Yoga Studio yoga.css: I just need the new (edited) c…