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

              
                #back
  %div
  %div
  %div
  %div
  %div
#logo 
  %span The super fast color schemes generator!
  %a{:href=>"http://coolors.co", :target=>"_blank"} Go to coolors.co!
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Varela+Round);
html, body {
  height: 100%;
  margin: 0;
}
body {
  font-family: 'Varela Round', sans-serif;
  animation: palettes 2s steps(5, end) infinite;
}

#back div {
  width: 20%;
  height: 100%;
  position: absolute;
  animation-play-state: running!important;
}
#back div:nth-child(1) {
  background: #F7F3CF;
  left: 0;
  animation: back1 2s linear infinite;
}
#back div:nth-child(2) {
  background: #C2E4CB;
  left: 20%;
  animation: back2 2s linear infinite;
}
#back div:nth-child(3) {
  background: #36CECC;
  left: 40%;
  animation: back3 2s linear infinite;
}
#back div:nth-child(4) {
  background: #27B1BF;
  left: 60%;
  animation: back4 2s linear infinite;
}
#back div:nth-child(5) {
  background: #176585;
  left: 80%;
  animation: back5 2s linear infinite;
}

#logo {
  height: 240px;
  width: 100%;
  background: #fff url(data:image/png;base64,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) no-repeat center 40px;
  background-size: 300px;
  position: absolute;
  top: 50%;
  margin-top: -120px;
  text-align: center;
}

@keyframes back1 {
  0% { background: #3E2C53;}
  25% { background: #adc89d;}
  50% { background: #AC2B61;}
  75% { background: #F3E3B4;}
  100% { background: #3E2C53;}
}
@keyframes back2 {
  0% { background: #3F577A;}
  25% { background: #eed6a9;}
  50% { background: #E33D5F;}
  75% { background: #BADCC8;}
  100% { background: #3F577A;}
}
@keyframes back3 {
  0% { background: #4C8FA2;}
  25% { background: #f6b495;}
  50% { background: #EF7C5E;}
  75% { background: #7FC7BF;}
  100% { background: #4C8FA2;}
}
@keyframes back4 {
  0% { background: #7BB594;}
  25% { background: #e07988;}
  50% { background: #F9C65F;}
  75% { background: #EE7B73;}
  100% { background: #7BB594;}
}
@keyframes back5 {
  0% { background: #DBD17F;}
  25% { background: #d34970;}
  50% { background: #F5EF9E;}
  75% { background: #D4385F;}
  100% { background: #DBD17F;}
}


span {
  width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 107px;
font-size: 15px;
text-transform: uppercase;
color: #A7AAAE;
}

a {
  text-decoration: none;
  font-size: 17px;
  color: #A7AAAE;
  position: absolute;
  left: 50%;
  bottom: 40px;
  border: 1px solid #A7AAAE;
  padding: 10px 20px;
  border-radius: 50px;
  margin-left: -111px;
  transition: all .1s ease-in-out;
  text-transform: uppercase;
}
a:hover {
	background: #A7AAAE;
	color: #fff;
}
              
            
!

JS

              
                
              
            
!
999px

Console