cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              .container
  .star1 *
  .star2 *
  .star3 *
  .star4 *
  .spaceship
    .window
      .ear-left
      .ear-right
      .belka
        .doghead
          .eye-left
          .eye-right
          .nose
          .mouth-left
          .mouth-right
            
          
!
            
              @import 'nib'
belka-color = white
text1-color = #DE9449
text2-color = #FC444C
star-color = #DE9449
ship-color = #FC444C
html
  background-color text1-color
.container
  relative top left 
  margin 10px auto
  width 400px
  height @width
  background-color black
  &::before
    content "BELKД"
    absolute top 3% left
    width 100%
    color text1-color
    text-align center
    font-family 'Stalinist One', cursive
    font-size 55px
  &::after
    content "CCCP HERO"
    absolute bottom 3% left
    width 100%
    color text2-color
    text-align center
    font-family 'Stalinist One', cursive
    font-size 32px
.spaceship
  absolute top 20% left 20%
  overflow hidden
  width 60%
  height @width
  border-radius 50%
  background-color ship-color
  border 6px solid darken(ship-color,50%)
  box-sizing border-box
  transform rotate(30deg)
  &::before
    content ""
    absolute top 25% left -20%
    width 55%
    height @width
    border-radius 50%
    background-color black
    box-sizing border-box
    border 5px solid darken(ship-color,50%)
.window
  absolute top 25% left 40%
  overflow hidden
  width 55%
  height @width
  border-radius 50%
  background-color black
  box-sizing border-box
  border 6px solid darken(#FC444C,50%)
.belka
  absolute top 20% left 20% 
  width 60%
  height 80%
  background-color belka-color
  border-radius 50% 50% 0 0 / 33.3% 33.3% 0 0
.ear-left
  absolute top 23% left  
  width 55%
  height 30%
  background-color darken(belka-color,75%)
  border-radius 50%
  transform rotate(-45deg)
.ear-right
  absolute top 23% right 
  width 55%
  height 30%
  background-color darken(belka-color,75%)
  border-radius 50%
  transform rotate(45deg)
.eye-left
  absolute top 20% left 30%
  width 8px
  height @width
  background-color black
  border-radius 50%
.eye-right
  absolute top 20% right 30%
  width 8px
  height @width
  background-color black
  border-radius 50%
.nose
  absolute top 32% left 35% 
  width 30%
  height 15%
  background-color black
  border-radius 50%
  &::before
    content ""
    absolute bottom -5% left 16%
    overflow hidden
    width 5px
    height @width
    background-color belka-color
    border-radius 50% 50% 0
  &::after
    content ""
    absolute bottom -5% right 16%
    overflow hidden
    width 5px
    height @width
    background-color belka-color
    border-radius 50% 50% 50% 0
.mouth-left
  absolute top 35% left 17%
  width 30%
  height 20%
  border-radius 50%
  border-bottom 2px solid
  border-right 2px solid
.mouth-right
  absolute top 35% right 17%
  width 30%
  height 20%
  border-radius 50%
  border-bottom 2px solid
  border-left 2px solid
.star1,.star2,.star3,.star4
  font-family 'Love Ya Like A Sister', serif
  color star-color
  font-size 70px
.star1
  absolute top 22% left 3%
.star2
  absolute top 18% right 5%
.star3
  absolute bottom 20% right 10%
.star4
  absolute bottom 10% left 13%
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console