Css Santa Claus laughing for Christmas

by huynguyen2015

HTML

<div id="app"></div>

CSS

.header {
  font-size: 24px;
  padding-top: 24px;
}
.header h1 {
  font-size: 38px;
  font-weight: 600;
}

/* Xmas santa claud laugh */
#splash-xmas-santa-laugh {
  background-color: rgba(211, 47, 47, 0.65);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27ae60', endColorstr='#388e3c', GradientType=1 );
  color: #fff;
  text-align: center;
  height: 100%;
}

#splash-xmas-santa-laugh ul {
  display: table;
  list-style: none;
  margin: 0 auto;
  max-width: 800px;
  padding: 0;
}

#splash-xmas-santa-laugh ul li {
  display: inline-block;
}

#splash-xmas-santa-laugh .santaclaus {
  display: block;
  margin: 0 auto;
  max-width: 500px;
}

#splash-xmas-santa-laugh .santaclaus > div {
  margin: 0 auto;
  max-width: 400px;
}

#splash-xmas-santa-laugh .santaclaus .chapeu {
  display: block;
  position: relative;
  width: 310px;
  z-index: 99;
}

#splash-xmas-santa-laugh .santaclaus .chapeu .cone-1 {
  border-left: 50px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 70px solid #d32f2f;
}

#splash-xmas-santa-laugh .santaclaus .chapeu .cone-2 {
  background-color: #d32f2f;
  border-top: 0px solid transparent;
  border-right: 340px solid #d32f2f;
  border-bottom: 100px solid transparent;
  border-color: transparent;
  box-shadow: -25px 15px 30px -5px rgba(1, 1, 1, 0.3);
  position: relative;
  left: -56px;
  top: 49px;
  transform: rotate(-15deg);
  border-radius: 30% 100% 0 100%;
}

#splash-xmas-santa-laugh .santaclaus .chapeu::after,
#splash-xmas-santa-laugh .santaclaus .chapeu::before {
  background-color: #fff;
  content: ' ';
  display: block;
}

#splash-xmas-santa-laugh .santaclaus .chapeu::after {
  box-shadow: 0px -15px 40px -5px rgba(1, 1, 1, 0.4);
  height: 80px;
  margin-left: -15px;
  position: relative;
  width: 340px;
  border-radius: 0.8em;
}

#splash-xmas-santa-laugh .santaclaus .chapeu::before {
  box-shadow: 20px 20px 40px -5px rgba(1, 1, 1, 0.3);
  height: 80px;
  left: -120px;
  position: absolute;
 ...

React

const XmasSantaLaughComponent = () => {
  return (
    <div id="splash-xmas-santa-laugh">
       <header class="header">
         <h1>Css Santa Claus laughing for Christmas</h1>
         <p>Find more tips at <a href="https://www.1hour.dev/posts/top-3-beautiful-css-animation-for-christmas-season" title="1hour.dev beautiful css animation for Christmas" target="_blank">1hour.dev</a></p>
         <p>
         <a href="https://www.1hour.dev/posts/top-3-beautiful-css-animation-for-christmas-season">See original post</a>
         </p>
      </header>
      <ul>
        <li className="hohoho">
          <h2></h2>
          <h2></h2>
          <h2></h2>
        </li>
        <li className="santaclaus">
          <div className="chapeu">
            <div className="cone-2"></div>
            <div className="cone-1"></div>
          </div>
          <div className="face">
            <div className="eyes"></div>
            <div className="nariz"></div>
            <div className="barba">
              <div className="boca"></div>
            </div>
          </div>
          <div className="orelhas"></div>
        </li>
        <li className="hohoho">
          <h2></h2>
          <h2></h2>
          <h2></h2>
        </li>
      </ul>
    </div>
  )
}

ReactDOM.render(<XmasSantaLaughComponent />, document.querySelector("#app"))