<!-- Inspiration https://www.vectorstock.com/royalty-free-vector/brick-townhouse-vector-5026965 -->
<!-- My blog: https://albertwalicki.com -->
<div class="body">
<div class="roof">
<div class="top">
<div class="chimney1"></div>
<div class="chimney2"></div>
<div class="antenna">
<span class="ant1"></span>
<span class="ant2"></span>
<span class="ant3"></span>
<span class="ant4"></span>
</div>
</div>
<div class="middle"></div>
<div class="bottom">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="floor floor1">
<div class="balcony">
<div class="grid">
<span></span>
</div>
<div class="flower"></div>
</div>
<div class="window window1">
<div class="windowTop"></div>
<div class="windowFrame"></div>
<div class="windowBottom"></div>
</div>
<div class="window window2">
<div class="windowTop"></div>
<div class="windowFrame"></div>
<div class="windowBottom"></div>
</div>
<div class="window window3">
<div class="windowTop"></div>
<div class="windowFrame"></div>
<div class="windowBottom"></div>
</div>
</div>
<div class="floor floor2">
<div class="balcony">
<div class="grid">
<span></span>
</div>
</div>
<div class="window window4">
<div class="windowTop"></div>
<div class="windowFrame"></div>
<div class="windowBottom"></div>
</div>
<div class="window window5">
<div class="windowTop"></div>
<div class="windowFrame"></div>
<div class="windowBottom"></div>
</div>
<div class="window window6">
<div class="windowTop"></div>
<div class="windowFrame"></div>
<div class="windowBottom"></div>
</div>
</div>
<div class="floor floor3">
<div class="window window7">
<div class="windowTop"></div>
<div class="windowFrame"></div>
<div class="windowBottom"></div>
</div>
<div class="window window8">
<div class="windowTop"></div>
<div class="windowFrame"></div>
<div class="windowBottom"></div>
</div>
<div class="window window9">
<div class="windowFrame"></div>
</div>
</div>
<div class="zeroLevel">
<div class="doorWrapper">
<div class="cornice cornice1"></div>
<div class="cornice cornice2"></div>
<div class="topLight"></div>
<div class="handrail">
<span class="left"></span>
<span class="right"></span>
</div>
<div class="door"></div>
</div>
<div class="stairs">
<div class="wall wall1"></div>
<div class="wall wall2"></div>
</div>
<div class="trees">
<div class="tree tree1">
<span class="trunk"></span>
<span class="pot"></span>
</div>
<div class="tree tree2">
<span class="trunk"></span>
<span class="pot"></span>
</div>
</div>
<div class="fence">
<div class="fenceSpan"></div>
<div class="fenceSpan"></div>
<div class="fenceSpan"></div>
<div class="fenceSpan"></div>
</div>
</div>
<div class="ladder"></div>
<div class="hydrant">
<span></span>
</div>
</div>
<div class="ground"></div>
*{
box-sizing: border-box;
}
$bg: #a2d8f3;
$hydrant: #D65859;
$brick1: #DD9980;
$brick2: #D8785B;
$brick3: #AF5842;
$brick4: #86432F;
$windowFrame: #573026;
$window: #62A1CB;
$windowShine: #82C7D0;
$windowLight: #FEC864;
$windowLightDark: #AA803E;
$plant1: #98B854;
$plant2: #76812F;
$plant3: #5C7523;
$metal: #484551;
$basement: #7F6A4D;
$stairs: #513428;
$door: #71372E;
$door2: #523127;
$door3: #80694C;
$size: 1vmin;
$size05: calc(0.5 * #{$size});
$size075: calc(0.75 * #{$size});
$size2: calc(2 * #{$size});
$size3: calc(3 * #{$size});
$size4: calc(4 * #{$size});
$floorH: calc(20 * #{$size});
body {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
height: 100vh;
background: $bg;
}
.body {
position: relative;
}
.roof {
.top {
width: calc(100% + 2 * #{$size2});
background: linear-gradient($brick1, $brick1 50%, $brick3 50%);
height: $size2;
position: relative;
left: calc(-2 * #{$size});
&:before {
content: '';
position: absolute;
bottom:0;
left:0;
width: 0;
height: 0;
border-style: solid;
border-width: $size 0 0 $size;
border-color: transparent transparent transparent $bg;
}
&:after {
content: '';
position: absolute;
bottom:0;
right:0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 $size $size;
border-color: transparent transparent $bg transparent;
}
}
.middle {
width: calc(100% + #{$size2});
background-image: linear-gradient(90deg, $brick2 25%, $brick3 25%, $brick3 50%, $brick2 50%, $brick2 75%, $brick3 75%, $brick3 100%);
background-size: calc(6 * #{$size}) calc(6 * #{$size});
height: $size2;
position: relative;
left: calc(-1 * #{$size});
}
.bottom {
width: 100%;
background: $brick3;
height: $size4;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 $size;
span {
border: $size075 solid $brick4;
border-bottom: none;
width: calc( 80% / 4);
height: 100%;
position: relative;
&:before {
content: '';
position: absolute;
bottom:0;
left:0;
right:0;
margin: 0 auto;
background: $brick4;
height: $size2;
width: $size4;
border-top-right-radius: $size2;
border-top-left-radius: $size2;
}
}
}
}
.chimney1 {
width: $size3;
height: $size4;
background: $brick2;
position: absolute;
left: calc(6 * #{$size});
top: calc(-4 * #{$size});
&:before {
position: absolute;
top:0;
content: '';
width: calc(100% + #{$size});
left: calc(-0.5 * #{$size});
height: $size;
background: $brick1;
}
}
.chimney2 {
width: calc(6 * #{$size});
height: $size4;
background: $brick2;
position: absolute;
left: calc(12 * #{$size});
top: calc(-4 * #{$size});
&:before {
position: absolute;
top:0;
content: '';
width: calc(100% + #{$size});
left: calc(-0.5 * #{$size});
height: $size;
background: $brick1;
}
}
.antenna {
position: absolute;
right: calc(8 * #{$size});
top: calc(-7 * #{$size});
width: $size;
height: calc(7 * #{$size});
background: #889BAD;
&:before {
content: '';
position: absolute;
height: $size;
width: calc(10 * #{$size});
left: calc(-4.5 * #{$size});
top: $size;
background: #889BAD;
}
span {
position: absolute;
width: $size;
background: #889BAD;
}
.ant1 {
height: calc(4 * #{$size});
left: calc(-4.5 * #{$size});
top: calc(-0.5 * #{$size});
}
.ant2 {
height: calc(3 * #{$size});
left: calc(-2 * #{$size});
}
.ant3 {
height: calc(3 * #{$size});
right: calc(-2 * #{$size});
}
.ant4 {
height: calc(4 * #{$size});
right: calc(-4.5 * #{$size});
top: calc(-0.5 * #{$size});
}
}
.floor {
width: calc(2 * #{$floorH});
height: $floorH;
background: $brick2;
border-top: $brick3 solid calc(2 * #{$size});
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-around;
&:before {
content: '';
position: absolute;
top: calc(-2 * #{$size});
left: -$size;
height: $size;
width: calc(100% + 2 * #{$size});
background: $brick1;
}
}
.brickWall {
// width: 100%;
// height: 100%;
// position: absolute;
// --b-1: red 0px 0px / 0px 10px;
// --b-2: red 0px 0px / 0px 10px;
// background: linear-gradient(var(--b-1), var(--b-2));
}
.window {
position: relative;
top: calc(4 *#{$size});
width: calc(#{$size} * 6);
height: calc(#{$size} * 10);
&:before {
content: '';
position: absolute;
top: 50%;
width: 100%;
height: $size;
background: $windowFrame;
}
}
.windowFrame {
height: 100%;
width: 100%;
background: $window;
border: $size solid $windowFrame;
}
.windowTop {
height: $size;
width: calc(100% + 2 * #{$size});
position: absolute;
left: -$size;
background: $brick1;
z-index: 1;
top:-$size;
&:before {
content: '';
position: absolute;
top: calc(-2 * #{$size});
width: 0;
height: 0;
border-style: solid;
border-width: 0 $size4 $size2 $size4;
border-color: transparent transparent $brick1 transparent;
}
&:after {
content: '';
position: absolute;
top: calc(-1 * #{$size});
left:0;
right:0;
width: 0;
height: 0;
margin: 0 auto;
border-style: solid;
border-width: 0 $size $size $size;
border-color: transparent transparent $brick3 transparent;
opacity: 0.7;
}
}
.windowBottom {
height: calc(2* #{$size});
width: calc(100% + 2 * #{$size});
position: absolute;
left: -$size;
background: linear-gradient($brick1 0, $brick1 50%, $brick4 50%);
}
.window9 {
visibility: hidden;
opacity: 0;
}
.window1 .windowFrame{
background: linear-gradient(90deg, $windowLight $size, $windowLight $size, $windowLightDark $size, $windowLightDark $size2, $windowLight $size2);
}
.window2 .windowFrame,
.window4 .windowFrame,
.window7 .windowFrame {
background: linear-gradient(-225deg, $window, $window $size, $windowShine 1vmin, $windowShine 2vmin, $window 2vmin, $window 3vmin, $windowShine 3vmin, $windowShine 4vmin, $window 4vmin);
}
.window3 .windowFrame{
background: linear-gradient($window, $window 50%, $windowLightDark 50%);
}
.window5 .windowFrame{
background: linear-gradient(90deg, $windowLight, $windowLight $size2, $windowLightDark $size2);
}
.window6 .windowFrame{
background: $windowLight;
}
.window8 .windowFrame {
background: linear-gradient(-225deg, $window, $window $size, $windowShine $size , $windowShine calc(2.5 * #{$size}), $window calc(2.5 * #{$size}));
}
.zeroLevel {
width: 100%;
height: calc(8 * #{$size});
position: relative;
background: linear-gradient($basement, $basement $size, $door2 $size, $door2 $size2, $basement $size2 )
}
.stairs {
height: calc(5 * #{$size});
width: 33%;
background: $door;
position: absolute;
bottom: 0;
right:0;
background-image: linear-gradient(0deg, $door2 30%, $basement 30%, $basement 50%, $door2 50%, $door2 80%, $basement 80%, $basement 100%);
background-size: $size4 $size4;
.wall {
position: absolute;
top:calc(-1 * #{$size});
width: $size3;
height: calc(5 * #{$size});
background: $brick4;
border: $size solid $brick2;
&:before {
content: '';
position: absolute;
bottom:calc(-2 * #{$size});
left:calc(-1.5 * #{$size});
height: $size2;
width: $size4;
background: $brick1;
}
&:after {
content: '';
position: absolute;
top:calc(-2 * #{$size});
left:calc(-1.5 * #{$size});
height: $size2;
width: $size4;
background: $brick1;
}
}
.wall1 {
left: calc(-0.5 * #{$size});
}
.wall2 {
right: calc(-0.5 * #{$size});
}
}
.doorWrapper {
height: calc(#{$floorH} - #{$size2});
width: 33%;
background: $door;
position: absolute;
bottom: calc(8 * #{$size});
right:0;
border: calc(2.5 * #{$size}) solid $basement;
border-top-width: $size3;
border-bottom: 0;
display: flex;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
right:0;
height: $size;
background: darken($door, 12);
}
.topLight {
position: absolute;
width: 70%;
margin: 0 auto;
top:calc(1.5 * #{$size});
left:0;
right:0;
background: linear-gradient(90deg,$windowLight, $windowLight, 21%, transparent 21%, transparent 33.3%, $windowLightDark 33.3%, $windowLightDark 67%, transparent 67%, transparent 73%, $windowLight 81%, $windowLight 100%);
height: $size;
}
.cornice {
position: absolute;
width: $size4;
height: $size;
background: lighten($basement, 10);
&:before {
content: '';
position: absolute;
top: calc(1 * #{$size});
border-top: $size solid darken($basement, 10);
border-left: $size solid transparent;
border-right: $size solid transparent;
height: 0;
width: $size2;
}
}
.cornice1 {
left: calc(-3 * #{$size});
}
.cornice2 {
right: calc(-3 * #{$size});
}
.handrail {
position: absolute;
width: 100%;
bottom:0;
.right {
height: calc(6 * #{$size});
width: $size;
background: $door2;
display: block;
position: absolute;
right: calc(-1.75 * #{$size});
bottom:0;
&:before {
content: '';
width: calc(1.5 * #{$size});
height: calc(1.5 * #{$size});
border-radius: 100%;
background: $door2;
position: absolute;
right: calc(-0.25 * #{$size});
}
}
.left {
height: calc(6 * #{$size});
width: $size;
background: $door2;
display: block;
position: absolute;
left: calc(-1.75 * #{$size});
bottom:0;
&:before {
content: '';
width: calc(1.5 * #{$size});
height: calc(1.5 * #{$size});
border-radius: 100%;
background: $door2;
position: absolute;
top:0;
left: calc(-0.25 * #{$size});
}
}
}
.door {
width: 70%;
margin: auto auto 0 auto;
height: 80%;
background: $door;
border: $size2 solid $door2;
border-bottom-width: $size2;
border-top-width: $size2;
position: relative;
&:before {
content: '';
position: absolute;
top: 40%;
left:0;
right:0;
margin: 0 auto;
background: $door2;
width: $size;
height: $size;
border-radius: 50%;
}
}
}
.balcony {
position: absolute;
bottom: calc(-1 * #{$size});
left:calc(-9 * #{$size});
width: calc(9 * #{$size});
height: $size;
background: $brick3;
.grid {
position: absolute;
left:0;
bottom: $size2;
width: calc(9 * #{$size});
height:calc(7 * #{$size});
background-image: linear-gradient(90deg, $metal 16.67%, $bg 16.67%, $bg 50%, $metal 50%, $metal 66.67%, $bg 66.67%, $bg 100%);
background-size: calc(6 * #{$size05});
span {
width: calc(0.5 * #{$size});
height:calc(1 * #{$size});
display: block;
background: $metal;
position: absolute;
bottom:calc(-1 * #{$size});
}
&:before {
content: '';
position: absolute;
left:0;
top:0;
width: calc(9 * #{$size});
height: $size05;
background: $metal;
}
&:after {
content: '';
position: absolute;
left:0;
bottom:0;
width: calc(9 * #{$size});
height: $size05;
background: $metal;
}
}
.flower {
width: $size2;
height: $size;
background: $basement;
position: absolute;
top: calc(-9 * #{$size});
&:before {
content: '';
width: $size3;
height: $size3;
transform: rotate(-45deg);
position: absolute;
top: calc(-4.5 * #{$size});
right: calc(-0.5 * #{$size});
background: $plant1;
}
}
}
.ladder {
width: calc(4 * #{$size});
height: calc(1.7 * #{$floorH});
position: absolute;
left: calc(-4 * #{$size});
bottom: 13vmin;
background-image: linear-gradient(0deg, $metal 16.67%, $bg 16.67%, $bg 50%, $metal 50%, $metal 66.67%, $bg 66.67%, $bg 100%);
background-size: calc(10 * #{$size05}) calc(10 * #{$size05});
z-index: -1;
&:before {
content: '';
position: absolute;
top:0;
left:0;
background: $metal;
height: 105%;
width: $size05;
}
}
.tree {
position: absolute;
width: calc(6 * #{$size});
height: calc(8 * #{$size});
background: linear-gradient(90deg, $plant1, $plant1 50%, $plant2 50%);
&:before {
content: '';
position: absolute;
width: $size4;
height: $size2;
background: $plant2;
left: calc(1 * #{$size});
top: calc(-2 * #{$size});
}
&:after {
content: '';
position: absolute;
width: $size4;
height: $size2;
background: $plant3;
left: calc(1 * #{$size});
bottom: calc(-2 * #{$size});
}
.trunk {
width: $size;
height: $size4;
background: #fff;
position: absolute;
bottom: calc(-6 * #{$size});
left: calc(2.5 * #{$size});
}
.pot {
width: $size4;
height: $size;
background: $plant1;
position: absolute;
bottom: calc(-6.5 * #{$size});
left: calc(1 * #{$size});
&:before {
content: '';
position: absolute;
height: $size2;
width: calc(5 * #{$size});
background: $metal;
bottom: calc(-2 * #{$size});
left:calc(-0.5 * #{$size});
}
}
}
.tree1 {
top: calc(-8.5 * #{$size});
right: calc(-7 * #{$size});
}
.tree2 {
top: calc(-8.5 * #{$size});
right: calc(14 * #{$size});
}
.hydrant {
position: absolute;
left:calc(-7 * #{$size});
bottom: $size05;
width: $size3;
height: calc(4 * #{$size});
background: darken($hydrant, 10);
border: $size solid $hydrant;
&:before {
content: '';
position: absolute;
bottom: calc(-1.5 * #{$size});
left: calc(-1.5 * #{$size});
width: $size4;
height: $size05;
background: $hydrant;
}
&:after {
content: '';
position: absolute;
top: calc(-1.5 * #{$size});
left: calc(-1.5 * #{$size});
width: $size4;
height: $size;
background: $hydrant;
}
span {
position: absolute;
top: calc(-2.5 * #{$size});
left: calc(-0.5 * #{$size});
width: calc(2 * #{$size});
height: calc(2 * #{$size});
border-radius: 50%;
background: darken($hydrant, 10);
&:before {
content: "";
position: absolute;
width: calc(0.5 * #{$size});
height: calc(0.5 * #{$size});
background: #D65859;
right: calc(0.8 * #{$size});
top: calc(-0.5 * #{$size});
}
}
}
.fence {
display: flex;
position: absolute;
bottom: 0;
left:calc(-2 * #{$size});
}
.fenceSpan {
width: calc(5.5 * #{$size});
height: calc(4 * #{$size});
border: $size05 solid $door2;
border-bottom: none;
position: relative;
&:before {
content: '';
position: absolute;
width: calc(5.5 * #{$size});
left: calc(-0.5 * #{$size});
top: calc(2 * #{$size});
height: $size05;
background: $door2;
}
&:after {
content: '';
position: absolute;
width: $size05;
left: calc(2 * #{$size});
top: calc(-0.5 * #{$size});
height: calc(3 * #{$size});
background: $door2;
}
}
.ground {
width: 100%;
height: calc(8 * #{$size});
background: linear-gradient(lighten($metal,30), lighten($metal,30) 2vmin, $metal 2vmin);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.