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

              
                <div style="position: fixed; z-index: -99; width: 100%; height: 100%">
  <!-- 
    Replace the <iframe> below with any video
    you like from YouTube
  -->
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/C_fEIVwjrew?autoplay=1" frameborder="0" allowfullscreen></iframe>
  <!--  Replace until above line -->
</div>
<div class="container">
  <div class="card">
    <span style="color:yellow;">Happy Papa's Day</span>
    <div class="ribbon" style="color:yellow;">I LOVE YOU!</div>
    <div class="picture">
      <img src="https://s3-ap-southeast-1.amazonaws.com/next-academy-site-dev/uploads/wellspring/image/file/22/4.0_Khairy_Jibreil_Ali.jpg" id="father">
    </div>
    <div class="text-box">
      Papa, I hope you enjoy Father's Day. I love you so muchI hope you like your present.
    </div>
  </div>
</div>
              
            
!

CSS

              
                $card-width = 300px
$card-height = 450px
$fancy-text-size = 24px
$ribbon-text-size = 24px
$message-text-size = 16px

$primary-color = black
$secondary-color = blue

/*
Color Options:
aqua         black
blue         fuchsia
gray         orange
violet       lavender
green        lime
maroon       navy
olive        purple
red          silver
teal         white
yellow
*/


/*******************************************
Please don't change anything below this line
*******************************************/


@import url(https://fonts.googleapis.com/css?family=Lobster)
@import url(https://fonts.googleapis.com/css?family=Raleway)	

lobster = 'Lobster', cursive
raleway = 'Raleway', sans-serif

html
  font-size 12px

body
	width 100%
	height 100%
	background #d4d4d4
	overflow hidden

.container
	position absolute
	top 50%
	left 50%
	transform translate(-50%,-50%)
.card
	width $card-width
	height $card-height
	background $primary-color
	position relative
	box-shadow -5px -5px 10px rgba(0,0,0,0.3)
	&:before
		content ''
		width $card-width
		height $card-height
		position absolute
		top -50%
		left -50%
		transform translate(35%, 42%)
		background $secondary-color
		z-index -1
	& span
		width 100%
		position absolute
		top 50%
		text-align center
		font-size $fancy-text-size
		font-family lobster
		margin-top 3%
	& .ribbon
		width 60%
		height 40px
		background $secondary-color
		font-size $ribbon-text-size
		font-family raleway
		text-align center
		text-transform uppercase
		line-height @height
		position absolute
		top 62%
		left 50%
		transform translateX(-50%)
		&:before, &:after
			content ''
			display block
			width 5px
			position absolute
			top 10%
			border 20px solid darken($secondary-color,10)
			z-index -1
		&:before
			right 90%
			border-left-width 20px
			border-left-color transparent
		&:after
			left 90%
			border-right-width 20px
			border-right-color transparent
			

.picture
	width ($card-width - 100px)
	height @width
	position absolute
	top 20px
	left 50%
	transform translateX(-50%)
	background $secondary-color
	border 3px dashed darken($secondary-color,40)
	border-radius 50%
	overflow hidden
#father
	width 100%
	
.text-box
	width 80%
	height 80px
	position absolute
	bottom 5%
	left 50%
	transform translateX(-50%)
	background #e8e7d3
	border 2px dashed #132317
	border-radius 10px
	text-align center
	font-family raleway
	font-size $message-text-size
	&:after
		width 100%
		position absolute
		top 50%
		left 50%
		transform translate(-50%,-50%)
/* Original pen by Paolo */
              
            
!

JS

              
                
              
            
!
999px

Console