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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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>
    <title>Adrian Szlegel - Tribute Page</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <body>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <main id = "main">
      <h1 id = "title">Adrian Szlegel - Tribute Page</h1>
      <div id = "img-div">
        <img id = "image" src = "https://ro.com.pl/wp-content/uploads/2017/02/programowanie-i-kodowanie-768x513.jpg" alt = "Picture of code"/>
        <p class = "signature">Picture source: ro.com.pl</p>
        <p id = "img-caption">Read more about programming... <a id = "tribute-link" href = "https://en.wikipedia.org/wiki/Computer_programming" target = "_blank">Click here.</a></p>
      </div>
      <p id = "tribute-info">It's just sample tribute page.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget bibendum ex. Nulla non nulla laoreet, iaculis lacus sed, condimentum libero. Aliquam turpis purus, tristique vel auctor at, pharetra sed quam. Nullam rhoncus lacus eu felis tristique dictum. Vivamus risus lorem, porttitor vitae lectus tincidunt, mattis consectetur mauris. Curabitur vestibulum, metus vel aliquet blandit, felis eros cursus tortor, a tincidunt leo libero id odio. In vitae urna non erat consequat ultrices in vel arcu. Pellentesque pharetra orci eget luctus molestie. Vivamus diam lorem, pharetra a efficitur vitae, tincidunt vel mauris.

Quisque eget ipsum quis lorem lacinia consequat ac non justo. Nunc accumsan est et mi bibendum, in dapibus mi laoreet. Phasellus porttitor eros vitae diam gravida, sit amet vestibulum lacus dapibus. Integer ac vehicula eros, eget posuere mauris. Donec nec malesuada est. Ut vehicula, leo pellentesque congue iaculis, dui elit efficitur urna, at consequat leo sem ac urna. Aenean vel urna sagittis, maximus arcu a, sollicitudin orci. Etiam ex dui, auctor a luctus et, accumsan vitae nisi. Ut placerat, metus sed vehicula tincidunt, lectus metus vestibulum sapien, ornare ultricies nisl nibh vitae ex. Duis nec nulla elit. Maecenas eget urna tortor. Proin sed cursus mauris. Fusce non efficitur risus, quis dignissim justo. In mollis odio nisi, sit amet imperdiet nibh dapibus vitae.

In accumsan ornare sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent varius rhoncus arcu. Quisque ut eros sed lectus pellentesque vestibulum. Sed et sollicitudin tellus, eu rutrum arcu. Praesent tortor neque, rutrum non congue vel, feugiat vitae libero. Aenean malesuada, enim quis scelerisque finibus, turpis risus imperdiet nunc, ut ullamcorper nunc lacus sed est. Proin luctus nunc quis pharetra feugiat.

Vestibulum imperdiet auctor sodales. Nullam pharetra ullamcorper dapibus. Donec felis nulla, faucibus non est non, malesuada imperdiet neque. Aenean commodo ipsum libero, consectetur cursus elit fringilla eget. Nulla fermentum tristique placerat. Praesent pellentesque, nulla in fermentum venenatis, est quam imperdiet diam, in ornare quam dui sit amet massa. In hac habitasse platea dictumst. Aliquam sed lacus turpis. Phasellus mauris eros, convallis pretium porta bibendum, semper eget risus. Sed consectetur dapibus quam vitae venenatis. Nulla facilisi. Phasellus vel ante orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas in nulla mauris. Nam dui nunc, iaculis non risus sagittis, auctor posuere justo. Nunc quis ante a arcu egestas mattis ut sed quam.

Suspendisse laoreet congue blandit. Donec vel orci non risus tincidunt ullamcorper. Fusce faucibus tempor lorem, non ultricies odio sagittis vel. Nam et ex luctus, facilisis elit eget, dignissim quam. Aliquam fermentum consequat dui, sed ultricies dui facilisis id. Proin sem sapien, venenatis eu sem quis, bibendum elementum risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus eleifend turpis semper sem condimentum, nec luctus mi fermentum. Morbi commodo, nibh a blandit bibendum, sapien nunc aliquet orci, in semper elit lacus a nisl. Cras vehicula in sem ut tincidunt. Sed erat mi, dignissim in condimentum quis, semper in libero. Suspendisse lobortis fermentum eros, sit amet condimentum neque iaculis ultrices.</p>
    </main>
  </body>
</html>
              
            
!

CSS

              
                #title {
  top: 0;
  background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
  text-align: center;
  position: fixed;
  width: 100%;
  z-index: 999;
}
#image {
  width: 400px;
  margin-top: 50px;
  align: center;
  border-radius: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#image:hover {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
#img-caption {
  text-align: center;
}
#tribute-info {
  text-align: justify;
  margin: 0px 100px 0px 100px;
}
#img-div {
  width: 100%;
  height: 100%;
}
.signature {
  font-size: 10px;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  #image {
    max-width: 30%;
  }
}
@media screen and (max-width: 800px) {
  #image {
    max-width: 25%;
  }
}
@media screen and (max-width: 600px) {
  #image {
    max-width: 20%;
  }
}
@media screen and (max-width: 400px) {
  #image {
    max-width: 15%;
  }
}
@media screen and (max-width: 200px) {
  #image {
    max-width: 10%;
  }
}
@media screen and (max-width: 768px) {
  #img-div {
    margin-top: 100px;
  }
  #title {
    font-size: 30px;
  }
}
@-webkit-keyframes pulse {
  25% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  75% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}

@keyframes pulse {
  25% {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  75% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console