aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--Images/teint-cela.jpgbin0 -> 17999 bytes
-rw-r--r--Images/teint.jpgbin0 -> 32549 bytes
-rw-r--r--Pages/presentation.html3
-rw-r--r--Pages/teint.html12
-rw-r--r--Pages/teint/ceci.html35
-rw-r--r--Pages/teint/cela.html22
-rw-r--r--README.md1
-rw-r--r--index.html71
-rw-r--r--menu.css56
-rw-r--r--reset.css50
-rw-r--r--script.js36
-rw-r--r--style.css73
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
Binary files differ
diff --git a/Images/teint.jpg b/Images/teint.jpg
new file mode 100644
index 0000000..e49b6f6
--- /dev/null
+++ b/Images/teint.jpg
Binary files differ
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;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-22 19:48:36 +0000