Une devanture de magasin en CSS

Sur le site codepen.io, vous pourrez découvrir un code HTML/CSS intitulé Cafe illustration proposé par Albert.

Pour réaliser cette illustration, vous pouvez le faire via un logiciel tel que Illustrator ou Inkscape. Toutefois, dans le cas présent, cette illustration a été réalisée en CSS et HTML.

Le code HTML

<div class="wrapper">
  <div class="building-wrapper">
    <div class="door-wrapper">
      <div class="door-window">
        <div class="door-knob"></div>
        <div class="door-sign"></div>
        <div class="door-sign-strings"></div>
      </div>
    </div>

    <div class="window window-1">
      <div class="window-chair-1"></div>
      <div class="window-chair-2"></div>
      <div class="window-table"></div>
      <div class="windowsill"></div>
      <div class="windowpane"></div>
    </div>

    <div class="window window-2">
      <div class="window-chair-1"></div>
      <div class="window-chair-2"></div>
      <div class="window-table"></div>
      <div class="windowsill"></div>
      <div class="windowpane"></div>
    </div>

    <div class="foundation-1"></div>
    <div class="foundation-2"></div>
    <div class="building-1"></div>

    <div class="roof-wrapper">
      <div class="roof-tile"></div>
      <div class="roof-tile"></div>
      <div class="roof-tile"></div>
      <div class="roof-tile"></div>
      <div class="roof-tile"></div>
      <div class="roof-tile"></div>
      <div class="roof-tile"></div>
      <div class="roof-tile"></div>
      <div class="roof-tile"></div>
    </div>

    <div class="ridge"></div>

    <div class="roof-wrapper-top">
      <div class="roof-tile-top-base roof-tile-top-1"></div>
      <div class="roof-tile-top-base roof-tile-top-2"></div>
      <div class="roof-tile-top-base roof-tile-top-3"></div>
      <div class="roof-tile-top-base roof-tile-top-4"></div>
      <div class="roof-tile-top-base roof-tile-top-5"></div>
      <div class="roof-tile-top-base roof-tile-top-6"></div>
      <div class="roof-tile-top-base roof-tile-top-7"></div>
      <div class="roof-tile-top-base roof-tile-top-8"></div>
    </div>

    <div class="dustbin"></div>

  </div>
  <div class="bush-wrapper">
    <div class="pot"></div>
    <div class="stem-1"></div>
    <div class="stem-2"></div>
    <div class="stem-3"></div>

    <div class="branch-1">
      <div class="branch-1-1"></div>
      <div class="branch-1-2"></div>
    </div>
    <div class="branch-2">
      <div class="branch-2-1"></div>
      <div class="branch-2-2"></div>
      <div class="branch-2-3"></div>
    </div>
  </div>
  <div class="base"></div>

  <div class="cloud1">
    <div class="c1-1"></div>
    <div class="c1-2"></div>
    <div class="c1-3"></div>
  </div>
  <div class="cloud2">
    <div class="c2-1"></div>
    <div class="c2-2"></div>
    <div class="c2-3"></div>
    <div class="c2-4"></div>
    <div class="c2-5"></div>
  </div>
  <div class="cloud3">
    <div class="c3-1"></div>
    <div class="c3-2"></div>
  </div>
</div>

<div class="twitter">
  <a href="https://twitter.com/albertwalicki?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @albertwalicki</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Le CSS

