maj solution tp2

- nouveau dom (maj skin css)
- HomePage -> PizzaList
- passage PageRenderer -> Router
- suppression classe Page (inutile à ce stade avec le Router)

.prettierrc

@@ -2,5 +2,6 @@
 	"singleQuote": true,
 	"trailingComma": "es5",
 	"endOfLine": "lf",
-	"useTabs": true
-}
+	"useTabs": true,
+	"arrowParens": "avoid"
+}
\ No newline at end of file

css/fonts/GravitasOne_LICENCE.txt

+Copyright (c) 2011 by Sorkin Type Co (www.sorkintype.com),
+with Reserved Font Name "Gravitas".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

css/fonts/OpenSans_LICENSE.txt

+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

css/footer.css

+
+body > footer {
+	position: relative;
+	padding: 90px;
+	background-image: url('../images/header-sj-0fmiFfzRhQY-unsplash.jpg');
+	background-size: cover;
+	background-position: center;
+	z-index: 10;
+	color: #ccc;
+	text-align: center;
+}
+body > footer:after {
+	content: '';
+	display: block;
+	position: absolute;
+	left: 0;
+	top: -10px;
+	height: 0;
+	width: 100%;
+	background-image: linear-gradient(#121618, #121618), linear-gradient(-45deg, transparent 75%, #121618 75%), linear-gradient(45deg, transparent 75%, #121618 75%);
+	background-position: 0 0, 0 0, 0 0, 0 100%, 0 100%;
+	background-size: auto auto, 15px 15px, 15px 15px, 15px 15px, 15px 15px;
+	background-clip: padding-box, border-box, border-box, border-box, border-box;
+	background-origin: padding-box, border-box, border-box, border-box, border-box;
+	border: solid transparent;
+	border-width: 5px 0;
+	background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x;
+	transform: scaleY(-1);
+}
+body > footer:before {
+	content: '';
+	position: absolute;
+	z-index: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-image: linear-gradient(0deg, #121618ee, #121618);
+}
+body > footer a {
+	color: #fff;
+}
+body > footer a:hover {
+	color: #edad4a;
+}
+body > footer > div {
+	z-index: 10;
+}
+body > footer > div:first-child {
+	background-image: url('../images/logo.svg');
+	background-repeat: no-repeat;
+	background-position: top;
+	background-size: 80px;
+	padding-top: 80px;
+}
\ No newline at end of file

css/header.css

+body > header {
+	position: relative;
+	background-image: url('../images/header-sj-0fmiFfzRhQY-unsplash.jpg');
+	background-size: cover;
+	background-position: center;
+	padding: 50px 10px 10px;
+	background-color: #121618;
+	z-index: 10;
+}
+body > header:before {
+	content: '';
+	position: absolute;
+	z-index: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-image: linear-gradient(0deg, #121618, #121618ee);
+}
+body > header:after {
+	content: '';
+	display: block;
+	position: absolute;
+	left: 0;
+	bottom: -20px;
+	height: 0;
+	width: 100%;
+	background-image: linear-gradient(#121618, #121618), linear-gradient(-45deg, transparent 75%, #121618 75%), linear-gradient(45deg, transparent 75%, #121618 75%);
+	background-position: 0 0, 0 0, 0 0, 0 100%, 0 100%;
+	background-size: auto auto, 15px 15px, 15px 15px, 15px 15px, 15px 15px;
+	background-clip: padding-box, border-box, border-box, border-box, border-box;
+	background-origin: padding-box, border-box, border-box, border-box, border-box;
+	border: solid transparent;
+	border-width: 10px 0;
+	background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x;
+}
+
+body > header > nav {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+body > header .logo {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	color: #eee;
+	text-decoration: none;
+}
+body > header .logo img {
+	width: 120px;
+}
+body > header .logo span {
+	font-family: GravitasOne;
+	text-transform: uppercase;
+	font-size: 22px;
+	letter-spacing: 4px;
+}
+body > header .logo em {
+	font-style: normal;
+	color: #e2952d;
+}
+body > header .logo small {
+	font-family: OpenSansCondensed;
+	font-size: 14px;
+	letter-spacing: 5px;
+	font-weight: lighter;
+	text-transform: uppercase;
+	color: #999;
+}
+body > header .logo small:before,
+body > header .logo small:after {
+	content: '〜';
+	display: inline-flex;
+	/* padding: 0 10px; */
+}
+body > header .logo small:after {
+	transform: scaleX(-1);
+}
+body > header .logo img,
+body > header .logo span,
+body > header .logo small {
+	transition: all .7s cubic-bezier(.190, 1.000, .220, 1.000);
+	transform: translateY(0);
+}
+body > header .logo:hover img,
+body > header .logo:hover span,
+body > header .logo:hover small {
+	transform: translateY(-4px);
+}
+body > header .logo:hover img {
+	transform: translateY(-6px) scale(1.1);
+	transition-timing-function: cubic-bezier(.12,1.93,0,.91);
+	transition-duration: 1.1s;
+}
+body > header .logo img {
+	/* transition-duration: .5s; */
+}
+body > header .logo span {
+	/* transition-duration: .3s; */
+	/* transition-delay: .075s; */
+}
+body > header .logo small {
+	transition-delay: .075s;
+	/* transition-duration: .1s; */
+}
+body > header ul.mainMenu {
+	list-style-type: none;
+	margin: 20px 0 0;
+	padding: 0;
+	display: flex;
+	align-items: center;
+}
+body > header ul.mainMenu li {
+	display: flex;
+}
+
+body > header ul.mainMenu li a {
+	position: relative;
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	font-family: OpenSansCondensed;
+	font-size: 18px;
+	font-weight: lighter;
+	letter-spacing: 4px;
+	text-transform: uppercase;
+	text-decoration: none;
+	text-align: center;
+	color: #ddd;
+	transition: all .2s ease;
+}
+body > header ul.mainMenu li a:after {
+	content: '';
+	width: 0;
+	height: 1px;
+	background-color: #fff;
+	opacity: 0;
+	position: absolute;
+	bottom: 10px;
+	transition: all .1s ease, opacity .025s ease-out;
+	transition-delay: 0, .5s;
+}
+body > header ul.mainMenu li a:hover,
+body > header ul.mainMenu li a:focus,
+body > header ul.mainMenu li a.active {
+	color: #fff;
+}
+body > header ul.mainMenu li a:hover:after,
+body > header ul.mainMenu li a:focus:after {
+	opacity: 1;
+	width: 20px;
+	transition-delay: 0,0;
+}
+body > header ul.mainMenu li a.active:after {
+	opacity: 1;
+	width: 50%;
+}
+
+

css/main.css

-html {
-	height: 100%;
+@font-face {
+	font-family: GravitasOne;
+	src: url("./fonts/GravitasOne-Regular.ttf");
+	font-weight: normal;
 }
-body {
-	background: #f1f1f1;
-	padding-bottom: 50px;
-	position: relative;
-	min-height: 100%;
-}
-@media (min-width: 200px) {
-	.navbar-header{
-		float: left;
-	}
-	.navbar-right {
-		float: right !important;
-		margin-right: -15px;
-	}
-	.navbar-nav > li {
-		float: left;
-	}
-	.navbar-nav > li > a {
-		padding-top: 19.5px;
-		padding-bottom: 19.5px;
-	}
-	.navbar-nav {
-		margin:0;
-	}
-}
-#appContainer {
-	padding-top: 80px;
-}
-.row.marketing {
-	margin: 0 auto;
-	max-width: 900px;
-}
-.video-detail, .media-list {
-	background: #fff;
-	padding-top: 20px 0;
-	box-shadow: 0 1px 2px rgba(0,0,0,.1);
+@font-face {
+	font-family: OpenSansCondensed;
+	src: url("./fonts/OpenSansCondensed-Light.ttf");
+	font-weight: lighter;
 }
-.video-detail {
-	padding: 20px;
+@font-face {
+	font-family: OpenSansCondensed;
+	src: url("./fonts/OpenSansCondensed-Bold.ttf");
+	font-weight: bold;
 }
-.media, .pizzasContainer > a {
-	padding: 20px;
-	border-bottom: 1px solid rgba(0,0,0,.1);
-	margin: 0;
-	display: flex;
-}
-.media .infos, .pizzasContainer > a .infos {
-	display: flex;
-	flex-direction: column;
-}
-.media a {
-	display: flex;
-}
-.media p {
-	font-size: 12px;
-}
-.media img, .pizzasContainer > a img {
-	margin-right: 20px;
-	width: 246px;
-	height: 138px;
+
+* {
+	box-sizing: border-box;
 }
-.media h4 .pizzasContainer > a h4 {
-	font-size: 25px;
+html,
+body {
 	margin: 0;
+	/* height: 100%; */
+	padding: 0;
+	background: #eee;
 }
-a, a:hover {
-	color: #333;
-}
-a h4, a:hover h4 {
-	color: #167ac6;
-}
-.comments .panel {
-	margin: 5px 0;
-}
-.navbar-inverse {
-	background: #fff;
-	box-shadow: 0 1px 2px rgba(0,0,0,.1);
-	/*position: relative;
+body {
+	min-height: 100vh;
 	color: black;
-}
-.navbar-inverse:after {
-	content: '';
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 2px;*/
-	background-color: #cd1a1a;
-	background-image: linear-gradient(45deg, #cd1a1a, #cb1a70);
-}
-.navbar-inverse .navbar-nav > li > a,
-.navbar-inverse .navbar-nav > li > a:focus {
-	color: #f9d2d2;
-}
-.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
-	background-color: #b01717;
-}
-.navbar-inverse .navbar-nav > li > a:hover {
-	color: #fff;
-	background-color: #b01717;
-}
-.navbar-brand {
-	padding: 0 15px;
+	font-size: 14px;
+	font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	display: flex;
-	align-items: center;
-}
-.navbar-brand > img {
-	display: inline-block;
-	height: 50px;
-	margin-right: 10px;
-}
-.navbar-brand > small {
-	font-size: 12px;
-	font-style: italic;
-	margin-left:10px;
-	margin-top:5px;
-}
-footer {
-	position: absolute;
-	bottom: 10px;
-	right: 10px;
-	font-size: 10px;
-	color: #0003;
-}
-footer a{
-	color: #0006;
-}
-form {
-	display:flex;
-	padding: 20px;
 	flex-direction: column;
 }
-form label {
+.pageContainer,
+body > footer {
 	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: baseline;
-}
-form label input,
-form label select,
-form label .form-control {
-	width: 70%;
+	flex-direction: column;
+	align-items: center;
+	padding: 0 40px;
 }
-
-.jumbotron {
-	padding: 20px 60px;
-	background-color: #e2e8e9;
+.pageContainer {
+	color: #121618;
 	background-image: url('../images/bg.png');
-	background-size: cover;
-	background-position: center;
-	animation: fadeIn .8s ease, slide 1.2s cubic-bezier(.190, 1.000, .220, 1.000);
-	animation-delay: .1s;
-	animation-fill-mode: both;
-	overflow: hidden;
+	background-size: 110%;
+	background-position: center -20px;
+	background-repeat: repeat-y;
+	padding-bottom: 90px;
+	flex-grow: 1;
+}
+.pageTitle {
+	min-height: 50px;
+}
+.pageTitle, .pageContent, body > footer > div {
+	width: 100%;
+	max-width: 1200px;
+}
+.pageTitle h1 {
+	margin-top: 50px;
+	margin-bottom: 40px;
+	font-size: 40px;
+	font-family: OpenSansCondensed;
+	text-transform: uppercase;
 	position: relative;
+	padding-bottom: 10px;
 }
-.jumbotron .closeButton {
-	position: absolute;
-	right: 20px;
-	top: 20px;
-	width: 40px;
-	height: 40px;
-	border: none;
-	background: none;
-	transform: rotate(-45deg);
-	transform-origin: center;
-	transition: all .3s ease;
-}
-.jumbotron .closeButton:hover {
-	transform: scale(1.2) rotate(135deg);
-}
-
-.jumbotron .closeButton:before,
-.jumbotron .closeButton:after {
+.pageTitle h1:after {
 	content: '';
-	border-radius: 3px;
 	position: absolute;
-	top:50%;
-	left: 10px;
-	right: 10px;
-	border: 2px black solid;
-	transform-origin: center;
-	transform: translateY(-2px);
-}
-.jumbotron .closeButton:after {
-	transform: translateY(-2px) rotate(90deg);
-}
-.jumbotron .spicy{
-	font-size:130%;
-	background: linear-gradient(-55deg, #cd1a1e 0%,#faa119 40%, #fecf0a 50%, #faa119 60%, #cd1a1e 100%);
-	background-size: 200% 200%;
-	white-space: nowrap;
-	color: #cd1a1e;
-	background-clip: text;
-	text-fill-color: transparent;
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-
-}
-.jumbotron .spicy:hover {
-	animation: slideBg .1s linear infinite;
-}
-.jumbotron .spicy:hover .spicy-icon{
-	animation: burn .01s linear infinite;
-}
-.jumbotron h1, .jumbotron p {
-	animation: fadeIn .6s ease, slide .4s cubic-bezier(.190, 1.000, .220, 1.000);
-	animation-delay: .4s;
-	animation-fill-mode: both;
-}
-.jumbotron p {
-	animation-delay: .5s;
-}
-.jumbotron .spicy-icon {
-	height:50px;
-	vertical-align: baseline;
-	transform-origin: bottom left;
-}
-@keyframes slideBg {
-	100% {
-		background-position: -200% center;
-	}
+	left: 0;
+	bottom: 0;
+	height: 1px;
+	background-color: currentColor;
+	width: 80px;
 }
-@keyframes burn {
-	100% {
-		transform: skew(-13deg);
-	}
+.pageContent {
+	font-size: 16px;
 }
-@keyframes fadeIn {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
+a {
+	color: #e2952d;
 }
-@keyframes slide {
-	0% {
-		transform: translateX(-300px);
-	}
+a:hover {
+	color: #edad4a;
 }
 .is-loading {
 	position:relative;
@@ -256,7 +96,6 @@ form label .form-control {
 	left:0;
 	right:0;
 	bottom:0;
-	background-color: rgba(0,0,0,.1);
 	z-index: 1;
 }
 .is-loading:after {
@@ -267,7 +106,7 @@ form label .form-control {
 	width: 50px;
 	height: 50px;
 	border: 1px black solid;
-	border-top-color: rgba(0,0,0,.3);
+	border-top-color: rgba(0,0,0,.1);
 	z-index: 2;
 	border-radius: 50%;
 	animation: rotate .5s linear infinite;
@@ -280,4 +119,25 @@ form label .form-control {
 	100% {
 		transform: translate(-50%,-50%) rotate(360deg);
 	}
+}
+@keyframes fadeIn{
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+@keyframes slide {
+	from { transform: translateX(-300px); }
+}
+@keyframes slideUp{
+	from { transform: translateY(20px); }
+	to { transform: translateY(0); }
+}
+@keyframes slideBg {
+	to { background-position: -200% center; }
+}
+@keyframes zoomOut{
+	from { transform: scale(.7); }
+	to { transform: scale(1); }
+}
+@keyframes burn {
+	to { transform: translateX(3px) skew(-13deg); }
 }
\ No newline at end of file

css/news.css

+.newsContainer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+	z-index: 0;
+	padding: 70px 40px 90px;
+	background-color: #000;
+	background-image: url('../images/news-bg-chad-montano-MqT0asuoIcU-unsplash.jpg');
+	background-size: cover;
+	background-position: center;
+}
+.newsContainer:before {
+	content: '';
+	display: block;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	height: 0;
+	width: 100%;
+	background-image: linear-gradient(#eee, #eee), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
+	background-position: 0 0, 0 0, 0 0, 0 100%, 0 100%;
+	background-size: auto auto, 15px 15px, 15px 15px, 15px 15px, 15px 15px;
+	background-clip: padding-box, border-box, border-box, border-box, border-box;
+	background-origin: padding-box, border-box, border-box, border-box, border-box;
+	border: solid transparent;
+	border-width: 5px 0;
+	background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x;
+	transform: scaleY(-1);
+}
+.newsContainer:after {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: -1;
+	background-image: linear-gradient(90deg, #121618aa 30%, #12161800 90%);
+	/* background-image: linear-gradient(90deg, #12161899, #e2952d55); */
+}
+.newsContainer article {
+	width: 100%;
+	max-width: 1200px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	color: #fff;
+	font-size: 24px;
+	position: relative;
+	animation: fadeIn .8s ease, slide 1.1s cubic-bezier(.190, 1.000, .220, 1.000);
+	animation-delay: .1s;
+	animation-fill-mode: both;
+}
+.newsContainer article .closeButton {
+	position: absolute;
+	right: 20px;
+	top: -40px;
+	width: 50px;
+	height: 50px;
+	border: none;
+	background: none;
+	cursor: pointer;
+	animation: fadeIn .6s ease, slideUp .4s cubic-bezier(.190, 1.000, .220, 1.000);
+	animation-delay: 1s;
+	animation-fill-mode: both;
+}
+.newsContainer article .closeButton:hover:before {
+	transform: translateY(-2px) scale(1.2) rotate(45deg);
+}
+.newsContainer article .closeButton:hover:after {
+	transform: translateY(-2px) scale(1.2) rotate(135deg);
+}
+.newsContainer article .closeButton:before,
+.newsContainer article .closeButton:after {
+	content: '';
+	border-radius: 3px;
+	position: absolute;
+	top:50%;
+	left: 10px;
+	right: 10px;
+	border: 1px white solid;
+	transform-origin: center;
+	transform: translateY(-2px) rotate(-45deg);
+	transition: all .3s ease;
+}
+.newsContainer article .closeButton:after {
+	transform: translateY(-2px) rotate(45deg);
+}
+
+
+.newsContainer article h1, .newsContainer article p {
+	width: 80%;
+	max-width: 700px;
+	font-family: OpenSansCondensed;
+	font-weight: lighter;
+	letter-spacing: .15em;
+	animation: fadeIn .6s ease, slide .4s cubic-bezier(.190, 1.000, .220, 1.000);
+	animation-delay: .4s;
+	animation-fill-mode: both;
+}
+.newsContainer article h1 {
+	font-size: 40px;
+	position: relative;
+	margin-top: 0;
+	padding-bottom: 30px;
+	margin-bottom: 20px;
+}
+.newsContainer article h1:after {
+	content: '';
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	height: 2px;
+	background-color: #eee;
+	width: 60%;
+}
+
+.newsContainer article h1 strong {
+	font-family: GravitasOne;
+	font-weight: normal;
+	text-transform: uppercase;
+	letter-spacing: 0;
+}
+.newsContainer article h1 strong em {
+	font-style: normal;
+	color: #ddd;
+}
+.newsContainer article p {
+	animation-delay: .5s;
+	margin: 0;
+}
+
+.newsContainer article .spicy{
+	font-size:150%;
+	background: linear-gradient(-55deg, #cd1a1e 0%,#faa119 40%, #fecf0a 50%, #faa119 60%, #cd1a1e 100%);
+	background: linear-gradient(-55deg, #ff4548 0%,#f8b652 40%, #ffff00 50%, #f8b652 60%, #ff4548 100%);
+	background-size: 200% 200%;
+	white-space: nowrap;
+	color: #cd1a1e;
+	background-clip: text;
+	text-fill-color: transparent;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	/* font-style: italic; */
+	font-weight: normal;
+}
+.newsContainer article .spicy:after {
+	content: '';
+	display: inline-block;
+	width: 50px;
+	height: 50px;
+	margin-left: 10px;
+	background-image: url('../images/hot.svg');
+	background-size: contain;
+	background-repeat: no-repeat;
+	/* transform-origin: bottom left; */
+}
+.newsContainer article .spicy:hover {
+	animation: slideBg .1s linear infinite;
+}
+.newsContainer article .spicy:hover:after {
+	animation: burn .01s linear infinite;
+}
\ No newline at end of file

css/pizzaList.css

+.pizzaList {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.pizzaThumbnail {
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+}
+.pageContent > .pizzaThumbnail {
+	display: inline-block;
+}
+
+.pizzaThumbnail a {
+	display: flex;
+	flex-direction: row;
+	text-decoration: none;
+	color: #121618;
+	overflow: hidden;
+}
+.pizzaThumbnail:nth-child(4n) a,
+.pizzaThumbnail:nth-child(4n-1) a {
+	flex-direction: row-reverse;
+}
+.pizzaThumbnail:nth-child(4n) a section:before,
+.pizzaThumbnail:nth-child(4n-1) a section:before {
+	left: auto;
+	right: -20px;
+	transform: scaleX(-1) translateY(-50%);
+}
+.pizzaThumbnail {
+	background-color: #fff;
+}
+.pizzaThumbnail a {
+	/* background-color: #12161899; */
+	background-image: linear-gradient(15deg, #121618ff 40%, #12161855 80%);
+	/* background-image: linear-gradient(15deg, #4191b9ff 40%, #fff 80%); */
+	background-size: contain;
+	transition: all 1s ease;
+}
+.pizzaThumbnail a:hover img {
+	opacity: 1;
+	/* mix-blend-mode: normal; */
+}
+.pizzaThumbnail a img {
+	min-height: 300px;
+	object-fit: cover;
+	mix-blend-mode: normal;
+	opacity: .8;
+	background-color: #ccc;
+	filter: contrast(1.1);
+}
+
+.pizzaThumbnail a img,
+.pizzaThumbnail a section {
+	width: 50%;
+	flex-grow: 1;
+}
+.pizzaThumbnail a img,
+.pizzaThumbnail a section,
+.pizzaThumbnail a section:before {
+	transition: all .7s cubic-bezier(.190, 1.000, .220, 1.000), width .2s cubic-bezier(.190, 1.000, .220, 1.000);
+}
+
+
+.pizzaThumbnail a section {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding: 20px 20px;
+	font-size: 16px;
+	background-color: #f9f9f9;
+}
+.pizzaThumbnail a section:before {
+	content: '';
+	position: absolute;
+	left: -20px;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 0;
+	height: 0;
+	border-top: 20px solid transparent;
+	border-bottom: 20px solid transparent;
+	border-right:20px solid #f9f9f9;
+}
+.pizzaThumbnail a section h4 {
+	text-align: center;
+	font-family: OpenSansCondensed;
+	font-weight: bold;
+	font-size: 30px;
+	letter-spacing: 2px;
+	text-transform: uppercase;
+	color: #000;
+	/* color: #e2952d; */
+	margin: 0 0 15px;
+	white-space: nowrap;
+}
+.pizzaThumbnail a section h4:before,
+.pizzaThumbnail a section h4:after {
+	content: '〜';
+	font-weight: lighter;
+	display: inline-flex;
+	font-size: 0.5em;
+	vertical-align: middle;
+	margin: 0 10px;
+}
+.pizzaThumbnail a section h4:after {
+	transform: scaleX(-1);
+}
+.pizzaThumbnail a section ul {
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+	color: #555;
+}
+.pizzaThumbnail a:hover img {
+	/* filter: contrast(1) grayscale(0) brightness(1); */
+	width: 48%;
+}
+.pizzaThumbnail a:hover section {
+	background-color: #fff;
+	/* width: 52%; */
+}
+.pizzaThumbnail a:hover section:before {
+	border-right-color: #fff;
+}
+@media (max-width: 1200px) {
+	.pizzaThumbnail a img {
+		min-height: calc(25vw - 20px);
+	}
+	.pizzaThumbnail a section {
+		font-size: 14px;
+	}
+	.pizzaThumbnail a section h4 {
+		font-size: 25px;
+		letter-spacing: 0;
+	}
+}
+@media (max-width: 900px) {
+	.pizzaThumbnail a section h4 {
+		font-size: 20px;
+		letter-spacing: 0;
+	}
+	.pizzaThumbnail a section {
+		font-size: 12px;
+	}
+}
+@media (max-width: 780px) {
+	.pizzaThumbnail {
+		width: 100%;
+	}
+	.pizzaThumbnail a {
+		height: 200px;
+	}
+	.pizzaThumbnail:nth-child(4n) a,
+	.pizzaThumbnail:nth-child(4n-1) a {
+		flex-direction: row;
+	}
+	.pizzaThumbnail:nth-child(4n) a section:before,
+	.pizzaThumbnail:nth-child(4n-1) a section:before {
+		left: -20px;
+		right: auto;
+		transform: translateY(-50%);
+	}
+	.pizzaThumbnail:nth-child(2n) a {
+		flex-direction: row-reverse;
+	}
+	.pizzaThumbnail:nth-child(2n) a section:before {
+		left: auto;
+		right: -20px;
+		transform: scaleX(-1) translateY(-50%);
+	}
+}
+@media (max-width: 480px) {
+	.pizzaThumbnail a {
+		height: auto;
+		flex-direction: column;
+	}
+	.pizzaThumbnail:nth-child(n) a {
+		flex-direction: column;
+	}
+	.pizzaThumbnail a img,
+	.pizzaThumbnail a section {
+		height: 150px;
+		width: 100%;
+		font-size: 16px;
+	}
+	.pizzaThumbnail a section {
+		height: 150px;
+	}
+	.pizzaThumbnail a section h4 {
+		font-size: 25px;
+		letter-spacing: 3px;
+	}
+	.pizzaThumbnail a section:before {
+		content: none;
+	}
+	.pizzaThumbnail a:hover img,
+	.pizzaThumbnail a:hover section {
+		width: 100%;
+	}
+
+}
\ No newline at end of file

index.html

@@ -8,49 +8,36 @@
 
 	<link rel="icon" href="images/icon.png" sizes="96x96">
 
-	<link rel="stylesheet" type="text/css" href="css/flatly-bootstrap.css" />
 	<link rel="stylesheet" type="text/css" href="css/main.css" />
+	<link rel="stylesheet" href="css/header.css">
+	<link rel="stylesheet" href="css/news.css">
+	<link rel="stylesheet" href="css/pizzaList.css">
+	<link rel="stylesheet" href="css/footer.css">
 
 	<script src="build/main.bundle.js" defer></script>
 </head>
 <body>
-	<main id="appContainer">
-		<div class="container">
-			<header>
-				<nav class="navbar navbar-inverse navbar-fixed-top">
-					<div class="container">
-						<div class="navbar-header">
-							<a class="navbar-brand" href="#">
-								<img src="images/logo.svg" /> PizzaLand
-							</a>
-						</div>
-						<ul class="nav navbar-nav navbar-right">
-							<li><a href="#" class="pizzaListButton">La carte</a></li>
-							<li><a href="#" class="pizzaFormButton">Ajouter une Pizza</a></li>
-						</ul>
-					</div>
-				</nav>
-				<section class="newsContainer" style="display:none">
-					<article class="jumbotron">
-						<button class="closeButton"></button>
-						<h1>Welcome to PizzaLand !</h1>
-						<p>Bienvenue sur notre magnifique catalogue de pizzas !</p>
-					</article>
-				</section>
-			</header>
-			<section class="row marketing">
-				<div class="col-lg-12">
-					<header class="pageTitle"></header>
-					<section class="media-list pizzasContainer">
-					</section>
-				</div>
-			</section>
-		</div>
-	</main>
+	<header>
+		<nav>
+			<a href="#" class="logo">
+				<img src="images/logo.svg" />
+				<span>Pizza<em>land</em></span>
+			</a>
+			<ul class="mainMenu">
+				<li><a href="/" class="pizzaListLink">La carte</a></li>
+				<li><a href="/a-propos" class="aboutLink">À propos</a></li>
+				<li><a href="/ajouter-pizza" class="pizzaFormLink">Ajouter une pizza</a></li>
+			</ul>
+		</nav>
+	</header>
+	<section class="pageContainer">
+		<header class="pageTitle"></header>
+		<div class="pageContent"></div>
+	</section>
 	<footer>
-			Free photos from <a href="https://unsplash.com/unsplash">Unsplash</a>
-			<br>
-			Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 			    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+		<div>Une (incroyable) création originale de <a href="http://uidlt.fr">Thomas Fritsch</a> pour l'<a href="https://www.iut-a.univ-lille.fr/">IUT A</a> de l'<a href="https://www.univ-lille.fr/">Université de Lille</a></div>
+		<div>Free photos from <a href="https://unsplash.com/unsplash">Unsplash</a></div>
+		<div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 			    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
 	</footer>
 </body>
 </html>
\ No newline at end of file

js/PageRenderer.js

-export default class PageRenderer {
-	static titleElement;
-	static contentElement;
-
-	static renderPage(page) {
-		if (this.titleElement) {
-			this.titleElement.innerHTML = page.renderTitle();
-		}
-		if (this.contentElement) {
-			this.contentElement.innerHTML = page.render();
-		}
-	}
-}

js/main.js

-import data from './data.js';
-import HomePage from './pages/HomePage.js';
-import PageRenderer from './PageRenderer.js';
-
-// Initialisation du PageRenderer
-PageRenderer.titleElement = document.querySelector('.pageTitle');
-PageRenderer.contentElement = document.querySelector('.pizzasContainer');
-
-// Affichage de la HomePage
-const homePage = new HomePage(data);
-PageRenderer.renderPage(homePage); // affiche la liste des pizzas
-//
-// On aurait aussi pu faire ceci :
-//
-// const homePage = new HomePage([]);
-// homePage.pizzas = data;
-// PageRenderer.renderPage(homePage); // affiche la liste des pizzas

js/pages/Page.js

-import Component from '../components/Component';
-
-export default class Page extends Component {
-	title = '';
-
-	constructor(title, children) {
-		super('section', null, children);
-		this.title = title;
-	}
-
-	renderTitle() {
-		return `<h1>${this.title}</h1>`;
-	}
-}

package.json

@@ -8,16 +8,17 @@
     "build": "webpack --mode=production",
 	"watch": "webpack --mode=development --watch"
   },
-  "author": "thomas.fritsch@univ-lille.fr",
+  "author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
+  "homepage": "https://gitlab.univ-lille.fr/js",
   "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "babel-loader": "^8.0.6",
-    "prettier": "^1.19.1",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10"
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.12.11",
+    "babel-loader": "^8.2.2",
+    "prettier": "^2.2.1",
+    "webpack": "^5.18.0",
+    "webpack-cli": "^4.4.0"
   }
 }