Untitled

<!doctype html>
<html>
   <head>
      <title>C: /IMAGE.EXE</title>
      <meta charset="UTF-8"/>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="icon" href="assets/Logo.png"/>
      <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
      <link href="css/stylesheet.css" rel="stylesheet" type="text/css">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <div class="container-fluid" id="wrapper">
         <!-- <nav class="navbar navbar-custom" style="margin-bottom: 0;">
            <div class="container-fluid">
            	<div class="navbar-header">
            		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            	        <span class="icon-bar"></span>
            	        <span class="icon-bar"></span>
            	        <span class="icon-bar"></span>
            		</button>
            		<a href="index.php" class="navbar-brand"><p class="name">C: /IMAGE.EXE</p></a>
            	</div>
            	<div class="collapse navbar-collapse" id="myNavbar">
            		<ul class="nav navbar-nav">
            			<li class="active "><a href="index.php"><span >Home</span></a></li>
            			<li ><a href="contact.php"><span >About & Contact</span></a></li>
            			<li ><a href="profile.php"><span >Profile</span></a></li>
            		</ul>
            		<ul class="nav navbar-nav navbar-right">


            		</ul>
            	</div>
            </div>
            </nav>
            -->
         <nav class="navbar navbar-default main-navigation">
            <div class="container-fluid">
               <!-- Brand and toggle get grouped for better mobile display -->
               <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                  <a class="navbar-brand" href="./index.php">C: /IMAGE.EXE</a>
               </div>
               <!-- Collect the nav links, forms, and other content for toggling -->
               <div class="collapse navbar-collapse" id="defaultNavbar1">
                  <ul class="nav navbar-nav">
                     <li class="active"><a href="./index.php">Home<span class="sr-only">(current)</span></a></li>
                     <li><a href="./contact.php">About & Contact</a></li>
                     <li><a href="./profile.php">Profile</a></li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                     <li>
                        <form action="index.php?" method="post"><input class="btn btn-default" type="submit" name="logout" value="logout"/></form>
                     </li>
                  </ul>
               </div>
               <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
         </nav>
         <section class="container-fluid toggle" id="login-div">
            <div class="row">
               <form action="index.php" method="post">
                  <span class="col-md-4">
                  <label for="login-username">Username</label>
                  <input type="text" name="login-username" id="login-username"/>
                  </span>
                  <span class="col-md-4">
                  <label for="login-password">Password</label>
                  <input type="password" name="login-password" id="login-password"/>
                  </span>
                  <span class="col-md-4">
                  <input type="submit" name="login" value="Login" class="btn btn-default">
                  </span>
               </form>
            </div>
         </section>
         <!--
            <div class="container-fluid logindiv">
            	<div class="row">
            		<form action="index.php" method='post'>
            		</form>
            	</div>
            </div>-->
         <div class="col-md-2 advertisement"><img src="images/Placeholder_image.jpg" width="200" height="600" alt=""/></div>
         <main class="col-md-8">
            <div class="pagetitle">
               <h1>FORUM</h1>
            </div>
            <section class="board-container">
               <header class="board-header">
                  <h2>Boards</h2>
               </header>
               <nav class="container-fluid">
                  <section class="col-md-3 board-block">
                     <h3>Japanese Culture</h3>
                     <nav>
                        <ul>
                           <li><a href='boardpage.php?board_link=a'>Anime</a></li>
                        </ul>
                     </nav>
                  </section>
                  <section class="col-md-3 board-block">
                     <h3>Misc</h3>
                     <nav>
                        <ul></ul>
                     </nav>
                  </section>
                  <section class="col-md-3 board-block">
                     <h3>Creative</h3>
                     <nav>
                        <ul>
                           <li><a href='boardpage.php?board_link='>Adobe Illustrator</a></li>
                        </ul>
                     </nav>
                  </section>
                  <section class="col-md-3 board-block">
                     <h3>Intrests</h3>
                     <nav>
                        <ul></ul>
                     </nav>
                  </section>
               </nav>
               <footer class="board-footer"><em> Enjoy!</em></footer>
            </section>
            <a href='addBoard.php'>Add board</a>
            <section class="container-fluid stats">
               <div class="row">
                  <header class="col-md-12 stats-header">
                     <h2>Stats</h2>
                  </header>
                  <article class="col-md-6">
                     <h3>Amount of users</h3>
                     <p>10</p>
                  </article>
                  <article class="col-md-6">
                     <h3>Amount of posts & reactions</h3>
                     <p>44</p>
                  </article>
               </div>
            </section>
         </main>
         <div class="col-md-2 advertisement"><img src="images/Placeholder_image.jpg" width="200" height="600" alt=""/></div>
         <footer class="col-md-12 main-footer">Webdevelopment by: Kevin Neven</footer>
      </div>
      <script src="js/jquery-1.11.3.min.js"></script>
      <script src="js/bootstrap.js"></script>
      <script src="js/div-toggel.js"></script>
   </body>
</html>

@charset "UTF-8";
body{
	background-color: rgba(108,139,165,1.00);
	width: 100%;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
#wrapper {
	padding: 0px;
	min-height: 800px;
}

#login-div {
	background-color: rgba(248,248,248,1.00);
	height: 80px;
	padding-top: 10px;
	padding-bottom: auto;
}

.pagetitle {
	text-align: center;
	border-radius: 20px;
	background-color: rgba(234,231,232,1.00);
	min-width: 0px;
	min-height: 100px;
	padding-top: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.pagetitle h1{
	color: rgba(108,139,165,1.00);

}
.main-navigation {
	border-radius: 0px;
	margin:0px;
}
.main-footer {
	background-color: rgba(234,231,232,0.8);
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	font-size: medium;
}
.advertisement {
	background-color: rgba(186,183,183,1.00);
	max-width: 60%;
	height: 600px;
	padding: 0px;
}

.advertisement img{
	width: 100%;
	height: 100%;
}
.board-container {
	margin-left: auto;
	margin-right: auto;
}
.board-header {
	background-color: rgba(234,231,232,0.7);
	border-radius: 11px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}
.board-block {
	background-color: rgba(137,148,127,1.00);
	padding-top: 3px;
	padding-bottom: 3px;
	border-left-style: solid;
	border-left-width: 1px;
	border-color: rgba(234,231,232,0.7);
	height: 250px;
}

.board-block ul{
	list-style:none;
}
.board-block ul a{
	color: rgba(234,231,232,1);
}

.board-footer {
	background-color: rgba(234,231,232,0.7);
	border-radius: 11px;
	padding-bottom: 0px;
	padding-left: 10px;
	padding-right: 10px;
	height: 60px;
	text-align: center;
	padding-top: 20px;
}

.stats-header{
	text-align: center;
	margin-top: 40px;
	background-color: rgba(80,85,94,1.00);
}
.stats-header h2{
	font-size: 26px;
	color: rgba(234,231,232,1);
}
.stats article {
	background-color: rgba(234,231,232,1.00);
	border-style: solid;
	border-width: 1px;
	border-color: rgba(80,85,94,1.00);
}

@media screen and (max-width: 480px) {
	.advertisement{
	max-width: 50%;
	}
}