Skip to content

Instantly share code, notes, and snippets.

@mdsumanhalder

mdsumanhalder/christmas.markdown

Last active December 24, 2020 19:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mdsumanhalder/23a5b0f3565f253b3ba18437adfbb300 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mdsumanhalder/23a5b0f3565f253b3ba18437adfbb300 to your computer and use it in GitHub Desktop.
Download ZIP
Christmas
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>christmas wishes for Rita</title>
<link rel="stylesheet" href="code.css">
<link rel="stylesheet" href="style.scss">
</head>
<body>
<div class="wrapper">
<h2 class="holidays-title">🎅🎄Merry Christmas Rita🎄🎅 </h2>
<div class="scene">
<div class="xmas-tree">
<div class="tree-star">
</div>
<div class="tree-leaves">
<div class="tree-part">
<div class="tree-lights left">
<div class="light-bulb red"></div>
<div class="light-bulb yew"></div>
<div class="light-bulb purple"></div>
<div class="light-bulb blue"></div>
</div>
<div class="tree-lights right">
<div class="light-bulb red"></div>
<div class="light-bulb yew"></div>
<div class="light-bulb purple"></div>
<div class="light-bulb blue"></div>
</div>
</div>
<div class="tree-part">
<div class="tree-lights left">
<div class="light-bulb red"></div>
<div class="light-bulb yew"></div>
<div class="light-bulb purple"></div>
<div class="light-bulb blue"></div>
</div>
<div class="tree-lights right">
<div class="light-bulb red"></div>
<div class="light-bulb yew"></div>
<div class="light-bulb purple"></div>
<div class="light-bulb blue"></div>
</div>
</div>
<div class="tree-part">
<div class="tree-lights left">
<div class="light-bulb red"></div>
<div class="light-bulb yew"></div>
<div class="light-bulb purple"></div>
<div class="light-bulb blue"></div>
</div>
<div class="tree-lights right">
<div class="light-bulb red"></div>
<div class="light-bulb yew"></div>
<div class="light-bulb purple"></div>
<div class="light-bulb blue"></div>
</div>
</div>
</div>
<div class="tree-base">
<div class="tree-stalk"></div>
<div class="tree-jar"></div>
</div>
</div>
<div class="room-window">
<div class="xmas-sky">
<div class="snow"></div>
<div class="snow-ground"></div>
<div class="santa-claus">
<div class="sc-head">
<div class="sc-hat">
<div class="hat-tip"></div>
</div>
<div class="eyes"></div>
<div class="nose"></div>
<div class="beard"></div>
<div class="ears">
<div class="ear left"></div>
<div class="ear right"></div>
</div>
</div>
<div class="sc-body"></div>
</div>
</div>
</div>
<div class="xmas-gifts">
<div class="xmas-gift square">
<div class="tie-wrap">
<div class="tie"></div>
<div class="tie reflected"></div>
</div>
</div>
<div class="xmas-gift rectangular">
<div class="tie-wrap">
<div class="tie"></div>
<div class="tie reflected"></div>
</div>
</div>
</div>
</div>
<div class="ground"></div>
</div>
</body>
</html>
Raw
style.scss
@import url('https://fonts.googleapis.com/css?family=Mountains+of+Christmas:700');
$body-bg: #e9e0ca;
$tree-color: #49bd55;
$tree-stalk-color: #7b652d;
$tree-jar-color: #584444;
$tree-star-color: rgba(252,208,0, 1);
$light-bulb-red: rgba(222,57,57, 1);
$light-bulb-yew: rgba(105,230,34, 1);
$light-bulb-purple: rgba(156,106,255, 1);
$light-bulb-blue: rgba(14,190,255, 1);
$light-bulb-outline: 0 0 0 1px rgba(0, 0, 0, 0.14);
$window-color: #ccaa53;
$xmas-sky-color: #153d54;
// Awesome Snow CSS by @KeithClark pen <3
// https://codepen.io/keithclark/pen/yBcsr
$d: 70; // density
$w: 600; // grid size
$s: 4s; // speed
// Generate the snow image using radial gradients
$grad: ();
@for $i from 0 to $d {
$v: random(3) + 2; // size
$a: random(5) * .1 + .5;
$grad: $grad, radial-gradient(
$v+px $v+px at
(random($w - $v * 2) + $v)+px
(random($w - $v * 2) + $v)+px,
rgba(255,255,255,$a) 70%,
rgba(0,0,0,0)
) !global;
}
body, html {
height: 100%;
}
body {
background: $body-bg;
}
.holidays-title {
font-family: 'Mountains of Christmas', cursive;
font-size: 3em;
background: #fff;
padding: 20px;
border-radius: 20px;
box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, .14);
position: relative;
opacity: 0;
animation: balloon 6s ease-in-out infinite;
&::before {
position: absolute;
content: '';
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 0 solid transparent;
border-top: 40px solid #fff;
bottom: -31px;
right: 33px;
transform: rotateZ(-20deg);
}
}
.wrapper {
margin: 0;
display: flex;
height: inherit;
flex-direction: column;
align-items: center;
justify-content: center;
}
%center-element {
display: table;
margin: 0 auto;
}
%tip-triangle {
position: absolute;
content: '';
width: 0;
height: 0;
border-left: 17px solid transparent;
border-right: 0 solid transparent;
border-bottom: 40px solid yellow;
left: 21px;
top: 5px;
}
.ground {
background: rgba(0, 0, 0, 0.12);
width: calc(100vw - 20%);
height: 70px;
border-radius: 50%;
display: table;
//position: relative;
}
.scene {
max-width: calc(100vw - 30%);
min-width: 640px;
position: relative;
}
.xmas-tree {
position: relative;
top: 80px;
float: left;
}
.tree-star {
//display: flex;
//justify-content: center;
position: absolute;
top: 0;
left: 40%;
z-index: 4;
&::before {
content: '';
position: absolute;
bottom: -16px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 25px solid $tree-star-color;
box-shadow: 1px 19px 20px -7px darken($tree-color, 30%);
}
&::after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 25px solid $tree-star-color;
}
}
.tree-part {
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 100px solid $tree-color;
position: relative;
z-index: 3;
&::before {
content: '';
position: absolute;
width: 160px;
background-repeat: repeat;
height: 15px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px 15px, darken($tree-color, 5%) 12px, transparent 13px);
top: 99px;
left: -80px;
transform: rotateX(180deg);
}
&:nth-child(2) {
border-bottom-color: darken($tree-color, 15%);
transform: scale(1.4);
top: -45px;
z-index:2;
&::before {
background-image:
radial-gradient(circle at 10px 15px, darken($tree-color, 10%) 12px, transparent 13px);
}
}
&:nth-child(3) {
border-bottom-color: darken($tree-color, 20%);
transform: scale(1.8);
top: -80px;
z-index: 1;
&::before {
background-image:
radial-gradient(circle at 10px 15px, darken($tree-color, 15%) 12px, transparent 13px);
}
}
}
.tree-stalk {
@extend %center-element;
width: 25px;
height: 75px;
background: $tree-stalk-color;
box-shadow: inset 0 22px 6px -1px darken($tree-stalk-color, 20%);
position: relative;
top: -40px;
}
.tree-jar {
@extend %center-element;
width: 80px;
position: relative;
top: -40px;
left: 2px;
&::before {
content: '';
width: 96px;
height: 20px;
float: left;
background: $tree-jar-color;
box-shadow: 0 3px 2px -1px darken($tree-jar-color, 5%);
position: relative;
border-radius: 2px;
left: -3px;
}
&::after {
content: '';
border-top: 50px solid lighten($tree-jar-color, 10%);
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 50px;
float: left;
}
}
.tree-lights {
width: 120px;
height: 20px;
border-radius: 50%;
box-shadow: 0 3px 0 -1px #000;
&.left {
transform: rotateZ(-20deg);
position: relative;
left: -73px;
top: 41px;
}
&.right {
transform: rotateY(180deg)
rotateZ(-20deg);
position: relative;
left: -43px;
top: 31px;
}
}
.light-bulb {
width: 8px;
height: 3px;
background: black;
margin: 20px;
border-radius: 20% 50%;
position: absolute;
animation: 1s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
&.red {
background: $light-bulb-red;
box-shadow: $light-bulb-outline,
0 2px 6px 2px opacify($light-bulb-red, .2);
transform: rotateZ(-73deg);
top: 2px;
left: -9px;
animation-name: blink;
}
&.yew {
background: $light-bulb-yew;
box-shadow: $light-bulb-outline,
0 2px 6px 2px opacify($light-bulb-yew, .2);
transform: rotateZ(-86deg);
top: 6px;
left: 20px;
animation-name: blink2;
}
&.purple {
background: $light-bulb-purple;
box-shadow: $light-bulb-outline,
0 2px 6px 2px opacify($light-bulb-purple, .2);
transform: rotateZ(-96deg);
top: 6px;
left: 50px;
animation-name: blink3;
}
&.blue {
background: $light-bulb-blue;
box-shadow: $light-bulb-outline,
0 2px 6px 2px opacify($light-bulb-blue, .2);
transform: rotateZ(-106deg);
top: 3px;
left: 75px;
animation-name: blink4;
}
}
.room-window {
width: 340px;
height: 300px;
border: 10px solid $window-color;
box-shadow: 4px 5px 2px 0px rgba(182, 146, 54, 0.3);
float: right;
overflow: hidden;
position: relative;
&::before {
@extend %center-element;
content: '';
background: $window-color;
box-shadow: 1px 0 1px 1px darken($window-color, 15%);
width: 10px;
height: inherit;
position: absolute;
left: 48%;
z-index: 1;
}
&::after {
@extend %center-element;
content: '';
background: $window-color;
width: inherit;
height: 10px;
position: absolute;
top: 48%;
z-index: 1;
}
.xmas-sky {
background: linear-gradient(0deg, $xmas-sky-color, darken($xmas-sky-color, 15%)); ;
width: 100%;
height: 100%;
position: absolute;
}
}
.snow-ground {
width: 455px;
height: 105px;
background: linear-gradient(0deg, #fff, #ccf0fd);
border-radius: 40%;
position: absolute;
bottom: -44px;
left: -24px;
transform: rotateZ(-6deg);
}
.xmas-gifts {
position: absolute;
bottom: -41px;
left: 176px;
}
.xmas-gift {
border-radius: 4px;
&::before {
content: '';
width: 100%;
height: 10px;
background: yellow;
box-shadow: -30px 0 0 0 darken(yellow, 8%);
display: block;
position: relative;
top: 35px;
}
&::after {
content: '';
width: 10px;
height: inherit;
background: yellow;
display: block;
position: relative;
top: -10px;
margin: auto;
}
&.square {
width: 80px;
height: 80px;
background: #ff54cf;
box-shadow: -30px 0 0 0 darken(#ff54cf, 20%);
position: relative;
z-index: 1;
}
&.rectangular {
width: 60px;
height: 120px;
background: rgba(14,190,255, 1);
box-shadow: -30px 0 0 0 darken(rgba(14,190,255, 1), 15%);
position: absolute;
top: -50px;
left: 100px;
}
}
.tie-wrap {
position: absolute;
top: -20px;
left: -6px;
min-width: 82px;
.tie {
width: 40px;
height: 20px;
background: yellow;
border-radius: 50% 50% 20% 20%;
float: left;
z-index: 1;
position: relative;
&::before {
@extend .tie;
content: '';
background: darken(yellow, 10%);
transform: scale(.5)
translateX(15px)
translateY(8px);
}
&.reflected {
transform: rotateY(180deg);
&::before {
transform: scale(.5)
translateX(2px)
translateY(8px);
}
}
}
// Tie tips
&::before {
@extend %tip-triangle;
}
&::after {
@extend %tip-triangle;
transform: rotateY(180deg);
left: 54px;
}
}
.rectangular .tie-wrap {
left: -16px;
}
.santa-claus {
margin: 40px;
animation: santa-claus 6s ease-in infinite;
}
.sc-head {
width: 80px;
height: 80px;
border-radius: 40%;
background: #f7caaf;
position: relative;
z-index: 2;
.eyes {
position: absolute;
left: 2px;
top: 20px;
display: table;
margin: 0 auto;
&::before, &::after {
content: '';
width: 8px;
height: 8px;
background: #000;
border-radius: 50%;
display: inline-block;
margin: 0 15px;
}
}
.nose {
@extend %center-element;
width: 20px;
height: 13px;
border-radius: 50%;
background: #d48c7e;
top: 32px;
position: relative;
}
.beard {
position: absolute;
bottom: -45px;
left: -10px;
background: #fff;
width: calc(100% + 20px);
height: 80px;
border-radius: 20% 20% 60% 60% ;
// mouth
&::before {
@extend %center-element;
content: '';
width: 20px;
height: 20px;
background: #000;
border-radius: 0 0 50% 50%;
margin-top: 6px;
}
}
.ears {
@extend %center-element;
width: calc(100% + 17px);
position: absolute;
top: 25px;
left: -8px;
.ear {
width: 10px;
height: 20px;
background: #d48c7e;
border-radius: 50% 0 0 50%;
&.left {
float: left;
}
&.right {
float: right;
transform: rotateZ(180deg);
}
}
}
}
.sc-hat {
@extend %center-element;
position: absolute;
top: -37px;
left: -6px;
width: calc(100% + 10px);
height: 55px;
background: $light-bulb-red;
border-radius: 60px 80px 0 0;
&::before {
content: '';
width: inherit;
height: 20px;
background: #fff;
display: block;
border-radius: 6px;
position: absolute;
bottom: -5px;
left: -4px;
}
.hat-tip {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 69px solid $light-bulb-red;
position: absolute;
top: -37px;
animation: swing 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
left: 8px;
&::before {
content: '';
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
display: block;
position: absolute;
left: -13px;
top: -10px;
}
}
}
.sc-body {
position: absolute;
left: -70px;
width: 200px;
height: 200px;
background: $light-bulb-red;
border-radius: 30%;
}
// Snow CSS by by @KeithClark
.snow, .snow:before, .snow:after {
position: absolute;
top: -$w + px;
left: 0;
bottom: 0;
right: 0;
background-image: $grad;
background-size: $w + px $w + px;
animation: snow $s linear infinite;
content: "";
}
.snow:after {
margin-left: -$w/3 + px;
opacity: .4;
animation-duration: $s*2;
animation-direction: reverse;
filter: blur(3px);
}
.snow:before {
animation-duration: $s*3;
animation-direction: reverse;
margin-left: -$w/2 + px;
opacity: .65;
filter: blur(1.5px);
}
@keyframes snow {
to {
transform: translateY($w + px);
}
}
@keyframes blink {
20% {
background: lighten($light-bulb-red, 18%);
}
}
@keyframes blink2 {
60% {
background: lighten($light-bulb-yew, 60%);
}
}
@keyframes blink3 {
75% {
background: lighten($light-bulb-purple, 18%);
}
}
@keyframes blink4 {
100% {
background: lighten($light-bulb-blue, 30%);
}
}
@keyframes santa-claus {
0%, 60%, 80%, 100% {
transform: rotateZ(195deg)
translateY(0);
}
30% {
transform: rotateZ(195deg)
translateY(300px);
}
}
@keyframes swing {
0%, 100% {
transform: rotateZ(-42deg);
}
50% {
transform: rotateZ(0deg);
}
}
@keyframes balloon {
0%, 50%, 100% {
opacity: 0;
transform: translateY(0px);
}
80%, 90% {
opacity: 1;
transform: translateY(-15px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment