ajout sticky

This commit is contained in:
lina 2025-03-02 23:14:34 +01:00
parent 99267af2dd
commit 1b3a3f6486
3 changed files with 6646 additions and 6640 deletions

View File

@ -9,6 +9,11 @@ body {
background-color: #ffff; background-color: #ffff;
} }
.sticky {
position: sticky;
top: 0px;
}
.single-poke { .single-poke {
background-color: #ff0000; background-color: #ff0000;
} }

View File

@ -38,23 +38,24 @@ class App extends Component {
render() { render() {
return ( return (
<div className="App"> <div className="App">
<section className="single-poke"> <div className='sticky'>
<img src="https://logos-world.net/wp-content/uploads/2020/05/Pokemon-Logo.png" alt="logo-pokemon"/> <section className="single-poke">
<img src="https://logos-world.net/wp-content/uploads/2020/05/Pokemon-Logo.png" alt="logo-pokemon"/>
{this.state.currentPokemon ? {this.state.currentPokemon ?
(<div className="poke-info"> (<div className="poke-info">
<img className="big" src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${this.state.currentPokemon.id}.png`} alt="img-info"></img> <img className="big" src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${this.state.currentPokemon.id}.png`} alt="img-info"></img>
<div> <div>
<p><b>Name : </b> {this.state.currentPokemon.name}</p> <p><b>Name : </b> {this.state.currentPokemon.name}</p>
<p><b>Height : </b>{this.state.currentPokemon.height}</p> <p><b>Height : </b>{this.state.currentPokemon.height}</p>
<p><b>Weight : </b>{this.state.currentPokemon.weight}</p> <p><b>Weight : </b>{this.state.currentPokemon.weight}</p>
<p><b>Type : </b>{this.state.currentPokemon.types[0].type.name}</p> <p><b>Type : </b>{this.state.currentPokemon.types[0].type.name}</p>
</div>
</div> </div>) :
</div>) : (<h1>Choisis un pokemon</h1>)
(<h1>Choisis un pokemon</h1>) }
} </section>
</section> </div>
<section className="poke-img"> <section className="poke-img">
{this.state.list.map((elem, index) => { {this.state.list.map((elem, index) => {
return ( return (

13248
yarn.lock

File diff suppressed because it is too large Load Diff