* {
    box-sizing: border-box;
  }

  :root {
    --bg: #E2E2E2;
    --outline: #2E255E;
    --white-dark: #D6D6D6;
    --grey: #D6D6D6;
    --pink-light: #F5969C;
    --pink: #DB6B7B;
    --pink-dark: #D0556A;
    --yellow: #F5A623;
    --yellow-dark: #D68820;
    --blue: rgb(102, 205, 253);
    --blue-light: rgb(147, 219, 253);
    --green: #13A46A;
    --green-dark: #0B8E57;
    --green-light: #38D188;
    --khaki: #D49D7F;
    --brown: #632D1B;
    --brown-light: #69351F;
    --brown-dark: #562315;
  }
  body {
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
  }

  .wrapper {
    max-width: 706px;
    width: 100%;
    position: relative;
  }

  .building-wrapper {
    width: 528px;
    position: relative;
    margin: 0 auto;
  }

  .building-wrapper:before {
    content: '';
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom:0;
    background: 
      /* left side of left window*/
      linear-gradient(var(--pink-dark), var(--pink-dark)) 28px 76px / 14px 12px,
      /* bottom side of left window */
      linear-gradient(var(--pink-dark), var(--pink-dark)) 69px 237px / 26px 12px,
      linear-gradient(var(--pink-dark), var(--pink-dark)) 55px 251px / 26px 12px,
      linear-gradient(var(--pink-dark), var(--pink-dark)) 84px 251px / 26px 12px,

      /* right side of left window */
      linear-gradient(var(--pink-dark), var(--pink-dark)) 165px 97px / 21px 12px,
      linear-gradient(var(--pink-dark), var(--pink-dark)) 178px 112px / 26px 12px,
      linear-gradient(var(--pink-dark), var(--pink-dark)) 179px 237px / 26px 12px,

      /* left side of right window */
      linear-gradient(var(--pink-dark), var(--pink-dark)) 351px 73px / 21px 12px,
      linear-gradient(var(--pink-dark), var(--pink-dark)) 327px 187px / 21px 12px,
      linear-gradient(var(--pink-dark), var(--pink-dark)) 338px 251px / 21px 12px,
      /* right side of right window */
      linear-gradient(var(--pink-dark), var(--pink-dark)) 463px 252px / 26px 12px,
      linear-gradient(var(--pink-dark), var(--pink-dark)) 448px 237px / 26px 12px;
    background-repeat: no-repeat;
    opacity: 0.7;
    
  }

  .base {
    height: 8px;
    width: 100%;
    border-radius:4px;
    background: var(--outline);
  }

  .building-1 {
    width:484px;
    height: 330px;
    background: var(--pink-light);
    margin: 0 auto;
    border-left: 6px solid var(--outline);
    border-right: 6px solid var(--outline);
  }
  .foundation-1 {
    position: absolute;
    left:4px;
    bottom:0;
    border: 6px solid var(--outline);
    border-bottom: none;
    background: var(--pink);
    width: 201px;
    height: 60px;
    border-radius: 4px 4px 0 0;
  }

  .foundation-2 {
    position: absolute;
    right:4px;
    bottom:0;
    border: 6px solid var(--outline);
    border-bottom: none;
    background: var(--pink);
    width: 201px;
    height: 60px;
    border-radius: 4px 4px 0 0;
  }

  .foundation-1:before,
  .foundation-2:before {
    content: '';
    position: absolute;
    left:0;
    top: 0;
    bottom:0;
    width: 5px;
    background: var(--pink-dark);
  }
  .foundation-1:after,
  .foundation-2:after {
    content: '';
    position: absolute;
    right:0;
    top: 0;
    bottom:0;
    width: 5px;
    background: var(--pink-dark);
  }

  .door-wrapper {
    position: absolute;
    right: 0px;
    left: 0px;
    margin: 0 auto;
    bottom: 0;
    border: 6px solid var(--outline);
    border-bottom: none;
    width: 142px;
    height: 294px;
    background: var(--khaki);
  }

  .door-window {
    position: absolute;
    right: 9px;
    left: 9px;
    top:10px;
    height: 212px;
    border: 6px solid var(--outline);
    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);
  }

  .door-knob {
    position: absolute;
    left: 10px;
    top: 84px;
    width: 10px;
    height: 57px;
    background: var(--outline);
    border-radius: 10px;
  }
  .door-sign {
    position: absolute;
    top: 67px;
    left: 27px;
    width: 56px;
    height: 28px;
    transform: rotate(-12deg);
    background: var(--grey);
    border: 3px solid var(--outline);
    box-shadow: inset 0px 0px 0px 6px white;
  }
  .door-sign-strings {
    position: absolute;
    top:44px;
    left: 50px;
    border-radius: 10px;
    width: 5px;
    height:5px;
    background: var(--outline);
  }

  .door-sign-strings:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 6px;
    width: 2px;
    height: 22px;
    transform: rotate(-25deg);
    background: var(--outline);
  }
  .door-sign-strings:after {
    content: '';
    position: absolute;
    top: 1px;
    right: 7px;
    width: 2px;
    height: 27px;
    transform: rotate(21deg);
    background: var(--outline);
  }

  .window {
    position: absolute;
    bottom: 50px;
  }
  .window-1 {
    bottom: 97px;
    left: 49px;
  }
  .window-2 {
    bottom: 97px;
    right: 49px;
  }
  .windowpane {
    border: 6px solid var(--outline);
    background: var(--khaki);
    width: 123px;
    height: 20px;
    border-radius: 4px;
  }

  .windowsill {
    border: 6px solid var(--outline);
    border-bottom: none;
    width: 109px;
    height: 177px;
    margin: 0 auto;
    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);
  }

  .window-chair-1 {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 9px;
    height: 38px;
    border-radius: 5px 5px 0 0 ;
    background: var(--outline);
    opacity: 0.4;
  }
  .window-chair-2 {
    position: absolute;
    right: 26px;
    bottom: 20px;
    width: 9px;
    height: 38px;
    border-radius: 5px 5px 0 0 ;
    background: var(--outline);
    opacity: 0.3;
  }
  .window-table {
    position: absolute;
    left: 48px;
    bottom: 20px;
    background: var(--outline);
    width: 17px;
    opacity: 0.3;
    height: 7px;
  }
  .window-table:after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: -14px;
    background: var(--outline);
    border-radius: 5px;
    width: 44px;
    height: 7px;
  }

  .window-2 .window-chair-1 {
    left: initial;
    right: 20px;
  }
  .window-2 .window-chair-2 {
    right: initial;
    left: 26px;
  }
  .window-2 .window-table {
    left: initial;
    right: 48px;
  }

  .roof-wrapper {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: flex-start;

  }

  .roof-tile {
    width: 63px;
    height: 66px;
    border-radius: 0 0 50% 50%;
    border: 6px solid var(--outline);
    margin: 0 -5px 0 0px;
    position: relative;
    z-index: 1;
  }

  .roof-tile:nth-child(odd) {
    background: var(--white-dark);
  }

  .roof-tile:nth-child(even) {
    background: var(--yellow-dark);
  }

  .roof-wrapper-top {
    position: absolute;
    top: -97px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: flex-start;
    background: #fff;
    clip-path: polygon(4.5% 0%, 95.5% 0, 100% 100%, 0% 100%);

  }

  .roof-wrapper-top:before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    width: 6px;
    height: 100px;
    transform: skewX(-14deg);
    background: var(--outline);
    z-index:10;
  }
  .roof-wrapper-top:after {
    content: '';
    position: absolute;
    right: 12px;
    top: 0;
    width: 6px;
    height: 100px;
    transform: skewX(14deg);
    background: var(--outline);
    z-index:10;
  }


  .roof-tile-top-base {
    position: absolute;
    width: 66px;
    height: 100px;
  }
  .roof-tile-top-1 {
    border-right: 6px solid var(--outline);
    transform: skew(-10deg);
    background: #fff;
    left: 6px;
    z-index: 8;
  }
  .roof-tile-top-2 {
    border-right: 6px solid var(--outline);
    transform: skew(-7deg);
    background: var(--yellow);
    left: 62px;
    z-index: 7;
  }
  .roof-tile-top-3 {
    border-right: 6px solid var(--outline);
    transform: skew(-5deg);
    background: #fff;
    left: 117px;
    z-index: 6;
  }
  .roof-tile-top-4 {
    border-right: 6px solid var(--outline);
    background: var(--yellow);
    transform: skew(-2deg);
    left: 173px;
  }
  .roof-tile-top-5 {
    border-left: 6px solid var(--outline);
    transform: skew(2deg);
    background: var(--yellow);
    right: 173px;
  }
  .roof-tile-top-6 {
    border-left: 6px solid var(--outline);
    transform: skew(5deg);
    background: #fff;
    right: 117px;
  }
  .roof-tile-top-7 {
    border-left: 6px solid var(--outline);
    transform: skew(7deg);
    background: var(--yellow);
    right: 62px;
  }
  .roof-tile-top-8 {
    border-left: 6px solid var(--outline);
    transform: skew(10deg);
    background: #fff;
    z-index: 8;
    right: 6px;
  }

  .ridge {
    position: absolute;
    top: -116px;
    left: 23px;
    right: 23px;
    height: 25px;
    border: 6px solid var(--outline);
    background: linear-gradient(0deg, var(--pink-dark) 10px, var(--pink-light) 10px);
    z-index: 1;
  }

  .dustbin {
    position: absolute;
    right: -8px;
    bottom: 0;
    width: 43px;
    height: 152px;
    border: 6px solid var(--outline);
    border-bottom: none;
    background: linear-gradient(90deg, var(--grey) 6px, #fff 6px, #fff 25px, var(--grey) 25px);
  }

  .dustbin:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 18px;
    border-radius: 0 0 6px 6px;
    background: var(--outline);
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
  }

  .bush-wrapper {
    position: absolute;
    left:10px;
    bottom:7px;
  }

  .pot {
    width: 67px;
    height: 58px;
    background: var(--outline);
    clip-path: polygon(0 0, 100% 1%, 88% 100%, 12% 100%);
  }

  .pot:before {
    content: '';
    position: absolute;
    top:6px;
    left:6px;
    right:6px;
    bottom:0px;
    clip-path: polygon(0 0, 100% 1%, 88% 100%, 12% 100%);
    background: linear-gradient(97deg, var(--brown-light) 40px, var(--brown) 30px);
    background-repeat: no-repeat;
  }
  .pot:after {
    content: '';
    position: absolute;
    top:6px;
    left:6px;
    right:6px;
    bottom:0px;
    clip-path: polygon(0 0, 100% 1%, 88% 100%, 12% 100%);
    background: 
    linear-gradient(var(--brown-dark), var(--brown-dark)) 5px 23px / 14px 8px,
    linear-gradient(var(--brown-dark), var(--brown-dark)) 26px 35px / 24px 8px,
    linear-gradient(var(--brown-dark), var(--brown-dark)) 33px 8px / 24px 8px;
    background-repeat: no-repeat;
  }

  .stem-1 {
    position: absolute;
    top: -53px;
    left: 30px;
    width: 6px;
    height: 55px;
    background: var(--outline);
  }
  .stem-2 {
    position: absolute;
    z-index: 2;
    top: -101px;
    left: 46px;
    width: 6px;
    height: 75px;
    border-radius: 2px;
    background: var(--outline);
  }

  .stem-2:before {
    content: '';
    position: absolute;
    background: var(--outline);
    border-radius: 2px;
    width: 6px;
    height: 20px;
    transform: rotate(45deg);
    top: 11px;
    right: -7px;
  }
  .stem-2:after {
    content: '';
    position: absolute;
    background: var(--outline);
    border-radius: 2px;
    width: 6px;
    height: 23px;
    transform: rotate(57deg);
    top: 67px;
    right: 8px;
  }

  .stem-3 {
    position: absolute;
    top: -26px;
    left: 24px;
    width: 6px;
    height: 18px;
    background: var(--outline);
    transform: rotate(-73deg);
  }
  .stem-3:before {
    content: '';
    position: absolute;
    top: -8px;
    left: 4px;
    background: var(--outline);
    width: 6px;
    height: 13px;
    transform: rotate(-113deg);
  }

  .branch-1 {
    position: absolute;
    top: -97px;
    left: -10px;
    width: 40px;
    height: 70px;
    border: 6px solid var(--outline);
    background: var(--green);
    background-repeat: no-repeat;
    border-radius: 30px;
    z-index: 2;
  }
  .branch-2 {
    position: absolute;
    top: -147px;
    left: 20px;
    width: 56px;
    height: 100px;
    border: 6px solid var(--outline);
    background: var(--green);
    border-radius: 30px;
  }

  .branch-1-1 {
    position: absolute;
    border-radius: 4px;
    background: var(--green-light);
    width: 7px;
    height: 11px;
    transform: rotate(-30deg);
    top: 14px;
    left: 10px;
  }
  .branch-1-2 {
    position: absolute;
    border-radius: 4px;
    background: var(--green-dark);
    width: 7px;
    height: 11px;
    transform: rotate(-30deg);
    top: 29px;
    left: 10px;
  }


  .branch-2-1 {
    position: absolute;
    border-radius: 4px;
    background: var(--green-light);
    width: 7px;
    height: 14px;
    transform: rotate(-30deg);
    top: 10px;
    left: 26px;
  }
  .branch-2-2 {
    position: absolute;
    border-radius: 4px;
    background: var(--green-dark);
    width: 7px;
    height: 14px;
    transform: rotate(-30deg);
    top: 14px;
    left: 15px;
  }
  .branch-2-3 {
    position: absolute;
    border-radius: 4px;
    background: var(--green-dark);
    width: 7px;
    height: 14px;
    transform: rotate(-30deg);
    top: 32px;
    left: 10px;
  }

  .cloud1 {
    position: absolute;
    top: -85px;
    left: -45px;
    display: flex;
    z-index: -1;
  }
  .cloud2 {
    position: absolute;
    top: -212px;
    left: 161px;
    display: flex;
    z-index: -1;
    width: 240px;
  }
  .cloud2:after {
    content: '';
    position: absolute;
    width: 120px;
    height: 30px;
    background: #fff;
    right: 40px;
    top: 10px;
  }
  .cloud3 {
    position: absolute;
    top: -175px;
    right: 1px;
    display: flex;
    z-index: -1;
  }

  .cloud1 div,
  .cloud2 div,
  .cloud3 div {
    border-radius: 50%;
    background: #fff;;
  }

  .cloud1:before,
  .cloud2:before,
  .cloud3:before {
    content: '';
    position: absolute;
    top:50%;
    left:0;
    right: 0;
    height: 50px;
    background: var(--bg);
    z-index: 1;
  }

  .c1-1 {
    width: 88px;
    height: 86px;
  }
  .c1-2 {
    position: relative;
    width: 50px;
    height: 50px;
    top: 15px;
    right: 18px;
  }
  .c1-3 {
    width: 30px;
    height: 30px;
    position: relative;
    top: 27px;
    left: -27px;
  }

  .c2-1{
    width: 70px;
    height: 70px;
    position: relative;
    top: -6px;
  }
  .c2-2{
    width: 100px;
    height: 100px;
    position: absolute;
    top: -45px;
    left: 47px;
  }
  .c2-3{
    width: 50px;
    height: 50px;
    position: relative;
    right: -55px;
    top: -22px;
  }
  .c2-4{
    width: 30px;
    height: 30px;
    position: relative;
    top: 0px;
    right: -47px;
  }
  .c2-5{
    width: 50px;
    height: 50px;
    position: relative;
    right: -37px;
    top: 9px;
  }

  .c3-1 {
    width: 80px;
    height: 80px;
  }
  .c3-2 {
    width: 35px;
    height: 35px;
    position: relative;
    top: 17px;
    left: -7px;
  }

.twitter {
  position: fixed;
  bottom:20px;
  right:20px;
  padding: 12px;
  background: #fff;
  box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.12);
  max-width: 205px;
}

Source : https://codepen.io/walickialbert/pen/eYBqbPa