latihan1.css

html, body{
	margin: 0;
	padding: 0;
}

body{
	font-family: Arial, Helvetica, sans-serif;
	background-color: #ddd;
	line-height: 1.65;
	padding-bottom: 1000px;
}

/*latihan 1*/

.container-satu{
	width: 900px;
	margin: 50px auto;
	background-color: #fff;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
}

.kolom-utama{
	flex: 3 ;
	order: 2;
}

.sidebar-satu{
	flex: 1 ;
	order: 1;

}

.sidebar-dua{
	flex: 1 ;
	order: 3;

}

/*latihan 2-service*/

.container-dua{
	max-width: 800px;
	margin: 50px auto;
	
}


.container-dua div{
	
	padding: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.layanan1{
	background-color: rgb(119, 119, 255);
}

.layanan2{
	background-color: rgb(103, 216, 103);
}

.layanan3{
	background-color: rgb(255, 124, 124);
}



/*latihan 3*/

.container-tiga{
	max-width: 800px;
	margin: 50px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.thumb{
	width: 50%;
}

.thumb img{
	width: 100%;
	margin-bottom: 20px;
	box-shadow: 0px 0px 3px 2px white;
}



/*Latihan 4*/

.container-empat{

	max-width: 800px;
	margin: 50px auto;
	display: flex;
	flex-wrap: wrap;
}

.card{
	border: 1px solid #999;
	border-radius: 10px;
	background-color: #eee;
	overflow: hidden; 
	margin: 10px;
	width: 100%;
	
}

.card .header{

	height: 150px;
	background-color: #666;
}

.card .content{
	text-align: center;
	padding-bottom: 20px;
}

.card.besar{
	transform: scale(1.03);
}


/*Latihan 5*/

.container-lima{
	width: 500px;
	height: 500px;
	margin: 50px auto;
	border: 5px solid black;
	display: flex;

}

.kotak{
	width: 100px;
	height: 100px;
	background-color: brown;
	color: white;
	margin: auto;
	text-align: center;
	display: flex;
}

.kotak span{
	margin: auto;
}

/*Responsive*/

@media(min-width: 600px){

	.container-dua{
		display: flex;
		justify-content: space-between;

	}

	.container-dua div{

		width: 30%;


	}

	.thumb{
		width: 25%;
	}

	.card{
		flex-wrap: none;
		flex: 1;
	}

}