isa44.74/mandalorian
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

harmonisation visuelle

Browse Source
This commit is contained in:
rasoirnoir 2021-10-19 22:23:22 +02:00
parent ef38db8421
commit 3a80dd388a
No known key found for this signature in database
GPG Key ID: 995E4575ADB981A3
7 changed files with 183 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
characters.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -8,6 +9,7 @@
<script src="scripts/personnages.js" defer type="module"></script>
<title>Characters</title>
</head>
<body>
<section class="titre"><a href="index.html">STAR WARS</a></section>
<section class="sec-menu">
@ -21,9 +23,10 @@
</nav>
</section>
<div class="image-charactere" ></div>
<section id="resultats"></section>
<div class="image-charactere"></div>
<section id="resultats" class="accordeon"></section>
</body>
</html>

26
films.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -8,6 +9,7 @@
<script src="/scripts/films.js" defer type="module"></script>
<title>Films</title>
</head>
<body>
<section class="titre"><a href="index.html">STAR WARS</a></section>
<section class="sec-menu">
@ -22,7 +24,7 @@
<div class='accordeon'>
<div class='accordeon_item'>
<div id="1" class='accordeon_item_header'>
<h2 class ="titres"></h2>
<h2 class="titres"></h2>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
@ -31,8 +33,9 @@
</div>
</div>
<div class='accordeon_item'>
<div id="2"class='accordeon_item_header'>
<h2 class ="titres"></h2><p>(Cliquez ici pour étendre)</p>
<div id="2" class='accordeon_item_header'>
<h2 class="titres"></h2>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
@ -41,7 +44,8 @@
</div>
<div class='accordeon_item'>
<div id="3" class='accordeon_item_header'>
<h4>Return of the Jedi</h4><p>(Cliquez ici pour étendre)</p>
<h4>Return of the Jedi</h4>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
@ -49,8 +53,9 @@
</div>
</div>
<div class='accordeon_item'>
<div id="4"class='accordeon_item_header'>
<h4>The Phantom Menace</h4><p>(Cliquez ici pour étendre)</p>
<div id="4" class='accordeon_item_header'>
<h4>The Phantom Menace</h4>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
@ -59,7 +64,8 @@
</div>
<div id="5" class='accordeon_item'>
<div class='accordeon_item_header'>
<h4>Attack of the Clones</h4><p>(Cliquez ici pour étendre)</p>
<h4>Attack of the Clones</h4>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
@ -68,7 +74,8 @@
</div>
<div class='accordeon_item'>
<div id="6" class='accordeon_item_header'>
<h4>Revenge of the Sith</h4><p>(Cliquez ici pour étendre)</p>
<h4>Revenge of the Sith</h4>
<p>(Cliquez ici pour étendre)</p>
</div>
<div class="accordeon_item_body">
<div class="accordeon_item_body_content">
@ -76,6 +83,7 @@
</div>
</div>
</div>
<div class = "image-films"></div>
<div class="image-films"></div>
</body>
</html>

7
planets.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -8,7 +9,8 @@
<script src="scripts/planets.js" type="module" defer></script>
<title>Planets</title>
</head>
<body>
<body id="planets">
<section class="titre"><a href="index.html">STAR WARS</a></section>
<section class="sec-menu">
<nav class="nav-menu">
@ -20,10 +22,11 @@
</nav>
</section>
<section id="resultats">
<section id="resultats" class="accordeon">
</section>
</body>
</html>

6
scripts/personnages.js
View File

@ -67,9 +67,9 @@ for (let i = 0; i < PERPAGE; i++) {
PERSONNAGES.innerHTML +=
`<section class="resultat">
<h1 class="titreAccordeon">${urlname}</h1>
<div class="accordeon">
`<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${urlname}</h1>
<div class="accordeon_item_body">
<div class="1">
<div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
<div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>

13
scripts/planets.js
View File

@ -33,9 +33,9 @@ function remplissage(results) {
planetes.innerHTML +=
`<section class="resultat">
<h1 class="titreAccordeon">${nom}</h1>
<div class="accordeon">
`<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${nom}</h1>
<div class="accordeon_item_body">
<div class="1">
<p>${terrain}</p>
<p>${climate}</p>
@ -47,6 +47,13 @@ function remplissage(results) {
</section>`;
}
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);
}

2
scripts/util.js
View File

@ -52,7 +52,7 @@ export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) =
if (prevUrl == null) firstPage = true;
if (nextUrl == null) lastPage = true;
let previousButton = `<button id="prevButton">Page précédente</button>`;
let currentButton = `${currentPage}`;
let currentButton = `<span style="color:#ccc;">${currentPage}</span>`;
let nextButton = `<button id="nextButton">Page suivante</button>`;
elementParent.innerHTML += previousButton;

84
styles/style.css
View File

@ -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;
}