Skip to content

czirzone/czirzone.github.io

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
README.md
README.md
 
 
index.html
index.html
 
 
script.js
script.js
 
 
styles.css
styles.css
 
 

Repository files navigation

czirzone.github.io

<title>Document</title> <style> ::selection { background: rgba(255, 255, 0, 0.5); } 
body {
    background: white;
}

.window {
    width: 340px;
    height: 340px;
    background: #a0d5d3;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    margin-top: -60px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 10px solid #f8e7dc;
    overflow: hidden;
}

.santa {
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.santa .body {
    width: 190px;
    height: 210px;
    background: #de2f32;
    position: relative;
    border-radius: 50%;
    top: 0;
    -webkit-animation: bodyLaugh 4s linear infinite;
    -moz-animation: bodyLaugh 4s linear infinite;
    -ms-animation: bodyLaugh 4s linear infinite;
    -o-animation: bodyLaugh 4s linear infinite;
    animation: bodyLaugh 4s linear infinite;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}

.santa .body:before {
    content: " ";
    width: 7px;
    height: 7px;
    background: #f7be10;
    border-radius: 50%;
    position: absolute;
    top: 35%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0px -18px 0px #f7be10, 0px 18px 0px #f7be10;
}

.santa .head {
    z-index: 2;
    position: absolute;
    bottom: 90px;
    left: 50%;
    -webkit-animation: headLaugh 4s linear infinite;
    -moz-animation: headLaugh 4s linear infinite;
    -ms-animation: headLaugh 4s linear infinite;
    -o-animation: headLaugh 4s linear infinite;
    animation: headLaugh 4s linear infinite;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.santa .head .face {
    width: 120px;
    height: 130px;
    background: #edcab0;
    background: radial-gradient(#edcab0, #e9a982);
    border-radius: 50%;
    border: 3px solid #f8e7dc;
}

.santa .head .face .redhat .whitepart {
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 90%;
    height: 32px;
    background: #f8e7dc;
    border-radius: 50px;
    z-index: 4;
    box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1);
}

.santa .head .face .redhat .redpart {
    width: 120px;
    height: 120px;
    background: #de2f32;
    position: absolute;
    top: -50px;
    left: 15px;
    border-radius: 50%;
    z-index: -1;
}

.santa .head .face .redhat .redpart:before {
    content: " ";
    width: 95px;
    height: 95px;
    position: absolute;
    left: 0;
    top: 12px;
    border-radius: 50%;
    box-shadow: inset -8px -1px 0px -5px rgba(0, 0, 0, 0.05);
}

.santa .head .face .redhat .redpart:after {
    content: " ";
    position: absolute;
    right: 0;
    top: 60px;
    background: #de2f32;
    width: 20px;
    height: 50px;
}

.santa .head .face .redhat .hatball {
    width: 38px;
    height: 38px;
    background: #f8e7dc;
    border-radius: 50%;
    z-index: 5;
    position: absolute;
    right: -20px;
    top: 40px;
    box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1);
}

.santa .head .face .eyes {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 57px;
}

.santa .head .face .eyes:before,
.santa .head .face .eyes:after {
    content: " ";
    position: absolute;
    width: 15px;
    height: 9px;
    top: 0;
    border: 5px solid #a8744f;
    border-width: 0;
    border-top-width: 5px;
    border-radius: 50%;
}

.santa .head .face .eyes:before {
    left: -28px;
}

.santa .head .face .eyes:after {
    right: -28px;
}

.santa .head .face .beard {
    width: 55px;
    height: 55px;
    background: #f8e7dc;
    border-radius: 50%;
    position: absolute;
    bottom: -30px;
    left: 50%;
    -webkit-animation: beardLaugh 4s linear infinite;
    -moz-animation: beardLaugh 4s linear infinite;
    -ms-animation: beardLaugh 4s linear infinite;
    -o-animation: beardLaugh 4s linear infinite;
    animation: beardLaugh 4s linear infinite;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.santa .head .face .beard:before,
.santa .head .face .beard:after {
    content: " ";
    width: 80px;
    height: 80px;
    background: #f8e7dc;
    border-radius: 50%;
    position: absolute;
    bottom: 15px;
}

.santa .head .face .beard:before {
    left: -40px;
}

.santa .head .face .beard:after {
    right: -40px;
}

.santa .head .face .beard .nouse {
    width: 25px;
    height: 20px;
    border-radius: 50%;
    background: #edcab0;
    position: absolute;
    z-index: 3;
    box-shadow: inset -3px -3px 0px #e9a982;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -42px;
}

.santa .head .face .beard .mouth {
    background: #a8744f;
    z-index: 3;
    position: absolute;
    width: 15px;
    height: 5px;
    border-bottom-right-radius: 80px 50px;
    border-bottom-left-radius: 80px 50px;
    left: 50%;
    top: 0;
    -webkit-animation: mouthLaugh 4s linear infinite;
    -moz-animation: mouthLaugh 4s linear infinite;
    -ms-animation: mouthLaugh 4s linear infinite;
    -o-animation: mouthLaugh 4s linear infinite;
    animation: mouthLaugh 4s linear infinite;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.santa .head .ears:before,
.santa .head .ears:after {
    content: " ";
    width: 20px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(#e9a982, #edcab0);
    position: absolute;
    top: 50%;
    z-index: -1;
}

.santa .head .ears:before {
    left: -8px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.santa .head .ears:after {
    right: -8px;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
}

@font-face {
    font-family: 'Mountains of Christmas';
    font-style: normal;
    src: local("Mountains of Christmas"), local("MountainsofChristmas-Regular"), url(https://fonts.gstatic.com/s/mountainsofchristmas/v8/dVGBFPwd6G44IWDbQtPewylJhLDHyIrT3I5b5eGTHmw.woff2) format("woff2");
}

.message {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 80px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #f8e7dc;
    font-family: 'Mountains of Christmas';
}

.message h1 {
    font-style: normal;
    font-size: 75px;
    margin-bottom: 0;
    white-space: nowrap;
}

.message h2 {
    margin: 0;
    font-size: 20px;
    text-align: center;
    white-space: nowrap;
}

.message h2 a {
    color: #f7be10;
    opacity: 0.8;
}

.message h2 a:hover {
    opacity: 1;
}

@-webkit-keyframes bodyLaugh {
    0% {
        top: 0px;
    }

    2% {
        top: -3px;
    }

    4% {
        top: 0px;
    }

    8% {
        top: -3px;
    }

    10% {
        top: 0px;
    }

    12% {
        top: -3px;
    }

    14% {
        top: 0px;
    }

    18% {
        top: -3px;
    }

    20% {
        top: 0px;
    }

    22% {
        top: -3px;
    }

    24% {
        top: 0px;
    }

    28% {
        top: -3px;
    }

    30% {
        top: 0px;
    }

    100% {
        top: 0px;
    }
}

@-moz-keyframes bodyLaugh {
    0% {
        top: 0px;
    }

    2% {
        top: -3px;
    }

    4% {
        top: 0px;
    }

    8% {
        top: -3px;
    }

    10% {
        top: 0px;
    }

    12% {
        top: -3px;
    }

    14% {
        top: 0px;
    }

    18% {
        top: -3px;
    }

    20% {
        top: 0px;
    }

    22% {
        top: -3px;
    }

    24% {
        top: 0px;
    }

    28% {
        top: -3px;
    }

    30% {
        top: 0px;
    }

    100% {
        top: 0px;
    }
}

@-ms-keyframes bodyLaugh {
    0% {
        top: 0px;
    }

    2% {
        top: -3px;
    }

    4% {
        top: 0px;
    }

    8% {
        top: -3px;
    }

    10% {
        top: 0px;
    }

    12% {
        top: -3px;
    }

    14% {
        top: 0px;
    }

    18% {
        top: -3px;
    }

    20% {
        top: 0px;
    }

    22% {
        top: -3px;
    }

    24% {
        top: 0px;
    }

    28% {
        top: -3px;
    }

    30% {
        top: 0px;
    }

    100% {
        top: 0px;
    }
}

@keyframes bodyLaugh {
    0% {
        top: 0px;
    }

    2% {
        top: -3px;
    }

    4% {
        top: 0px;
    }

    8% {
        top: -3px;
    }

    10% {
        top: 0px;
    }

    12% {
        top: -3px;
    }

    14% {
        top: 0px;
    }

    18% {
        top: -3px;
    }

    20% {
        top: 0px;
    }

    22% {
        top: -3px;
    }

    24% {
        top: 0px;
    }

    28% {
        top: -3px;
    }

    30% {
        top: 0px;
    }

    100% {
        top: 0px;
    }
}

@-webkit-keyframes beardLaugh {
    0% {
        bottom: -28px;
    }

    2% {
        bottom: -30px;
    }

    4% {
        bottom: -28px;
    }

    8% {
        bottom: -30px;
    }

    10% {
        bottom: -28px;
    }

    12% {
        bottom: -30px;
    }

    14% {
        bottom: -28px;
    }

    18% {
        bottom: -30px;
    }

    20% {
        bottom: -28px;
    }

    22% {
        bottom: -30px;
    }

    24% {
        bottom: -28px;
    }

    28% {
        bottom: -30px;
    }

    30% {
        bottom: -28px;
    }

    100% {
        bottom: -28px;
    }
}

@-moz-keyframes beardLaugh {
    0% {
        bottom: -28px;
    }

    2% {
        bottom: -30px;
    }

    4% {
        bottom: -28px;
    }

    8% {
        bottom: -30px;
    }

    10% {
        bottom: -28px;
    }

    12% {
        bottom: -30px;
    }

    14% {
        bottom: -28px;
    }

    18% {
        bottom: -30px;
    }

    20% {
        bottom: -28px;
    }

    22% {
        bottom: -30px;
    }

    24% {
        bottom: -28px;
    }

    28% {
        bottom: -30px;
    }

    30% {
        bottom: -28px;
    }

    100% {
        bottom: -28px;
    }
}

@-ms-keyframes beardLaugh {
    0% {
        bottom: -28px;
    }

    2% {
        bottom: -30px;
    }

    4% {
        bottom: -28px;
    }

    8% {
        bottom: -30px;
    }

    10% {
        bottom: -28px;
    }

    12% {
        bottom: -30px;
    }

    14% {
        bottom: -28px;
    }

    18% {
        bottom: -30px;
    }

    20% {
        bottom: -28px;
    }

    22% {
        bottom: -30px;
    }

    24% {
        bottom: -28px;
    }

    28% {
        bottom: -30px;
    }

    30% {
        bottom: -28px;
    }

    100% {
        bottom: -28px;
    }
}

@keyframes beardLaugh {
    0% {
        bottom: -28px;
    }

    2% {
        bottom: -30px;
    }

    4% {
        bottom: -28px;
    }

    8% {
        bottom: -30px;
    }

    10% {
        bottom: -28px;
    }

    12% {
        bottom: -30px;
    }

    14% {
        bottom: -28px;
    }

    18% {
        bottom: -30px;
    }

    20% {
        bottom: -28px;
    }

    22% {
        bottom: -30px;
    }

    24% {
        bottom: -28px;
    }

    28% {
        bottom: -30px;
    }

    30% {
        bottom: -28px;
    }

    100% {
        bottom: -28px;
    }
}

@-webkit-keyframes headLaugh {
    0% {
        bottom: 83px;
    }

    45% {
        bottom: 83px;
    }

    50% {
        bottom: 90px;
    }

    92% {
        bottom: 90px;
    }

    98% {
        bottom: 83px;
    }

    100% {
        bottom: 83px;
    }
}

@-moz-keyframes headLaugh {
    0% {
        bottom: 83px;
    }

    45% {
        bottom: 83px;
    }

    50% {
        bottom: 90px;
    }

    92% {
        bottom: 90px;
    }

    98% {
        bottom: 83px;
    }

    100% {
        bottom: 83px;
    }
}

@-ms-keyframes headLaugh {
    0% {
        bottom: 83px;
    }

    45% {
        bottom: 83px;
    }

    50% {
        bottom: 90px;
    }

    92% {
        bottom: 90px;
    }

    98% {
        bottom: 83px;
    }

    100% {
        bottom: 83px;
    }
}

@keyframes headLaugh {
    0% {
        bottom: 83px;
    }

    45% {
        bottom: 83px;
    }

    50% {
        bottom: 90px;
    }

    92% {
        bottom: 90px;
    }

    98% {
        bottom: 83px;
    }

    100% {
        bottom: 83px;
    }
}

@-webkit-keyframes mouthLaugh {
    0% {
        width: 20px;
    }

    45% {
        width: 20px;
    }

    50% {
        width: 15px;
    }

    92% {
        width: 15px;
    }

    98% {
        width: 20px;
    }

    100% {
        width: 20px;
    }
}

@-moz-keyframes mouthLaugh {
    0% {
        width: 20px;
    }

    45% {
        width: 20px;
    }

    50% {
        width: 15px;
    }

    92% {
        width: 15px;
    }

    98% {
        width: 20px;
    }

    100% {
        width: 20px;
    }
}

@-ms-keyframes mouthLaugh {
    0% {
        width: 20px;
    }

    45% {
        width: 20px;
    }

    50% {
        width: 15px;
    }

    92% {
        width: 15px;
    }

    98% {
        width: 20px;
    }

    100% {
        width: 20px;
    }
}

@keyframes mouthLaugh {
    0% {
        width: 20px;
    }

    45% {
        width: 20px;
    }

    50% {
        width: 15px;
    }

    92% {
        width: 15px;
    }

    98% {
        width: 20px;
    }

    100% {
        width: 20px;
    }
}


/* abc  */

.christmas{ display: none; }

.christmas:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-10deg); background-image: radial-gradient(circle at 30% 30%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 80% 70%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 30% 50%, #fff 1%, transparent 2%), radial-gradient(circle at 70% 85%, #fff 1%, transparent 2%); background-size: 10% 30%; background-position: 0 0, 0 0, 0 0, 0 0; -webkit-animation: snow 3s linear infinite ; animation: snow 3s linear infinite ; } @-webkit-keyframes snow { 100% { background-position: 0px 200px, 0 200px, 0px 200px, 0px 200px; } } @keyframes snow { 100% { background-position: 0px 200px, 0 200px, 0px 200px, 0px 200px; } }

</style> 
<div id="btn" style="width:30%;">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 150 88.4" enable-background="new 0 0 150 88.4" xml:space="preserve" style="fill: rgb(0, 0, 0);" role="img" aria-label="Valentine Envelope Line Icon">
        <path d="M60.1,38.6c3.4-3.4,9-3.4,12.4,0l1.2,1.1l1.2-1.1c3.4-3.4,9-3.4,12.4,0c0.4,0.4,0.7,0.7,1,1.1L140,4.8H10.1  L60.1,38.6L60.1,38.6z" style="fill: none;"></path>
        <path d="M89.8,44.8c0,2.3-0.9,4.6-2.6,6.2L75.4,62.9c-0.5,0.5-1.1,0.7-1.7,0.7s-1.2-0.2-1.7-0.7L60.1,51  c-1.7-1.7-2.6-3.9-2.6-6.2c0-0.7,0.1-1.3,0.2-2L4.8,7.2v75.4c0,0.6,0.5,1,1,1h138.3c0.6,0,1-0.5,1-1V7.2L89.8,44.5  C89.8,44.6,89.8,44.7,89.8,44.8z" style="fill: none;"></path>
        <g id="__id2_s23t51u2c"><path d="M148.8,2.3c0-0.1-0.1-0.2-0.2-0.3c-0.3-0.3-0.6-0.6-0.9-0.8c-0.4-0.2-0.8-0.3-1.2-0.3c0.4,0,0.9,0.1,1.2,0.3  c-1-0.8-2.2-1.2-3.6-1.2H5.9C4.5,0,3.3,0.5,2.3,1.2C2.1,1.3,1.9,1.5,1.8,1.7C1.7,1.8,1.5,1.9,1.4,2C0.5,3.1,0,4.4,0,5.9v76.7  c0,3.2,2.6,5.9,5.9,5.9h138.3c3.2,0,5.9-2.6,5.9-5.9V5.9C150,4.5,149.5,3.3,148.8,2.3z M147.9,5.4l-2.7,1.8v75.4c0,0.6-0.5,1-1,1  H5.9c-0.6,0-1-0.5-1-1V7.2L2.1,5.3l2.7,1.8V5.9c0-0.6,0.5-1,1-1h0.1c-0.6,0-1,0.5-1,1v1.3l52.9,35.6c0.3-1.6,1.1-3.1,2.3-4.2  l-50-33.7H10L4.8,1.3L10,4.8h130L88.2,39.7c1,1.4,1.5,3,1.6,4.8l55.3-37.3V5.9c0.1-0.6-0.4-1.1-1-1.1h0.1c0.6,0,1,0.5,1,1v1.3  L147.9,5.4c0.7-0.5,1-1.3,1.1-2C149,4.2,148.6,5,147.9,5.4z" style="fill: rgb(169, 216, 221);"></path></g>
        <g id="__id3_s23t51u2c"><path d="M90.2,43.7c-0.1-1.8-0.6-3.4-1.6-4.9c-0.3-0.4-0.6-0.8-1-1.2c-3.5-3.5-9.2-3.5-12.7,0l-1.2,1.2l-1.2-1.2  c-3.5-3.5-9.2-3.5-12.7,0c0,0,0,0,0,0c-1.2,1.2-2,2.7-2.4,4.4c-0.1,0.6-0.2,1.3-0.2,2c0,2.4,0.9,4.7,2.6,6.4L72,62.5  c0.5,0.5,1.1,0.7,1.8,0.7c0.6,0,1.3-0.2,1.8-0.7l12.1-12.1c1.7-1.7,2.6-4,2.6-6.4C90.3,43.9,90.2,43.8,90.2,43.7z M73.7,57.3  L63.3,46.9c-0.4-0.4-0.7-0.9-0.9-1.5c-0.2-0.4-0.2-0.9-0.2-1.4c0-1.1,0.4-2.1,1.2-2.9c0.2-0.2,0.5-0.4,0.8-0.6  c0.6-0.4,1.3-0.6,2.1-0.6c1.1,0,2.1,0.4,2.9,1.2l2.9,2.9c1,1,2.5,1,3.5,0l2.9-2.9c1.6-1.6,4.1-1.6,5.7,0c0.1,0.1,0.2,0.3,0.4,0.4  c1.2,1.6,1.1,3.8-0.4,5.3l-2.9,2.9L73.7,57.3z" style="fill: rgb(207, 94, 116);"></path></g>
        </svg>
        <h1 style="text-align: center;color:#de2f32">Click here!!!</h1>
</div>

Merry Christmas!

From Hoàng with LOVE♥

<script> document.querySelector("#btn").onclick = function (){ document.querySelector("#btn").style.display='none'; document.querySelector(".christmas").style.display='block'; document.querySelector("#body").style.background="#de2f32"; } </script>

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages