Shape Up! 8 Use Responsive Web Design

In this exercise, youll enhance the home page you worked on in exercise 7 so it uses Responsive Web Design.

Specifications for a fluid design

• Make a copy of the main.css style sheet and name it main_rwd.css. Then, modify the HTML for the page so it uses this style sheet.

• Modify the page so it uses a fluid layout. The maximum width for the page should be 1024px, and the page should occupy 95% of the browser window. Be sure to make the left and right margins and padding as well as the structural elements fluid.

• If you used pixels for any top or bottom margins or padding, convert them to ems. In addition, if you specified any of the font sizes using pixels, convert them to percentages or ems.

Make the image in the header scalable. Make sure that the width of the image is limited to its native size of 140px, and make sure that the image cant be reduced to a width less than 70px.

Specifications for a media query for a tablet in portrait orientation

• Add a meta element to the page to control the viewport for media queries.

• Add a media query that will be applied to screens with a maximum width of 900px. Then, add styles to remove the shadow from the page and reduce the size of all the fonts on the page to 90%.

  Specifications for a media query for a mobile phone in landscape orientation

• Add a media query that will be applied to screens with a maximum width of 767px. Then, add the HTML and CSS required to hide the navigation menu and display a SlickNav menu in its place. Youll find the slicknav.css file in the styles folder, youll find the slicknav.min.js file in the js folder, and you can get the jQuery library from the jQuery Content Delivery Network.

• Change the background color of the SlickNav menu to steelblue, and change its padding to 3px.

• Change the background color of the ul and elements for the mobile menu to steelblue. In addition, when the mouse hovers over a link in the menu, the link should be displayed in lightsteelblue.

• Change the font size of the first heading in the header to 200%, and format the page so it appears in one column.

* Add a media query that will be applied to screens with a maximum width of 479px. Then, reduce the font sizes of the headings in the header and the

elements in the section.

