<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>
* {
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.