{"id":18404,"date":"2020-12-21T07:51:36","date_gmt":"2020-12-21T06:51:36","guid":{"rendered":"https:\/\/www.jng-web.com\/labo\/?p=18404"},"modified":"2020-12-19T09:58:12","modified_gmt":"2020-12-19T08:58:12","slug":"une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81","status":"publish","type":"post","link":"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/","title":{"rendered":"Une animation de No\u00ebl en HTML et CSS : &#x1f380;Festive Christmas Gift &#x1f381;"},"content":{"rendered":"<div class=\"advads-avant-le-contenu\" id=\"advads-3650742203\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-4944504088214075\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-4944504088214075\" \ndata-ad-slot=\"4514395581\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><div class=\"advads-test\" style=\"margin-left: auto;margin-right: auto;text-align: center;\" id=\"advads-3386109819\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-4944504088214075\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-4944504088214075\" \ndata-ad-slot=\"4514395581\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><p>Sur le site codepen.io, vous pourrez d\u00e9couvrir un code HTML\/CSS intitul\u00e9 <a href=\"https:\/\/codepen.io\/Priyanka_Patel\/pen\/wvzJxGw\" target=\"_blank\" rel=\"noopener\">Festive Christmas Gift<\/a> propos\u00e9 par Priyanka Patel. Ce code vous permet de mettre en place un cadeau de No\u00ebl duquel apparait un ourson.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-18405\" src=\"https:\/\/www.jng-web.com\/labo\/wp-content\/uploads\/2020\/12\/animation-noel.png\" alt=\"animation noel HTML\/CSS\" width=\"1906\" height=\"475\" srcset=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2020\/12\/animation-noel.png 1906w, https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2020\/12\/animation-noel-300x75.png 300w, https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2020\/12\/animation-noel-1024x255.png 1024w, https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2020\/12\/animation-noel-768x191.png 768w, https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2020\/12\/animation-noel-1536x383.png 1536w\" sizes=\"auto, (max-width: 1906px) 100vw, 1906px\" \/><\/p>\n<p>Le code HTML :<\/p>\n<pre class=\"brush: html; gutter: true; first-line: 1\">&lt;body&gt;\r\n  &lt;div class=\"light-one\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"light-two\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"present\"&gt;\r\n    &lt;div class=\"ribbon\"&gt;\r\n      &lt;div class=\"ribbon-line-left\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"ribbon-line-right\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"ribbon-part-left\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"ribbon-part-right\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"ribbon-cut-out\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=\"teddy-santa-hat\"&gt;\r\n      &lt;div class=\"teddy-santa-hat-part\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"teddy-bear\"&gt;\r\n      &lt;div class=\"bear-left-ear\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"bear-right-ear\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"bear-left-eye\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"bear-right-eye\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"bear-nose\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"bear-mouth\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=\"box-lid\"&gt;\r\n      &lt;div class=\"box-top-lid\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"box-left-lid\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"box-front-lid\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"box-right-lid\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"box-back-lid\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=\"box\"&gt;\r\n      &lt;div class=\"box-left\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"box-front\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"back-box-cover\"&gt;\r\n      &lt;div class=\"box-right\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"box-back\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"tree-left\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"tree-right\"&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;<\/pre>\n<p>Le code CSS :<\/p>\n<pre class=\"brush: css; gutter: true; first-line: 1\">body {\r\n   background-color: #2d2416;\r\n   align-items: center;\r\n   display: flex;\r\n   margin: 0;\r\n   padding: 0;\r\n   height: 100%;\r\n   animation: background-change 7s ease-in-out alternate infinite;\r\n }\r\n \r\n @keyframes background-change {\r\n   0% {\r\n     background-color: #2d2416;\r\n   }\r\n   50% {\r\n     background-color: #192d16;\r\n   }\r\n   100% {\r\n     background-color: #2d1629;\r\n   }\r\n }\r\n \r\n .light-one,\r\n .light-two {\r\n   height: 31%;\r\n   position: absolute;\r\n   top: 9px;\r\n   width: 100%;\r\n   background-image: radial-gradient(circle, #f17900 12%, transparent 0%), radial-gradient(circle, #be0e0e 12%, transparent 1%);\r\n   background-size: 100px 100px;\r\n   background-position: 0 0, 50px 50px;\r\n   animation: blinking 2s linear infinite;\r\n }\r\n \r\n .light-two {\r\n   background-image: radial-gradient(circle, #002fff 10%, transparent 0%), radial-gradient(circle, #6c00c5 14%, transparent 0%);\r\n   background-size: 100px 100px;\r\n   background-position: -49px -20px, 88px -35px;\r\n   animation: blinking 2s linear 1s infinite;\r\n }\r\n \r\n @keyframes blinking {\r\n   50% {\r\n     opacity: 0.2;\r\n     background-size: 100.1px 100px;\r\n   }\r\n }\r\n \r\n .present {\r\n   position: absolute;\r\n   left: 40%;\r\n   bottom: 35%;\r\n   animation: moving-present 1s ease-in-out 1s 3;\r\n }\r\n \r\n @keyframes moving-present {\r\n   0% {\r\n     transform: scaley(1);\r\n   }\r\n   20% {\r\n     transform: translateY(90px);\r\n   }\r\n   40% {\r\n     transform: scalex(1.05);\r\n   }\r\n   100% {\r\n     transform: scaley(1.1);\r\n   }\r\n }\r\n \r\n .ribbon {\r\n   width: 40px;\r\n   height: 40px;\r\n   background: red;\r\n   border-radius: 100px \/ 50px;\r\n   position: absolute;\r\n   box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);\r\n   transform: rotate(-6deg);\r\n   top: -152px;\r\n   left: 91px;\r\n   z-index: 2;\r\n   transform-style: preserve-3d;\r\n   animation:  moving-ribbon 2.4s ease-in 3s both;\r\n }\r\n \r\n @keyframes moving-ribbon {\r\n   35% {\r\n      top: -316px;\r\n      left: 136px;\r\n      transform: rotateX(0deg) rotateY(0deg) rotateZ(23deg);\r\n    }\r\n\r\n   88% {\r\n     top: -189px;\r\n     left: 259px;\r\n     transform: rotateX(63deg) rotateY(67deg) rotateZ(4deg);\r\n     \r\n   }\r\n   100% {\r\n     visibility: hidden;\r\n     top: -152px;\r\n     left: 291px;\r\n     transform: rotateX(63deg) rotateY(72deg) rotateZ(20deg);\r\n   }\r\n } \r\n\r\n .ribbon::after {\r\n   content: \"\";\r\n   position: absolute;\r\n   width: 20px;\r\n   height: 64px;\r\n   top: 8px;\r\n   left: -11px;\r\n   background: red;\r\n   transform: rotate(43deg);\r\n }\r\n \r\n .ribbon::before {\r\n   content: \"\";\r\n   position: absolute;\r\n   width: 21px;\r\n   height: 73px;\r\n   top: 5px;\r\n   left: 17px;\r\n   background: red;\r\n   transform: rotate(-27deg);\r\n }\r\n \r\n .ribbon-part-left {\r\n   width: 0;\r\n   height: 0;\r\n   position: absolute;\r\n   border-top: 45px solid transparent;\r\n   border-right: 87px solid red;\r\n   border-bottom: 14px solid transparent;\r\n   border-radius: 9px;\r\n   right: 16px;\r\n   bottom: -7px;\r\n   transform: rotate(216deg);\r\n }\r\n \r\n .ribbon-part-left::before {\r\n   content: '';\r\n   position: absolute;\r\n   width: 50px;\r\n   height: 148px;\r\n   background: radial-gradient(ellipse at 49% 71%, #de2121 19%, transparent 2%);\r\n   transform: rotate(-119deg);\r\n   top: -88px;\r\n   right: -56px;\r\n }\r\n \r\n .ribbon-part-left::after {\r\n   content: '';\r\n   position: absolute;\r\n   width: 41px;\r\n   height: 177px;\r\n   transform: rotate(97deg);\r\n   background: radial-gradient(ellipse at 76% 75%, #ff0000 13%, transparent 1%);\r\n   left: 83px;\r\n   top: -86px;\r\n }\r\n \r\n .ribbon-part-right {\r\n   width: 0;\r\n   height: 0;\r\n   position: absolute;\r\n   border-top: 45px solid transparent;\r\n   border-right: 87px solid red;\r\n   border-bottom: 14px solid transparent;\r\n   border-radius: 9px;\r\n   transform: rotate(-20deg);\r\n   top: -20px;\r\n   right: -51px;\r\n }\r\n \r\n .ribbon-part-right::before {\r\n   content: '';\r\n   position: absolute;\r\n   width: 56px;\r\n   height: 148px;\r\n   background: radial-gradient(ellipse at 49% 71%, #de2121 19%, transparent 2%);\r\n   transform: rotate(-83deg);\r\n   top: -72px;\r\n   right: -55px;\r\n }\r\n \r\n .ribbon-part-right::after {\r\n   content: '';\r\n   position: absolute;\r\n   width: 56px;\r\n   height: 146px;\r\n   background: radial-gradient(ellipse at 49% 71%, #ff0000 19%, transparent 2%);\r\n   transform: rotate(-111deg);\r\n   top: -93px;\r\n   right: -60px;\r\n }\r\n \r\n .ribbon-line-left {\r\n   position: absolute;\r\n   margin-top: 8px;\r\n   width: 19px;\r\n   height: 1px;\r\n   left: -22px;\r\n   z-index: 1;\r\n   transform: rotate(22deg);\r\n   background-color: #ca0c0c;\r\n }\r\n \r\n .ribbon-line-left::before {\r\n   content: '';\r\n   position: absolute;\r\n   top: -9px;\r\n   left: 0;\r\n   width: 20px;\r\n   height: 1px;\r\n   transform: rotate(20deg);\r\n   background-color: #ca0c0c;\r\n }\r\n \r\n .ribbon-line-left::after {\r\n   content: '';\r\n   position: absolute;\r\n   top: 7px;\r\n   left: 0;\r\n   width: 19px;\r\n   height: 1px;\r\n   transform: rotate(167deg);\r\n   background-color: #ca0c0c;\r\n }\r\n \r\n .ribbon-line-right {\r\n   position: absolute;\r\n   margin-top: 8px;\r\n   width: 19px;\r\n   height: 1px;\r\n   left: 41px;\r\n   z-index: 1;\r\n   transform: rotate(152deg);\r\n   background-color: #ca0c0c;\r\n }\r\n \r\n .ribbon-line-right::before {\r\n   content: '';\r\n   position: absolute;\r\n   top: -9px;\r\n   left: 0;\r\n   width: 20px;\r\n   height: 1px;\r\n   transform: rotate(20deg);\r\n   background-color: #ca0c0c;\r\n }\r\n \r\n .ribbon-line-right::after {\r\n   content: '';\r\n   position: absolute;\r\n   top: 7px;\r\n   left: 0;\r\n   width: 19px;\r\n   height: 1px;\r\n   transform: rotate(167deg);\r\n   background-color: #ca0c0c;\r\n }\r\n \r\n .ribbon-cut-out {\r\n   position: absolute;\r\n   width: 0;\r\n   height: 0;\r\n   top: 54px;\r\n   left: -29px;\r\n   border-left: 10px solid transparent;\r\n   border-right: 10px solid transparent;\r\n   border-bottom: 12px solid #b91e1e;\r\n   transform: rotate(41deg);\r\n   z-index: 1;\r\n }\r\n \r\n .ribbon-cut-out::before {\r\n   content: '';\r\n   position: absolute;\r\n   width: 0;\r\n   height: 0;\r\n   top: -34px;\r\n   left: 43px;\r\n   border-left: 10px solid transparent;\r\n   border-right: 10px solid transparent;\r\n   border-bottom: 12px solid #e01d1d;\r\n   transform: rotate(-60deg);\r\n   z-index: 1;\r\n }\r\n \r\n .ribbon-cut-out::after {\r\n   content: '';\r\n   width: 43px;\r\n   height: 33px;\r\n   border-radius: 99px \/ 84px;\r\n   position: absolute;\r\n   top: -69px;\r\n   left: -21px;\r\n   z-index: 1;\r\n   transform: rotate(-33deg);\r\n   border: 1px solid;\r\n   color: #ab1313;\r\n }\r\n\r\n .box,\r\n .box-lid,\r\n .back-box-cover {\r\n   height: 240px;\r\n   top: 50px;\r\n   position: absolute;\r\n   transform-style: preserve-3d;\r\n   transform: rotateX(261deg) rotateY(0deg) rotateZ(-140deg);\r\n   width: 240px;\r\n   bottom: 100px;\r\n }\r\n\r\n .back-box-cover {\r\n   z-index: -1;\r\n }\r\n \r\n .box-lid {\r\n   top: -160px;\r\n   left: 0px;\r\n   z-index: 1;\r\n   animation: moving-lid 4s ease-in 3s forwards;\r\n }\r\n \r\n @keyframes moving-lid {\r\n   20% {\r\n     top: -336px;\r\n     left: 0px;\r\n     transform: rotateX(262deg) rotateY(-21deg) rotateZ(-138deg);\r\n   }\r\n   100% {\r\n     top: -29px;\r\n     left: 352px;\r\n     transform: rotateX(263deg) rotateY(-181deg) rotateZ(-139deg);\r\n   }\r\n }\r\n \r\n .box-top-lid {\r\n   height: 105%;\r\n   left: 0px;\r\n   position: absolute;\r\n   top: -6px;\r\n   width: 101%;\r\n   background: #b91e1e;\r\n   transform: translateZ(-72px);\r\n }\r\n \r\n .box-top-lid::before {\r\n   position: absolute;\r\n   content: '';\r\n   height: 26%;\r\n   left: -3px;\r\n   top: 83px;\r\n   width: 101%;\r\n   background: #8eb767;\r\n }\r\n \r\n .box-top-lid::after {\r\n   position: absolute;\r\n   content: '';\r\n   height: 25%;\r\n   left: -14px;\r\n   top: 91px;\r\n   width: 107%;\r\n   transform: rotate(92deg);\r\n   background: #8eb767;\r\n }\r\n \r\n .box-front,\r\n .box-front-lid {\r\n   height: 100%;\r\n   left: 0;\r\n   position: absolute;\r\n   top: 0;\r\n   width: 100%;\r\n   background: #e01d1d;   \r\n   transform: rotateX(90deg) scaleY(0.9);\r\n   transform-origin: bottom;\r\n   background-image: radial-gradient(#ffffff 17%, transparent 19%);\r\n   background-size: 60px 60px;\r\n }\r\n \r\n .box-front-lid {\r\n   transform: rotateX(90deg) scaleY(0.3);\r\n   box-shadow: 0px 82px 12px #0000000f;\r\n   width: 101%;\r\n   height: 101%;\r\n   top: 4px;\r\n   border-top: solid 2px #ff4a4a;\r\n   background: #e01d1d;\r\n }\r\n \r\n .box-back,\r\n .box-back-lid {\r\n   height: 100%;\r\n   left: 0;\r\n   position: absolute;\r\n   top: -241px;\r\n   width: 100%;\r\n   background: #901010;\r\n   transform: rotateX(90deg) scaleY(0.9);\r\n   transform-origin: bottom;\r\n }\r\n \r\n .box-back-lid {\r\n   transform: rotateX(90deg) scaleY(0.3);\r\n }\r\n \r\n .box-front::after,\r\n .box-front-lid::after {\r\n   content: '';\r\n   height: 101%;\r\n   position: absolute;\r\n   top: -2px;\r\n   left: 84px;\r\n   background: #9ec778;\r\n   width: 60px;\r\n }\r\n \r\n .box-left,\r\n .box-left-lid {\r\n   height: 100%;\r\n   left: 0;\r\n   position: absolute;\r\n   top: 0;\r\n   background: #b91e1e;\r\n   transform: translateZ(-216px) rotateY(90deg) scaleX(0.9);\r\n   transform-origin: right;\r\n   width: 240px;\r\n   background-image: radial-gradient(#ffffff 17%, transparent 19%);\r\n   background-size: 60px 60px;\r\n }\r\n \r\n .box-left-lid {\r\n   transform: translateZ(-72px) rotateY(90deg) scaleX(0.3);\r\n   width: 246px;\r\n   height: 105%;\r\n   top: -3px;\r\n   left: -4px;\r\n   box-shadow: -74px -5px 12px #0000000f;\r\n   background: #b91e1e;\r\n }\r\n \r\n .box-left::after,\r\n .box-left-lid::after {\r\n   content: '';\r\n   height: 100%;\r\n   position: absolute;\r\n   top: -17px;\r\n   left: 89px;\r\n   background: #9ec778;\r\n   width: 60px;\r\n   transform: rotate(90deg);\r\n }\r\n \r\n .box-right,\r\n .box-right-lid {\r\n   height: 100%;\r\n   left: -236px;\r\n   position: absolute;\r\n   top: 0;\r\n   background: #901010;\r\n   transform: translateZ(-216px) rotateY(90deg) scaleX(0.9);\r\n   transform-origin: right;\r\n   width: 240px;\r\n }\r\n \r\n .box-right-lid {\r\n   transform: translateZ(-70px) rotateY(90deg) scaleX(0.3);\r\n   top: -1px;\r\n   left: -239px;\r\n   height: 249px;\r\n   border-top: solid 2px #750707;\r\n }\r\n\r\n .teddy-bear {\r\n   background: #cc8b4e;\r\n   position: absolute;\r\n   top: -104px;\r\n   left: 5px;\r\n   height: 173px;\r\n   width: 201px;\r\n   border-radius: 50% 50% 50% 50% \/ 60% 60% 40% 40%;\r\n   animation: moving-teddy-bear 2s ease-in-out 3s forwards;\r\n   z-index: 0;\r\n }\r\n \r\n @keyframes moving-teddy-bear {\r\n   100% {\r\n     top: -198px;\r\n   }\r\n }\r\n \r\n .teddy-bear::before {\r\n   content: '';\r\n   background: #cc8b4e;\r\n   position: absolute;\r\n   top: 77px;\r\n   left: 24px;\r\n   height: 93px;\r\n   width: 154px;\r\n   border-radius: 50% \/ 50%;\r\n }\r\n \r\n .teddy-bear::after {\r\n   content: '';\r\n   background: #cc8b4e;\r\n   position: absolute;\r\n   top: 139px;\r\n   left: 24px;\r\n   height: 50px;\r\n   width: 150px;\r\n   border-radius: 90px 90px 0 0;\r\n   z-index: -1;\r\n }\r\n \r\n .bear-left-ear,\r\n .bear-right-ear {\r\n   position: absolute;\r\n   width: 65px;\r\n   height: 60px;\r\n   top: -13px;\r\n   left: -6px;\r\n   background: #cc8b4e;\r\n   z-index: -1;\r\n   border-radius: 50px \/ 47px;\r\n }\r\n \r\n .bear-left-ear::before,\r\n .bear-right-ear::before {\r\n   content: '';\r\n   position: absolute;\r\n   width: 45px;\r\n   height: 40px;\r\n   top: 11px;\r\n   left: 10px;\r\n   background: #ffc793;\r\n   z-index: -1;\r\n   border-radius: 50px \/ 47px;\r\n }\r\n \r\n  .bear-right-ear::after {\r\n   content: '';\r\n   background: #cc8b4e;\r\n   position: absolute;\r\n   top: 12px;\r\n   left: -140px;\r\n   height: 173px;\r\n   width: 201px;\r\n   border-radius: 50% 50% 50% 50% \/ 60% 60% 40% 40%;\r\n } \r\n \r\n .bear-right-ear {\r\n   left: 140px;\r\n }\r\n \r\n .bear-left-eye {\r\n   position: absolute;\r\n   left: 53px;\r\n   top: 45px;\r\n   width: 20px;\r\n   height: 20px;\r\n   background-color: black;\r\n   border-radius: 50%;\r\n   border: solid 2px #000000;\r\n }\r\n \r\n .bear-left-eye::after {\r\n   content: '';\r\n   position: absolute;\r\n   right: 6px;\r\n   top: 4px;\r\n   width: 4px;\r\n   height: 4px;\r\n   border-radius: 50%;\r\n   background-color: #ffffff;\r\n   border: solid 1px #ffffff;\r\n   animation: moving-teddy-eyes 2s ease 4.8s alternate;\r\n }\r\n \r\n .bear-right-eye {\r\n   position: absolute;\r\n   left: 124px;\r\n   top: 45px;\r\n   width: 20px;\r\n   height: 20px;\r\n   background-color: black;\r\n   border-radius: 50%;\r\n   border: solid 2px #000000;\r\n }\r\n \r\n .bear-right-eye::after {\r\n   content: '';\r\n   position: absolute;\r\n   right: 6px;\r\n   top: 4px;\r\n   width: 4px;\r\n   height: 4px;\r\n   border-radius: 50%;\r\n   background-color: #ffffff;\r\n   border: solid 1px #ffffff;\r\n   animation: moving-teddy-eyes 2s ease-in-out 4.8s alternate;\r\n }\r\n \r\n @keyframes moving-teddy-eyes {\r\n   100% {\r\n     width: 4.5px;\r\n     height: 4.5px;\r\n   }\r\n }\r\n \r\n .bear-nose,\r\n .bear-nose:before,\r\n .bear-nose:after {\r\n   position: absolute;\r\n   width: 0;\r\n   height: 0;\r\n   right: 78px;\r\n   top: 88px;\r\n   border-left: 15px solid transparent;\r\n   border-right: 15px solid transparent;\r\n   border-top: 20px solid black;\r\n   border-radius: 50%;\r\n }\r\n \r\n .bear-nose:before {\r\n   content: '';\r\n   right: -15px;\r\n   top: -21px;\r\n   transform: rotate(125deg);\r\n }\r\n \r\n .bear-nose:after {\r\n   content: '';\r\n   right: -14px;\r\n   top: -22.5px;\r\n   transform: rotate(-125deg);\r\n }\r\n \r\n .bear-mouth {\r\n   position: absolute;\r\n   top: 102px;\r\n   left: 106px;\r\n   width: 20px;\r\n   height: 20px;\r\n   border: 3px solid black;\r\n   border-radius: 92px;\r\n   border-bottom-color: transparent;\r\n   border-left-color: transparent;\r\n   transform: rotate(130deg);\r\n }\r\n \r\n .bear-mouth::before {\r\n   content: '';\r\n   position: absolute;\r\n   top: 14px;\r\n   left: 12px;\r\n   width: 20px;\r\n   height: 20px;\r\n   border: 3px solid black;\r\n   border-radius: 92px;\r\n   border-bottom-color: transparent;\r\n   border-left-color: transparent;\r\n   animation: moving-teddy-mouth 2s ease-in-out 5s alternate;\r\n }\r\n \r\n @keyframes moving-teddy-mouth {\r\n   100% {\r\n     height: 21px;\r\n   }\r\n }\r\n \r\n .bear-mouth::after {\r\n   content: '';\r\n   position: absolute;\r\n   top: 12px;\r\n   left: 11px;\r\n   width: 3px;\r\n   height: 20px;\r\n   transform: rotate(50deg);\r\n   background-color: black;\r\n }\r\n \r\n .tree-left,\r\n .tree-right {\r\n   position: absolute;\r\n   width: 0;\r\n   height: 0;\r\n   left: 11px;\r\n   top: 26px;\r\n   border-left: 5px solid transparent;\r\n   border-right: 5px solid transparent;\r\n   border-bottom: 13px solid #ffffff;\r\n   transform: rotate(3deg);\r\n }\r\n \r\n .tree-right {\r\n   left: 200px;\r\n   top: 24px;\r\n   transform: rotate(-1deg);\r\n }\r\n \r\n .tree-left::before,\r\n .tree-right::before {\r\n   content: '';\r\n   position: absolute;\r\n   width: 0;\r\n   height: 0;\r\n   left: -9px;\r\n   top: 6px;\r\n   border-left: 9px solid transparent;\r\n   border-right: 10px solid transparent;\r\n   border-bottom: 22px solid #ffffff;\r\n }\r\n \r\n .tree-left::after,\r\n .tree-right::after {\r\n   content: '';\r\n   position: absolute;\r\n   width: 0;\r\n   height: 0;\r\n   left: -12px;\r\n   top: 15px;\r\n   border-left: 12px solid transparent;\r\n   border-right: 12px solid transparent;\r\n   border-bottom: 22px solid #ffffff;\r\n }\r\n \r\n .teddy-santa-hat {\r\n   position: absolute;\r\n   top: -97px;\r\n   left: -25px;\r\n   width: 153px;\r\n   height: 60px;\r\n   background: white;\r\n   border-radius: 118px \/ 80px;\r\n   transform: rotate(-21deg);\r\n   z-index: -1;\r\n   animation: moving-teddy-hat 2s ease-in-out 3s forwards;\r\n }\r\n \r\n @keyframes moving-teddy-hat {\r\n   21% {\r\n     z-index: 1;\r\n   }\r\n   100% {\r\n     z-index: 1;\r\n     top: -205px;\r\n   }\r\n }\r\n \r\n .teddy-santa-hat::before {\r\n   content: '';\r\n   background: #ff0000;\r\n   position: absolute;\r\n   top: -37px;\r\n   left: 16px;\r\n   height: 67px;\r\n   width: 122px;\r\n   border-radius: 112px 260px 0 0;\r\n   z-index: -1;\r\n }\r\n \r\n .teddy-santa-hat::after {\r\n   content: '';\r\n   position: absolute;\r\n   top: 5px;\r\n   left: -58px;\r\n   width: 0;\r\n   height: 0;\r\n   border-left: 125px solid transparent;\r\n   border-right: 44px solid transparent;\r\n   border-top: 67px solid #ff0000;\r\n   border-radius: 74px;\r\n   z-index: -2;\r\n   transform: rotate(-56deg);\r\n }\r\n \r\n .teddy-santa-hat-part {\r\n   position: absolute;\r\n   top: 53px;\r\n   left: -47px;\r\n   width: 38px;\r\n   height: 40px;\r\n   background: white;\r\n   border-radius: 50%;\r\n }<\/pre>\n<p style=\"text-align: center;\">Source : <a href=\"https:\/\/codepen.io\/Priyanka_Patel\/pen\/wvzJxGw\" target=\"_blank\" rel=\"noopener\">https:\/\/codepen.io\/Priyanka_Patel\/pen\/wvzJxGw<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sur le site codepen.io, vous pourrez d\u00e9couvrir un code HTML\/CSS intitul\u00e9 Festive Christmas Gift propos\u00e9 par Priyanka Patel. Ce code vous permet de mettre en &hellip; <\/p>\n","protected":false},"author":2,"featured_media":18405,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[9],"tags":[28,37],"class_list":["post-18404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-5-et-css-3","tag-css","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Une animation de No\u00ebl en HTML et CSS : &#x1f380;Festive Christmas Gift &#x1f381; - Labo JNG WEB<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-\ud83c\udf80festive-christmas-gift-\ud83c\udf81\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Une animation de No\u00ebl en HTML et CSS : &#x1f380;Festive Christmas Gift &#x1f381; - Labo JNG WEB\" \/>\n<meta property=\"og:description\" content=\"Sur le site codepen.io, vous pourrez d\u00e9couvrir un code HTML\/CSS intitul\u00e9 Festive Christmas Gift propos\u00e9 par Priyanka Patel. Ce code vous permet de mettre en &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-\ud83c\udf80festive-christmas-gift-\ud83c\udf81\/\" \/>\n<meta property=\"og:site_name\" content=\"Labo JNG WEB\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webmaster.referencement.dijon\" \/>\n<meta property=\"article:author\" content=\"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-21T06:51:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-19T08:58:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2020\/12\/animation-noel.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1906\" \/>\n\t<meta property=\"og:image:height\" content=\"475\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"J\u00e9r\u00f4me\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"J\u00e9r\u00f4me\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/\"},\"author\":{\"name\":\"J\u00e9r\u00f4me\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590\"},\"headline\":\"Une animation de No\u00ebl en HTML et CSS : &#x1f380;Festive Christmas Gift &#x1f381;\",\"datePublished\":\"2020-12-21T06:51:36+00:00\",\"dateModified\":\"2020-12-19T08:58:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/\"},\"wordCount\":68,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\"},\"keywords\":[\"CSS\",\"HTML\"],\"articleSection\":[\"HTML 5 et CSS 3\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/\",\"url\":\"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/\",\"name\":\"Une animation de No\u00ebl en HTML et CSS : &#x1f380;Festive Christmas Gift &#x1f381; - Labo JNG WEB\",\"isPartOf\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#website\"},\"datePublished\":\"2020-12-21T06:51:36+00:00\",\"dateModified\":\"2020-12-19T08:58:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Labo Jng Web\",\"item\":\"https:\/\/jng-web.com\/labo\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML 5 et CSS 3\",\"item\":\"https:\/\/jng-web.com\/labo\/html-5-et-css-3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Une animation de No\u00ebl en HTML et CSS : &#x1f380;Festive Christmas Gift &#x1f381;\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jng-web.com\/labo\/#website\",\"url\":\"https:\/\/jng-web.com\/labo\/\",\"name\":\"Labo JNG WEB\",\"description\":\"R\u00e9f\u00e9rencement, Webmastering, CMS, Logiciels ...\",\"publisher\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jng-web.com\/labo\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\",\"name\":\"JNG WEB \/\/ J\u00e9r\u00f4me Guri\",\"url\":\"https:\/\/jng-web.com\/labo\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png\",\"contentUrl\":\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png\",\"width\":342,\"height\":110,\"caption\":\"JNG WEB \/\/ J\u00e9r\u00f4me Guri\"},\"image\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webmaster.referencement.dijon\",\"https:\/\/twitter.com\/jng_web\",\"https:\/\/fr.linkedin.com\/in\/jeromeguri\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590\",\"name\":\"J\u00e9r\u00f4me\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g\",\"caption\":\"J\u00e9r\u00f4me\"},\"description\":\"Passionn\u00e9 par le web, je m'int\u00e9resse depuis quelques ann\u00e9es aux technologies de l'information et de la communication, et plus particuli\u00e8rement \u00e0 la cr\u00e9ation et au r\u00e9f\u00e9rencement de sites internet.\",\"sameAs\":[\"http:\/\/www.jng-web.com\",\"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster\",\"https:\/\/twitter.com\/JngWeb21\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Une animation de No\u00ebl en HTML et CSS : &#x1f380;Festive Christmas Gift &#x1f381; - Labo JNG WEB","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-\ud83c\udf80festive-christmas-gift-\ud83c\udf81\/","og_locale":"fr_FR","og_type":"article","og_title":"Une animation de No\u00ebl en HTML et CSS : &#x1f380;Festive Christmas Gift &#x1f381; - Labo JNG WEB","og_description":"Sur le site codepen.io, vous pourrez d\u00e9couvrir un code HTML\/CSS intitul\u00e9 Festive Christmas Gift propos\u00e9 par Priyanka Patel. Ce code vous permet de mettre en &hellip;","og_url":"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-\ud83c\udf80festive-christmas-gift-\ud83c\udf81\/","og_site_name":"Labo JNG WEB","article_publisher":"https:\/\/www.facebook.com\/webmaster.referencement.dijon","article_author":"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster","article_published_time":"2020-12-21T06:51:36+00:00","article_modified_time":"2020-12-19T08:58:12+00:00","og_image":[{"width":1906,"height":475,"url":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2020\/12\/animation-noel.png","type":"image\/png"}],"author":"J\u00e9r\u00f4me","twitter_misc":{"\u00c9crit par":"J\u00e9r\u00f4me","Dur\u00e9e de lecture estim\u00e9e":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/#article","isPartOf":{"@id":"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/"},"author":{"name":"J\u00e9r\u00f4me","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590"},"headline":"Une animation de No\u00ebl en HTML et CSS : &#x1f380;Festive Christmas Gift &#x1f381;","datePublished":"2020-12-21T06:51:36+00:00","dateModified":"2020-12-19T08:58:12+00:00","mainEntityOfPage":{"@id":"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/"},"wordCount":68,"commentCount":0,"publisher":{"@id":"https:\/\/jng-web.com\/labo\/#organization"},"keywords":["CSS","HTML"],"articleSection":["HTML 5 et CSS 3"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/","url":"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/","name":"Une animation de No\u00ebl en HTML et CSS : &#x1f380;Festive Christmas Gift &#x1f381; - Labo JNG WEB","isPartOf":{"@id":"https:\/\/jng-web.com\/labo\/#website"},"datePublished":"2020-12-21T06:51:36+00:00","dateModified":"2020-12-19T08:58:12+00:00","breadcrumb":{"@id":"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jng-web.com\/labo\/une-animation-de-noel-en-html-et-css-%f0%9f%8e%80festive-christmas-gift-%f0%9f%8e%81\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Labo Jng Web","item":"https:\/\/jng-web.com\/labo\/"},{"@type":"ListItem","position":2,"name":"HTML 5 et CSS 3","item":"https:\/\/jng-web.com\/labo\/html-5-et-css-3\/"},{"@type":"ListItem","position":3,"name":"Une animation de No\u00ebl en HTML et CSS : &#x1f380;Festive Christmas Gift &#x1f381;"}]},{"@type":"WebSite","@id":"https:\/\/jng-web.com\/labo\/#website","url":"https:\/\/jng-web.com\/labo\/","name":"Labo JNG WEB","description":"R\u00e9f\u00e9rencement, Webmastering, CMS, Logiciels ...","publisher":{"@id":"https:\/\/jng-web.com\/labo\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jng-web.com\/labo\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/jng-web.com\/labo\/#organization","name":"JNG WEB \/\/ J\u00e9r\u00f4me Guri","url":"https:\/\/jng-web.com\/labo\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/","url":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png","contentUrl":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png","width":342,"height":110,"caption":"JNG WEB \/\/ J\u00e9r\u00f4me Guri"},"image":{"@id":"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webmaster.referencement.dijon","https:\/\/twitter.com\/jng_web","https:\/\/fr.linkedin.com\/in\/jeromeguri"]},{"@type":"Person","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590","name":"J\u00e9r\u00f4me","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g","caption":"J\u00e9r\u00f4me"},"description":"Passionn\u00e9 par le web, je m'int\u00e9resse depuis quelques ann\u00e9es aux technologies de l'information et de la communication, et plus particuli\u00e8rement \u00e0 la cr\u00e9ation et au r\u00e9f\u00e9rencement de sites internet.","sameAs":["http:\/\/www.jng-web.com","https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster","https:\/\/twitter.com\/JngWeb21"]}]}},"views":7974,"_links":{"self":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts\/18404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/comments?post=18404"}],"version-history":[{"count":0,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts\/18404\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/media\/18405"}],"wp:attachment":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/media?parent=18404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/categories?post=18404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/tags?post=18404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}