Shape Up! Find the best fit for you Home Strength Training Cardio Exercises Stress Relef Healthy Diets Additional resources Get ready to Shape Up! Physical activity and bealth Stretching exercises Strength training Cardiovascular training Yoga workout How many times have you started a new workout routine or diet? And how many times has it failed to give you the resuilts you want? Now, with the help of this site you can leam about the exercises and diet that work best for you. We offer personalzed programs as well as access to several health and dieting tools So dont waitl Get started looking and feeling beter today As fitness expert Amanda Russell said Fitness is about so much more than exercise It's a catalyst for positive change, and it affects every aspect of your life What we offer Build strong muscles Tired of being tired? Strength training can help you manage or lose weight and increase your metabolism to help you bum more calories. it can also increase bone density and reduce the risk of osteoporosis Get your heart rate up Want to lose weight? Cardiovascular exercise bums calories and improves overall health It can reduce belly fat, promote brain growth, prevent stress, and help you focus Relax Stressed out? Stress can weaken the immune systern and cause high blood pressure, fatigue, depression, arooiety, and even heart disease Leam ways to manage and reduce stress Eat what's right for you Are you really what you eat? Lose weight, gain weight or just feel great Maintaining a healthy diet is probably the most important thing you can do to promote overall health 2018 Shape Up Shape Up 127.001:54668/ch08/index.html s Shape Upl Find the best fit for you MENU Get ready to Shape Up! How many tmes have you started a new workout routine or diet? And how many times has it failed to give you the resuits you want? Now with the help of this sile, you can leam about the exercises and diet that work best for you. We offer personalized programs as well as access to several health and dieting tools So don't waitt Get started looking and feeling better today As fitness expert Amanda Russell said Fitness is about so much more than exercise it's a catalyst for positive change, and i affects every aspect of your Iife. What we offer Build strong muscies Tired of being tirod? Strength training can help you manage or lose weight and increase your metabolism to help you bun more calories It can also increase bone density and reduce the risk of osteoporosIS Shape Upl Find the best fit for you MENU Get ready to Shape Up! How many tmes have you started a new workout routine or diet? And how many times has t tailed to give you the results you want? Now with the heoip of this site, you can leam about the exercises and det hat work best for you We ofer personalzed programs as wel as access to several heath and dieting fools So don't wait Get started ooking and feeling beter today As ttness expert Amanda Russel said Fitness is about so much more than exercise It's a catalyst for positive change and it affects every aspect of your life What we offer Build strong muscles Tired of being bred? Strength training can heip you manage or lose weight and increase your metabolism to help you bum more calories It can also increase bone density and reduce the risk of osteoporosis Get your heart rate up Want to lose weight? Cardiovascuilar exercise buns calories and improves overall health It can reduce belly fat promote brain growth prevent stress, and heip you focus Relax Stressed out? Stress can weaken the immune system and cause high blood pressure, fatigue, depression, anxiety, and even heart disease Learn ways to manage and reduce stress Eat what's right for you Are you really what you eat? Lose weignt, gain weight, or just feel greatt Maintaning a healthy diet is probably the most important thing0 you can do to promoe overal health Additional resources Physical activity and health Suetching exercises Strength training Cardiovascular training Yoga workout 2219 Shape Up Shape Up! Find the best fit for you Home Strength Training Cardio Exercises Stress Relef Healthy Diets Additional resources Get ready to Shape Up! Physical activity and bealth Stretching exercises Strength training Cardiovascular training Yoga workout How many times have you started a new workout routine or diet? And how many times has it failed to give you the resuilts you want? Now, with the help of this site you can leam about the exercises and diet that work best for you. We offer personalzed programs as well as access to several health and dieting tools So dont waitl Get started looking and feeling beter today As fitness expert Amanda Russell said Fitness is about so much more than exercise It's a catalyst for positive change, and it affects every aspect of your life What we offer Build strong muscles Tired of being tired? Strength training can help you manage or lose weight and increase your metabolism to help you bum more calories. it can also increase bone density and reduce the risk of osteoporosis Get your heart rate up Want to lose weight? Cardiovascular exercise bums calories and improves overall health It can reduce belly fat, promote brain growth, prevent stress, and help you focus Relax Stressed out? Stress can weaken the immune systern and cause high blood pressure, fatigue, depression, arooiety, and even heart disease Leam ways to manage and reduce stress Eat what's right for you Are you really what you eat? Lose weight, gain weight or just feel great Maintaining a healthy diet is probably the most important thing you can do to promote overall health 2018 Shape Up Shape Up 127.001:54668/ch08/index.html s Shape Upl Find the best fit for you MENU Get ready to Shape Up! How many tmes have you started a new workout routine or diet? And how many times has it failed to give you the resuits you want? Now with the help of this sile, you can leam about the exercises and diet that work best for you. We offer personalized programs as well as access to several health and dieting tools So don't waitt Get started looking and feeling better today As fitness expert Amanda Russell said Fitness is about so much more than exercise it's a catalyst for positive change, and i affects every aspect of your Iife. What we offer Build strong muscies Tired of being tirod? Strength training can help you manage or lose weight and increase your metabolism to help you bun more calories It can also increase bone density and reduce the risk of osteoporosIS Shape Upl Find the best fit for you MENU Get ready to Shape Up! How many tmes have you started a new workout routine or diet? And how many times has t tailed to give you the results you want? Now with the heoip of this site, you can leam about the exercises and det hat work best for you We ofer personalzed programs as wel as access to several heath and dieting fools So don't wait Get started ooking and feeling beter today As ttness expert Amanda Russel said Fitness is about so much more than exercise It's a catalyst for positive change and it affects every aspect of your life What we offer Build strong muscles Tired of being bred? Strength training can heip you manage or lose weight and increase your metabolism to help you bum more calories It can also increase bone density and reduce the risk of osteoporosis Get your heart rate up Want to lose weight? Cardiovascuilar exercise buns calories and improves overall health It can reduce belly fat promote brain growth prevent stress, and heip you focus Relax Stressed out? Stress can weaken the immune system and cause high blood pressure, fatigue, depression, anxiety, and even heart disease Learn ways to manage and reduce stress Eat what's right for you Are you really what you eat? Lose weignt, gain weight, or just feel greatt Maintaning a healthy diet is probably the most important thing0 you can do to promoe overal health Additional resources Physical activity and health Suetching exercises Strength training Cardiovascular training Yoga workout 2219 Shape Up