Bootstrap architecture

12 files changed, 359 insertions, 0 deletions

diff --git a/Images/teint-cela.jpg b/Images/teint-cela.jpg
new file mode 100644
index 0000000..64e18a6
--- /dev/null
+++ b/Images/teint-cela.jpg
diff --git a/Images/teint.jpg b/Images/teint.jpg
new file mode 100644
index 0000000..e49b6f6
--- /dev/null
+++ b/Images/teint.jpg
diff --git a/Pages/presentation.html b/Pages/presentation.html
new file mode 100644
index 0000000..0dd9c4d
--- /dev/null
+++ b/Pages/presentation.html
@@ -0,0 +1,3 @@
+<h1>Présentation</h1>
+
+<p>blabla…</p>
diff --git a/Pages/teint.html b/Pages/teint.html
new file mode 100644
index 0000000..5c7a5c7
--- /dev/null
+++ b/Pages/teint.html
@@ -0,0 +1,12 @@
+<h1>Teint</h1>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec
+condimentum lacus. Donec arcu lorem, sagittis nec nisi sit amet, lobortis
+elementum nisl. Etiam interdum porttitor eros non imperdiet. Donec non
+mollis lorem. Pellentesque euismod dui ac erat laoreet pellentesque. Fusce
+vestibulum, nunc eu scelerisque convallis, quam mi placerat elit, sit amet
+commodo nisi lacus vitae nisl. Ut tempor est ipsum, lacinia egestas tortor
+tincidunt id. Nam in turpis tellus. Sed id porta nulla. Phasellus sit amet
+arcu eu mi interdum sollicitudin et nec mi. Integer aliquam mi dui.
+Maecenas aliquet leo sit amet odio auctor finibus. Suspendisse a pulvinar
+purus. </p>
diff --git a/Pages/teint/ceci.html b/Pages/teint/ceci.html
new file mode 100644
index 0000000..01f4900
--- /dev/null
+++ b/Pages/teint/ceci.html
@@ -0,0 +1,35 @@
+<h1>Teint</h1>
+
+<h2>Ceci</h2>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec
+condimentum lacus. Donec arcu lorem, sagittis nec nisi sit amet, lobortis
+elementum nisl. Etiam interdum porttitor eros non imperdiet. Donec non
+mollis lorem. Pellentesque euismod dui ac erat laoreet pellentesque. Fusce
+vestibulum, nunc eu scelerisque convallis, quam mi placerat elit, sit amet
+commodo nisi lacus vitae nisl. Ut tempor est ipsum, lacinia egestas tortor
+tincidunt id. Nam in turpis tellus. Sed id porta nulla. Phasellus sit amet
+arcu eu mi interdum sollicitudin et nec mi. Integer aliquam mi dui.
+Maecenas aliquet leo sit amet odio auctor finibus. Suspendisse a pulvinar
+purus. </p>
+
+<img src="Images/teint.jpg" alt="Teint">
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec
+condimentum lacus. Donec arcu lorem, sagittis nec nisi sit amet, lobortis
+elementum nisl. Etiam interdum porttitor eros non imperdiet. Donec non
+mollis lorem. Pellentesque euismod dui ac erat laoreet pellentesque. Fusce
+vestibulum, nunc eu scelerisque convallis, quam mi placerat elit, sit amet
+commodo nisi lacus vitae nisl. Ut tempor est ipsum, lacinia egestas tortor
+tincidunt id. Nam in turpis tellus. Sed id porta nulla. Phasellus sit amet
+arcu eu mi interdum sollicitudin et nec mi. Integer aliquam mi dui.
+Maecenas aliquet leo sit amet odio auctor finibus. Suspendisse a pulvinar
+purus. </p>
+
+<h2>Sources</h2>
+
+<ul>
+  <li><a href="http://www.google.com/">http://www.google.com/</a></li>
+  <li><a href="http://www.google.com/">http://www.google.com/</a></li>
+  <li><a href="http://www.google.com/">http://www.google.com/</a></li>
+</ul>
diff --git a/Pages/teint/cela.html b/Pages/teint/cela.html
new file mode 100644
index 0000000..e7f9441
--- /dev/null
+++ b/Pages/teint/cela.html
@@ -0,0 +1,22 @@
+<h1>Teint</h1>
+
+<h2>Cela</h2>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec
+condimentum lacus. Donec arcu lorem, sagittis nec nisi sit amet, lobortis
+elementum nisl. Etiam interdum porttitor eros non imperdiet. Donec non
+mollis lorem. Pellentesque euismod dui ac erat laoreet pellentesque. Fusce
+vestibulum, nunc eu scelerisque convallis, quam mi placerat elit, sit amet
+commodo nisi lacus vitae nisl. Ut tempor est ipsum, lacinia egestas tortor
+tincidunt id. Nam in turpis tellus. Sed id porta nulla. Phasellus sit amet
+arcu eu mi interdum sollicitudin et nec mi. Integer aliquam mi dui.
+Maecenas aliquet leo sit amet odio auctor finibus. Suspendisse a pulvinar
+purus. </p>
+
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+
+<img src="Images/teint-cela.jpg">
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..cc84961
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+# Makeup
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7831b95
--- /dev/null
+++ b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset="UTF-8">
+    <title>Maquillage</title>
+    <script src="script.js"></script>
+    <link rel="stylesheet" type="text/css" href="reset.css">
+    <link rel="stylesheet" type="text/css" href="menu.css">
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+
+  <body>
+
+    <div class="headerMenuContent">
+
+      <div class="header">
+        Maquillage
+      </div>
+
+      <ul class="menu">
+        <li>
+          <a href="#/teint">Teint</a>
+          <ul class="hidden">
+            <li><a href="#/teint/ceci">Ceci</a></li>
+            <li><a href="#/teint/cela">Cela</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="#">Yeux</a>
+          <ul class="hidden">
+            <li><a href="#">A</a></li>
+            <li><a href="#">B</a></li>
+            <li><a href="#">C</a></li>
+            <li><a href="#">D</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="#">Lèvres</a>
+          <ul class="hidden">
+            <li><a href="#">A</a></li>
+            <li><a href="#">B</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="#">Accessoires</a>
+          <ul class="hidden">
+            <li><a href="#">A</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="#">Démaquillant</a>
+          <ul class="hidden">
+            <li><a href="#">A</a></li>
+            <li><a href="#">B</a></li>
+            <li><a href="#">C</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="#">Promos</a>
+        </li>
+      </ul>
+
+      <div id="content"></div>
+
+    </div>
+
+    <div class="contact">Contact : Auriane Besnard</div>
+
+  </body>
+</html>
diff --git a/menu.css b/menu.css
new file mode 100644
index 0000000..4d3ec65
--- /dev/null
+++ b/menu.css
@@ -0,0 +1,56 @@
+ul.menu {
+  position: absolute;
+  width: 800px;
+  display: table;
+  table-layout: fixed;
+}
+
+ul.menu > li {
+  display: table-cell;
+}
+
+ul.menu li {
+  margin-bottom: 0px;
+  margin-left: 0px;
+}
+
+ul.menu a {
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  color: white;
+  text-decoration: none;
+  display: block;
+  background-color: #333333;
+  margin-right: 1px;
+  margin-left: 1px;
+}
+
+ul.menu a:hover + .hidden, ul.hidden:hover {
+  display: block;
+}
+
+ul.hidden {
+  display: none;
+}
+
+ul.hidden li {
+  display: block;
+  float: none;
+}
+
+ul.hidden a {
+  width: auto;
+  min-width: 100px;
+  padding: 0 20px;
+  background-color: #EEEEEE;
+  color: black;
+}
+
+ul.hidden a:hover {
+  color: white;
+}
+
+ul.menu > li:hover > a, ul.hidden > li:hover > a {
+  background-color: pink;
+}
diff --git a/reset.css b/reset.css
new file mode 100644
index 0000000..72bc5c9
--- /dev/null
+++ b/reset.css
@@ -0,0 +1,50 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..07feacd
--- /dev/null
+++ b/script.js
@@ -0,0 +1,36 @@
+(function () {
+
+  function fetchFile(url, successHandler, errorHandler) {
+    var xhr = typeof XMLHttpRequest != 'undefined'
+      ? new XMLHttpRequest()
+      : new ActiveXObject('Microsoft.XMLHTTP');
+    xhr.open('get', url, true);
+    xhr.responseType = 'text';
+    xhr.onreadystatechange = function() {
+      var status;
+      var data;
+      if (xhr.readyState == 4) {
+        status = xhr.status;
+        if (status === 200 || status === 0) {
+          data = xhr.responseText;
+          successHandler && successHandler(data);
+        } else {
+          errorHandler && errorHandler(status);
+        }
+      }
+    };
+    xhr.send();
+  };
+
+  function router() {
+    var url = location.hash.slice(2) || 'presentation';
+    fetchFile('Pages/' + url + '.html', function(htmlData) {
+      var viewElement = document.getElementById('content');
+      viewElement.innerHTML = htmlData;
+    });
+  }
+
+  this.addEventListener('hashchange', router);
+  this.addEventListener('load', router);
+
+})();
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a1489cb
--- /dev/null
+++ b/style.css
@@ -0,0 +1,73 @@
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background-color: #FBDEE3;
+}
+
+.headerMenuContent {
+  width: 800px;
+  margin: auto;
+}
+
+.header {
+  padding: 30px;
+  text-align: center;
+  font-size: 36px;
+  color: #222222;
+  text-shadow: 2px 2px #ADADAD;
+}
+
+#content {
+  margin-top: 90px;
+}
+
+h1 {
+  font-size: 30px;
+  margin-bottom: 30px;
+  margin-left: 10px;
+}
+
+h2 {
+  font-size: 26px;
+  margin-bottom: 30px;
+  margin-left: 10px;
+  text-decoration: underline;
+}
+
+p {
+  margin-bottom: 30px;
+  text-indent: 30px;
+  line-height: 24px;
+}
+
+img {
+  border: 1px solid black;
+  display: block;
+  margin: auto;
+  margin-bottom: 30px;
+}
+
+ul {
+  margin-bottom: 30px;
+}
+
+li {
+  list-style-type: square;
+  margin-left: 30px;
+  margin-bottom: 5px;
+}
+
+a {
+  text-decoration: none;
+  color: darkblue;
+}
+
+a:hover {
+  color: #4C4C80;
+}
+
+.contact {
+  background-color: #EEEEEE;
+  padding: 30px;
+  text-align: center;
+  color: #555555;
+}