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

              
                <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
  </style>
</head>

<body>  
<div id="main">
    <div class="first-container"> 
      <header>
        <h1 id="title">King <br> of Birds</h1>
      </header>     
        <div id="img-div">
          <p id="img-caption">The Philippine Eagle, the rarest and the largest eagle in the entire planet is critically-endangered.</p><br>
          <img src=" https://rcminerva2394.github.io/tribute-page/feature-pic1.jpg" alt="The Philippine Eagle close-up shot" id="image">
        </div>
    </div>
   
<!--the second row-->  
<div id="tribute-info">
  <div class="second-container">
    <p> The Philippine Eagle is arguably the largest eagle in the world. It is only found in the Philippines, and is declared as the country's national bird. In Tagalog, it is called "Haribon" which translates to "King of Birds". </p><br>
    <p> The Philippine Eagle has a big cultural and symbolic importance to the Philippines. It plays a crucial role in their environment by keeping the balance of the ecosystem. Conserving them and their habitats will automatically provide an umbrella protection to all other lifeforms in its territory. </p>
    </div>

         
<!--The 3rd row-->
<div class="third-container">
  <h2> Mind-blowing facts about the Philippine Eagle </h2><br><br>
  <div class="facts-content">
    <div>
    <h3>Largest in the world</h3>
      <p>It is the largest eagle in the whole planet in terms of wingspan- that is about 7 feet or 2 meters! The males weigh up to 4.8kg, while females can weigh up to 6.8kg.</p> <br>
   </div> 
  <div> 
    <h3 class>Together Forever</h3>
      <p>Once paired, the Philippine Eagle couple remains together for the rest of their lives. It also lays a single egg every two years.</p><br>
  </div>
  <div>
    <h3 class>Eagle Eye</h3>
      <p>The national bird can spot its prey that's 1.24 miles away. It has the ability to see eight times clearer and farther than human eyes. Also, it is the only eagle with blue-grey eyes.</p>
  </div>
   </div>
  <div>
  <img src="https://rcminerva2394.github.io/tribute-page/fly-eagle.png" alt="The eagle with open wings" class="one">
  </div>
  </div>
  
    
<!--4th row-->    
<div class="fourth-container" id="three">
   <h2> The Philippine Eagle by the Numbers</h2><br><br>
   <div class="numbers" id="counter">
   <div> 
      <h4>60</h4>
      <h5>years</h5>
      <p>Due to deforestation and shootings, they tend to live less than 40 years.</p>
     </div><br><br>
    <div>
      <h4>10,000</h4>
      <h5>hectares</h5>
      <p>They need 10,000 hectares or 10,000 football fields to spread their wings and raise a chick.</p>
    </div><br><br>
    <div>
      <h4>400</h4>
      <h5>pairs</h5>
      <p>Only 400 pairs of Philippine Eagles are left in the wild.</p>
    </div>
    </div>
  </div>  
</div><!--tribute-info-->
  
    
<!--5th row-->
<div class="fifth-container">
  <div>
      <blockquote cite="https://www.allaboutbirds.org/news/in-the-aerie-of-the-philippine-eagle/">
      <p>"When a Philippine Eagle looks right in your eye and makes eye contact it’s breathtaking. The crest flares up, those light eyes, those beautiful bluish eyes stare right at your eyes and that contact is riveting, powerful. They’re magnificent, they’re splendid, you know. It’s truly, truly a unique creature."</p>
       <cite>-- Neil Rettig, an internationally renowned wildlife filmmaker</cite>
      </blockquote><br>
      <p class="support"> Learn more and support the conservation efforts of the <a href="https://www.philippineeaglefoundation.org/philippine-eagle" target="_blank" id="tribute-link" >Philippine Eagle Foundation.</a></p><br>
  </div>
  <div>
    <img src="https://rcminerva2394.github.io/tribute-page/eagle-look.png" alt="The eagle is staring at you">
  </div>
</div>

<!--6th row-->
<div class="sources">
  <p>Sources:</p>
    <ul style= "list-style:none;">
      <li><a href="https://www.tripzilla.com/philippine-eagle-fun-facts/121517" target="_blank">Here Are 12 Things You Should Know About the Philippine Eagle!</a></li>
      <li><a href="https://www.peregrinefund.org/explore-raptors-species/eagles/philippine-eagle" target="_blank">The Peregrine Fund</a></li>
    </ul>
</div>
  
    
<!--footer row-->
<footer>
  <p>Designed and developed by RC Minerva</p>
</footer>
  </div>
</body>
              
            
!

