Merge branch 'main' of https://github.com/VincentRamiere/Brief_starWars
This commit is contained in:
HediMjid
commit
43463e2eaf
@ -1,47 +1,54 @@
|
||||
body{
|
||||
background-color:#2A4158;
|
||||
|
||||
background-color: #031010;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header{
|
||||
header{
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
margin: 50px;;
|
||||
background-color:#2A4158;
|
||||
}
|
||||
|
||||
ul{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
.navAccueil{
|
||||
|
||||
}
|
||||
|
||||
li{
|
||||
color:#fff;
|
||||
padding: 10px;
|
||||
.navSearch{
|
||||
|
||||
border-radius: 10% 10% 0% 0%;
|
||||
margin :25px;
|
||||
list-style: none;
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
.active{
|
||||
background-color: #000;
|
||||
h1{
|
||||
font-size: 48px;
|
||||
|
||||
}
|
||||
|
||||
.body{
|
||||
width:100%;
|
||||
h2{
|
||||
|
||||
}
|
||||
|
||||
img{
|
||||
width:100%;
|
||||
height:auto;
|
||||
.card{
|
||||
|
||||
}
|
||||
|
||||
a{
|
||||
color:#fff;
|
||||
font-size:18px;
|
||||
.data{
|
||||
|
||||
}
|
||||
|
||||
h3{
|
||||
|
||||
a:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p{
|
||||
|
||||
}
|
||||
|
||||
.boutons{
|
||||
|
||||
|
||||
}
|
||||
footer{
|
||||
background-color: #2A4158;
|
||||
}
|
||||
BIN
fonts/Montserrat-Bold.ttf
Normal file
BIN
fonts/Montserrat-Bold.ttf
Normal file
Binary file not shown.
BIN
fonts/OpenSans-Regular.ttf
Normal file
BIN
fonts/OpenSans-Regular.ttf
Normal file
Binary file not shown.
BIN
fonts/OpenSans-SemiBold.ttf
Normal file
BIN
fonts/OpenSans-SemiBold.ttf
Normal file
Binary file not shown.
BIN
images/ban.png
Normal file
BIN
images/ban.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
images/footer.png
Normal file
BIN
images/footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 800 KiB |
10
index.html
10
index.html
@ -8,6 +8,16 @@
|
||||
<title>Accueil - Star Wars Choubaka</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navAccueil">
|
||||
<ul>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="films.html">Films</a></li>
|
||||
<li><a href="people.html">Personnages</a></li>
|
||||
<li><a href="planetes.html">Planètes</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -9,21 +9,29 @@
|
||||
<script src="./scripts/planetes.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navSearch">
|
||||
<ul>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="films.html">Films</a></li>
|
||||
<li><a href="people.html">Personnages</a></li>
|
||||
<li><a href="planetes.html">Planètes</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<h1>Planètes</h1>
|
||||
<section class="container" id="container">
|
||||
<section class="container" id="container"> <!-- class Css-->
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<div class="boutons">
|
||||
<div class="boutons"> <!-- class Css-->
|
||||
<button class="allButtons" name="moins" value="-1"> < </button>
|
||||
<div id="buttons"></div>
|
||||
<!-- <button name="un" value=1> 1 </button>
|
||||
<button name="deux" value=2> 2 </button> -->
|
||||
<button class="allButtons" name="plus" value="+1"> > </button>
|
||||
<button class="allButtons" name="plus" value="+1"> > </button>
|
||||
|
||||
</div>
|
||||
|
||||
<footer></footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -17,6 +17,9 @@ async function getMovies() {
|
||||
const TITRE = FILM.results[i].title;
|
||||
const EPISODE = FILM.results[i].episode_id;
|
||||
const OPENING = FILM.results[i].opening_crawl;
|
||||
const DIRECTOR = FILM.results[i].director;
|
||||
const PRODUCER = FILM.results[i].producer;
|
||||
const DATE = FILM.results[i].release_date;
|
||||
|
||||
// const planets = await fetch(people.results[i].homeworld);
|
||||
// const planet = await planets.json();
|
||||
@ -33,13 +36,24 @@ async function getMovies() {
|
||||
// movies += `<p>${film.title}</p>`;
|
||||
// }
|
||||
document.getElementById('container').innerHTML += `
|
||||
<p>
|
||||
<section class="card">
|
||||
|
||||
<h2>${TITRE}</h2>
|
||||
|
||||
<div class="data">
|
||||
<h3> Episode ID : </h3>
|
||||
<p>${EPISODE}</p>
|
||||
</div>
|
||||
|
||||
<div class="data">
|
||||
<h3> Opening Crawl : </h3>
|
||||
<p>${OPENING}</p>
|
||||
<p>${DIRECTOR}</p>
|
||||
<p>${PRODUCER}</p>
|
||||
<p>${DATE}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Director : ${DIRECTOR}</p>
|
||||
<p>Producer(s) : ${PRODUCER}</p>
|
||||
<p>Release Date : ${DATE}</p>
|
||||
|
||||
<button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux</button>
|
||||
<div id="detailsStarships${i}"></div>
|
||||
@ -47,7 +61,7 @@ async function getMovies() {
|
||||
<div id="detailsSpecies${i}"></div>
|
||||
|
||||
|
||||
</p>
|
||||
</section>
|
||||
<hr>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -35,9 +35,9 @@ async function getPlanets() {
|
||||
// movies += `<p>${film.title}</p>`;
|
||||
// }
|
||||
document.getElementById('container').innerHTML += `
|
||||
<p>
|
||||
<section class="card">
|
||||
<h2>${PLANET_NAME}</h2>
|
||||
<div>
|
||||
<div class="data">
|
||||
<h3>Rotation :</h3>
|
||||
<p>${ROTATION_PERIOD}</p>
|
||||
</div>
|
||||
@ -73,8 +73,8 @@ async function getPlanets() {
|
||||
<div id="detailsFilms${i}"></div>
|
||||
<button class="residents" value="${PLANET.results[i].residents}">Résidents</button>
|
||||
<div id="detailsResidents${i}"></div>
|
||||
</p>
|
||||
<hr>
|
||||
</section>
|
||||
|
||||
`;
|
||||
}
|
||||
const BUTTONS_FILMS = document.querySelectorAll('.films');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user