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

10
index.html
View File

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

20
planetes.html
View File

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

8
scripts/planetes.js
View File

@ -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');