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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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>
    <style> h1{
  font-family:fantasy;
  }
  
  h1{
    color: pink;
  }
  h2{
    font-:sans-serif
  }
 
  h1{
    font-style: italic
      font-weight: 700;
    font-size: 100px;
    font: italic
  }
  h2{
    color: black;
      }
  
      .paragraph{
          height: 200px;
        border: 10px; 
        width: 350px;
        overflow: auto;}
        
        .silver-frame {
          border: 10px groove rgb(204, 204, 204);
        }
      .gold-frame {
         border: 10px ridge rgb(255, 183, 0);
      }
      body {
        background-image: url("https://images.thdstatic.com/productImages/5e763923-4c7e-42b7-919e-1f9a6262aa9f/svn/arthouse-wallpaper-rolls-692205-64_400.jpg");
          background-repeat: no-repeat;
        background-size: cover;
        
          
      }
      p{
        background-color: rgba(255, 255, 255, .7);
      }
      
        
          
      
      
    </style>
  </head>
  <body>
<h1 class="save the turtles"> Save The Turtles</h1>
<img class="gold-frame" src= "https://i.pinimg.com/originals/3a/60/f1/3a60f115c3a5b2be91ea471c5dfcade9.jpg" width=400px>
     <h2>Information</h2>

<p> Save the Turtles is a grassroots, all-volunteer non-profit that has been saving endangered sea turtles since 2001. Nearly all monies raised goes to direct protection of sea turtles. Your donation also goes a long way to support a sustainable community based on sea turtle conservation.</p>
<h2> Think About The Environment </h2>
<p>Think about what your doing before you do it. When you have trash, think about what will happen if you don't put it in the trash. Right! It can damage the turtles. Sharp plastics can rupture internal organs and bags can cause intestinal blockages leaving turtles unable to feed, resulting in starvation. Even if they survive, consuming plastic can make turtles unnaturally buoyant, which can stunt their growth and lead to slow reproduction rates.</p>
  <img class="silver-frame" src="https://image.shutterstock.com/image-vector/littering-behavior-infographic-correct-wrong-260nw-1834834384.jpg">
<h2> Save The Turtles </h2>
<p> You can help save the turtles by not littering your trash. sometimrs, especcially on a beach day, your trash can float in the ocean which goes deeper that causes the turtles to get damaged. Another way to help: If you see some trash on the ground try to keep it in the trash can. That's what trashcans and garbage bags were made for. Here are some things you can do to help save the turtles.
  <ol>
    <li> Reduce marine debris that may entangle or be accidentally eaten by sea turtles.</li
      
    <li> Try to use more reusable itmes than disposable so you can save money and help the environment at the same time. </li>
    
    <div>
      <p class="paragraph"> Poachers come in the cover of night to rob her eggs. Sometimes they come for her meat, killing all turtles on a beach; sometimes they take them alive on cruel journeys to be sold on the black market.

The nesting process takes hours. A sea turtle must dig a hole 2 to 5 feet deep to deposit her eggs. Afterwards, she must carefully fill and camouflage the hole – her last attempt to protect the offspring she must leave behind.

Sea Turtle Patrollers make the difference. Patrolling is a direct protection, boots-on-the-ground job.
It’s difficult—sometimes dangerous—but a highly effective conservation tool. Countless sea turtles and habitats exist today that would not without community-based patrollers. They walk the beach through the night, often in tropical downpours. When they find a nesting turtle, they sit with her, protecting her until she returns to the ocean and safeguarding her eggs thereafter. When the hatchlings emerge, patrollers protect them on their first journey to the ocean.</p></div>
    
   Learn more about saving and taking care of the turtles
   
    <a href="https://saveturtles.org/">SaveTurtles</a>
    
    
    
 
</body>

  </html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console