Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <!DOCTYPE HTML>
<html>

  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./styles.css">
     <meta charset="UTF-8"/>
     <title>Health & Fitness Documentation</title>
    </head>

  <body>
    <div class="header1">
    <header id="header">

      <nav id="navbar">
        <header class="title1">Health & Fitness</header>
        <ul>
          <li><a class="nav-link" href="#Introduction">Introduction</a></li><hr>
          <li><a class="nav-link" href="#Meditation">Meditation</a></li><hr>
          <li><a class="nav-link" href="#Healthy_Food">Healthy Food</a></li><hr>
          <li><a class="nav-link" href="#Healthy_Diet_For_Adult">Healthy Diet For Adult</li><hr>
          <li><a class="nav-link" href="#Workout_Routine">Workout Routine</a></li><hr>
          <li><a class="nav-link" href="#Benefit_of_Exercise">Benefit of Exercise</a></li><hr>
          <li><a class="nav-link" href="#Benefit_of_Meditation">Benefit of Meditation</a></li><hr>
          <li><a class="nav-link" href="#Benefit_of_Healthy_food">Benefit of Healthy food</a></li><hr>
          <li><a class="nav-link" href="#How_to_be_Consistent">How to be consistent</a></li><hr>
          <li><a class="nav-link" href="#Reference">Reference</a></li><hr>
          </ul>
        </nav>
      </header>
      </div>
      
      <main id="main-doc"> 
        <section class="main-section" id="Introduction">
          <header class="heading" id="1"><b>Introduction</b></header>
          <div>
          <p><i>Lifestyle choices you make today can lead to a healthier future. Learn how eating a healthy diet and exercising can help control or delay age-related health problems.</p>
          <p>Physical fitness is a general state of health and well-being and, more specifically, the ability to perform aspects of sports, occupations and daily activities. Physical fitness is generally achieved through proper nutrition, moderate-vigorous physical exercise, physical activity, and sufficient rest.</p>
          <p>Eating a healthy diet and exercising often can help control or delay health issues associated with aging, like high blood pressure and diabetes.</p>
          <p>Through reading this doucmentation, I hope that you will begin to lead a happy and healthy lifestyle that will allow you to reach you goal.</p>
          <div>
            </p>
          </section>

          <section class="main-section" id="Meditation">
            <header class="heading" id="2">Meditation</header>
            <p>Meditation isn’t about becoming a different person, a new person, or even a better person. It’s about training in awareness and getting a healthy sense of perspective. You’re not trying to turn off your thoughts or feelings. You’re learning to observe them without judgment. And eventually, you may start to better understand them as well.<br>
            <br>Learning to meditate is like learning any other skill. Think of it like exercising a muscle that you’ve never really worked out before. It takes consistent practice to get comfortable. And it’s usually easier if you have a teacher. We’ve got you covered there.<br>
            <br>There’s no such thing as perfect meditation. Sometimes your focus will wander or you’ll forget to follow your breath. That’s OK. It’s part of the experience. What’s most important is to meditate consistently. It’s one of those things where the journey is more important than the destination.
              </p>
              </section>
              
              <section class="main-section" id="Healthy_Food">
                <header class="heading" id="3">Healthy Food</header>
                <p>Consuming a healthy diet throughout the life-course helps to prevent malnutrition in all its forms as well as a range of noncommunicable diseases (NCDs) and conditions. However, increased production of processed foods, rapid urbanization and changing lifestyles have led to a shift in dietary patterns. People are now consuming more foods high in energy, fats, free sugars and salt/sodium, and many people do not eat enough fruit, vegetables and other dietary fibre such as whole grains.<br>
                <br>The exact make-up of a diversified, balanced and healthy diet will vary depending on individual characteristics (e.g. age, gender, lifestyle and degree of physical activity), cultural context, locally available foods and dietary customs. However, the basic principles of what constitutes a healthy diet remain the same.<br>
                <br>A healthy diet helps to protect against malnutrition in all its forms, as well as noncommunicable diseases (NCDs), including such as diabetes, heart disease, stroke and cancer.
                  </p>
                </section>

                <section class="main-section" id="Healthy_Diet_For_Adult">
                  <header class="heading" id="4">Healthy Diet For Adult</header>
                  <p>Adult should consume Fruit, vegetables, legumes (e.g. lentils and beans), nuts and whole grains (e.g. unprocessed maize, millet, oats, wheat and brown rice).<br>
                  <br>At least 400 g (i.e. five portions) of fruit and vegetables per day (2), excluding potatoes, sweet potatoes, cassava and other starchy roots.<br>
                  <br>Less than 10% of total energy intake from free sugars (2, 7), which is equivalent to 50 g (or about 12 level teaspoons) for a person of healthy body weight consuming about 2000 calories per day, but ideally is less than 5% of total energy intake for additional health benefits (7). Free sugars are all sugars added to foods or drinks by the manufacturer, cook or consumer, as well as sugars naturally present in honey, syrups, fruit juices and fruit juice concentrates.<br>
                  <br>Less than 5  g of salt (equivalent to about one teaspoon) per day (8).  Salt should be iodized.
                    </p>
                  </section>
                  
                  <section class="main-section" id="Workout_Routine">
                    <header class="heading" id="5">Workout Routine</header>
                    <p>Here is 10 different workout that you can perform on a daily basis to build a healthy and strong body. 
                      <br>Lunges: Challenging your balance is an essential part of a well-rounded exercise routine. Lunges do just that, promoting functional movement while also increasing strength in your legs and glutes. To learn how to perform, please click <a href="https://gfycat.com/requiredthinabalone">here</a><br>
                      <br>Pushups:  Pushups are one of the most basic yet effective bodyweight moves you can perform because of the number of muscles that are recruited to perform them. To learn how to perform, please click <a href="https://gfycat.com/fittingidenticalatlanticspadefish">here</a><br>
                      <br>Squats: Squats increase lower body and core strength, as well as flexibility in your lower back and hips. Because they engage some of the largest muscles in the body, they also pack a major punch in terms of calories burned. To learn how to perform, please click <a href="https://gfycat.com/uncommonwelcomeliger">here</a><br>
                       <br>Standing overhead dumbbell presses: Compound exercises, which utilize multiple joints and muscles, are perfect for busy bees as they work several parts of your body at once. A standing overhead press isn’t only one of the best exercises you can do for your shoulders, but it also engages your upper back and core. To learn how to perform, please click <a href="https://gfycat.com/silversilentbangeltiger">here</a><br>
                        <br>Dumbbell rows: Not only will these make your back look killer in that dress, but dumbbell rows are also another compound exercise that strengthens multiple muscles in your upper body. Choose a moderate-weight dumbbell and ensure that you’re squeezing at the top of the movement. To learn how to perform, please click <a href="https://gfycat.com/advancedbestchrysalis">here</a><br>
                        <br><b>For more exercise, Please go to this <a href="https://www.healthline.com/health/fitness-exercise/10-best-exercises-everyday#start-here">Website</b></a>

                      </p>
                    </section>

                    <section class="main-section" id="Benefit_of_Exercise">
                      <header class="heading" id="6">Benefit of Exercise</header>
                      <p>Regular physical activity is one of the most important things you can do for your health. Being physically active can improve your brain health, help manage weight, reduce the risk of disease, strengthen bones and muscles, and improve your ability to do everyday activities.<br>
                        <br>Some benefits of physical activity on brain health happen right after a session of moderate-to-vigorous physical activity. Benefits include improved thinking or cognition for children 6 to 13 years of age and reduced short-term feelings of anxiety for adults. Regular physical activity can help keep your thinking, learning, and judgment skills sharp as you age. It can also reduce your risk of depression and anxiety and help you sleep better.><br>
                        <br>Adults who sit less and do any amount of moderate-to-vigorous physical activity gain some health benefits. Only a few lifestyle choices have as large an impact on your health as physical activity.<br>
                        <br>Everyone can experience the health benefits of physical activity – age, abilities, ethnicity, shape, or size do not matter.

                      </section>

                      <section class="main-section" id="Benefit_of_Meditation">
                        <header class="heading" id="7">Benefit of Meditation</header>
                        <p>The process of mediation is a guided negotiation, which parties attempt to negotiate a resolution of their dispute, aided by a mediator. Settling disputes through mediation can save money, eases the court load and more often than not it leaves parties in a better state of mind. There are a number of other significant benefits of mediation and they include:<br>
                          <br>Greater Control: Mediation increases the control the parties have over the resolution. Each party are directly involved in negotiating their own agreement and no settlement can be imposed upon you. In comparison, dissatisfaction is often experienced in court where parties have little choice but to accept the judgement made, which they may not be happy with. <br>
                          <br>Preservation of Relationships. Whether is may be a business or family dispute, preservation of relationships can be a key benefit of mediation. Mediation helps participants focus on effectively communicating with each other as opposed to attacking each other.<br>
                          </p>
                        </section>

                        <section class="main-section" id="Benefit_of_Healthy_food">
                          <header class="heading" id="8">Benefit of Healthy food</header>
                          <p>The benefit of Healthy food can bring forth:<br>
                          <br>-May help you live longer<br>
                          <br>- Keeps skin, teeth, and eyes healthy<br>
                          <br>- Supports muscles<br>
                          <br>- Boosts immunity</br>
                          <br>- Strengthens bones</br>
                          <br>- Lowers risk of heart disease, type 2 diabetes, and some cancers<br>
                          <br>- Supports healthy pregnancies and breastfeeding<br>
                          <br>- Helps the digestive system function<br>
                          <br>- Helps achieve and maintain a healthy weight<br>
                          
                            </p>
                          </section>

                          <section class="main-section" id="How_to_be_Consistent">
                            <header id="9" class="heading">How to be Consistent</header>
                            <p>Getting into a consistent fitness routine can seem tough—not only do you have to carve out the time, but you have put in some blood, sweat, and tears, right? Well, not so fast. While exercise should challenge us, we shouldn’t dread it because we think we have to be perfect. <br>  
                            <br>Making consistent healthy change (even if it’s small) is never a waste of time. So, let’s do away with the idea of perfection and start being realistic and consistent.<br> 
                            <br>Here are some of our go-to hacks to make sure you are getting your sweat sesh in each day.<br>
                            <ul>
                              <li>Workout first thing in the morning or even on your lunch break if you need to find a time to squeeze it in. </li>
                              <li>Set out your workout clothes the night before to set yourself up for success. </li>
                              <li>Write out a consistent fitness routine schedule each week so you know what to expect. </li>
                              <li>Vary your workouts so that you don’t get bored. </li>
                              <li>Use the convenience of working out from home, so you eliminate the excuse of needing to get in the car to drive to the gym. </li>
                              <li>Have a workout buddy so you can help keep each other accountable. 