CSS

              
                :root {
  --black: #000000;
  --dark-gold: #B88746;
  --white: #FFFFFF;
  --dark-green: #4F6C54;
  --light-grey: #E7E7E4;
  --light-gold: #C79859;
  --light-pink: #FEF9F3;
  --light-green: #819F87;
  --grey: #E7E7E4;
  --dark-green1: #345039;
 }
 
 * {
   margin: 0px;
 }
 
 body {
   text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
   text-rendering: optimizeLegibility !important;
 }
 

 /*CONTAINERS*/
 
 .first-container {
   background-color: #000000;
   padding-left: clamp(1.5rem, 7vw, 7rem);
   padding-right: clamp(1.5rem, 7vw, 7rem);
   padding-bottom: clamp(1.5rem, 7vw, 7rem);
   padding-top: clamp(3.5rem, 7vw, 7rem);
 }
 
 .second-container {
   font-family: 'Open Sans';
   color: white;
   background-color: var(--dark-green);
   padding-left: clamp(1.5rem, 7vw, 7rem);
   padding-right: clamp(1.5rem, 7vw, 7rem);
   padding-top: clamp(1.5rem, 7vw, 3rem);
   padding-bottom: clamp(1.5rem, 7vw, 3rem);
   line-height: 2rem;
   margin-top: clamp(-2.5rem, 30vw, -4rem);
   position: relative;
   z-index: 0;
 }
 
 .third-container {
   background-color: var(--light-grey);
   position: relative;
   padding-left: clamp(1.5rem, 7vw, 7rem);
   padding-right: clamp(1.5rem, 7vw, 7rem);
   padding-top: clamp(1.5rem, 7vw, 3rem);
   padding-bottom: clamp(1.5rem, 7vw, 3rem);
   height: auto;
   
 }
 
 .fourth-container {
   font-family: 'Open Sans';
   padding: clamp(2rem, 7vw, 7rem);
   text-align:  center;
   background-color: var(--light-pink);
   display: flex;
   flex-direction: column;
   align-items: space-between;
   justify-content: center;
   margin-top: clamp(-4.15rem, 70vw, -7rem);
   position: relative;
 }
 
 .fifth-container {
   background-color: var(--light-green);
   color: white;
   padding-left: clamp(1.5rem, 7vw, 7rem);
   padding-right: clamp(1.5rem, 7vw, 7rem);
   padding-top: clamp(1.5rem, 7vw, 3rem);
   padding-bottom: clamp(1.5rem, 7vw, 3rem);
 }

 .sources {
  background-color: var(--light-grey);
  padding: 1rem 1rem; 
  margin-top: clamp(-2.5rem, 30vw, -4rem);
  position: relative;
  padding-left: clamp(1.5rem, 7vw, 3rem);
  padding-right: clamp(1.5rem, 7vw, 3rem);

 }
 footer {
   font-family: 'Bebas Neue';
   color: var(--dark-gold);
   text-align: center;
   background-color: var(--black);
   padding: 1rem 1rem;
 }


 /*IMAGES*/
 
 #image {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  
 }
 
 .third-container img {
  width: clamp(330px, 70vw, 80%);
  padding-top: 3rem; 
  justify-content: flex-start;
  margin-left: clamp(-3rem, 50vw, -7rem);
 }
 
 .fifth-container img {
   width: clamp(300px, 70vw, 80%);
   padding-top: 2rem;
   display: flex;
   justify-content: center;
 }
 

 
 
/*TEXT STYLES*/
 
#title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: lighter;
  font-size: clamp(9.75rem, 30vw, 12rem);
  line-height: 0.85;
  color: var(--dark-gold);
  
 }

#img-caption { 
  font-family: 'Open Sans';
  color: var(--white);  
  font-size: clamp(1rem, 20vw, 1.15rem);

 }
 
.third-container h2 {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--dark-gold);
  text-align: center;
 }
 
.facts-content {
  font-family: 'Open Sans';
  display: flex;
  flex-direction: column;
  align-items: space-between;
  line-height: 2rem;
 }
 
.third-container h3 {
   color: var(--dark-gold);
   font-family: 'Open Sans';
   
 }

.fourth-container h2 {
   font-family: 'Bebas Neue';
   color: var(--dark-green);
   font-family: 'Bebas Neue';
   font-weight: 200;
   margin-bottom: 1rem;
   
 }

.fourth-container h4 {
   font-family: 'Bebas Neue';
   color: var(--light-gold);
   font-size: clamp(3rem, 20vw, 4rem);
   font-weight: 100;
   line-height: 2.25rem;
 }

.fourth-container h5 {
  font-family: 'Bebas Neue';
  font-size: clamp(1.5rem, 10vw, 2rem);
  font-weight: 100;
  color: var(--light-gold);
  line-height: 3rem;
 }

