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

              
                <nav id="navbar">
  <header id="header">Gooseberry Greenhouse</header>
  <img id="header-img" src="url" alt="brand">
  <ul>
    <a class="nav-link" href="#The_Propagation_and_Care_of_Echinacea" rel="internal">
      <li>The Propagation and Care of Echinacea</li>
    </a>
    <a class="nav-link" href="#History" rel="internal">
      <li>History</li>
    </a>
    <a class="nav-link" href="#Propagation_and_Growth_Requirements" rel="internal">
      <li>Propagation and Growth Requirements
      </li>
    </a>
    <a class="nav-link" href="#Colors" rel="internal">
      <li>Colors</li>
    </a>
    <a class="nav-link" href="#Varieties" rel="internal">
      <li>Varieties</li>
    </a>
    <a class="nav-link" href="#Uses" rel="internal">
      <li>Uses</li>
    </a>
    <a class="nav-link" href="#Where_to_Buy" rel="internal">
      <li>Where to buy</li>
    </a>
  </ul>
</nav>

<main id="main-doc">
  <section class="main-section" id="The_Propagation_and_Care_of_Echinacea">
    <header id="Propagation_and_Care_of_Echinacea">The Propagation and Care of Echinacea</header>
    <iframe id="video" width="420" height="315" src="https://youtube.com/embed/ndXoduSMNdw"></iframe>
  </section>

  <section class="main-section" id="History">
    <header>History</header>
    <article>
      <p>Echinacea angustifolia was widely used by the North American indigenous peoples as folk medicine, with archaeological evidence dating back to the 18th century. Traditional use included external application (insect bites, burns, wounds), chewing of roots (throat and tooth infections) and internal use (cough, pain, snake bites, stomach cramps). Some Plains tribes used echinacea for cold symptoms. The Kiowa used it for coughs and sore throats, the Cheyenne for sore throats, the Pawnee for headaches, and many tribes including the Lakota used it as a pain medication. Early European settlers noticed this and began to develop their own uses. According to Wallace Sampson, its modern use for the common cold began when a Swiss herbal supplement maker was told that Echinacea was used for cold prevention by Native American tribes who lived in the area of South Dakota. The first preparation was Meyers Blood Purifier (ca. 1880), which was promoted for neuralgia, rattlesnake bites and rheumatism. By the start of the 20th century it was the most common herbal remedy in America. Commercial cultivation began in Germany in the late 1930s, and in Switzerland in 1950, by A. Vogel. Soon chemists and pharmacologists began the task of identifying potentially active ingredients and their properties. These included alyklamides, cichoric acid, echinacoside, ketoalkenes and polysaccharides. Extracts appeared to exhibit immunostimulant properties and were mainly promoted for the prevention and treatment of colds, influenza and sepsis. Despite many different preparations and hundreds of publications, no exact identification of a truly active ingredient has been identified.
      </p>
      <p> Echinacea is restricted to North America, east of the Rocky Mountains, and in the Atlantic drainage area, predominantly the Great Plains and central United States and adjacent areas of Canada. The genus range is from Alberta in the north to almost the Gulf of Mexico in Louisiana and Texas in the south, and from the Ohio oak savannas, glades of Tennessee and the Carolinas in the east, to the Rocky Mountain foothills in the west.</p>
      <p>The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the array.</p>
    </article>
  </section>

  <section class="main-section" id="Propagation_and_Growth_Requirements">
    <header>Propagation and Growth Requirements</header>
    <article>
      <strong>How to plant:</strong>
      <p>
      <ul>
        <li>Propagate by seed, cuttings, division or separation - Divide in spring or fall. Roots don't like to be disturbed.</li>
        <li>Make root cuttings in late fall or early winter.</li>
        <li>Seed is easy to germinate at 70 F. But seeds collected from plants will not breed true and will require two or more years of growth before flowering.</li>
      </ul>
      <p>The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the array.</p>
      </p>

      <strong>Maintenance and care:</strong>
      <p>
      <ul>
        <li>Deadhead to prolong flowering, prevent self seeding and focus attention on peaking flowers. If desired, leave fall blooms on the plant to form seedheads for winter interest. This will attract birds, but also results in prodigeous self-seeding.</li>
        <li>To encouraged delayed blooming for fall enjoyment, cut plants back by half in early summer or cut back by 1 foot when coming into bloom.</li>
        <li>For maximum bloom period, cut back some plants in the garden as described, and leave others to flower at their normal earlier time.</li>
        <li>Seldom needs division. Roots don't like to be disturbed.</li>
      </ul>
      <p>The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the array.</p>
      </p>
      <strong>Pests:</strong>
      <p>
      <ul>
        <li>Leaf miners</li>
        <li>Japanese beetles</li>
        <li>Vine weevils (on roots)</li>
      </ul>
      </p>
      <strong>Diseases:</strong>
      <p>
      <ul>
        <li>Powdery mildew</li>
        <li>Bacterial leaf spots</li>
        <li>Gray mold</li>
      </ul>
      </p>
      <strong>Sunlight:</strong>
      <p>
      <ul>
        <li>Full sun. Tolerates light shade, especially in areas with hot weather where shade enhances petal color.</li>
      </ul>
      </p>
      <strong>Soil conditions:</strong>
      <p>
      <ul>
        <li>Tolerates droughty soil</li>
        <li>Requires well-drained soil</li>
        <li>Tolerates low fertility</li>
        <li>Prefers deep, well-drained soil high in organic matter.</li>
      </ul>
      <p>The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the array.</p>
      </p>
      <strong>Hardiness zones:</strong>
      <p>
      <ul>
        <li>3 to 9</li>
      </ul>
      </p>
      <strong>Special locations:</strong>
      <p>
      <ul>
        <li> xeriscapes</li>
      </ul>
      </p>
      <strong>Lifecycle:</strong>
      <p>
      <ul>
        <li>perennial
        </li>
      </ul>
      </p>

      <strong>Ease-of-care:</strong>
      <p>
      <ul>
        <li> easy</li>
      </ul>
      </p>

      <strong>Height:</strong>
      <p>
      <ul>
        <li> 1.5 to 5 feet</li>
      </ul>
      </p>

      <strong>Spread:</strong>
      <p>
      <ul>
        <li>1 to 2 feet</li>
      </ul>
      </p>

      <strong>Bloom time:</strong>
      <p>
      <ul>
        <li>mid-summer</li>
        <li>late summer</li>
        <li>early fall</li>
      </ul>
      </p>

      <strong>Foliage color:</strong>
      <p>
      <ul>
        <li>dark green</li>
      </ul>
      </p>
      <strong>Foliage texture:</strong>
      <p>
      <ul>
        <li>medium</li>
      </ul>
      </p>
      <strong>Shape:</strong>
      <p>
      <ul>
        <li>upright</li>
      </ul>
      </p>
      <strong>Shape in flower:</strong>
      <p>
      <ul>
        <li>flower stalks with upright spikes</li>
        <li>flower stalks with flowers with petal radiating outward</li>
        <li>Solitary blooms borne on erect stems rising above the foliage.</li>
      </ul>

      <p>The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the array.</p>

      </p>
    </article>
  </section>

  <section class="main-section" id="Colors">
    <header>Colors</header>
    <article>
      <p>
      <ul>
        <li>violet</li>
        <li>White</li>
        <li>pink</li>
      </ul>
      </p>

    </article>
  </section>

  <section class="main-section" id="Varieties">
    <header>Varieties</header>
    <article>
      <p>
      <ul>
        <li>Avalanche (Echinacea purpurea 'Avalanche')</li>
        <li>Cheyenne Spirit (Echinacea 'Cheyenne Spirit')</li>
        <li>Double Scoop Cranberry (Echinacea x purpurea 'Balscanery')</li>
      </ul>
      </p>
    </article>
  </section>

  <section class="main-section" id="Uses">
    <header>Uses</header>
    <article>
      <p> People use echinacea to shorten the duration of the common cold and flu, and reduce symptoms, such as sore throat (pharyngitis), cough, and fever. Many herbalists also recommend echinacea to help boost the immune system and help the body fight infections.</p>
    </article>
  </section>

  <section class="main-section" id="Where_to_Buy">
    <header>Where to Buy</header>
    <ul>
      <li><a href="https:/www.swallowtailgardenseeds.com">Swallow Tail Garden Seeds</a></li>
      <li><a href="https://www.burpee.com">Burpee</a></li>
      <li><a href="https://parkseed.com">Park Seed</a></li>
      <li><a href="https://www.rareseeds.com">Rare Seeds</a></li>
      <li><a href="https://www.americanmeadows.com">American Meadows</a></li>
    </ul>
  </section>
</main>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
              
            
!

CSS

              
                html,
body {
  min-width: 290px;
  color: #4d4e53;
  background-color: #ffffff;
  line-height: 1.5;
}

header {
  font-size: 36px;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
  background: #d8bfd8;
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 20px;
}

#navbar li {
  color: black;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  height: 100%;
}

code {
  font-family: Consolas, "courier new";
  color: crimson;
  background-color: #f1f1f1;
  padding: 2px;
  font-size: 105%;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console