</li>
                              </ul>
                              Moving on to some of our favorite ways to make healthy eating a habit and something you stick with. <br>
                              <ul>
                                <li>Start by consistently eating healthy for one meal per day. Try starting with breakfast, then move onto lunch, and then dinner. Before you know it, you’ll be optimizing each meal with nutrient-dense foods. </li>
                                <li>Be consistent with healthy snacks too. Make grab and go snack jars on the weekends with things like nuts and seeds, and sliced veggies with hummus to have to snack on when the workweek gets busy. </li>
                                <li>Try being more consistent with cooking more at home. Making your meals from scratch gives you the power to decide what ingredients you use, helping you avoid the not so healthy options. </li>
                                <li>To help yourself stay consistent with healthy eating, try to keep unhealthy foods out of the house. </li>
                                <li>Stop and think about what motivates you and write it down. This will help you stay consistent when things start to feel challenging. </li>

                                </ul>


                              </p>
                            </section>
                            
                            <section class="main-section" id="Reference">
                              <header id="10" class="heading">Reference</header>
                              <ul>
                              <li><a href="https://med.libretexts.org/Courses/Sierra_College/Sierra%3A_NUTF10_(Teh)/08%3A_Physical_Fitness/8.01%3A_Introduction_to_Nutrition_and_Physical_Fitness">https://med.libretexts.org/Courses/Sierra_College/Sierra%3A_NUTF10_(Teh)/08%3A_Physical_Fitness/8.01%3A_Introduction_to_Nutrition_and_Physical_Fitness</a></li>
                             <li><a href="https://www.nia.nih.gov/health/infographics/diet-and-exercise-choices-today-healthier-tomorrow">https://www.nia.nih.gov/health/infographics/diet-and-exercise-choices-today-healthier-tomorrow</a></li>
                              <li><a href="https://www.headspace.com/meditation-101/what-is-meditation">https://www.headspace.com/meditation-101/what-is-meditation</a></li>
                              <li><a href="https://www.who.int/news-room/fact-sheets/detail/healthy-diet">https://www.who.int/news-room/fact-sheets/detail/healthy-diet</a></li>
                              <li><a href="https://www.healthline.com/health/fitness-exercise/10-best-exercises-everyday">https://www.healthline.com/health/fitness-exercise/10-best-exercises-everyday</a></li>
                              <li><a href="https://www.cdc.gov/physicalactivity/basics/pa-health/index.htm#:~:text=Being%20physically%20active%20can%20improve,activity%20gain%20some%20health%20benefits">https://www.cdc.gov/physicalactivity/basics/pa-health/index.htm#:~:text=Being%20physically%20active%20can%20improve,activity%20gain%20some%20health%20benefits</a></li>
                              <li><a href="https://www.cdc.gov/nutrition/resources-publications/benefits-of-healthy-eating.html">https://www.cdc.gov/nutrition/resources-publications/benefits-of-healthy-eating.html</a>
                              <li><a href="https://fitonapp.com/fitness/consistent-fitness-routine/">https://fitonapp.com/fitness/consistent-fitness-routine/</a></li>
                              </ul>
                            </section>

        </main>
   
    </body>

  </html> 
    
              
            
!

CSS

              
                * {
  background-color: #ededf0;
}

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

.header1 {
  width: 30%;
  float: left;
  border-right: 1px solid black;
  padding-right: 10px;
  border-bottom: 1px solid black;
 
}

.header1 .title1 {
  font-style: italic;
  text-align: center;
  font-size: 27px;

}

.header1 li{
  list-style: none;
  font-size: 20px;
  padding-right: 20px;
  text-align: left;
  padding-top: 8px;
}

.header1 a {
  text-decoration: none;
  color: black;
  font-style: italic;
}

.header1 a:hover{
  color: blue;
  text-decoration: underline;
  transition: 0.5s;
}

main {
  float: right;
  width: 65%;
  font-style: italic;
}

main > header {
  font-size: 20px;
}

.heading {
  font-size: 25px;
  font-weight: 900px;
  text-decoration: underline;
}

hr {
  width: 98%;
}

.reference a{
  text-align: center;
  color: blue;

}

              
            
!

JS

              
                
              
            
!
999px

Console