Herda Dwi Sulistianto_12191695

<!DOCTYPE html>
<html>
<head>
	<title>Praktik Responsive Desain</title>
	<meta content ='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'>
	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
	<link rel="stylesheet" type="text/css" href="assets/css/mediaquery.css">
</head>
<body>

		<header>
			<h1 class="judul"> Praktik Responsive Desain</h1>
			<p class="deskripsi">Pertemuan 12 – Praktik Layout Responsive Desain Tanpa Framework.</p>
		</header>

		<div class="wrap">

		<nav class="menu">
			<ul><li><a href="#">Home</a></li>
				<li><a href="#">Tutorial</a></li>
				<li><a href="#">Kontak</a></li>
			</ul>
		</nav>


		<aside class="sidebar">
			<div class="widget">
				<h2>Tutorial</h2>
				<p>Lorem ipsum dolor sit amet, consectetur
			</div>
			<div class="widget">
				<h2>Ebook Gratis</h2>
				<p>Lorem ipsum dolor sit amet, consectetur
			</div>
		</aside>

		<div class="blog">
			<div class="conteudo">
				<div class="post-info">Di Posting Oleh <b>Admin</b></div>
				<img src="assets/img/1.jpg">
				<h1> Full Responsive </h1>
				<hr>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit,
				</p>
				<a href="#" class="continue-lendo">Selengkapnya -</a>
			</div>
			<div class="conteudo">
				<div class="post-info">Di Posting Oleh <b>Admin</b></div>
				<img src="assets/img/2.jpg">
				<hl> About Wireframe </hl>
				<hr>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit,
				</p>
				<a href="#" class="continue-lendo">Selengkapnya -</a>
			</div>
		</div>

	</div>
</body>
</html>

body {
	background: #eee;
	margin:0;
	font-family: ‘Open Sans’, sans-serif;
}

hr {
	border:0;
	background:#dedede;
	height:1px;
}

header{
	text-align: center;
	text-align: center;
	color: #232323;
}

header .judul{
	font-size:17pt;
}

header .deskripsi{
	font-size:11pt;
}

.wrap {
	width: 950px;
	margin:25px auto;
}

nav.menu ul	{
	overflow:hidden;
	color:#fff;
	list-style: none;
	float:left;
	padding:0;
	width: 650px;
	margin:0 0 0;
	background: #950a31;
}

nav.menu ul li {
	margin:0;
	float:left;
}

nav.menu ul a {
	padding:25px;
	display:block;
	font-weight:600;
	font-size: 16px;
	color:#fff;
	text-transform: uppercase;
	transition: all 0.5s ease;
	text-decoration: none;
}
nav.menu ul a:hover {
	text-decoration: underline;
	background:#f42064;
}

.sidebar {
	Float:right;
	Width:275px;
}

.sidebar .widget {
	padding:25px;
	margin:0 0 25px;
	background:#fff;
	border-bottom: 2px solid #fff;
	transition: all 0.5s ease;
}

.sidebar .widget:hover {
	border-bottom: 2px solid #3498db;
}

sidebar .widget h2 {
	padding:0;
	margin:0 0 0 15px;
	color:#3498db;
	font-size: 18px;
	font-weight:800;
	text-transform: uppercase;
}

.sidebar .widget p {
	font-size: 14px;
}

.sidebar .widget p:last-child {
	margin:0;
}

.blog {
	float:left;
}

.conteudo {
	width:600px;
	padding:25px;
	margin;25px auto;
	background: #fff;
	border:1px solid #dedede;
}

.conteudo img {
	min-width: 650px;
	margin;0 0 25 -25px;
	max-width: 650PX;
}

.conteudo h1 {
	Padding:0;
	margin:0 0 15px;
	font-weight: normal;
	color:#666;
	font-family: Georgia;
}

.conteudo p:last-child {
	margin: 0;
}

.conteudo .continue-lendo {
	color:#000;
	transition: all 0.5s ease;
	text-decoration: none;
	font-weight: 700;
}

.conteudo .continue-lendo:hover {
	margin-left:10px;
}

.post-info {
	float: right;
	font-size: 12px;
	margin: -10px 0 15px;
	text-transform: uppercase;
}

@media	screen and (max-width: 960px) {
.header{
	position: inherit;
}
.wrap {
	width: 93.75%;
	margin: 25px auto;
}
.sidebar {
	width: 100%;
	margin: 25px 0 0;
	float: right;
}
.sidebar .widget{
	padding: 5%;
}
nav.menu ul{
	width: 100%;
}

nav.menu ul{
	float: inherit;
}
nav.menu ul li{
	float: inherit;
	margin: 0;
}
nav.menu ul a{
	padding: 15px;
	font-size: 16px;
	border-top: 1px solid #1abf9f;
	border-bottom: 1px solid #f42064;
}
.blog{
	width: 90%;
}
.conteudo{
	float: inherit;
	margin: 0 auto 25px;
	width: 101%;
	border: 1px solid #dedede;
	padding: 5%;
	background: #fff;
}
.conteudo img{
	max-width: 110%;
	margin: 0 0 25px -5%;
	min-width: 110%;
}
.conteudo .continue-lendo-hover{
	margin-left: 0;
}
}

@media screen and (max-width: 460px){

	nav.menu ul a{
		padding: 15px;
		font-size: 14px;
	}
	.sidebar {
		display: none;
	}
	.post-info{
		display: none;
	}

	.conteudo{
		margin: 25px auto;
	}
	.conteudo img{
		margin: -5% 0 25px -5%;
	}
}