Untitled

ini yg gambar kanan

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Simple YouTube Menu Effect</title>

		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
			<header class="clearfix">
				<h1>Palang Merah Indonesia Kota Magelang<span>Sistem Pendukung Keputusan Transfusi Darah</span></h1>
			</header>
			<div class="main">

			<p>
			<form action="input_pasien.php" method="post">
        <table>
          <tr>
            <td>NIP</td>
            <td>:</td>
            <td><input type="text" name="nip" size="10" maxlength="10"></td>
          </tr>
          <tr>
            <td>Nama Pasien</td>
            <td>:</td>
            <td><input type="text" name="nama" size="40" maxlength="40"></td>
          </tr>
          <tr>
            <td>Jenis Kelamin</td>
            <td>:</td>
            <td><input type="radio" name="jk" value="Laki-laki" checked>Laki-laki
            <input type="radio" name="jk" value="Perempuan">Perempuan
            </td>
          </tr>
          <tr>
            <td>Keterangan</td>
            <td>:</td>
            <td><textarea name="alamat" cols="40" rows="5"></textarea></td>
          </tr>
          </table>
          <input type="submit" name="submit" value="Simpan">
          <input type="reset" name="reset" value="Reset"></center>
        </form>
		</p>
<?php
mysql_connect("localhost","root","");
mysql_select_db("transfusi_wp");

if (isset($_POST['submit'])) {
  $nip = $_POST['nip'];
  $nama = $_POST['nama'];
  $jk = $_POST['jk'];
  $alamat = $_POST['alamat'];
  $sql = "INSERT INTO pasien values
        ('$nip','$nama','$jk','$alamat')";
        $query = mysql_query($sql) or die(mysql_error());
        if ($query) {
          echo "<script>window.alert('Data Berhasil di tambah');
                window.location=(href='pasien.php')</script>";
        }
}
?>

				<div class="side">
					<nav class="dr-menu">
						<div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">Menu</a></div>
						<ul>
							<li><a class="dr-icon dr-icon-user" href="main.php">Menu</a></li>
							<li><a class="dr-icon dr-icon-camera" href="input_pasien.php">Input Pasien</a></li>
							<li><a class="dr-icon dr-icon-heart" href="pasien.php">Lihat Pasien</a></li>
							<li><a class="dr-icon dr-icon-bullhorn" href="kriteria_tambah.php">Input Nilai Kriteria</a></li>
							<li><a class="dr-icon dr-icon-download" href="kriteria.php">Kriteria</a></li>
							<li><a class="dr-icon dr-icon-settings" href="hasil.php">Hasil</a></li>
							<li><a class="dr-icon dr-icon-switch" href="index.php">Logout</a></li>
						</ul>
					</nav>
				</div>
			</div>

		</div><!-- /container -->
		<script src="js/ytmenu.js"></script>
	</body>
</html>


untuk cssnya

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

body, html { font-size: 100%; padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #000;
	background: #fff;
	font-weight: 300;
}

a {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #000000;
}

.main,
.container > header {
	width: 100%;
	margin: 0 auto;
	padding: 0 1.875em 3.125em 1.875em;
}

.main {
	max-width: 69em;
	min-height: 600px;
	padding: 2em 0 0 0;
}

.side {
	float: right;
	width: 30%;
	padding-right: 20px;
	min-width: 320px;
	box-shadow: 1px 0 rgba(0,0,0,0.1);
}

.main p {
	font-size: 2em;
	padding: 0 1em;
	margin: 0;
	line-height: 1.5;
	float: right;
	width: 70%;
}

.container > header {
	padding: 2.875em 1.875em 2.875em;
	text-align: center;
	background: #fff;
}

.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	color: #000;
	font-weight: 300;
}

.container > header span {
	display: block;
	font-size: 60%;
	color: #000;
	padding: 0 0 0.6em 0.1em;
}

/* Header Style */
.codrops-top {
	background: #fff;
	background: rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
	position: relative;
	font-size: 0.68em;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
	line-height: 2.2;
}

.codrops-top a {
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #333;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.99);
	color: #000;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

@media screen and (max-width: 66.9375em) {
	.side, .main p {
		float: none;
		width: 100%;
		box-shadow: none;
		padding: 1em;
	}

	.main p {
		font-size: 130%;
	}
}