vincentRamiere/Brief_starWars
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

push de la night de Sana

Browse Source
This commit is contained in:
Sana EL HIRI 2021-10-19 17:38:04 +02:00
parent a68bdf93e1
commit ca6a0dba62
4 changed files with 61 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
css/style.css
View File

@ -1,47 +1,54 @@
body{ body{
background-color:#2A4158;
background-color: #031010;
color: #fff;
text-align: center;
} }
.header{ header{
width: 100%; width: 100%;
height: 200px;
text-align: center; text-align: center;
margin: 50px;; background-color:#2A4158;
} }
ul{ .navAccueil{
display:flex;
justify-content: center;
} }
li{ .navSearch{
color:#fff;
padding: 10px;
border-radius: 10% 10% 0% 0%;
margin :25px;
list-style: none;
font-size:18px;
} }
.active{ h1{
background-color: #000; font-size: 48px;
} }
.body{ h2{
width:100%;
} }
img{ .card{
width:100%;
height:auto;
} }
a{ .data{
color:#fff;
font-size:18px;
} }
h3{
a:hover{ }
text-decoration: none;
p{
}
.boutons{
}
footer{
background-color: #2A4158;
} }

10
index.html
View File

@ -8,6 +8,16 @@
<title>Accueil - Star Wars Choubaka</title> <title>Accueil - Star Wars Choubaka</title>
</head> </head>
<body> <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> </body>
</html> </html>

18
planetes.html
View File

@ -9,21 +9,29 @@
<script src="./scripts/planetes.js" defer></script> <script src="./scripts/planetes.js" defer></script>
</head> </head>
<body> <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> <h1>Planètes</h1>
<section class="container" id="container"> <section class="container" id="container"> <!-- class Css-->
</section> </section>
<div class="boutons"> <div class="boutons"> <!-- class Css-->
<button class="allButtons" name="moins" value="-1"> < </button> <button class="allButtons" name="moins" value="-1"> < </button>
<div id="buttons"></div> <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> </div>
<footer></footer>
</body> </body>
</html> </html>

8
scripts/planetes.js
View File

@ -35,9 +35,9 @@ async function getPlanets() {
// movies += `<p>${film.title}</p>`; // movies += `<p>${film.title}</p>`;
// } // }
document.getElementById('container').innerHTML += ` document.getElementById('container').innerHTML += `
<p> <section class="card">
<h2>${PLANET_NAME}</h2> <h2>${PLANET_NAME}</h2>
<div> <div class="data">
<h3>Rotation :</h3> <h3>Rotation :</h3>
<p>${ROTATION_PERIOD}</p> <p>${ROTATION_PERIOD}</p>
</div> </div>
@ -73,8 +73,8 @@ async function getPlanets() {
<div id="detailsFilms${i}"></div> <div id="detailsFilms${i}"></div>
<button class="residents" value="${PLANET.results[i].residents}">Résidents</button> <button class="residents" value="${PLANET.results[i].residents}">Résidents</button>
<div id="detailsResidents${i}"></div> <div id="detailsResidents${i}"></div>
</p> </section>
<hr>
`; `;
} }
const BUTTONS_FILMS = document.querySelectorAll('.films'); const BUTTONS_FILMS = document.querySelectorAll('.films');