CSS HOUSE MAKING

Learn something new from the below code and make something more interesting.

HTML:

	<!DOCTYPE html>
	<html>

	<head>
	<title>Page Title</title>
	</head>

	<body>

	<div class="all">
	<div class="flag"></div>
	<div class="res">
	<div class="roof">

	</div>
	</div>
	<div class="bod">
	<div class="wa">
	<div class="w1"></div>
	<br>
	<div class="w2"></div>
	<br>
	<div class="w3"></div>
	</div>
	<div class="wb">
	<div class="w4"></div>
	<br>
	<div class="w5"></div>
	<br>
	<div class="w6"></div>
	</div>
	<div class="cent">
	<div class="clock"></div>
	<div class="school">SCHOOL</div>
	<div class="door">
	<div class="d1"></div>
	</div>
	</div>

	<div class="botm">
	</div>
	</div>

	</div>
	</body>

	</html>

view raw css_school.html hosted with ❤ by GitHub

CSS:

	body {
	background-color: skyblue;
	}

	.all {
	margin-top: 20px;
	margin-left: 20px;
	background-color: skyblue;
	float: left;
	}
	.res {
	perspective: 240px;
	margin-left: 20px;
	position: relative;
	}

	.roof {
	height: 60px;
	width: 240px;
	background-color: #d33b23;
	border-radius: 10px 10px 10px 10px;
	transform: rotateX(40deg);
	}
	.res:before {
	content: " ";
	position: absolute;
	width: 0px;
	height: 0px;
	/background-color:red;/
	/border-top:40px solid green;/
	border-right: 78px solid transparent;
	border-bottom: 78px solid #f25745;
	border-left: 78px solid transparent;
	z-index: 1;
	top: -23.5px;

	transform: translateX(25%);
	}

	.res:after {
	content: " ";
	position: absolute;
	width: 0px;
	height: 0px;
	/background-color:red;/
	/border-top:40px solid lightgreen;/
	border-right: 65px solid transparent;
	border-bottom: 65px solid #f9f3d9;
	border-left: 65px solid transparent;
	z-index: 2;
	top: -10.5px;
	transform: translateX(40%);
	}

	.bod {
	height: 140px;
	width: 225px;
	background-color: #e5dec1;
	margin-top: -7px;
	margin-left: 23px;
	}

	.w1 {
	width: 40px;
	height: 20px;
	background-color: #d6eef0;
	border: 5px solid #dcb470;
	border-radius: 6px;
	position: relative;
	}

	.w1:before {
	content: " ";
	position: absolute;
	width: 5px;
	height: 20px;
	background-color: #dcb470;

	left: 18px;
	}

	.w2 {
	width: 40px;
	height: 20px;
	background-color: #d6eef0;
	border: 5px solid #dcb470;
	border-radius: 6px;
	position: relative;
	}

	.w2:before {
	content: " ";
	position: absolute;
	width: 5px;
	height: 20px;
	background-color: #dcb470;

	left: 18px;
	}

	.w3 {
	width: 40px;
	height: 20px;
	background-color: #d6eef0;
	border: 5px solid #dcb470;
	border-radius: 6px;
	position: relative;
	}

	.w3:before {
	content: " ";
	position: absolute;
	width: 5px;
	height: 20px;
	background-color: #dcb470;

	left: 18px;
	}

	.w4 {
	width: 40px;
	height: 20px;
	background-color: #d6eef0;
	border: 5px solid #dcb470;
	border-radius: 6px;
	position: relative;
	}

	.w4:before {
	content: " ";
	position: absolute;
	width: 5px;
	height: 20px;
	background-color: #dcb470;

	left: 18px;
	}

	.w5 {
	width: 40px;
	height: 20px;
	background-color: #d6eef0;
	border: 5px solid #dcb470;
	border-radius: 6px;
	position: relative;
	}

	.w5:before {
	content: " ";
	position: absolute;
	width: 5px;
	height: 20px;
	background-color: #dcb470;

	left: 18px;
	}

	.w6 {
	width: 40px;
	height: 20px;
	background-color: #d6eef0;
	border: 5px solid #dcb470;
	border-radius: 6px;
	position: relative;
	}

	.w6:before {
	content: " ";
	position: absolute;
	width: 5px;
	height: 20px;
	background-color: #dcb470;

	left: 18px;
	}

	.wa {
	float: left;
	margin-top: 5px;
	margin-left: 5px;
	}
	.wb {
	float: right;
	margin-top: 5px;
	margin-right: 5px;
	}

	.cent {
	height: 140px;
	width: 100px;
	background-color: #f9f3d9;
	margin-left: 63px;
	}

	.botm {
	width: 270px;
	height: 20px;
	background-color: #666666;
	border-radius: 5px;
	position: relative;
	right: 22px;
	}
	.botm:before {
	content: " ";
	position: absolute;
	height: 10px;
	width: 80px;
	background-color: #d0d0d0;
	transform: translateX(95px);
	}

	.botm:after {
	content: " ";
	position: absolute;
	height: 10px;
	width: 100px;
	background-color: #eeeeee;
	transform: translateY(100%);
	left: 85px;
	}

	.clock {
	width: 47px;
	height: 47px;
	border-radius: 47px;
	border: 10px solid #dcb470;
	background-color: #ffffff;
	z-index: 3;
	position: relative;
	top: -40px;
	left: 18px;
	}

	.clock:before {
	content: " ";
	position: absolute;
	width: 10px;
	height: 27px;
	border-radius: 13px;
	background-color: #b2c1c0;
	left: 19px;
	top: 5px;
	}

	.clock:after {
	content: " ";
	position: absolute;
	width: 22px;
	height: 10px;
	border-radius: 13px;
	background-color: #f25745;
	top: 22px;
	left: 8px;
	}

	.school {
	color: #89674c;
	font-weight: bolder;
	font-size: 22px;
	position: relative;
	font-family: Courier;
	top: -40px;
	left: 8px;
	}

	.door {
	position: relative;
	width: 5px;
	height: 0px;
	/background-color:red;/
	/border-top:40px solid green;/
	border-right: 38px solid transparent;
	border-bottom: 28px solid #f25745;
	border-left: 38px solid transparent;
	z-index: 1;

	top: -40px;

	transform: translateX(11%);
	}

	.door:before {
	content: " ";
	position: absolute;
	width: 80px;
	height: 5px;
	background-color: #f25745;
	top: 28px;
	left: -37px;
	}

	.door:after {
	content: " ";
	position: absolute;
	height: 55px;
	background-size: 100%;
	background-image: url("https://i.ibb.co/q7CGC8f/20190710-135507.jpg");
	width: 60px;
	top: 33px;
	transform: translateX(-45%);
	}