diff --git a/characters.html b/characters.html index e277f14..828d8e9 100644 --- a/characters.html +++ b/characters.html @@ -1,5 +1,6 @@ + @@ -8,6 +9,7 @@ Characters +
STAR WARS
@@ -16,14 +18,15 @@
  • Films
  • Planets
  • Characters
    • - + - +
    -
    -
    - - +
    +
    + + + \ No newline at end of file diff --git a/films.html b/films.html index d6130e0..5e6f27d 100644 --- a/films.html +++ b/films.html @@ -1,81 +1,89 @@ + - - - - - - Films + + + + + + Films + -
    STAR WARS
    -
    - -
    -
    -
    -
    -

    -

    (Cliquez ici pour étendre)

    -
    -
    -
    -
    -
    -
    -
    -
    -

    (Cliquez ici pour étendre)

    -
    -
    -
    -
    -
    -
    -
    -
    -

    Return of the Jedi

    (Cliquez ici pour étendre)

    -
    -
    -
    -
    -
    -
    -
    -
    -

    The Phantom Menace

    (Cliquez ici pour étendre)

    -
    -
    -
    -
    -
    -
    -
    -
    -

    Attack of the Clones

    (Cliquez ici pour étendre)

    -
    -
    -
    -
    -
    -
    -
    -
    -

    Revenge of the Sith

    (Cliquez ici pour étendre)

    -
    -
    -
    -
    -
    -
    +
    STAR WARS
    +
    + +
    +
    +
    +
    +

    +

    (Cliquez ici pour étendre)

    -
    +
    +
    +
    +
    +
    +
    +
    +

    +

    (Cliquez ici pour étendre)

    +
    +
    +
    +
    +
    +
    +
    +
    +

    Return of the Jedi

    +

    (Cliquez ici pour étendre)

    +
    +
    +
    +
    +
    +
    +
    +
    +

    The Phantom Menace

    +

    (Cliquez ici pour étendre)

    +
    +
    +
    +
    +
    +
    +
    +
    +

    Attack of the Clones

    +

    (Cliquez ici pour étendre)

    +
    +
    +
    +
    +
    +
    +
    +
    +

    Revenge of the Sith

    +

    (Cliquez ici pour étendre)

    +
    +
    +
    +
    +
    +
    +
    +
    + \ No newline at end of file diff --git a/planets.html b/planets.html index 8d1a3af..d0761dc 100644 --- a/planets.html +++ b/planets.html @@ -1,5 +1,6 @@ + @@ -8,7 +9,8 @@ Planets - + +
    STAR WARS
    -
    - +
    +
    - + + \ No newline at end of file diff --git a/scripts/personnages.js b/scripts/personnages.js index 85caf9c..4414f55 100644 --- a/scripts/personnages.js +++ b/scripts/personnages.js @@ -67,19 +67,19 @@ for (let i = 0; i < PERPAGE; i++) { PERSONNAGES.innerHTML += - `
    -

    ${urlname}

    -
    -
    -
    Année de Naissance : ${urlbirth_year}
    -
    Couleur des Yeux : ${urleye_colo}
    -
    Genre : ${urlgender}
    -
    Couleur des Cheveux : ${urlhair_color}
    -
    Poids du personnage : ${urlmass} kg
    -
    Couleur de Peau : ${urlskin_color}
    -
    Planète de Naissance : ${urlhomeworld}
    -
    Film où je suis présent : ${urlfilms}
    -
    + `
    +

    ${urlname}

    +
    +
    +
    Année de Naissance : ${urlbirth_year}
    +
    Couleur des Yeux : ${urleye_colo}
    +
    Genre : ${urlgender}
    +
    Couleur des Cheveux : ${urlhair_color}
    +
    Poids du personnage : ${urlmass} kg
    +
    Couleur de Peau : ${urlskin_color}
    +
    Planète de Naissance : ${urlhomeworld}
    +
    Film où je suis présent : ${urlfilms}
    +
    `; diff --git a/scripts/planets.js b/scripts/planets.js index c2d23bc..4b6b113 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -33,9 +33,9 @@ function remplissage(results) { planetes.innerHTML += - `
    -

    ${nom}

    -
    + `
    +

    ${nom}

    +

    ${terrain}

    ${climate}

    @@ -47,6 +47,13 @@ function remplissage(results) {
    `; } + const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); + for (item of accordeonItemHeader) { + item.addEventListener("click", (event) => { + item.classList.toggle("active"); + }); + } + //Pagination createPagination(previousUrl, nextUrl, planetes, remplissage); } diff --git a/scripts/util.js b/scripts/util.js index 446b1ee..aef73e6 100644 --- a/scripts/util.js +++ b/scripts/util.js @@ -52,7 +52,7 @@ export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) = if (prevUrl == null) firstPage = true; if (nextUrl == null) lastPage = true; let previousButton = ``; - let currentButton = `${currentPage}`; + let currentButton = `${currentPage}`; let nextButton = ``; elementParent.innerHTML += previousButton; diff --git a/styles/style.css b/styles/style.css index 0e25c4e..f21d97a 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,3 +1,8 @@ +:root{ + --jaune: #ffe81f; + --blanc: #ccc; +} + @font-face { font-family: 'star-wars'; src: url("../assets/fonts/Starjedi.ttf"); @@ -7,9 +12,25 @@ margin: 0; padding: 0; font-family: 'star-wars', serif; - color : #000; + /* color: var(--blanc); */ + color: #000; + font-size: 16px; } +button{ + color: #000; + padding: 0.2em; + margin: 0.2em; + border-color: var(--jaune); + border-radius: 3%; +} + +body{ + background-image: url("../assets/imgs/starry_sky.jpg"); + font-size: 1em; +} + + .titre a{ margin-top : 20px; background-color: transparent; @@ -17,61 +38,74 @@ content: url("../assets/imgs/titre.png"); font-size: xx-large; text-decoration: underline; - text-decoration-color: #ffe81f; + text-decoration-color: var(--jaune); +} + +.sec-menu{ + margin: 1em; + height: 100%; } .ul-menu{ + display: flex; list-style-type: none; font-size: large; - color : #FFF; - text-decoration: underline; - text-decoration-color: #ffe81f; + color : var(--blanc); } .ul-menu li{ display: inline; - color : #FFF; - float: left; + color : var(--blanc); margin: 1em; font-size: large; - text-decoration: underline; - text-decoration-color: #ffe81f; } .ul-menu li a{ display: block; - color : #FFF; + color : var(--blanc); padding: 5px; text-align: center; font-size: large; - text-decoration: underline; - text-decoration-color: #ffe81f; + text-decoration: none; + border-bottom: 2px solid var(--jaune); } -body{ - background-image: url("../assets/imgs/starry_sky.jpg"); +.ul-menu li a:hover{ + border: 2px solid var(--jaune); + /* border-radius: 10%; */ } -div.image-films { +/* div.image-films { background-color: transparent; margin-top: -170px; margin-left: auto; width: 30%; content: url("../assets/imgs/mando.png"); +} */ +div.image-films { + background-color: transparent; + width: 30%; + content: url("../assets/imgs/mando.png"); + position: absolute; + right: 0px; + top: 0px; + z-index: -1; } div.image-charactere { background-color: transparent; - margin-top: -170px; - margin-left: auto; + position: absolute; + right: 0px; + top: 0px; + z-index: -1; width: 30%; content: url("../assets/imgs/grogu.png"); } #reponses-films { - color : #FFF; + color : var(--blanc); float: left; margin-top : 200px; margin-left:-350px; @@ -79,12 +113,10 @@ div.image-charactere { .accordeon { color : #000; - float: left; - margin-top : 100px; - margin-left: -350px; + margin: 1em; } .accordeon_item{ - background-color:#ffff; + background-color:var(--blanc); margin:2rem 0; border-radius: 1rem; box-shadow: 1px 1px 30px rgb(196, 196, 196) ; @@ -115,3 +147,11 @@ div.image-charactere { .accordeon_item_header.active + .accordeon_item_body{ max-height: 200px; } + + +#planets{ + background-image: url("../assets/imgs/backgroung_dead_trooper.jpg"); + background-size: cover; + background-position: top; + background-attachment: fixed; +}