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

              
                <!-- 

Hello Camper!

Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->
<!DOCTYPE html>
<html>
  <body>
   <div id="logos">
    <img id="logo" src="https://st3.depositphotos.com/10544526/18888/v/1600/depositphotos_188887630-stock-illustration-young-doctor-stethoscope-doctor-logo.jpg">
    <img id="logo2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMMwnbVtpdz5Cnvlll7Lu8Dp1uxra60r5tfw&usqp=CAU">
   </div>
   <br><br>
  
  
 <nav id="navbar">
   <header><b> CAD OVERVIEW </b></header><br><br>
   <ul>
     <li> <a href="#Introduction" class="nav-link"> Introduction </a></li>
  <li> <a href="#Etiology" class="nav-link"> Etiology </a> </li>   
  <li> <a href="#Risk_factors" class="nav-link"> Risk factors </a></li>
  <li> <a href="#Pathophysiology" class="nav-link"> Pathophysiology </a></li>
  <li> <a href="#Epidemiology" class="nav-link"> Epidemiology </a></li>
 <li>  <a href="#Presentation" class="nav-link"> Presentation </a></li>
 <li>  <a href="#Diagnosis" class="nav-link"> Diagnosis </a></li>
  <li> <a href="#Treatment" class="nav-link"> Treatment </a></li>
  <li> <a href="#Prevention" class="nav-link"> Prevention </a></li>
 <li>  <a href="#Reference" class="nav-link"> Reference </a></li>
   </ul>
</nav> 
  
  
 
  
<main id="main-doc">

   <section class="main-section" id="Introduction">
     <header><b>Introduction</b></header>
    <p>
      <code>"Coronary Artery Atherosclerosis also know as Coronary artery disease (CAD)! A killer disease"</code>
    </p>
    <p>
      Coronary artery atherosclerosis (CAD) is a condition which affects the arteries that supply the heart with blood. It is usually caused by atherosclerosis which is a buildup of plaque inside the artery walls. This buildup causes the inside of the arteries to become narrower and slows down the flow of blood.</p>
    <p>Atherosclerotic coronary heart disease is the single leading cause of death of men and women around the world. Atherosclerosis is the principal cause of coronary artery disease (CAD), in which atherosclerotic changes are present within the walls of the coronary arteries. See the image below.</p>
     <img src="https://www.ottawaheart.ca/sites/default/files/legacy/files/4.2.4-Healthy-and-Plaque-Arteries.jpg" alt="differences between healthy heart and coronary artery with plaque buildup.">
          
  <br><br>
</section>
  
   <section class="main-section" id="Etiology">
     <header><b>Etiology</b></header><br>
     <code>"Coronary artery disease is caused by a combination of genetic and lifestyle factors"</code>
     <p>A complex and incompletely understood interaction is observed between the critical cellular elements of the atherosclerotic lesion. These cellular elements include endothelial cells, smooth muscle cells, platelets, and leukocytes. Interrelated biologic processes that contribute to atherogenesis and the clinical manifestations of atherosclerosis.<p/>
       <ul>
         <li>Endothelial injury as the mechanism of atherosclerosis</li>
         <li>Role of low-density lipoprotein-oxidative stress</li>
     </ul>       
  <br><br>
     </section>
  
  <section class="main-section" id="Risk_factors">
    <header><b>Risk factors</b></header>
    <code>These are called risk factors. The following risk factors are important to be aware of, but are not considered to be controllable:</code>
    <ul>
      <li>Age: As you get older, your risk of heart disease increases</li>
      <li>Gender: <br>
