From 199d76ec529c674873d1112d4dd393cd07bda4a7 Mon Sep 17 00:00:00 2001
From: Rocher <maxime.rocher@etu.uca.fr>
Date: Mon, 23 Sep 2024 11:53:51 +0200
Subject: [PATCH] Debut du bandeau (50/50 avec kentin)

---
 images/WIKIFANTASY.png | Bin 0 -> 5372 bytes
 images/coeur.svg       |   3 +++
 images/dark.svg        |   3 +++
 images/quizz.svg       |   3 +++
 index.html             |  18 ++++++++++++--
 pages/accueil.html     |  18 ++++++++++++--
 style/style.css        |  55 +++++++++++++++++++++++++++++++++++++++++
 7 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 images/WIKIFANTASY.png
 create mode 100644 images/coeur.svg
 create mode 100644 images/dark.svg
 create mode 100644 images/quizz.svg
 create mode 100644 style/style.css

diff --git a/images/WIKIFANTASY.png b/images/WIKIFANTASY.png
new file mode 100644
index 0000000000000000000000000000000000000000..2dffdeeb0d7618d440f57d57d3ff7f829be60d2a
GIT binary patch
literal 5372
zcmb`L_ct4k_r~qLx71!WD%5C=qGHd6*g>fxikKCvHEPe=YBnTlyr~^~#42hNn<}NK
zy=#5?{U5&foaesIy}#Xao*$lbW5I@6)D!>;JUl#V9c^{vfBf}Nu4E+tdW?@o$3KvJ
zYFql?;ZZXFpYZW=^4R_@@qLW7KzLQ79NYf}B4<?tRXn_!WXc<RVmv&i6diR{6My`@
ze0RU;C#(Y=1iwxf)2cqdBGxw#y_$n8L@`VL7g`;zZ-!^18pTX!75MkD6ERARt&Sk-
z>$@qR0}DeAEs1;AAd>8f0}kol%-5EaGs80(^;*zTkIq}O!?CryyE_bS;RCLCHst>H
zV!l`_S#&}2t8KeNlh4*D@4%Mwz01bRzdBwGxqo*%^+IJt*8b*VHH7gzC|ROsP5f$t
zIAk_<vsEBb?wtUTk*3Gfg7gOJH77A~DYFKCSb23Z7IJsBMa;l`RkDcjc#$J%9h}L*
z9Xl+ca(C&Vqu9me&Rf-`{EJHIrwZ*WxO|VZ%FSU9dDzX}^?@-st}*oFUc%xt(3qGu
z!TjoQt%npTnG-&C^qzy<VK6)(YrPI-@5Rd!_3&}Gde7PxEeI4D)xCPdxiv%VE{|~;
z_GG^?d=uQO)SBBKaI(oyiH*-zq$dF~4e)(DetLg@{OP99)sKGebLjoi0CyDSr99o&
zpR+GR^8JXrO-aUn$)n{jcPhS?+yt%XE)a}w%loe#Fsv0u7ZkgUxcCmKAQmqK44R~J
zk3zV8*vfcN;n~My^zQQ4^^Q$ARU(J7L%;8lGnZW2-S$YOEzny-@-RAl=P-p+rFCGQ
zsu;yXvaIUox{ilQl3{L5v+ca$BiNRY{>DY56GbsfzBW!o{0AO=jza_@tEX(I65;O(
z{X#1lb;F<)^3Fe`BUxQ64d2l={fPO<OoSykn?}5p=gO(S|G@%M`fg|6yx4y6?-JAL
z58%jOmub)C#3ef8JInamUcts&?)m0*kxc56&31Q1hsN5oRY7S3PCk=H<DON0YD|JC
z*DLe5;(euU4dE%&k+}v}h@M=Qmv@GVj)IBHA-c8!B;sjbkiy5mEcXXcrD#3*5S1($
zdp?cmj1K*>WJtDwtAv_fdnEDyXXn%Qh10GgvR2FfZXN-d{wwqG+@In{RFsjJei8lo
z@@$FDpG8M&ZU3y=oi~OJm5!xF^G_PBgoz6-a>VkYiMA3v+pt~hB5HC^t%xcm2bXMr
ze`54ZpJVEM9CpYyxhVR^O3x2ENmG3Wy1KnsHIJC>Csjt1u)Z2u%ErX^fsE-4*~tju
zA{kyZ3~#(F`ENO9grt2E=|N;87a@ag?O=+W{fEgxar;V7t0MZPm-zglriluL%b8(X
z#P-&`RHS(`RDi7Vpcf@DvO<afEG*9-F(`9n)rjVd<>%As7L<far!7bIYlGRA48&V6
zURR}gMrt$HSgFe9Pf)1ylP#BVz<Ie_0}P4izme8Zglm?=8e?tfhZx>IsP)Frpt6N1
z!j&iq)-KwTo<&87O#hmWQp=CiCQ9YQDdo$xIfmWPR0nXPi{^#=K*GyS4B^leFs}}7
z(wL6$f|gtW6=C$oW4PC+f#;u(5O0(G86uf5)x>kP$W_zHq-sXcHk-*5p92V<vK6K^
z?r$8SFkK6)$8^o<36jC7t~fkj%J=xd+RDmcp|}v&IYFc~Pg3xvOH%kx|AFvP7M7gh
zb;Ow37}I)}<A0If;dp&o`fGEyVy~%0AP**OX0jQRtS8*4p%`5OtkzB}6v!M&iN*+S
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

