style css

*{
	padding: 0;margin: 0;
}
#header{
		width: 100%;
		height: 60%;
		background: #f4f4f4;
		<!---border-bottom: 5px solid green; --->
		}

		#dua {
		width: 100%;
		height: 350px;
		background: #f4f4f4; <!--- putih keabuabuan -->
		}

		#tiga {
		width: 100%;
		height: 420px;
		background: #B2DFDB; <!--- biru -->
		}

		#tiga2 {
		width: 100%;
		height: 220px;
		background: #B2DFDB; <!--- biru -->
		}

		#empat {
		width: 100%;
		height: 950px;
		background: #f4f4f4; <!--- putih keabuabuan -->
		}

		#empatprice {
		width: 100%;
		height: 300px;
		background: #f4f4f4; <!--- putih keabuabuan -->
		}
	#footer{
		width: 100%;
		height: 300px;
		background: #0097A7;
		border-top: 7px solid #00BCD4;
		}
	#footer2{
		width: 100%;
		height: 20px;
		background: #00BCD4;
		}



	#sentuh
	div:hover {
    background-color: red;
	}


	#content{
		padding: 20px;
		background: green;
		margin-bottom: 10;
		overflow: hidden;
		}
	#artikel{
		width: 600px;
		height: 700px;
		float: left;
		background: orange;
		}
	#Label{
		width: 325px;
		height: 30px;
		float: right;
		background: #0e65f2;
		}

	#Font{
		font-family: "Times New Roman", Times, serif;
	}




 nav {
 margin:auto;
 text-align: center;
 width: 100%;
 height: 70%;
 font-family: arial;
 }
 nav ul {


 list-style: none;
 position: relative;
 bottom: 1px;
 left: 100px;
 display: inline-table;
 width: 55%;
 }
 nav ul li{
 float:left;
 }

 nav ul li:hover{
 background:#00BCD4; #Biru muda
 }

 nav ul li:hover a{
 color:#000;
 }

 nav ul li a{
 display: block;
 padding: 25px;
 color: #000;
 text-decoration: none;
}

		#services1 {
		width: 22%;
		height: 80%;
		position:relative;top:30px;left:3%;display:block;
		background: #f4f4f4; <!--- oren -->
		}

		#services2 {
		width: 22%;
		height: 80%;
		position:relative;top:-250px;left:355px;display:block;
		background: #f4f4f4; <!--- oren -->
		}

		#services3 {
		width: 22%;
		height: 80%;
		position:relative;top:-530px;left:675px;display:block;
		background: #f4f4f4; <!--- oren -->
		}

		#services4 {
		width: 22%;
		height: 80%;
		position:relative;top:-810px;left:1000px;display:block;
		background: #f4f4f4; <!--- oren -->
		}
     <!--- portofolio --->
		#portofolio1 {
		width: 250px;
		height: 250px;
		position:relative;top:40px;left:355px;display:block;
		background: #f98561; <!--- oren -->
		}

		#portofolio2 {
		width: 250px;
		height: 250px;
		position:relative;top:40px;left:355px;display:block;
		background: #f98561; <!--- oren -->
		}

		#portofolio3 {
		width: 250px;
		height: 250px;
		position:relative;top:-295px;left:675px;display:block;
		background: #f98561; <!--- oren -->
		}

		#portofolio4 {
		width: 250px;
		height: 250px;
		position:relative;top:-410px;left:35px;display:block;
		background: #f98561; <!--- oren -->
		}

		<!--- oren -->
	@font-face{
	color: #2190c1;
    font-size: 20px;
    font-family: 'fontbebasnue';
    src: url('../fonts/BebasNeue.otf');
}
#fontbebas{
   color:#f98561;
   font-size: 50px;
   font-weight: normal;
   font-variant: small-caps;
   font-family: fontbebasnue;
   src: url('/fonts/BebasNeue.otf')
}

#fontuntukfooter{
   color:#f98561;
   font-size: 50px;
   font-weight: normal;
   font-variant: small-caps;

}
   #font2{
	position : center;
   color: #ff00ff;
   font-size: 20px;
   font-weight: bold;
   font-family:Rockwell, Calibri, Monospace;
    }

	* {
    box-sizing: border-box;
}

.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
    background-color: #0097A7;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}
.ceklis {

}

.button {
    background-color: #00BCD4;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}



		#footercoba {
    float: left;
    width: 33.3%;
    padding: 15px;
}