.fourth-container p{
   color: var(--dark-green);
   padding-left: clamp( 1rem, 10vw, 3rem); 
   padding-right: clamp( 1rem, 10vw, 3rem);
   
 }
 
blockquote p {
   font-family: 'Open Sans';
   position: relative;
   font-style: italic;
   font-weight: ligther !important;
   line-height: 1.75rem;
 }

cite {
   font-family: 'Open Sans';
 }

.support {
   font-family: 'Bebas Neue';
   text-align: center;
   text-shadow: 0px 2px gray;
   font-size: 1.25rem;
 }

.sources p {
   font-family: 'Bebas Neue';
   color: var(--dark-gold);
 }

:is(.sources li) a {
  color: var(--dark-green);
  text-decoration: none;
  font-family: 'Open Sans';
   font-weight: lighter !important;
 
 }

:is(.support, .sources li ) a:hover {
 text-decoration: underline;
}




 /*media queries*/
 
@media (min-width: 350px) and (max-width: 549px) {

  #image {
  width: clamp(320px, 100vw, 60%);
  }
  
  .third-container img {
  width: clamp(370px, 70vw, 80%);
  }
 
  .fifth-container img {
    width: clamp(340px, 80vw, 100%);
    margin-left: -0.5rem;
  }

}
 
@media (min-width: 550px) and (max-width: 990px) {

  .fourth-container p{
   padding-left: clamp(4rem, 25vw, 15rem);
   padding-right: clamp(4rem, 25vw, 15rem);
  }

  .second-container {
   margin-top: clamp(-4.35rem, 100vw, -7rem);
  }

  #image {
   width: clamp(450px, 50vw, 75%);
  }

 .third-container {
  padding-left: clamp(4rem, 50vw, 6.5rem);
  padding-right: clamp(4rem, 50vw, 6.5rem);
  }

  .fourth-container {
    margin-top: clamp(-6.25rem, 70vw, -9rem);
  
    }
 .third-container img {
  width: clamp(550px, 70vw, 80%);
  margin-left: clamp(-8rem, 50vw, -10rem);
  }


 .fifth-container img {
  width: clamp(370px, 80vw, 100%);
    
  }
  .sources {
    margin-top: clamp(-3.25rem, 30vw, -4rem);
  }

  .sources p{
    font-size: 1.15rem;
  }

  .footer p {
    font-size: 1.15rem;
  }
}



@media (min-width: 991px) {


  .first-container {
    position: relative;
  }

  .first-container h1 {
    position: absolute;
    z-index: 2;
  }

  .first-container img {
    width: 65%;
    position: relative;
    z-index: 0;
    margin-top: 4rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .first-container p{
    position: absolute;
    z-index: 1;
    margin-top: 20rem;
    width: clamp(35%, 40vw, 45%);
  }

  #img-caption {
    width: clamp(25%, 7vw, 100%) ;
  }
  
  
  .second-container {
    margin-top: clamp(-6.90rem, 50vw, -9rem);
    line-height: 2.30rem;
  }
  
  .third-container {
    padding-left: clamp(5rem, 50vw, 15rem);
    padding-right: clamp(5rem, 50vw, 15rem);
    line-height: 2.5rem;
  }

  .third-container img {
    margin-left: clamp(-15rem, 50vw, -20rem);
    width:  clamp(750px, 70vw, 70%);
  }
  

  .third-container h2 {
    font-size: clamp(1.75rem, 80vw, 2rem);
  }
  .third-container h3 {
    font-size: clamp(1rem, 20vw, 1.25rem);
    
  }
 
   .fourth-container {
    margin-top: clamp(-8rem, 100vw, -9.5rem);
    padding-top: 2.5rem;
  }
  
  .fourth-container p {
    font-size: 1.15rem;
    line-height: 1.75rem;
    
  }

  .fourth-container h4 {
    font-size: 4.5rem;
    line-height: 3rem;
 
  }

  .fourth-container h2 {
    padding-left: 10rem;
    padding-right: 6rem;
    font-size: 2rem;
   }
    
  .numbers {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    position: relative;
    padding-top: 3rem;
   }
 
  .fifth-container {
    display: flex !important;
    flex-direction: row;
    position: relative;
    font-size: 1.15rem;
  }
  
  .fifth-container img {
    width: clamp(440px, 100vw, 100%);
    justify-content: flex-end;
    margin-top: max(3rem, 1rem);
    
  }
  .sources {
    margin-top: clamp(-3.25rem, 30vw, -4rem);
    line-height: 1.5rem;

  }

  .sources p {
    font-size: 1.25rem;
    line-height: 1.30rem;
  }

  footer p {
    font-size: 1.15rem;
    line-height: 1.25rem;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console