{"id":18488,"date":"2021-03-31T09:48:41","date_gmt":"2021-03-31T07:48:41","guid":{"rendered":"https:\/\/www.jng-web.com\/labo\/?p=18488"},"modified":"2021-03-31T09:48:41","modified_gmt":"2021-03-31T07:48:41","slug":"une-devanture-de-magasin-en-css","status":"publish","type":"post","link":"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/","title":{"rendered":"Une devanture de magasin en CSS"},"content":{"rendered":"<div class=\"advads-avant-le-contenu\" id=\"advads-687653988\"><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-2981120486\"><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\/walickialbert\/pen\/eYBqbPa\" target=\"_blank\" rel=\"noopener\">Cafe illustration<\/a> propos\u00e9 par <a href=\"https:\/\/codepen.io\/walickialbert\" target=\"_blank\" rel=\"noopener\">Albert.<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-18489\" src=\"https:\/\/www.jng-web.com\/labo\/wp-content\/uploads\/2021\/03\/cafe-illustration-css.png\" alt=\"cafe illustration css\" width=\"865\" height=\"437\" srcset=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2021\/03\/cafe-illustration-css.png 865w, https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2021\/03\/cafe-illustration-css-300x152.png 300w, https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2021\/03\/cafe-illustration-css-768x388.png 768w\" sizes=\"auto, (max-width: 865px) 100vw, 865px\" \/><\/p>\n<p>Pour r\u00e9aliser cette illustration, vous pouvez le faire via un logiciel tel que Illustrator ou Inkscape. Toutefois, dans le cas pr\u00e9sent, cette illustration a \u00e9t\u00e9 r\u00e9alis\u00e9e en CSS et HTML.<\/p>\n<h2>Le code HTML<\/h2>\n<pre class=\"brush: html; gutter: true; first-line: 1\">&lt;div class=\"wrapper\"&gt;\r\n  &lt;div class=\"building-wrapper\"&gt;\r\n    &lt;div class=\"door-wrapper\"&gt;\r\n      &lt;div class=\"door-window\"&gt;\r\n        &lt;div class=\"door-knob\"&gt;&lt;\/div&gt;\r\n        &lt;div class=\"door-sign\"&gt;&lt;\/div&gt;\r\n        &lt;div class=\"door-sign-strings\"&gt;&lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=\"window window-1\"&gt;\r\n      &lt;div class=\"window-chair-1\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"window-chair-2\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"window-table\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"windowsill\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"windowpane\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=\"window window-2\"&gt;\r\n      &lt;div class=\"window-chair-1\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"window-chair-2\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"window-table\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"windowsill\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"windowpane\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=\"foundation-1\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"foundation-2\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"building-1\"&gt;&lt;\/div&gt;\r\n\r\n    &lt;div class=\"roof-wrapper\"&gt;\r\n      &lt;div class=\"roof-tile\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=\"ridge\"&gt;&lt;\/div&gt;\r\n\r\n    &lt;div class=\"roof-wrapper-top\"&gt;\r\n      &lt;div class=\"roof-tile-top-base roof-tile-top-1\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile-top-base roof-tile-top-2\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile-top-base roof-tile-top-3\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile-top-base roof-tile-top-4\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile-top-base roof-tile-top-5\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile-top-base roof-tile-top-6\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile-top-base roof-tile-top-7\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"roof-tile-top-base roof-tile-top-8\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=\"dustbin\"&gt;&lt;\/div&gt;\r\n\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"bush-wrapper\"&gt;\r\n    &lt;div class=\"pot\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"stem-1\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"stem-2\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"stem-3\"&gt;&lt;\/div&gt;\r\n\r\n    &lt;div class=\"branch-1\"&gt;\r\n      &lt;div class=\"branch-1-1\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"branch-1-2\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"branch-2\"&gt;\r\n      &lt;div class=\"branch-2-1\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"branch-2-2\"&gt;&lt;\/div&gt;\r\n      &lt;div class=\"branch-2-3\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"base\"&gt;&lt;\/div&gt;\r\n\r\n  &lt;div class=\"cloud1\"&gt;\r\n    &lt;div class=\"c1-1\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"c1-2\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"c1-3\"&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"cloud2\"&gt;\r\n    &lt;div class=\"c2-1\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"c2-2\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"c2-3\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"c2-4\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"c2-5\"&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"cloud3\"&gt;\r\n    &lt;div class=\"c3-1\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"c3-2\"&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"twitter\"&gt;\r\n  &lt;a href=\"https:\/\/twitter.com\/albertwalicki?ref_src=twsrc%5Etfw\" class=\"twitter-follow-button\" data-show-count=\"false\"&gt;Follow @albertwalicki&lt;\/a&gt;&lt;script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"&gt;&lt;\/script&gt;\r\n&lt;\/div&gt;<\/pre>\n<h2>Le CSS<\/h2>\n<pre class=\"brush: css; gutter: true; first-line: 1\">* {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  :root {\r\n    --bg: #E2E2E2;\r\n    --outline: #2E255E;\r\n    --white-dark: #D6D6D6;\r\n    --grey: #D6D6D6;\r\n    --pink-light: #F5969C;\r\n    --pink: #DB6B7B;\r\n    --pink-dark: #D0556A;\r\n    --yellow: #F5A623;\r\n    --yellow-dark: #D68820;\r\n    --blue: rgb(102, 205, 253);\r\n    --blue-light: rgb(147, 219, 253);\r\n    --green: #13A46A;\r\n    --green-dark: #0B8E57;\r\n    --green-light: #38D188;\r\n    --khaki: #D49D7F;\r\n    --brown: #632D1B;\r\n    --brown-light: #69351F;\r\n    --brown-dark: #562315;\r\n  }\r\n  body {\r\n    background: var(--bg);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 100vh;\r\n    margin: 0;\r\n  }\r\n\r\n  .wrapper {\r\n    max-width: 706px;\r\n    width: 100%;\r\n    position: relative;\r\n  }\r\n\r\n  .building-wrapper {\r\n    width: 528px;\r\n    position: relative;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .building-wrapper:before {\r\n    content: '';\r\n    position: absolute;\r\n    top:0;\r\n    left:0;\r\n    right: 0;\r\n    bottom:0;\r\n    background: \r\n      \/* left side of left window*\/\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 28px 76px \/ 14px 12px,\r\n      \/* bottom side of left window *\/\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 69px 237px \/ 26px 12px,\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 55px 251px \/ 26px 12px,\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 84px 251px \/ 26px 12px,\r\n\r\n      \/* right side of left window *\/\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 165px 97px \/ 21px 12px,\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 178px 112px \/ 26px 12px,\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 179px 237px \/ 26px 12px,\r\n\r\n      \/* left side of right window *\/\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 351px 73px \/ 21px 12px,\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 327px 187px \/ 21px 12px,\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 338px 251px \/ 21px 12px,\r\n      \/* right side of right window *\/\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 463px 252px \/ 26px 12px,\r\n      linear-gradient(var(--pink-dark), var(--pink-dark)) 448px 237px \/ 26px 12px;\r\n    background-repeat: no-repeat;\r\n    opacity: 0.7;\r\n    \r\n  }\r\n\r\n  .base {\r\n    height: 8px;\r\n    width: 100%;\r\n    border-radius:4px;\r\n    background: var(--outline);\r\n  }\r\n\r\n  .building-1 {\r\n    width:484px;\r\n    height: 330px;\r\n    background: var(--pink-light);\r\n    margin: 0 auto;\r\n    border-left: 6px solid var(--outline);\r\n    border-right: 6px solid var(--outline);\r\n  }\r\n  .foundation-1 {\r\n    position: absolute;\r\n    left:4px;\r\n    bottom:0;\r\n    border: 6px solid var(--outline);\r\n    border-bottom: none;\r\n    background: var(--pink);\r\n    width: 201px;\r\n    height: 60px;\r\n    border-radius: 4px 4px 0 0;\r\n  }\r\n\r\n  .foundation-2 {\r\n    position: absolute;\r\n    right:4px;\r\n    bottom:0;\r\n    border: 6px solid var(--outline);\r\n    border-bottom: none;\r\n    background: var(--pink);\r\n    width: 201px;\r\n    height: 60px;\r\n    border-radius: 4px 4px 0 0;\r\n  }\r\n\r\n  .foundation-1:before,\r\n  .foundation-2:before {\r\n    content: '';\r\n    position: absolute;\r\n    left:0;\r\n    top: 0;\r\n    bottom:0;\r\n    width: 5px;\r\n    background: var(--pink-dark);\r\n  }\r\n  .foundation-1:after,\r\n  .foundation-2:after {\r\n    content: '';\r\n    position: absolute;\r\n    right:0;\r\n    top: 0;\r\n    bottom:0;\r\n    width: 5px;\r\n    background: var(--pink-dark);\r\n  }\r\n\r\n  .door-wrapper {\r\n    position: absolute;\r\n    right: 0px;\r\n    left: 0px;\r\n    margin: 0 auto;\r\n    bottom: 0;\r\n    border: 6px solid var(--outline);\r\n    border-bottom: none;\r\n    width: 142px;\r\n    height: 294px;\r\n    background: var(--khaki);\r\n  }\r\n\r\n  .door-window {\r\n    position: absolute;\r\n    right: 9px;\r\n    left: 9px;\r\n    top:10px;\r\n    height: 212px;\r\n    border: 6px solid var(--outline);\r\n    background: linear-gradient(-60deg, var(--blue-light) 43px, var(--blue) 43px, var(--blue) 49px, var(--blue-light) 49px, var(--blue-light) 66px, var(--blue) 66px, var(--blue) 73px, var(--blue-light) 73px, var(--blue-light) 79px, var(--blue) 79px);\r\n  }\r\n\r\n  .door-knob {\r\n    position: absolute;\r\n    left: 10px;\r\n    top: 84px;\r\n    width: 10px;\r\n    height: 57px;\r\n    background: var(--outline);\r\n    border-radius: 10px;\r\n  }\r\n  .door-sign {\r\n    position: absolute;\r\n    top: 67px;\r\n    left: 27px;\r\n    width: 56px;\r\n    height: 28px;\r\n    transform: rotate(-12deg);\r\n    background: var(--grey);\r\n    border: 3px solid var(--outline);\r\n    box-shadow: inset 0px 0px 0px 6px white;\r\n  }\r\n  .door-sign-strings {\r\n    position: absolute;\r\n    top:44px;\r\n    left: 50px;\r\n    border-radius: 10px;\r\n    width: 5px;\r\n    height:5px;\r\n    background: var(--outline);\r\n  }\r\n\r\n  .door-sign-strings:before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 1px;\r\n    left: 6px;\r\n    width: 2px;\r\n    height: 22px;\r\n    transform: rotate(-25deg);\r\n    background: var(--outline);\r\n  }\r\n  .door-sign-strings:after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 1px;\r\n    right: 7px;\r\n    width: 2px;\r\n    height: 27px;\r\n    transform: rotate(21deg);\r\n    background: var(--outline);\r\n  }\r\n\r\n  .window {\r\n    position: absolute;\r\n    bottom: 50px;\r\n  }\r\n  .window-1 {\r\n    bottom: 97px;\r\n    left: 49px;\r\n  }\r\n  .window-2 {\r\n    bottom: 97px;\r\n    right: 49px;\r\n  }\r\n  .windowpane {\r\n    border: 6px solid var(--outline);\r\n    background: var(--khaki);\r\n    width: 123px;\r\n    height: 20px;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .windowsill {\r\n    border: 6px solid var(--outline);\r\n    border-bottom: none;\r\n    width: 109px;\r\n    height: 177px;\r\n    margin: 0 auto;\r\n    background: linear-gradient(-60deg, var(--blue-light) 43px, var(--blue) 43px, var(--blue) 49px, var(--blue-light) 49px, var(--blue-light) 66px, var(--blue) 66px, var(--blue) 73px, var(--blue-light) 73px, var(--blue-light) 79px, var(--blue) 79px);\r\n  }\r\n\r\n  .window-chair-1 {\r\n    position: absolute;\r\n    left: 20px;\r\n    bottom: 20px;\r\n    width: 9px;\r\n    height: 38px;\r\n    border-radius: 5px 5px 0 0 ;\r\n    background: var(--outline);\r\n    opacity: 0.4;\r\n  }\r\n  .window-chair-2 {\r\n    position: absolute;\r\n    right: 26px;\r\n    bottom: 20px;\r\n    width: 9px;\r\n    height: 38px;\r\n    border-radius: 5px 5px 0 0 ;\r\n    background: var(--outline);\r\n    opacity: 0.3;\r\n  }\r\n  .window-table {\r\n    position: absolute;\r\n    left: 48px;\r\n    bottom: 20px;\r\n    background: var(--outline);\r\n    width: 17px;\r\n    opacity: 0.3;\r\n    height: 7px;\r\n  }\r\n  .window-table:after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 6px;\r\n    left: -14px;\r\n    background: var(--outline);\r\n    border-radius: 5px;\r\n    width: 44px;\r\n    height: 7px;\r\n  }\r\n\r\n  .window-2 .window-chair-1 {\r\n    left: initial;\r\n    right: 20px;\r\n  }\r\n  .window-2 .window-chair-2 {\r\n    right: initial;\r\n    left: 26px;\r\n  }\r\n  .window-2 .window-table {\r\n    left: initial;\r\n    right: 48px;\r\n  }\r\n\r\n  .roof-wrapper {\r\n    position: absolute;\r\n    top:0;\r\n    left: 0;\r\n    right: 0;\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: flex-start;\r\n\r\n  }\r\n\r\n  .roof-tile {\r\n    width: 63px;\r\n    height: 66px;\r\n    border-radius: 0 0 50% 50%;\r\n    border: 6px solid var(--outline);\r\n    margin: 0 -5px 0 0px;\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  .roof-tile:nth-child(odd) {\r\n    background: var(--white-dark);\r\n  }\r\n\r\n  .roof-tile:nth-child(even) {\r\n    background: var(--yellow-dark);\r\n  }\r\n\r\n  .roof-wrapper-top {\r\n    position: absolute;\r\n    top: -97px;\r\n    left: 0;\r\n    right: 0;\r\n    width: 100%;\r\n    height: 100px;\r\n    display: flex;\r\n    align-items: flex-start;\r\n    background: #fff;\r\n    clip-path: polygon(4.5% 0%, 95.5% 0, 100% 100%, 0% 100%);\r\n\r\n  }\r\n\r\n  .roof-wrapper-top:before {\r\n    content: '';\r\n    position: absolute;\r\n    left: 12px;\r\n    top: 0;\r\n    width: 6px;\r\n    height: 100px;\r\n    transform: skewX(-14deg);\r\n    background: var(--outline);\r\n    z-index:10;\r\n  }\r\n  .roof-wrapper-top:after {\r\n    content: '';\r\n    position: absolute;\r\n    right: 12px;\r\n    top: 0;\r\n    width: 6px;\r\n    height: 100px;\r\n    transform: skewX(14deg);\r\n    background: var(--outline);\r\n    z-index:10;\r\n  }\r\n\r\n\r\n  .roof-tile-top-base {\r\n    position: absolute;\r\n    width: 66px;\r\n    height: 100px;\r\n  }\r\n  .roof-tile-top-1 {\r\n    border-right: 6px solid var(--outline);\r\n    transform: skew(-10deg);\r\n    background: #fff;\r\n    left: 6px;\r\n    z-index: 8;\r\n  }\r\n  .roof-tile-top-2 {\r\n    border-right: 6px solid var(--outline);\r\n    transform: skew(-7deg);\r\n    background: var(--yellow);\r\n    left: 62px;\r\n    z-index: 7;\r\n  }\r\n  .roof-tile-top-3 {\r\n    border-right: 6px solid var(--outline);\r\n    transform: skew(-5deg);\r\n    background: #fff;\r\n    left: 117px;\r\n    z-index: 6;\r\n  }\r\n  .roof-tile-top-4 {\r\n    border-right: 6px solid var(--outline);\r\n    background: var(--yellow);\r\n    transform: skew(-2deg);\r\n    left: 173px;\r\n  }\r\n  .roof-tile-top-5 {\r\n    border-left: 6px solid var(--outline);\r\n    transform: skew(2deg);\r\n    background: var(--yellow);\r\n    right: 173px;\r\n  }\r\n  .roof-tile-top-6 {\r\n    border-left: 6px solid var(--outline);\r\n    transform: skew(5deg);\r\n    background: #fff;\r\n    right: 117px;\r\n  }\r\n  .roof-tile-top-7 {\r\n    border-left: 6px solid var(--outline);\r\n    transform: skew(7deg);\r\n    background: var(--yellow);\r\n    right: 62px;\r\n  }\r\n  .roof-tile-top-8 {\r\n    border-left: 6px solid var(--outline);\r\n    transform: skew(10deg);\r\n    background: #fff;\r\n    z-index: 8;\r\n    right: 6px;\r\n  }\r\n\r\n  .ridge {\r\n    position: absolute;\r\n    top: -116px;\r\n    left: 23px;\r\n    right: 23px;\r\n    height: 25px;\r\n    border: 6px solid var(--outline);\r\n    background: linear-gradient(0deg, var(--pink-dark) 10px, var(--pink-light) 10px);\r\n    z-index: 1;\r\n  }\r\n\r\n  .dustbin {\r\n    position: absolute;\r\n    right: -8px;\r\n    bottom: 0;\r\n    width: 43px;\r\n    height: 152px;\r\n    border: 6px solid var(--outline);\r\n    border-bottom: none;\r\n    background: linear-gradient(90deg, var(--grey) 6px, #fff 6px, #fff 25px, var(--grey) 25px);\r\n  }\r\n\r\n  .dustbin:before {\r\n    content: '';\r\n    position: absolute;\r\n    width: 14px;\r\n    height: 18px;\r\n    border-radius: 0 0 6px 6px;\r\n    background: var(--outline);\r\n    left: 0;\r\n    right: 0;\r\n    top: 0;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .bush-wrapper {\r\n    position: absolute;\r\n    left:10px;\r\n    bottom:7px;\r\n  }\r\n\r\n  .pot {\r\n    width: 67px;\r\n    height: 58px;\r\n    background: var(--outline);\r\n    clip-path: polygon(0 0, 100% 1%, 88% 100%, 12% 100%);\r\n  }\r\n\r\n  .pot:before {\r\n    content: '';\r\n    position: absolute;\r\n    top:6px;\r\n    left:6px;\r\n    right:6px;\r\n    bottom:0px;\r\n    clip-path: polygon(0 0, 100% 1%, 88% 100%, 12% 100%);\r\n    background: linear-gradient(97deg, var(--brown-light) 40px, var(--brown) 30px);\r\n    background-repeat: no-repeat;\r\n  }\r\n  .pot:after {\r\n    content: '';\r\n    position: absolute;\r\n    top:6px;\r\n    left:6px;\r\n    right:6px;\r\n    bottom:0px;\r\n    clip-path: polygon(0 0, 100% 1%, 88% 100%, 12% 100%);\r\n    background: \r\n    linear-gradient(var(--brown-dark), var(--brown-dark)) 5px 23px \/ 14px 8px,\r\n    linear-gradient(var(--brown-dark), var(--brown-dark)) 26px 35px \/ 24px 8px,\r\n    linear-gradient(var(--brown-dark), var(--brown-dark)) 33px 8px \/ 24px 8px;\r\n    background-repeat: no-repeat;\r\n  }\r\n\r\n  .stem-1 {\r\n    position: absolute;\r\n    top: -53px;\r\n    left: 30px;\r\n    width: 6px;\r\n    height: 55px;\r\n    background: var(--outline);\r\n  }\r\n  .stem-2 {\r\n    position: absolute;\r\n    z-index: 2;\r\n    top: -101px;\r\n    left: 46px;\r\n    width: 6px;\r\n    height: 75px;\r\n    border-radius: 2px;\r\n    background: var(--outline);\r\n  }\r\n\r\n  .stem-2:before {\r\n    content: '';\r\n    position: absolute;\r\n    background: var(--outline);\r\n    border-radius: 2px;\r\n    width: 6px;\r\n    height: 20px;\r\n    transform: rotate(45deg);\r\n    top: 11px;\r\n    right: -7px;\r\n  }\r\n  .stem-2:after {\r\n    content: '';\r\n    position: absolute;\r\n    background: var(--outline);\r\n    border-radius: 2px;\r\n    width: 6px;\r\n    height: 23px;\r\n    transform: rotate(57deg);\r\n    top: 67px;\r\n    right: 8px;\r\n  }\r\n\r\n  .stem-3 {\r\n    position: absolute;\r\n    top: -26px;\r\n    left: 24px;\r\n    width: 6px;\r\n    height: 18px;\r\n    background: var(--outline);\r\n    transform: rotate(-73deg);\r\n  }\r\n  .stem-3:before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -8px;\r\n    left: 4px;\r\n    background: var(--outline);\r\n    width: 6px;\r\n    height: 13px;\r\n    transform: rotate(-113deg);\r\n  }\r\n\r\n  .branch-1 {\r\n    position: absolute;\r\n    top: -97px;\r\n    left: -10px;\r\n    width: 40px;\r\n    height: 70px;\r\n    border: 6px solid var(--outline);\r\n    background: var(--green);\r\n    background-repeat: no-repeat;\r\n    border-radius: 30px;\r\n    z-index: 2;\r\n  }\r\n  .branch-2 {\r\n    position: absolute;\r\n    top: -147px;\r\n    left: 20px;\r\n    width: 56px;\r\n    height: 100px;\r\n    border: 6px solid var(--outline);\r\n    background: var(--green);\r\n    border-radius: 30px;\r\n  }\r\n\r\n  .branch-1-1 {\r\n    position: absolute;\r\n    border-radius: 4px;\r\n    background: var(--green-light);\r\n    width: 7px;\r\n    height: 11px;\r\n    transform: rotate(-30deg);\r\n    top: 14px;\r\n    left: 10px;\r\n  }\r\n  .branch-1-2 {\r\n    position: absolute;\r\n    border-radius: 4px;\r\n    background: var(--green-dark);\r\n    width: 7px;\r\n    height: 11px;\r\n    transform: rotate(-30deg);\r\n    top: 29px;\r\n    left: 10px;\r\n  }\r\n\r\n\r\n  .branch-2-1 {\r\n    position: absolute;\r\n    border-radius: 4px;\r\n    background: var(--green-light);\r\n    width: 7px;\r\n    height: 14px;\r\n    transform: rotate(-30deg);\r\n    top: 10px;\r\n    left: 26px;\r\n  }\r\n  .branch-2-2 {\r\n    position: absolute;\r\n    border-radius: 4px;\r\n    background: var(--green-dark);\r\n    width: 7px;\r\n    height: 14px;\r\n    transform: rotate(-30deg);\r\n    top: 14px;\r\n    left: 15px;\r\n  }\r\n  .branch-2-3 {\r\n    position: absolute;\r\n    border-radius: 4px;\r\n    background: var(--green-dark);\r\n    width: 7px;\r\n    height: 14px;\r\n    transform: rotate(-30deg);\r\n    top: 32px;\r\n    left: 10px;\r\n  }\r\n\r\n  .cloud1 {\r\n    position: absolute;\r\n    top: -85px;\r\n    left: -45px;\r\n    display: flex;\r\n    z-index: -1;\r\n  }\r\n  .cloud2 {\r\n    position: absolute;\r\n    top: -212px;\r\n    left: 161px;\r\n    display: flex;\r\n    z-index: -1;\r\n    width: 240px;\r\n  }\r\n  .cloud2:after {\r\n    content: '';\r\n    position: absolute;\r\n    width: 120px;\r\n    height: 30px;\r\n    background: #fff;\r\n    right: 40px;\r\n    top: 10px;\r\n  }\r\n  .cloud3 {\r\n    position: absolute;\r\n    top: -175px;\r\n    right: 1px;\r\n    display: flex;\r\n    z-index: -1;\r\n  }\r\n\r\n  .cloud1 div,\r\n  .cloud2 div,\r\n  .cloud3 div {\r\n    border-radius: 50%;\r\n    background: #fff;;\r\n  }\r\n\r\n  .cloud1:before,\r\n  .cloud2:before,\r\n  .cloud3:before {\r\n    content: '';\r\n    position: absolute;\r\n    top:50%;\r\n    left:0;\r\n    right: 0;\r\n    height: 50px;\r\n    background: var(--bg);\r\n    z-index: 1;\r\n  }\r\n\r\n  .c1-1 {\r\n    width: 88px;\r\n    height: 86px;\r\n  }\r\n  .c1-2 {\r\n    position: relative;\r\n    width: 50px;\r\n    height: 50px;\r\n    top: 15px;\r\n    right: 18px;\r\n  }\r\n  .c1-3 {\r\n    width: 30px;\r\n    height: 30px;\r\n    position: relative;\r\n    top: 27px;\r\n    left: -27px;\r\n  }\r\n\r\n  .c2-1{\r\n    width: 70px;\r\n    height: 70px;\r\n    position: relative;\r\n    top: -6px;\r\n  }\r\n  .c2-2{\r\n    width: 100px;\r\n    height: 100px;\r\n    position: absolute;\r\n    top: -45px;\r\n    left: 47px;\r\n  }\r\n  .c2-3{\r\n    width: 50px;\r\n    height: 50px;\r\n    position: relative;\r\n    right: -55px;\r\n    top: -22px;\r\n  }\r\n  .c2-4{\r\n    width: 30px;\r\n    height: 30px;\r\n    position: relative;\r\n    top: 0px;\r\n    right: -47px;\r\n  }\r\n  .c2-5{\r\n    width: 50px;\r\n    height: 50px;\r\n    position: relative;\r\n    right: -37px;\r\n    top: 9px;\r\n  }\r\n\r\n  .c3-1 {\r\n    width: 80px;\r\n    height: 80px;\r\n  }\r\n  .c3-2 {\r\n    width: 35px;\r\n    height: 35px;\r\n    position: relative;\r\n    top: 17px;\r\n    left: -7px;\r\n  }\r\n\r\n.twitter {\r\n  position: fixed;\r\n  bottom:20px;\r\n  right:20px;\r\n  padding: 12px;\r\n  background: #fff;\r\n  box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.12);\r\n  max-width: 205px;\r\n}<\/pre>\n<p style=\"text-align: center;\">Source : <a href=\"https:\/\/codepen.io\/walickialbert\/pen\/eYBqbPa\" target=\"_blank\" rel=\"noopener\">https:\/\/codepen.io\/walickialbert\/pen\/eYBqbPa<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sur le site codepen.io, vous pourrez d\u00e9couvrir un code HTML\/CSS intitul\u00e9 Cafe illustration propos\u00e9 par Albert. Pour r\u00e9aliser cette illustration, vous pouvez le faire via &hellip; <\/p>\n","protected":false},"author":2,"featured_media":18489,"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-18488","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 devanture de magasin en CSS - 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-devanture-de-magasin-en-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Une devanture de magasin en CSS - Labo JNG WEB\" \/>\n<meta property=\"og:description\" content=\"Sur le site codepen.io, vous pourrez d\u00e9couvrir un code HTML\/CSS intitul\u00e9 Cafe illustration propos\u00e9 par Albert. Pour r\u00e9aliser cette illustration, vous pouvez le faire via &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/\" \/>\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=\"2021-03-31T07:48:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2021\/03\/cafe-illustration-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"865\" \/>\n\t<meta property=\"og:image:height\" content=\"437\" \/>\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=\"8 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-devanture-de-magasin-en-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/\"},\"author\":{\"name\":\"J\u00e9r\u00f4me\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590\"},\"headline\":\"Une devanture de magasin en CSS\",\"datePublished\":\"2021-03-31T07:48:41+00:00\",\"dateModified\":\"2021-03-31T07:48:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/\"},\"wordCount\":71,\"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-devanture-de-magasin-en-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/\",\"url\":\"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/\",\"name\":\"Une devanture de magasin en CSS - Labo JNG WEB\",\"isPartOf\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#website\"},\"datePublished\":\"2021-03-31T07:48:41+00:00\",\"dateModified\":\"2021-03-31T07:48:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/#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 devanture de magasin en CSS\"}]},{\"@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 devanture de magasin en CSS - 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-devanture-de-magasin-en-css\/","og_locale":"fr_FR","og_type":"article","og_title":"Une devanture de magasin en CSS - Labo JNG WEB","og_description":"Sur le site codepen.io, vous pourrez d\u00e9couvrir un code HTML\/CSS intitul\u00e9 Cafe illustration propos\u00e9 par Albert. Pour r\u00e9aliser cette illustration, vous pouvez le faire via &hellip;","og_url":"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/","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":"2021-03-31T07:48:41+00:00","og_image":[{"width":865,"height":437,"url":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2021\/03\/cafe-illustration-css.png","type":"image\/png"}],"author":"J\u00e9r\u00f4me","twitter_misc":{"\u00c9crit par":"J\u00e9r\u00f4me","Dur\u00e9e de lecture estim\u00e9e":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/#article","isPartOf":{"@id":"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/"},"author":{"name":"J\u00e9r\u00f4me","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590"},"headline":"Une devanture de magasin en CSS","datePublished":"2021-03-31T07:48:41+00:00","dateModified":"2021-03-31T07:48:41+00:00","mainEntityOfPage":{"@id":"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/"},"wordCount":71,"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-devanture-de-magasin-en-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/","url":"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/","name":"Une devanture de magasin en CSS - Labo JNG WEB","isPartOf":{"@id":"https:\/\/jng-web.com\/labo\/#website"},"datePublished":"2021-03-31T07:48:41+00:00","dateModified":"2021-03-31T07:48:41+00:00","breadcrumb":{"@id":"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jng-web.com\/labo\/une-devanture-de-magasin-en-css\/#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 devanture de magasin en CSS"}]},{"@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":3339,"_links":{"self":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts\/18488","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=18488"}],"version-history":[{"count":0,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts\/18488\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/media\/18489"}],"wp:attachment":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/media?parent=18488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/categories?post=18488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/tags?post=18488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}