Men: Men over the age of 55 are at higher risk of heart disease<br>
Women: After menopause, a woman’s risk of heart disease gradually increases until it becomes the same as a man’s</li>
      <li>Heredity: Your risk of heart disease is increased if close family members—a parent, brother or sister developed heart disease before age 55 or, in the case of female relatives, before menopause.</li>
      <li>Ethnicity: First nations people and people of African or Asian descent are at higher risk of developing heart disease than other groups.</li></ul><br>
      <p>The risk factors that you can control are:</p>
      <ul>
        <li>Smoking</li>
        <li>Excess body weight, especially around your waist</li>
        <li>High blood pressure (hypertension)</li>
        <li>Diabetes, Abnormal blood cholesterol level</li>
        <li>Excessive stress levels and Depression</li>
    </ul>
  <br><br> 
    </section>
  
   <section class="main-section" id="Pathophysiology">
     <header><b>Pathophysiology</b></header>
     <p>Initially thought to be a chronic, slowly progressive, degenerative disease, atherosclerosis is a disorder with periods of activity and quiescence. Although a systemic disease, atherosclerosis manifests in a focal manner and affects different organ systems in different patients for reasons that remain unclear.

Pooled whole-exome sequencing (WES) appears to have potential for providing insights into the pathogenesis of coronary artery atherosclerosis (CAD). In a study that used this technology on 17 Israeli patients with multiple cardiovascular risk factors but normal coronary arteries and 17 control subjects with multivessel CAD, investigators found 19 genetic variants that may provide protection from CAD, but whose mechanism remains unclear.</p>
  <br><br>
  </section>
   <section class="main-section" id="Epidemiology">
     <header><b>Epidemiology<b></header>
     <p>The true frequency of atherosclerosis is difficult, if not impossible, to accurately determine because it is a predominantly asymptomatic condition. The process of atherosclerosis begins in childhood with the development of fatty streaks. These lesions can be found in the aorta shortly after birth and appear in increasing numbers in those aged 8-18 years. More advanced lesions begin to develop when individuals are aged approximately 25 years. Subsequently, an increasing prevalence of the advanced complicated lesions of atherosclerosis is noted, and the organ-specific clinical manifestations of the disease increase with age through the fifth and sixth decades of life.</p>
  <br><br>
  </section>
   <section class="main-section" id="Presentation">
     <header><b>Presentation<b></header>
     <p>The symptoms of atherosclerosis vary widely. Patients with mild atherosclerosis may present with clinically important symptoms and signs of disease and MI, or sudden cardiac death may be the first symptom of coronary heart disease. However, many patients with anatomically advanced disease may have no symptoms and experience no functional impairment.

The spectrum of presentation includes symptoms and signs consistent with the following conditions:
     </p>
     <ul>
       <li>Asymptomatic state (subclinical phase)</li>

       <li>Stable angina pectoris</li>

      <li> Unstable angina (ie, ACS)</li>

       <li>Chronic ischemic cardiomyopathy</li>

       <li>Congestive heart failure</li>

       <li>Sudden cardiac arrest</li>
     </ul>
     <code>History may include the following:</code><br>
<p>
Chest pain,
Shortness of breath,
Weakness, tiredness, reduced exertional capacity
Dizziness, palpitations,
Leg swelling,
Weight gain and
  Symptoms related to risk factors</p>
  <br><br>
  </section>
   <section class="main-section" id="Diagnosis">
     <header><b>Diagnosis</b></header>
     <code>Tests commonly used to diagnose CAD include:
     </code>
     <p>Electrocardiogram: to identify problems with heart rhythm or signs of a heart attack<br>
Treadmill testing: to measure how well the heart functions when challenged to work harder than normal (during exercise)<br>
Nuclear perfusion imaging: to identify areas of the heart that are receiving less blood<br>
Echocardiogram: to determine the volume of blood pumped by the heart. This test may be done during exercise or after the administration of medication to stimulate the heart<br>
CT coronary angiography: to identify blockages in the arteries in the heart<br>
       Cardiac catheterization: to identify blocked or restricted arteries.</p>
  <br><br>
  </section>
  <section class="main-section" id="Treatment">
    <header><b>Treatment</b></header>
    <p>Treatments for CAD usually include lifestyle changes and medications, sometimes in combination with cardiac procedures or surgery. The best treatment combination will be determined based on your individual circumstances.</p>

