Shape Up!   Shape Up! Find the best fit for you Home Strength Training Cardio Exercises Stress Relief What is Stress? 5 Helpful Tips Meditation Vipassana Healthy Diets Why a Healthy Diet? Plan Your Meals Count Your Calories Calculate Your BMI Get ready to Shape Up! How many times have you started a new workout routine or diet? And how many times has it failed to give you the results you want? Now, with the help of this site, you can learn 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 wait! 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 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 burn 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 burns 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 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 weight, gain weight, or just feel great! Maintaining a healthy diet is probably the most important thing you can do to promote overall health. Additional resources Physical activity and health Stretching exercises Strength training Cardiovascular training Yoga workout © 2022 Shape Up!

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question

 

<!DOCTYPE html>

<html lang="en">

 

<head>

<meta charset="utf-8">

<title>Shape Up!</title>

<link rel="shortcut icon" href="images/favicon.ico">

<link rel="stylesheet" href="styles/main.css">

</head>

 

<body>

<header>

<a href="index.html"><img src="images/shape_up_logo.png" alt="Shape Up logo"></a>

<h2>Shape Up!</h2>

<h3>Find the best fit for you</h3>

</header>

<nav id="nav_menu">

<ul>

<li><a href="index.html" class="current">Home</a></li>

<li><a href="strength/index.html">Strength Training</a></li>

<li><a href="cardio/index.html">Cardio Exercises</a></li>

<li><a href="stress/index.html">Stress Relief</a>

<ul>

<li><a href="stress/index.html">What is Stress?</a></li>

<li><a href="stress/tips.html">5 Helpful Tips</a></li>

<li><a href="stress/meditate.html">Meditation</a></li>

<li><a href="stress/vipassana.html">Vipassana</a></li>

</ul>

</li>

<li><a href="diet/index.html">Healthy Diets</a>

<ul>

<li><a href="diet/index.html">Why a Healthy Diet?</a></li>

<li><a href="diet/meals.html">Plan Your Meals</a></li>

<li><a href="diet/calories.html">Count Your Calories</a></li>

<li><a href="diet/bmi.html">Calculate Your BMI</a></li>

</ul>

</li>

</ul>

</nav>

<main>

<section>

<h1>Get ready to Shape Up!</h1>

<p>How many times have you started a new workout routine or diet? And how many times has it failed to give you the results you want? Now, with the help of this site, you can learn 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 wait! Get started looking and feeling better today.</p>

<p>As fitness expert Amanda Russell said:</p>

<blockquote>Fitness is about so much more than exercise. It’s a catalyst for positive change, and it affects every aspect of your life.</blockquote>

<h2>What we offer</h2>

<h3>Build strong muscles</h3>

<p>Tired of being tired? Strength training can help you manage or lose weight and increase your metabolism to help you burn more calories. It can also increase bone density and reduce the risk of osteoporosis. </p>

<h3>Get your heart rate up</h3>

<p>Want to lose weight? Cardiovascular exercise burns calories and improves overall health. It can reduce belly fat, promote brain growth, prevent stress, and help you focus.</p>

<h3>Relax</h3>

<p>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.</p>

<h3>Eat what's right for you</h3>

<p>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.</p>

</section>

<aside>

<h2>Additional resources</h2>

<ul>

<li><a href="https://www.cdc.gov/physicalactivity/basics/pa-health/index.htm">Physical activity and health</a></li>

<li><a href="http://www.heart.org/HEARTORG/HealthyLiving/PhysicalActivity/FitnessBasics/Flexibility-Exercise-Stretching_UCM_464002_Article.jsp#.WpB8zIPwaUl">Stretching exercises</a></li>

<li><a href="http://www.heart.org/HEARTORG/HealthyLiving/PhysicalActivity/FitnessBasics/Strength-and-Resistance-Training-Exercise_UCM_462357_Article.jsp#.WpCPxIPwaUl">Strength training</a></li>

<li><a href="https://www.health.harvard.edu/exercise-and-fitness/interval-training-for-a-stronger-heart">Cardiovascular training</a></li>

<li><a href="https://www.self.com/gallery/power-yoga-workout">Yoga workout</a></li>

</ul>

</aside>

</main>

<footer>

