diff --git a/app/view/Includes/css/style.css b/app/view/Includes/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..6b4271330f2faee7af46490f8b1059c0aacc2faa
--- /dev/null
+++ b/app/view/Includes/css/style.css
@@ -0,0 +1,367 @@
+body {
+ background-color:#76A7AE;
+ font-family: 'Work Sans', sans-serif;
+ margin: 0;
+ padding:0;
+}
+
+.wrapper{
+ min-height:100%;
+ position: relative;
+}
+
+header
+{
+ padding:5px;
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ background:#26346D;
+ height: 120px;
+}
+
+footer{
+ background: #003F00;
+ padding: 20px;
+ color:white;
+ position:absolute;
+ bottom:0;
+ left:0;
+ right:0;
+ height: 100px;
+ box-sizing: border-box;
+}
+
+.main{
+ margin-top:140px;
+ padding-bottom:100px;
+}
+
+article{
+ width:100%;
+ background:white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ padding-bottom: 20px;
+ padding-top: 20px;
+ box-sizing: border-box;
+}
+
+
+
+header a, footer a{
+ color:navajowhite;
+ text-decoration: none;
+}
+
+header a:hover, footer a:hover{
+ color:cadetblue;
+ text-decoration: none;
+}
+
+.row:after {
+ content: "";
+ clear: both;
+ display: block;
+}
+
+
+
+
+#logo {
+ margin-left:20px;
+}
+
+.search-bar-conteneur{
+ vertical-align: middle;
+ margin-top:5px;
+ background-color:white;
+ height: 32px;
+ border-radius: 2px;
+ position: static;
+
+}
+.connexion
+{
+ text-align: center;
+ border-radius: 2px;
+ background: #02071E;
+ margin-top:4px;
+ color:blanchedalmond;
+ line-height: 30px;
+ height:34px;
+}
+
+
+.signin{
+ width:40%;
+ text-align: center;
+ padding: 2px;
+ background: #02071E linear-gradient(to bottom, #02071E, #02071E, rgba(255, 255, 255, 0));
+ -webkit-transition: background 500ms; /* Safari */
+ transition: background 500ms ;
+ display: inline-block;
+ height:30px;
+}
+
+.signin:hover{
+ background: red linear-gradient(to bottom, #02071E, #02071E, rgba(255, 255, 255, 0));
+
+}
+
+.login{
+ width:50%;
+ text-align: center;
+ padding: 2px;
+ border-left: mintcream solid 1px;
+ background: #02071E linear-gradient(to bottom, #02071E, #02071E, rgba(255, 255, 255, 0));
+ -webkit-transition: background 500ms; /* Safari */
+ transition: background 500ms ;
+ display: inline-block;
+ height:30px;
+}
+
+.login:hover{
+ background: blue linear-gradient(to bottom, #02071E, #02071E, rgba(255, 255, 255, 0));
+}
+
+
+
+
+.logo-image{
+ height:40px;
+}
+.game{
+ background: white;
+ width:80%;
+ height:250px;
+ padding-top:3px;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ min-width: 220px;
+ margin: auto auto 10px;
+}
+.more{
+ background: darkgray;
+ height:250px;
+}
+
+.game-image{
+ height:220px;
+ display:block;
+ margin:auto;
+}
+
+.game-caption{
+ text-align: center;
+ vertical-align: middle;
+ padding:5px;
+ background: whitesmoke;
+}
+
+.pref{
+ list-style-type: none;
+ padding: 0;
+ text-align: center;
+}
+.stat-title{
+ text-align: center;
+}
+
+.jeux-preferes
+{
+ margin: auto;
+ width: 90%;
+ border-collapse: collapse;
+}
+
+.jeux-preferes tr td img{
+ width: 50px;
+ display: block;
+ margin:auto;
+
+}
+
+.jeux-preferes tr td{
+ vertical-align: middle;
+ text-align: center;
+ border: black solid 1px;
+ padding:2px;
+
+}
+
+.more-link{
+ text-align: right;
+ margin-right: 15px;
+}
+
+.game-row{
+ margin-bottom:20px;
+}
+
+
+[class*="col-"] {
+ width: 100%;
+
+}
+
+.space{
+ height:0;
+}
+
+
+
+.connexion-form{
+ margin: auto;
+ display: block;
+ width: 300px;
+}
+
+.connexion-form input{
+ margin-bottom:12px;
+}
+
+.profil-image, .jeu-image{
+ margin: auto;
+}
+
+.profil-image img{
+ width: 100px;
+ margin: auto;
+ display: block;
+ border-radius: 100%;
+ box-shadow: 0 6px 20px 2px black;
+}
+
+.jeu-image img{
+ width: 230px;
+ margin: auto;
+ display: block;
+ box-shadow: 0 6px 20px 2px black;
+}
+
+article {
+ padding: 10px;
+}
+article h1{
+ text-align: center;
+ font-size: 2em;
+ font-weight: bolder;
+}
+article h2{
+ text-align: center;
+}
+
+.classement-card{
+ width:100%;
+ background:white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-top: 24px;
+ padding:20px;
+ box-sizing: border-box;
+}
+
+.classement-table{
+ border-collapse: collapse;
+ margin: auto;
+ width: 100%;
+ text-align: center;
+ border: black solid 1px;
+}
+
+.classement-table th{
+ border: black solid 1px;
+}
+.classement-table td{
+ border-bottom: solid black 1px;
+ border-top: solid black 1px;
+}
+
+.classement-profil-img{
+ width: 50px;
+ border-radius: 100%;
+}
+@media only screen and (min-width: 600px) {
+ /* For tablets: */
+ .col-m-1 {width: 8.33%;}
+ .col-m-2 {width: 16.66%;}
+ .col-m-3 {width: 25%;}
+ .col-m-4 {width: 33.33%;}
+ .col-m-5 {width: 41.66%;}
+ .col-m-6 {width: 50%;}
+ .col-m-7 {width: 58.33%;}
+ .col-m-8 {width: 66.66%;}
+ .col-m-9 {width: 75%;}
+ .col-m-10 {width: 83.33%;}
+ .col-m-11 {width: 91.66%;}
+ .col-m-12 {width: 100%;}
+
+ [class*="col-"] {
+ float: left;
+ }
+
+
+ header{
+ height: 40px;
+ }
+
+ .main{
+ margin-top:60px;
+ }
+
+ .space{
+ height: 40px;
+ }
+
+}
+
+
+
+@media only screen and (min-width: 768px) {
+ .col-1 {width: 8.32%;}
+ .col-2 {width: 16.65%;}
+ .col-3 {width: 25%;}
+ .col-4 {width: 33.32%;}
+ .col-5 {width: 41.65%;}
+ .col-6 {width: 50%;}
+ .col-7 {width: 58.32%;}
+ .col-8 {width: 66.65%;}
+ .col-9 {width: 75%;}
+ .col-10 {width: 83.32%;}
+ .col-11 {width: 91.65%;}
+ .col-12 {width: 100%;}
+
+ .game{
+ margin-bottom:0;
+ }
+
+ article{
+ margin:auto;
+ width:768px;
+ background:white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+ }
+
+ .classement-card{
+ margin: 24px auto auto;
+ width:768px;
+ background:white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ }
+
+ .profil-image, .jeu-image{
+ float:left;
+ padding: 10px;
+ }
+
+ .profil-image img, .jeu-image img{
+ margin-right: 10px;
+ margin-left: 24px;
+
+ }
+
+
+
+
+}
+
diff --git a/app/view/Includes/footer.include.html b/app/view/Includes/footer.include.html
new file mode 100644
index 0000000000000000000000000000000000000000..b131881727723f6426dc8152533bd3bfe3d2dfd9
--- /dev/null
+++ b/app/view/Includes/footer.include.html
@@ -0,0 +1,12 @@
+
+ </div>
+
+ <footer>
+ <a href="#top">Haut de page</a>
+ <div id="copyright">
+ © Vincent Bochet, Romain Drouin, Eliah Rebstock & Guillaume Sézille
+ </div>
+ </footer>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/app/view/Includes/header.include.html b/app/view/Includes/header.include.html
new file mode 100644
index 0000000000000000000000000000000000000000..070246ef63828b1e82eb4ff7fc777a5ac2de4345
--- /dev/null
+++ b/app/view/Includes/header.include.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title><?php echo $page_title; ?></title>
+ <link rel="stylesheet" href="../app/view/Includes/css/style.css">
+ <link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet' type='text/css'>
+</head>
+<body>
+<div class="wrapper">
+ <header class="row">
+ <div class="col-2 col-m-2">
+ <a href="index.php">
+ <img class="logo-image" src="../app/view/Includes/images/logo.png" alt="logo du site web"/>
+ </a>
+ </div>
+
+ <div class="search-bar-conteneur col-3 col-m-3">
+ <!-- <form method="post" name="truc" class="search-bar-form">
+ <div class="search-bar-input-conteneur">
+ <input class="search-bar" type="text" name="machin" title="machin" />
+ </div>
+
+ <button type="submit" class="glass"><img src="../app/view/Includes/images/find.png" alt="icône de recherche" height="30px"/> </button>
+ </form>
+ -->
+ </div>
+
+ <div class="col-4 space col-m-1">
+
+ </div>
+ <div class="connexion col-3 col-m-6">
+ <div class="signin"><a class="connexion-link" href="inscription">Inscription</a></div>
+ <div class="login"><a class="connexion-link" href="connexion">Connexion</a></div>
+ </div>
+
+ </header>
+
+ <div class="main" id="top">
diff --git a/app/view/Includes/images/Cosmic_Encounter_(FFG).jpg b/app/view/Includes/images/Cosmic_Encounter_(FFG).jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b1ae656991f458ca75d93c5ea3c55aa6fd3b3cfd
Binary files /dev/null and b/app/view/Includes/images/Cosmic_Encounter_(FFG).jpg differ
diff --git a/app/view/Includes/images/dummy_web_page.jpg b/app/view/Includes/images/dummy_web_page.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..60c7db05eed6bfe7776ac7c82819b250fce12560
Binary files /dev/null and b/app/view/Includes/images/dummy_web_page.jpg differ
diff --git a/app/view/Includes/images/find.png b/app/view/Includes/images/find.png
new file mode 100644
index 0000000000000000000000000000000000000000..50f725595c540691511c5cc8498cd6c38c7c361b
Binary files /dev/null and b/app/view/Includes/images/find.png differ
diff --git a/app/view/Includes/images/logo.png b/app/view/Includes/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..185fd62b8307af1e992d98f6179f4049dc5c3be0
Binary files /dev/null and b/app/view/Includes/images/logo.png differ
diff --git a/app/view/Includes/images/plus-symbol.png b/app/view/Includes/images/plus-symbol.png
new file mode 100644
index 0000000000000000000000000000000000000000..aee1df91bd97c748767629c041b8ccc5d5563505
Binary files /dev/null and b/app/view/Includes/images/plus-symbol.png differ
diff --git a/app/view/Includes/images/profil_42.jpg b/app/view/Includes/images/profil_42.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b88921a049a84a5ab4c796c8b65c9a2be8e346eb
Binary files /dev/null and b/app/view/Includes/images/profil_42.jpg differ