<p>Medications
There are many medications that can help coronary artery disease. Your doctor will likely prescribe a combination of medications which will work to:

Lower the workload of your heart
Help relax the blood vessels
Lower cholesterol
Help prevent blood clots from forming
Lower the overall risk of you having a heart attack
  You will be taking these medications for the rest of your life.</p>

<p>Cardiac Procedures: Sometimes an angiogram is needed to show the blockages and determine whether medications are sufficient for treatment or whether an angioplasty (the use of a balloon to open the blockage) and stent (a wire mesh tube to keep the artery open) are required. Sometimes coronary artery bypass surgery is necessary to attach new arteries or veins to go around the blockages.</p>

<p>Lifestyle Changes
To manage CAD, it is important to:

Quit smoking because cigarette smoking narrows the blood vessels. Smoking-cessation aids are available to patients who find it difficult to quit on their own.
Get your cholesterol checked and get high cholesterol under control.
Eat a healthy diet low in saturated fat, cholesterol, and salt.
Exercise regularly.
Maintain a healthy weight. Losing weight if you are overweight, reduces the burden excess weight places on the heart. Regular exercise can help control weight and reduce other risk factors for CAD, such as high blood pressure.</p>
    <br><br>
  </section>
  <section class="main-section" id="Prevention">
    <header><b>Prevention</b></header>
    <code>2020 ACC Guidelines on CV Disease Risk Reduction in T2D</code>
    <p>In July 2020, the American College of Cardiology (ACC) published clinical recommendations regarding cardiovascular disease risk reduction using sodium-glucose cotransporter 2 (SGLT2) inhibitors and glucagon-like peptide 1 receptor agonists (GLP-1RAs) in patients with type 2 diabetes.</p>
    <p>Among the nonpharmacologic interventions recommended for adults with elevated blood pressure (BP) or hypertension, including patients who need antihypertensive agents, are the following:

Weight loss

A heart-healthy dietary pattern

Sodium reduction

Dietary potassium supplementation

Increased physical activity with a structured exercise program

Limited alcohol

Primary prevention of cardiovascular disease (CVD) with BP-lowering medications is recommended for adults with an estimated 10-year ASCVD risk of at least 10% and an average systolic BP (SBP) of 130 mm Hg or higher or an average diastolic BP (DBP) of at least 80 mm Hg.

A BP target of below 130/80 mm Hg is recommended for adults with confirmed hypertension and a 10-year ASCVD event risk of at least 10%.

Treatment to a BP goal of below 130/80 mm Hg is recommended for adults with hypertension and chronic kidney disease.
      </p>
  <br><br>
  </section>
  <section class="main-section" id="Reference">
    <header><b>Reference</b></header>
    <p>All information in this page is taken from</p>

 <a href="https://www.ottawaheart.ca/heart-condition/coronary-artery-disease-atherosclerosis" target="_blank">University of Ottawa Heart Institute</a><br><br>
    <a href="https://emedicine.medscape.com/article/153647-overview" target="_blank">medscape</a>
  
  </section>
  </body>
</main>
</html>
              
            
!

CSS

              
                #logo{
  width:30%;
}
#logo2{
  width:30%;
 position:relative;
  left:650px;
}
#logos{
  background-color:black;
  opacity:0.6;
}

#navbar header{
   text-align: center;
  font-size: 1.8em;
}
#navbar{
  position: fixed;
padding:80px 0px;
   z-index: 3;
  top: 0px;
  left: 0px;
  height: 100%;
  min-width: 300px;
  width: 300px;
  background-color: #6497b1;
   
   
}

.nav-link{
  color:black;
  margin:30px;
   text-decoration: none;
 
}
.nav-link:hover{
   color: white;
   
}

#main-doc {
  position: absolute;
  
  top: 30vw;
  margin-left: 310px;
  
  padding: 20px;
}
#logos{
 
  position: absolute;
  margin-left: 310px;
  
  padding: 20px;
}

@media only screen and (max-width: 800px) 
  
 
 
              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console