lakuapik/tugas-1-teknologi-web.html

## tugas-1-teknologi-web.html
<!DOCTYPE html>
<html>
<head>
	<title>Lorem 101</title>
</head>
<style type="text/css">
	body {text-align: center;}
	.red {color: red;}
	.green {color: green;}
	.brown {color: brown;}
	.blue {color:blue;}
	.paragraph {
		width: 400px;
	}
	.p2 {margin-left: 300px;}
	.p3 {margin-left: 600px;}
</style>
<body>
	<h4 class="blue">Lorem 101</h4>
	<h4 class="red">Lorem Ipsum Dolor Sit Amet.</h4>
	<img src="https://placehold.it/200x50">
	<p class="paragraph p1 red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui ipsum, laoreet vel suscipit eget, iaculis in diam. Duis a lectus lectus. Phasellus vitae ornare nulla. Donec sit amet ex eros. Aliquam erat volutpat. Pellentesque commodo quam nec dapibus sodales. Phasellus sit amet feugiat mauris. Praesent et nulla at elit bibendum auctor at nec urna.
	</p>
	<p class="paragraph p2 green">Sed tincidunt nisi arcu, a mattis velit malesuada at. Nam sollicitudin, lacus nec venenatis tempus, sem metus dapibus felis, sed hendrerit dolor erat sed leo. Donec viverra erat vel lectus congue imperdiet. Etiam vitae elit interdum elit ullamcorper interdum. Nunc consectetur, neque vel accumsan pellentesque, risus sapien ornare felis, vitae lobortis diam dui ut arcu. Vivamus mollis feugiat purus id mollis. Aenean condimentum elit a augue ultricies, sit amet auctor mauris maximus.</p>
	<p class="paragraph p3 brown">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ornare fringilla mauris, et convallis purus dapibus quis. Suspendisse eu ultrices elit, sed euismod dui. Nam luctus pulvinar sapien sed ultricies. Vestibulum viverra, augue a consectetur pretium, diam elit blandit lacus, ut ultrices enim orci dapibus metus. Etiam ultricies volutpat scelerisque.</p>
	<a href="#">LOREM 101</a>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Lorem 101</title>
	</head>
	<style type="text/css">
	body {text-align: center;}
	.red {color: red;}
	.green {color: green;}
	.brown {color: brown;}
	.blue {color:blue;}
	.paragraph {
	width: 400px;
	}
	.p2 {margin-left: 300px;}
	.p3 {margin-left: 600px;}
	</style>
	<body>
	<h4 class="blue">Lorem 101</h4>
	<h4 class="red">Lorem Ipsum Dolor Sit Amet.</h4>
	<img src="https://placehold.it/200x50">
	<p class="paragraph p1 red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui ipsum, laoreet vel suscipit eget, iaculis in diam. Duis a lectus lectus. Phasellus vitae ornare nulla. Donec sit amet ex eros. Aliquam erat volutpat. Pellentesque commodo quam nec dapibus sodales. Phasellus sit amet feugiat mauris. Praesent et nulla at elit bibendum auctor at nec urna.
	</p>
	<p class="paragraph p2 green">Sed tincidunt nisi arcu, a mattis velit malesuada at. Nam sollicitudin, lacus nec venenatis tempus, sem metus dapibus felis, sed hendrerit dolor erat sed leo. Donec viverra erat vel lectus congue imperdiet. Etiam vitae elit interdum elit ullamcorper interdum. Nunc consectetur, neque vel accumsan pellentesque, risus sapien ornare felis, vitae lobortis diam dui ut arcu. Vivamus mollis feugiat purus id mollis. Aenean condimentum elit a augue ultricies, sit amet auctor mauris maximus.</p>
	<p class="paragraph p3 brown">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ornare fringilla mauris, et convallis purus dapibus quis. Suspendisse eu ultrices elit, sed euismod dui. Nam luctus pulvinar sapien sed ultricies. Vestibulum viverra, augue a consectetur pretium, diam elit blandit lacus, ut ultrices enim orci dapibus metus. Etiam ultricies volutpat scelerisque.</p>
	<a href="#">LOREM 101</a>
	</body>
	</html>