<div class="amui-l-app-layout">
<nav class="amui-o-top-bar navbar">
<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="#top-bar-collapse" 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="amui-o-top-bar__logo amui-m-navbar-logo navbar-brand" href="index.html">
<h1 class="amui-a-brand-logo is--light">Bienvenue Aix-Marseille université</h1>
<span class="amui-m-navbar-logo__heading-title">Si AMU</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-bar-collapse">
<ul class="amui-o-top-bar__nav navbar-nav navbar-right">
<li class="amui-o-top-bar__nav-list-item">
<a class="amui-m-nav-icon is--inner-text-inline-block" href="#">
<i class="material-icons md-24">account_circle</i>
<span class="amui-m-nav-icon__inner-text">Utilisateur</span>
</a>
</li>
<li class="amui-o-top-bar__nav-list-item">
<a class="amui-m-nav-icon" href="http://ent.univ-amu.fr">
<span class="amui-m-nav-icon__inner-text">ENT</span>
</a>
</li>
<li class="amui-o-top-bar__nav-list-item">
<a class="amui-m-nav-icon is--active" href="rss.html">
<i class="material-icons md-24">rss_feed</i>
</a>
</li>
<li class="amui-o-top-bar__nav-list-item">
<a class="amui-m-nav-icon" href="info.html">
<i class="material-icons md-24">help</i>
</a>
</li>
<li class="amui-o-top-bar__nav-list-item amui-m-btn-dropdown dropdown dropdown--parent">
<a class="amui-m-nav-icon is--inner-text-inline-block dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons md-24">settings</i>
<span class="amui-m-nav-icon__inner-text">Admin</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Visites</a>
</li>
<li>
<a href="#">Paramétrages</a>
</li>
<li>
<a href="#">Listes</a>
</li>
<li>
<a href="#">Historique</a>
</li>
</ul>
</li>
<li class="amui-o-top-bar__nav-list-item">
<a class="amui-m-nav-icon" href="#">
<i class="material-icons md-24">exit_to_app</i>
</a>
</li>
</ul>
</div>
</div> <!-- Container fluid -->
</nav> <!-- Organism top bar -->
<div id="navbar-collapse" class="amui-l-app-layout__wrapper">
<ul class="amui-o-sidebar-nav">
<li class="amui-o-sidebar-nav__list-item">
<a class="amui-m-nav-icon is--active is--inner-text" href="#">
<i class="material-icons md-24">home</i>
<span class="amui-m-nav-icon__inner-text">Accueil</span>
</a>
</li>
<li class="amui-o-sidebar-nav__list-item">
<a class="amui-m-nav-icon is--inner-text" href="#">
<i class="material-icons md-24">announcement</i>
<span class="amui-m-nav-icon__inner-text">Evènements</span>
</a>
</li>
<li class="amui-o-sidebar-nav__list-item">
<a class="amui-m-nav-icon is--inner-text" href="#">
<i class="material-icons md-24">apps</i>
<span class="amui-m-nav-icon__inner-text">Applications</span>
</a>
</li>
<li class="amui-o-sidebar-nav__list-item">
<a class="amui-m-nav-icon is--inner-text" href="#">
<i class="material-icons md-24">storage</i>
<span class="amui-m-nav-icon__inner-text">Serveurs</span>
</a>
</li>
<li class="amui-o-sidebar-nav__list-item">
<a class="amui-m-nav-icon is--inner-text" href="#">
<i class="material-icons md-24">account_balance</i>
<span class="amui-m-nav-icon__inner-text">Habilitation</span>
</a>
</li>
</ul>
<main role="main" class="amui-l-app-layout__main">
<div class="container-fluid">
<div class="amui-l-page-header amui-g-grid row is--middle">
<div class="amui-g-grid__item col-xs-12 col-md-6">
<h2 class="amui-l-page-header__title">Projets</h2>
</div>
</div>
<div class="amui-g-grid row amui-l-page">
<div class="amui-g-grid__item col-xs-12">
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 col-sm-6 col-md-4 col-lg-3">
<section class="amui-o-card amui-o-card--success panel panel-default clearfix">
<div class="amui-o-card__heading">
<i class="amui-o-card__heading-icon material-icons md-24" href="#evenement-modal" data-toggle="modal" data-whatever="465" data-whatever2="1">announcement</i>
<h1 class="amui-o-card__heading-title">Title</h1>
</div>
<div class="amui-o-card__progress">
<p class="amui-m-progress__title">Criticité<span class="amui-m-progress--level"> Faible</span></p>
<div class="amui-a-progress progress amui-m-progress__container">
<div class="amui-a-progress__bar progress-bar is--success is--low" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div> <!-- Progress bar success Molecule -->
</div>
<div class="amui-o-card__details">
<div class="amui-m-callout">
<p class="amui-m-callout__title">Catégorie :<span class="amui-m-callout__description"> Nom</span></p>
</div> <!-- Callout Molecule -->
<div class="amui-m-callout">
<p class="amui-m-callout__title">Type :<span class="amui-m-callout__description"> Label</span></p>
</div> <!-- Callout Molecule -->
<div class="amui-m-callout">
<p class="amui-m-callout__title">Description :<span class="amui-m-callout__description"><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci dui, placerat in purus id, consequat tempor ex.</span></p>
</div> <!-- Callout Molecule -->
</div>
<div class="amui-o-card__date">
<div class="amui-m-info-date">
<p class="amui-m-info-date__title">Debut</p>
<span class="amui-m-info-date__day">JJ/MM/YYYY</span>
<span class="amui-m-info-date__time">00:00</span>
</div>
<div class="amui-m-info-date">
<p class="amui-m-info-date__title">Fin</p>
<span class="amui-m-info-date__day">JJ/MM/YYYY</span>
<span class="amui-m-info-date__time">00:00</span>
</div> <!-- Info date Molecule -->
</div>
</section> <!-- Card info Success Molecules -->
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-6 col-md-4 col-lg-3">
<section class="amui-o-card amui-o-card--warning panel panel-default clearfix">
<div class="amui-o-card__heading">
<i class="amui-o-card__heading-icon material-icons md-24" href="#evenement-modal" data-toggle="modal" data-whatever="465" data-whatever2="1">announcement</i>
<h1 class="amui-o-card__heading-title">Title</h1>
</div>
<div class="amui-o-card__progress">
<p class="amui-m-progress__title">Criticité<span class="amui-m-progress--level"> Moyenne</span></p>
<div class="amui-a-progress progress amui-m-progress__container">
<div class="amui-a-progress__bar progress-bar is--warning is--medium" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div> <!-- Progress bar Warning Molecule -->
</div>
<div class="amui-o-card__details">
<div class="amui-m-callout">
<p class="amui-m-callout__title">Catégorie :<span class="amui-m-callout__description"> Nom</span></p>
</div> <!-- Callout Molecule -->
<div class="amui-m-callout">
<p class="amui-m-callout__title">Type :<span class="amui-m-callout__description"> Label</span></p>
</div> <!-- Callout Molecule -->
<div class="amui-m-callout">
<p class="amui-m-callout__title">Description :<span class="amui-m-callout__description"><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci dui, placerat in purus id, consequat tempor ex.</span></p>
</div> <!-- Callout Molecule -->
</div>
<div class="amui-o-card__date">
<div class="amui-m-info-date">
<p class="amui-m-info-date__title">Debut</p>
<span class="amui-m-info-date__day">JJ/MM/YYYY</span>
<span class="amui-m-info-date__time">00:00</span>
</div>
<div class="amui-m-info-date">
<p class="amui-m-info-date__title">Fin</p>
<span class="amui-m-info-date__day">JJ/MM/YYYY</span>
<span class="amui-m-info-date__time">00:00</span>
</div> <!-- Info date Molecule -->
</div>
</section> <!-- Card info Warning Molecules -->
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-6 col-md-4 col-lg-3">
<section class="amui-o-card amui-o-card--danger panel panel-default clearfix">
<div class="amui-o-card__heading">
<i class="amui-o-card__heading-icon material-icons md-24" href="#evenement-modal" data-toggle="modal" data-whatever="465" data-whatever2="1">announcement</i>
<h1 class="amui-o-card__heading-title">Title</h1>
</div>
<div class="amui-o-card__progress">
<p class="amui-m-progress__title">Criticité<span class="amui-m-progress--level"> Forte</span></p>
<div class="amui-a-progress progress amui-m-progress__container">
<div class="amui-a-progress__bar progress-bar is--danger is--high" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div> <!-- Progress bar Danger Molecule -->
</div>
<div class="amui-o-card__details">
<div class="amui-m-callout">
<p class="amui-m-callout__title">Catégorie :<span class="amui-m-callout__description"> Nom</span></p>
</div> <!-- Callout Molecule -->
<div class="amui-m-callout">
<p class="amui-m-callout__title">Type :<span class="amui-m-callout__description"> Label</span></p>
</div> <!-- Callout Molecule -->
<div class="amui-m-callout">
<p class="amui-m-callout__title">Description :<span class="amui-m-callout__description"><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci dui, placerat in purus id, consequat tempor ex.</span></p>
</div> <!-- Callout Molecule -->
</div>
<div class="amui-o-card__date">
<div class="amui-m-info-date">
<p class="amui-m-info-date__title">Debut</p>
<span class="amui-m-info-date__day">JJ/MM/YYYY</span>
<span class="amui-m-info-date__time">00:00</span>
</div>
<div class="amui-m-info-date">
<p class="amui-m-info-date__title">Fin</p>
<span class="amui-m-info-date__day">JJ/MM/YYYY</span>
<span class="amui-m-info-date__time">00:00</span>
</div> <!-- Info date Molecule -->
</div>
</section> <!-- Card info Danger Molecules -->
</div>
</div>
</div>
</div>
</div>
</main>
</div> <!-- Main container -->
<footer role="contentinfo" class="amui-m-footer amui-l-app-layout__footer panel-default">
<small>Aix-Marseille Université - Dosi Pôle développement <a href="mailto:jp.floret@univ-amu.fr?subject=Siamu">jp.floret@univ-amu.fr</a> </small>
</footer> <!-- Footer -->
</div>