ajout sticky
This commit is contained in:
parent
99267af2dd
commit
1b3a3f6486
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
33
src/App.js
33
src/App.js
@ -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 (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user