<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AMIV</title>
<link href="bs/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="bs/js/bootstrap.min.js"></script>
<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
<link href="css/logo-nav.css" rel="stylesheet">
<link href="css/cards.css" rel="stylesheet">
<link href="css/dynamic.css" rel="stylesheet">
<style>
.grid-item-content {
height: 100px;
background: #D26;
border: 2px solid hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
}
.grid-item-content--height2 {
height: 200px;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">
<img src="res/AMIV_Logo_150_50.svg" alt="AMIV" height="80%">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Der AMIV</a>
</li>
<li>
<a href="#">Studium</a>
</li>
<li>
<a href="#">Jobbörse</a>
</li>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container-fluid">
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTWlKmVgsFszoyjRfd258A2yx_DbI_5GLSd_VxRcRJvEup5tbxReA">
</div>
<div class="card-content">
<p>Das ist der AMIV </p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Der AMIV</a>
</div>
</div>
</div>
<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://www.5amtag.ch/wp-content/uploads/2010/03/5amtag_banane_m.jpg">
</div>
<div class="card-content" >
<p>Du suchst etwas Abwechslung vom Studienalltag? Du möchtest dich im AMIV oder einer Kommission engagieren? Dann bist du hier richtig!</p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Get involved!</a>
</div>
</div>
</div>
<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://www.5amtag.ch/wp-content/uploads/2010/03/5amtag_banane_m.jpg">
</div>
<div class="card-content" >
<p> Hier werden aktuelle und alte Vorstände und ihre Funktionen aufgelistet</p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Vorstand</a>
</div>
</div>
</div>
<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://www.5amtag.ch/wp-content/uploads/2010/03/5amtag_banane_m.jpg">
</div>
<div class="card-content">
<p> jflglruhldkjfhlkrhdlkjfhlkjlkm <br> <br> <br> <br></p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Protokolle</a>
</div>
</div>
</div>
<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://img.funcloud.com/original/2016/03/6673151175913860553464650-374591.jpg">
</div>
<div class="card-content">
<p>ihgfd</p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Impessum/kontakt</a>
</div>
</div>
</div>
</div>
</div>
<script>
$('.grid').masonry({
itemSelector: '.grid-item',
originLeft: false
});
</script>
</body>
</html>