Friday, 3 January 2020

HTML and CSS Shop building

 – by 1 comment

CSS SHOP

image of output
CSS SHOP

click here to see the → or go down.




HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="all">
<div class="roof"></div>
<div class="umb_pres">
<div class="umbrella"></div>
</div>
<div class="umb_design">
<div></div>
<div></div>
<div></div>
</div>
<div class="shop">
<div class="win_garden"></div>
<div class="hatch1"></div>
<div class="hatch2"></div>
<div class="brick1"></div>
<div class="brick2"></div>
<div class="brick3"></div>
<div class="brick4"></div>
<div class="brick5"></div>
<div class="brick6"></div>
</div>
<div class="bottom"></div>
<div class="grass">
<div class="g1"></div>
<div class="g2"></div>
</div>
</div>
</body>
</html>
view raw shop.html hosted with ❤ by GitHub

CSS:
body {
background: linear-gradient(#64b5f6, #64b5f6);
background-size: 100%;
}
.all {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.roof {
width: 260px;
height: 5px;
background-color: #bbbbbb;
}
.roof:before {
content: "";
position: absolute;
width: 250px;
height: 5px;
top: 5px;
left: 5px;
background: linear-gradient(#a54223, #ff7043);
}
.roof:after {
content: "";
position: absolute;
width: 260px;
height: 5px;
top: 10px;
background-color: #bbbbbb;
}
.umb_pres {
perspective: 100px;
}
.umbrella {
width: 273px;
height: 25px;
background: repeating-linear-gradient(
to right,
#e53935 0px 30.5px,
#eeeeee 30.5px 60.5px
);
position: absolute;
top: 9.2px;
left: -6px;
transform: rotateX(25deg);
}
.umb_design > div:nth-child(1) {
width: 32px;
height: 38px;
background-color: #d22e2d;
position: absolute;
top: 35px;
left: -13.5px;
border-radius: 0 0 40px 40px;
}
.umb_design > div:nth-child(1):before {
content: " ";
width: 32px;
height: 38px;
background-color: #e0e0df;
position: absolute;
left: 32px;
border-radius: 0 0 40px 40px;
}
.umb_design > div:nth-child(1):after {
content: " ";
width: 32px;
height: 38px;
background-color: #d22e2d;
position: absolute;
left: 64px;
border-radius: 0 0 40px 40px;
}
.umb_design > div:nth-child(2) {
width: 32px;
height: 38px;
background-color: #e0e0df;
position: absolute;
top: 35px;
left: 82.5px;
border-radius: 0 0 40px 40px;
}
.umb_design > div:nth-child(2):before {
content: " ";
width: 32px;
height: 38px;
background-color: #d22e2d;
position: absolute;
left: 32px;
border-radius: 0 0 40px 40px;
}
.umb_design > div:nth-child(2):after {
content: " ";
width: 32px;
height: 38px;
background-color: #e0e0df;
position: absolute;
left: 64px;
border-radius: 0 0 40px 40px;
}
.umb_design > div:nth-child(3) {
width: 32px;
height: 38px;
background-color: #d22e2d;
position: absolute;
top: 35px;
left: 178px;
border-radius: 0 0 40px 40px;
}
.umb_design > div:nth-child(3):before {
content: " ";
width: 32px;
height: 38px;
background-color: #e0e0df;
position: absolute;
left: 32px;
border-radius: 0 0 40px 40px;
}
.umb_design > div:nth-child(3):after {
content: " ";
width: 32px;
height: 38px;
background-color: #d22e2d;
position: absolute;
left: 64px;
border-radius: 0 0 40px 40px;
}
.umb_design {
z-index: 4;
position: absolute;
}
.shop {
width: 260px;
height: 180px;
background-color: #fbb82c;
position: absolute;
top: 40px;
z-index: 3;
}
.shop:before {
content: "";
width: 117px;
height: 73px;
background: linear-gradient(
55deg,
#80cbc4 0px 80px,
#b2dfdc 80px 100px,
#80cbc4 100px 110px,
#b2dfdc 110px 115px,
#80cbc4 115px 117px,
#b2dfdc 117px 125px,
#80cbc4 125px 170px
);
position: absolute;
border: 4px solid #3d2521;
top: 62px;
left: 19px;
}
.shop:after {
content: "";
width: 70px;
height: 130px;
background: linear-gradient(
50deg,
#80cbc4 0px 20px,
#b2dfdc 20px 60px,
#80cbc4 60px 70px,
#b2dfdc 70px 130px
);
position: absolute;
border: 4px solid #3d2521;
top: 62px;
left: 160px;
}
.win_garden {
width: 130px;
height: 10px;
background: linear-gradient(#2f7d32 0px 7px, #185d1e 7px 10px);
position: relative;
top: 139px;
left: 17px;
border-radius: 8px 8px 0 0;
}
.win_garden:before {
content: "";
position: absolute;
width: 135px;
height: 15px;
background: linear-gradient(#eeeeee 0px 4px, white 4px 15px);
top: 10px;
left: -2px;
}
.hatch1 {
width: 7px;
height: 7px;
background-color: white;
border-radius: 10px;
position: relative;
top: 100px;
left: 175px;
z-index: 4;
}
.hatch1:before {
content: "";
width: 7px;
height: 7px;
background-color: white;
border-radius: 10px;
position: absolute;
top: 35px;
z-index: 4;
}
.hatch1:after {
content: "";
width: 4px;
height: 40px;
background-color: white;
border-radius: 10px;
position: absolute;
left: 1.5px;
z-index: 4;
}
.hatch2 {
width: 3px;
height: 17px;
background-color: white;
border-radius: 10px;
position: absolute;
left: 237px;
top: 80px;
z-index: 4;
}
.hatch2:before {
content: "";
width: 3px;
height: 17px;
background-color: white;
border-radius: 10px;
position: absolute;
top: 80px;
z-index: 4;
}
.bottom {
width: 270px;
height: 20px;
background-color: white;
position: relative;
top: 215px;
left: -5px;
border-radius: 5px 5px 0 0;
z-index: 2;
}
.bottom:before {
content: "";
width: 290px;
height: 20px;
background-color: #434343;
position: absolute;
top: 20px;
left: -10px;
}
.brick1,
.brick2,
.brick3,
.brick4,
.brick5,
.brick6 {
width: 19px;
height: 9px;
background-color: #e79d18;
position: absolute;
}
.brick1:before,
.brick2:before,
.brick3:before,
.brick4:before,
.brick5:before,
.brick6:before {
content: "";
width: 19px;
height: 9px;
background-color: #e79d18;
position: absolute;
}
.brick1:after,
.brick2:after,
.brick3:after,
.brick4:after,
.brick5:after,
.brick6:after {
content: "";
width: 19px;
height: 9px;
background-color: #e79d18;
position: absolute;
}
.brick1 {
top: 170px;
}
.brick1:before {
left: 60px;
top: -4px;
}
.brick1:after {
left: 80px;
top: -4px;
}
.brick2 {
top: 110px;
width: 16px;
}
.brick2:before {
top: -25px;
width: 13px;
}
.brick2:after {
top: -40px;
width: 13px;
left: 6px;
}
.brick3 {
top: 45px;
left: 23px;
}
.brick3:before {
left: 30px;
}
.brick3:after {
left: 78px;
top: -12px;
}
.brick4 {
top: 45px;
left: 110px;
width: 10px;
}
.brick4:before {
width: 12px;
left: 35px;
top: 40px;
}
.brick4:after {
width: 10px;
left: 40px;
top: 53px;
}
.brick5 {
top: 45px;
left: 210px;
}
.brick5:before {
left: 25px;
}
.brick5:after {
top: -15px;
left: 15px;
}
.brick6 {
top: 75px;
left: 240px;
}
.brick6:before {
top: 50px;
width: 15px;
}
.brick6:after {
top: 65px;
width: 15px;
left: 5px;
}
.grass {
position: absolute;
width: 460px;
height: 90px;
top: 170px;
left: -95px;
z-index: 1;
overflow: hidden;
}
.g1 {
width: 50px;
height: 50px;
background-color: #377e3c;
border-radius: 70px;
position: absolute;
top: 45px;
left: -20px;
}
.g1:before {
content: "";
width: 70px;
height: 70px;
background-color: #629a43;
border-radius: 70px;
position: absolute;
left: 40px;
top: 10px;
}
.g1:after {
content: "";
width: 70px;
height: 70px;
background-color: #629a43;
border-radius: 70px;
position: absolute;
left: 60px;
top: -40px;
}
.g2 {
width: 70px;
height: 70px;
background-color: #377e3c;
border-radius: 70px;
position: absolute;
left: 320px;
top: px;
}
.g2:before {
content: "";
width: 70px;
height: 70px;
background-color: #629a43;
border-radius: 70px;
position: absolute;
left: 20px;
top: 50px;
}
.g2:after {
content: "";
width: 70px;
height: 70px;
background-color: #629a43;
border-radius: 70px;
position: absolute;
left: 80px;
top: 60px;
}
view raw shop.css hosted with ❤ by GitHub

OUTPUT:


SUSCRIBE this Blog for more such intreting projects.


Share:

Related Posts:

1 comment:

Subscribe to: Post Comments (Atom)