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

              
                <!-- 

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>

<title id="tribute-info">
  A quick tribute project for freeCodeCamp. This page is a tribute to my two rescue dogs. Lily &amp; Sasou.
</title>

<body>

  <header>
    <div id="title">
      <h1> Lily &amp; Sasou </h1>
    </div>
  </header>

  <main id="main">
    <figure id="img-div">
      <img id="image" src="https://res.cloudinary.com/ddhjyvctt/image/upload/v1626539192/SasouLily.jpg" alt="An image showing Lily & Sasou">
      <figcaption id="img-caption"><i>- Image showing Lily & Sasou - </i></figcaption>
    </figure>
    <h2>.:: <u>Lily & Sasou</u></h2>

    <article>

      <h6>Intro to Lily and Sasou</h6>

      <p> Lily & Sasou are rescue dogs from Romania. Rescued by Chris and Steph early February 2020. They arrived in very poor condition and with slightly different histories. They were both supposed to be ages at around 18months when they arrived. However documentation supported by passports suggested they were quite a lot younger.</p>
      <p>They we're both very skinny and very timmid. <b>This has changed.</b></p>

    </article>
    <h2> .:: <u>Lily</u></h2>
    <article>

      <h6>More about Lily</h6>

      <ul>
        <li>All we know about Lily, pre-adoption, is that she was discovered abandoned at a bus stop as a pup.</li>
        <li> No one can really identify a dominant breed present with Lily. You're more likely to find reference of most breeds! She really is a unique girl!</li>
        <li> She has settled well in the UK and she is becoming more trusting of Humans.</li>
        <li>Compared to other dogs she has a heightened awareness.</li>
        <li>It's easy to tell that she was born to be a wildling!</li>
        <li>She sleeps in the strangest positions!</li>
      </ul>
      <article class="articleImages">

        <h6>Pictures of Lily</h6>

        <img class="dogImages" src="https://res.cloudinary.com/ddhjyvctt/image/upload/v1626539188/MeSasouLily.jpg" alt="Me, Lily and Sasou">

        <img class="dogImages" src="https://res.cloudinary.com/ddhjyvctt/image/upload/v1626539187/LILYSLEEP.jpg" alt="Lily sleeping">
        <img class="dogImages" src="https://res.cloudinary.com/ddhjyvctt/image/upload/v1626539186/IMG_20210703_101244_132_asgytl.jpg" alt="Lily's intense stare">
        <img class="dogImages" src="https://res.cloudinary.com/ddhjyvctt/image/upload/v1626539186/IMG_20210703_101244_100_kxkr1u.jpg" alt="Lily as a puppy">
      </article>

    </article>
    <h2>.:: <u>Sasou</u></h2>
    <article>

      <h6>More about Sasou</h6>

      <ul>
        <li>Sasou was born in custody of a romanian dog sanctuary along with many brothers and sisters.</li>
        <li>Fortunately, Sasous mother along with all of her brothers and sisters were also adopted and brought over to the UK</li>
        <li>Sasou has a lot of Labrodor in here. She looks like a little Lab!</li>
        <li>She is the most loving dog you could ever meet. </li>
        <li> She wants to be friends with everyone and everything!</li>
        <li>She has helped Lily come out of her shell a lot </li>
      </ul>
      <article class="articleImages">

        <h6>Pictures of Sasou</h6>

        <img class="dogImages" src="https://res.cloudinary.com/ddhjyvctt/image/upload/v1626539187/Sasou1.jpg" alt="Sasou">
        <img class="dogImages" src="https://res.cloudinary.com/ddhjyvctt/image/upload/v1626539186/IMG_20210715_213704_654_x8rxnj.jpg" alt="Sasou in the garden">
        <img class="dogImages" src="https://res.cloudinary.com/ddhjyvctt/image/upload/v1626540321/received_635347327212918_ezxnvv.jpg" alt="Sasou as a puppy">
        <img class="dogImages" src="https://res.cloudinary.com/ddhjyvctt/image/upload/v1626540529/received_596234021230150_y0jbrb.jpg" alt="Sasou in the grass">
      </article>
    </article>
    <article>
      <h6>Follow this link for more images</h6>
      
        <p>Follow this link for more images on <a id="tribute-link" target="_blank" href="http://www.instagram.com/chrisps220">My Instagram Page </a></p>
      
    </article>

  </main>
  <footer id="footer">
    <hr>
    <i>Quick 'Tribute' page for Code Camp curriculum by Chris Stevens</i>
  </footer>

</body>
              
            
!

CSS

              
                h6{
  display:none;
}
header {
  padding: 1px;
  text-align: center;
  background-color: lightgrey;
  color: blue;
  margin-left: 50px;
  margin-right:50px;
  margin-bottom:20px;
  border-style: solid;
  border-color: grey;
  border-width: 5px;
}
#main{
  border-style:solid;
  border-color:grey;
  border-width:5px;
  background:lightgrey;
}
p {
  margin:20px;
}
h2{
  margin-left:10px;
  font-size:20px;
}

footer{
  color:lightgrey;
}

article {
  margin: 10px;
  
  border-style:dashed;
  padding:10px;
  border-color:grey;
  
  
}
.articleImages {
  margin: 10px;
  display:flex;
  border-style:solid;
  padding:10px;
  border-color:grey;

  
  
}


.div-img {
  align-content: center;
}

#img-caption {
  display:block;
  text-align: center;
  font-size: 12px;
}
.dogImages {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-width:22%;
  border-style:solid;
  
  
}

#image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width:50%;
}
  


@media (max-width: 600px){
  .dogImages{
    display:flex;
    min-width:90%;
    
  }
  .articleImages {
  margin: auto;
  display:block;
  border-style:solid;
  padding:5px;
  border-color:grey;
    

  
  
}
}
              
            
!

JS

              
                
              
            
!
999px

Console