<p>&copy; 2022 Shape Up!</p>

</footer>

</body>

</html>

 

 

**Creating a Responsive CSS Layout**

To achieve a responsive design similar to the example provided:

1. **Duplicate Style Sheet**:
   - Copy `main.css` and rename it `main_rwd.css`.
   - Modify the HTML to utilize this new style sheet for a fluid layout.
   - Set the maximum page width to 1024px, ensuring it occupies 95% of the browser window.
   - Use `em` instead of pixels for margins and padding to create a fluid structure.
   - Convert any pixel-based font sizes to percentages or `em`.

2. **Media Queries**:
   - Implement a media query for screens up to 767px wide.
   - Modify the HTML and CSS to replace the navigation menu with a SlickNav menu.
     - Include `slicknav.css` from the styles folder and `slicknav.min.js` from the js folder.
     - Obtain the jQuery library from the jQuery Content Delivery Network.

   - Change the SlickNav menu background to steelblue with 3px padding.
   - Update background colors for `ul` and `a` elements to steelblue for the mobile menu.
   - Highlight links in lightsteelblue on hover.
   - Adjust the first heading font size in the header to 200%, formatting it to one column.

3. **Additional Media Query**:
   - For screens with a maximum width of 479px:
     - Reduce font sizes of headings in the header and `<p>` elements within the section.

**HTML Structure (index.html)**:

```html
<!DOCTYPE html>
<!-- HTML content goes here -->
```

These steps ensure your website is responsive and looks visually consistent across different devices and screen sizes. Make sure to test your design for functionality and aesthetics.
Transcribed Image Text:**Creating a Responsive CSS Layout** To achieve a responsive design similar to the example provided: 1. **Duplicate Style Sheet**: - Copy `main.css` and rename it `main_rwd.css`. - Modify the HTML to utilize this new style sheet for a fluid layout. - Set the maximum page width to 1024px, ensuring it occupies 95% of the browser window. - Use `em` instead of pixels for margins and padding to create a fluid structure. - Convert any pixel-based font sizes to percentages or `em`. 2. **Media Queries**: - Implement a media query for screens up to 767px wide. - Modify the HTML and CSS to replace the navigation menu with a SlickNav menu. - Include `slicknav.css` from the styles folder and `slicknav.min.js` from the js folder. - Obtain the jQuery library from the jQuery Content Delivery Network. - Change the SlickNav menu background to steelblue with 3px padding. - Update background colors for `ul` and `a` elements to steelblue for the mobile menu. - Highlight links in lightsteelblue on hover. - Adjust the first heading font size in the header to 200%, formatting it to one column. 3. **Additional Media Query**: - For screens with a maximum width of 479px: - Reduce font sizes of headings in the header and `<p>` elements within the section. **HTML Structure (index.html)**: ```html <!DOCTYPE html> <!-- HTML content goes here --> ``` These steps ensure your website is responsive and looks visually consistent across different devices and screen sizes. Make sure to test your design for functionality and aesthetics.
**Shape Up! - Find the best fit for you**

---

**Get ready to Shape Up!**

How many times have you started a new workout routine or diet? And how many times has it failed to give you the results you want? Now, with the help of this site, you can learn 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 wait! 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 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 burn 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 burns 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 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 weight, gain weight, or just feel great! Maintaining a healthy diet is probably the most important thing you can do to promote overall health.

**Additional resources**

- [Physical activity and health](#)
- [Stretching exercises](#)
- [Strength training](#)
- [Cardiovascular training](#)
- [Yoga workout](#)

© 2022 Shape Up!
Transcribed Image Text:**Shape Up! - Find the best fit for you** --- **Get ready to Shape Up!** How many times have you started a new workout routine or diet? And how many times has it failed to give you the results you want? Now, with the help of this site, you can learn 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 wait! 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 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 burn 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 burns 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 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 weight, gain weight, or just feel great! Maintaining a healthy diet is probably the most important thing you can do to promote overall health. **Additional resources** - [Physical activity and health](#) - [Stretching exercises](#) - [Strength training](#) - [Cardiovascular training](#) - [Yoga workout](#) © 2022 Shape Up!
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 3 steps with 1 images

Blurred answer
Knowledge Booster
Threats
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education