diff --git a/www/css/style.css b/www/css/style.css index 3a602bb..c78d3e4 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -12,6 +12,9 @@ box-sizing: border-box; } + + +/** SECTION modifier par script **/ #updateDate { visibility: hidden; display: none; @@ -32,6 +35,13 @@ color: white; } +#pageCouranteNAV { + text-shadow: violet 2px ; + box-shadow: #ffefe5; +} + +/** FIN DE SECTION modifier par script **/ + body { min-height: 100vh; /* Pour footer at bottom from : https://douiri.org/blog/fix-footer-bottom-css/ */ @@ -104,23 +114,65 @@ footer { /****************************/ .accueil { background-color: rgb(138, 43, 226); + color: #ffefe5; } -.accueil main { +.accueil h1 { + font-size: 3.5rem; +} + +.accueil p:not(#rencontreEquipe p) { margin: auto; - padding: 0px 10%; + padding: 1% 45% 1% 0%; } .accueil section { width: 100%; } -.accueil article { - color: #ffefe5; - background-color: #13172c87; +.accueil #intro { + background: #13172c url("../images/ImagesLea/warframeEnvironment.jpg") no-repeat center; +} + +.accueil header { + background: #13172c url("../images/ImagesLea/warframeEnvironment.jpg") center/cover; +} + +.accueil header div { + background-color: #13172cb0; + height: 75vh; padding: 5%; } +.accueil #rencontreEquipe { + display: flex; + flex-wrap: wrap; +} + +.accueil #rencontreEquipe div { + width: 25%; + margin: 0px auto; + align-content: center; +} + +.accueil #rencontreEquipe div p { + margin: 5px; + text-align: center; +} + +.accueil #rencontreEquipe h2 { + width: 100%; + margin: 25px; + text-align: center; +} + +.accueil #rencontreEquipe div img { + width: 80%; + border-radius: 50%; + padding: 15px; + margin: 0px 10% 0px 10%; +} + /****************************/ /* PAGE: à Propos */ /* AUTEUR: Stanislas */ diff --git a/www/images/ImagesLea/warframeEnvironment.jpg b/www/images/ImagesLea/warframeEnvironment.jpg new file mode 100644 index 0000000..f2e43a3 Binary files /dev/null and b/www/images/ImagesLea/warframeEnvironment.jpg differ diff --git a/www/index.html b/www/index.html index f2583e8..2e121ef 100644 --- a/www/index.html +++ b/www/index.html @@ -25,16 +25,51 @@
+
+
+

WARFRAME :
Toute une histoire

+

Warframe est un jeu d’action coopératif free-to-play dans lequel vous incarnez un Tenno, un guerrier + d’élite + utilisant une armure Warframe dotée de pouvoirs uniques. Au fil de missions rapides et dynamiques + mêlant + tir, mêlée et parkour, vous affrontez diverses factions dans un univers de science-fiction en + constante + évolution. Grâce à une grande liberté de personnalisation et à un contenu régulièrement enrichi, + Warframe offre une expérience profonde, fluide et accessible en équipe comme en solo.

+
+
-
-

Warframe :
Toute une histoire

-

Warframe est un jeu d’action coopératif free-to-play dans lequel vous incarnez un Tenno, un guerrier - d’élite - utilisant une armure Warframe dotée de pouvoirs uniques. Au fil de missions rapides et dynamiques mêlant - tir, mêlée et parkour, vous affrontez diverses factions dans un univers de science-fiction en constante - évolution. Grâce à une grande liberté de personnalisation et à un contenu régulièrement enrichi, - Warframe offre une expérience profonde, fluide et accessible en équipe comme en solo.

-
+
+
+

Rencontrez l'équipe!

+ + +
+ Avatar de Stanislas +

Stanislas Royal

+

Programmeur

+
+ +
+ Avatar de Léa +

Léa Dezothez

+

Directrice Artistique

+
+ +
+ Avatar de Jérémy +

Jérémy Hébert

+

Coordonateur

+
+ +
+ Avatar de Andres +

Andres David Herrera Escorcia

+

Conseiller

+
+ +
+
diff --git a/www/js/script.js b/www/js/script.js index 1169768..231c6da 100644 --- a/www/js/script.js +++ b/www/js/script.js @@ -1,3 +1,39 @@ + +// https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/ +// Performance for my useCase (modify NAV and FOOTER) + +document.addEventListener("DOMContentLoaded", + function(e) { + console.log("DOMContentLoaded triggered !"); + // for (document.querySelector("nav") + }); + + +// javascript console output DOM tree +// https://stackoverflow.com/questions/50305257/how-to-console-log-entire-html-dom-tree-in-order-with-attribute-names +// https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker + +var walker = document.createTreeWalker( + document.documentElement, + NodeFilter.SHOW_ELEMENT // only elements +); + +while (walker.nextNode()) { + let current = walker.currentNode; + console.log( + current.tagName, + [...current.attributes].map(({value,name}) => `${name}=${value}`).join() + ); +} + + +// Needed for image loaded and fetched : Not on local computer. +/* https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/ +document.addEventListener("load", function(e) { + console.log("The page has completely loaded."); +}); +*/ + window.onload = function () { setTimeout(function () { /* document.getElementById('message').innerHTML = @@ -11,7 +47,26 @@ window.onload = function () { document.getElementById("updateDate").setAttribute("id", "updateDateW"); document.getElementById("updateDateW").innerHTML = 'À la prochaine!'; } - }, 1000); + + // https://developer.mozilla.org/en-US/docs/Web/API/Element/children + // const myHeader = document.getElementByTagName("header"); // TODO: Make sure only first nav (need
) + myNav = document.getElementsByTagName("nav"); + console.log(myNav.length()); + + for (var i = 0; i < myNav.children.length(); i++) { + var tableChild = myNav.children[i]; + console.log(tableChild.tagName); + // Do stuff + } + +/* for (const child of myNav.children) { + console.log(child.tagName); + } +*/ + }, 2000); + // NOTE: Change Current Page based on url in