literal 0
HcmV?d00001

diff --git a/images/coeur.svg b/images/coeur.svg
new file mode 100644
index 0000000..4ac9bb7
--- /dev/null
+++ b/images/coeur.svg
@@ -0,0 +1,3 @@
+<svg width="138" height="130" viewBox="0 0 138 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M69 11.3884C107.279 -28.1488 202.984 41.037 69 130C-64.9844 41.0456 30.7212 -28.1488 69 11.3884Z" fill="white"/>
+</svg>
diff --git a/images/dark.svg b/images/dark.svg
new file mode 100644
index 0000000..442157b
--- /dev/null
+++ b/images/dark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 262.86">
+<path fill-rule="nonzero" d="M316.78 16.55h-205.9c-30.5 0-58.22 12.48-78.31 32.57C12.47 69.21 0 96.93 0 127.44c0 30.5 12.47 58.22 32.57 78.31 20.09 20.1 47.81 32.57 78.31 32.57h193.25c21.54 15.43 47.9 24.54 76.26 24.54h.18c36.14 0 69.02-14.79 92.83-38.6 23.8-23.81 38.6-56.67 38.6-92.83 0-36.15-14.78-69.03-38.63-92.8C449.53 14.8 416.67 0 380.57 0h-.18c-23.02 0-44.72 6.02-63.61 16.55zm70.62 97.17.43.09c.82-3.45 2.83-6.19 6.04-8.16 3.2-1.98 6.53-2.57 10.01-1.75l.1-.43c-3.47-.82-6.2-2.83-8.17-6.03-1.98-3.22-2.57-6.55-1.75-10.01l-.43-.1c-.82 3.47-2.83 6.2-6.03 8.18-3.21 1.98-6.55 2.56-10.02 1.74l-.1.43c3.47.82 6.2 2.84 8.18 6.04 1.99 3.19 2.56 6.52 1.74 10zm36.87 16.77.53.12c1.02-4.35 3.55-7.78 7.58-10.26 4.02-2.49 8.2-3.22 12.56-2.19l.13-.53c-4.35-1.03-7.78-3.55-10.26-7.59-2.49-4.03-3.22-8.22-2.2-12.56l-.53-.12c-1.02 4.35-3.55 7.77-7.58 10.26-4.02 2.49-8.21 3.22-12.56 2.19l-.13.53c4.36 1.03 7.78 3.55 10.26 7.58 2.49 4.02 3.22 8.22 2.2 12.57zm-38.79-61.01c-15.69 7.67-26.98 23.26-28.29 41.93-1.96 27.88 19.05 52.06 46.92 54.02 13.23.93 25.64-3.32 35.22-11.02 4.75-3.82 9.66-.45 7.59 4.36-11.33 26.42-38.45 44.04-68.74 41.91-38.29-2.69-67.14-35.91-64.45-74.19C316.3 89.8 347.05 61.67 383.44 62c6.71.06 8.13 4.5 2.04 7.48zm-5.09-53.95h.18c63.75 0 115.91 52.15 115.91 115.9 0 63.75-52.23 115.91-115.91 115.91h-.18c-63.68 0-115.91-52.16-115.91-115.91s52.16-115.9 115.91-115.9z" fill="white"/>
+</svg> 
\ No newline at end of file
diff --git a/images/quizz.svg b/images/quizz.svg
new file mode 100644
index 0000000..4b7c2c3
--- /dev/null
+++ b/images/quizz.svg
@@ -0,0 +1,3 @@
+<svg width="165" height="263" viewBox="0 0 165 263" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M107.959 174.467C98.9557 168.667 96.0352 168.667 71.2207 174.467C73.0133 161.115 71.2207 146.011 71.2207 136.444C71.2207 123.354 76.6992 117.829 84.4336 109.236C92.168 100.643 96.0352 91.7282 96.0352 82.4909C96.0352 75.8315 94.209 69.8166 90.5566 64.446C86.9043 59.0755 80.459 56.3903 71.2207 56.3903C63.7012 56.3903 56.2891 59.0755 48.9844 64.446C41.8945 69.8166 35.9863 79.8057 31.2598 94.4135C20.7324 93.3394 12.8906 89.4726 7.73437 82.8132C2.57812 76.1538 0 68.5276 0 59.9348C0 50.6976 2.79297 41.4603 8.37891 32.223C14.1797 22.9858 22.8809 15.3596 34.4824 9.34467C46.2988 3.11489 61.0156 0 78.6328 0C99.6875 0 116.445 3.54453 128.906 10.6336C141.582 17.7227 150.713 26.8525 156.299 38.0232C162.1 49.1938 165 60.7941 165 72.824C165 86.3577 162.852 98.8173 158.555 110.203C154.473 121.373 148.779 131.04 141.475 139.203C134.385 147.367 126.436 153.704 117.627 158.215C108.818 162.726 113.135 170.621 107.959 174.467ZM80.0622 263C70.1794 263 61.9079 259.778 55.2477 253.333C48.8024 246.674 45.5798 238.618 45.5798 229.166C45.5798 221.862 47.4059 215.203 51.0583 209.188C54.7106 202.958 59.5446 197.91 65.5602 194.043C71.7907 190.176 78.6657 188.243 86.1852 188.243C96.0681 188.243 104.232 191.572 110.677 198.232C117.338 204.676 120.668 212.625 120.668 222.077C120.668 229.166 118.841 235.825 115.189 242.055C111.537 248.285 106.595 253.333 100.365 257.2C94.3493 261.067 87.5817 263 80.0622 263Z" fill="white"/>
+</svg>
diff --git a/index.html b/index.html
index 1742dde..bdfa58e 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,26 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Wiki Fantasy</title>
-    <link rel="icon" href="./images/Logo.ico">
+    <link rel="icon" href="../images/Logo.ico">
+    <link rel="stylesheet" href="../style/style.css">
 </head>
 <body>
+    <div class="container">
+        <div class="header">
+            <div class="nav"> 
+                <img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false">
+                <img src="../images/dark.svg" alt="dark" width="72px" height="37px" onmousedown="return false">
+                <img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
+            </div>
+            <div class="logo">
+                <img src="../images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false" >
+            </div>
+            <div></div>
+        </div>
+    </div>
     <h1>Wiki Fantasy</h1>
 </body>
 </html>
\ No newline at end of file
diff --git a/pages/accueil.html b/pages/accueil.html
index 1742dde..bdfa58e 100644
--- a/pages/accueil.html
+++ b/pages/accueil.html
@@ -1,12 +1,26 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Wiki Fantasy</title>
-    <link rel="icon" href="./images/Logo.ico">
+    <link rel="icon" href="../images/Logo.ico">
+    <link rel="stylesheet" href="../style/style.css">
 </head>
 <body>
+    <div class="container">
+        <div class="header">
+            <div class="nav"> 
+                <img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false">
+                <img src="../images/dark.svg" alt="dark" width="72px" height="37px" onmousedown="return false">
+                <img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
+            </div>
+            <div class="logo">
+                <img src="../images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false" >
+            </div>
+            <div></div>
+        </div>
+    </div>
     <h1>Wiki Fantasy</h1>
 </body>
 </html>
\ No newline at end of file
diff --git a/style/style.css b/style/style.css
new file mode 100644
index 0000000..21469f9
--- /dev/null
+++ b/style/style.css
@@ -0,0 +1,55 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.header{
+    display: flex;
+    position: fixed;
+    background-color: #000000;
+    right: 0;
+    top: 0;
+    width: 100%;
+    text-align: center;
+    padding: 20px;
+}
+
+.nav{
+    display: flex;
+    align-items: center;
+    vertical-align: center;
+    gap: 30px;
+    width: 40%;
+    filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(157deg) brightness(103%) contrast(101%) ;
+}
+.nav img:hover{
+    fill:url(#Gradient1);
+}
+
+
+.logo{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20%;
+}
+
+
+#Gradient1 {
+    offset: 0%; stop-color: rgba(27,0,72,1);
+    offset: 100%; stop-color: rgba(97,0,255,1);
+      /*<stop class="stop1" offset="0%" />
+      <stop class="stop2" offset="50%" />
+      <stop class="stop3" offset="100%" />*/
+}/*
+    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="50%" stop-color="black" stop-opacity="0" />
+      <stop offset="100%" stop-color="blue" />
+    </linearGradient>
+  </defs>
+  <style>
+    #rect1 {
+      fill: url(#Gradient1);
+    }
\ No newline at end of file