Skip to content

Commit

Permalink
created infographic
Browse files Browse the repository at this point in the history
  • Loading branch information
@yashrajbharti
yashrajbharti committed Jan 1, 2024
1 parent 3e5f974 commit eaf9efc
Show file tree
Hide file tree
Showing 2 changed files with 205 additions and 6 deletions.
160 changes: 156 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,168 @@
<img src="./images/pokedex.png" alt="" height="50px">
<section id="screenshot">
<div class="arlo leader-wrapper">

<div class="slot1">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png" alt="pokemon"
width="150px" height="150px">
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
</div>
<div class="slot2">
<div class="row1 row">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
</div>
<div class="row2 row">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
</div>
<div class="row3 row">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
</div>
</div>
</div>
<div class="cliff leader-wrapper">

<div class="slot1">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png" alt="pokemon"
width="150px" height="150px">
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
</div>
</div>
<div class="sierra leader-wrapper">

<div class="slot1">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png" alt="pokemon"
width="150px" height="150px">
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
</div>
</div>
<div class="giovanni leader-wrapper">

<div class="slot1">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png" alt="pokemon"
width="150px" height="150px">
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
<span>
<img class="pokemon" src="https://img.pokemondb.net/sprites/home/normal/pikachu.png"
alt="pokemon" width="150px" height="150px">
</span>
</div>
</div>
</div>

</section>
Expand Down
51 changes: 49 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ section {
.leader-wrapper {
position: relative;
margin-inline-start: 50px;
margin-block-start: 235px;
margin-block-start: 785px;
inline-size: 765px;
block-size: 2035px;
block-size: 1485px;
background-color: rgba(0, 255, 255, 0.242);
}

Expand All @@ -44,4 +44,51 @@ section {

.giovanni {
margin-inline-start: -8px;
}

.slot1,
.slot2 .row {
display: flex;
justify-content: center;
gap: 15px;
margin-block-start: 10px;
}

.slot1>span,
.slot2 .row>span {
margin-inline-start: 20px;
}

.slot1 .prime-counter,
.slot2 .row .prime-counter {
margin-inline-start: 25px;
}

.cliff .slot1>span {
margin-inline-start: 10px;
}


.cliff .slot1 .prime-counter {
margin-inline-start: 45px;
}

.sierra .slot1>span {
margin-inline-start: 50px;
}

.sierra .slot1 .prime-counter {
margin-inline-start: 35px;
}

.giovanni .slot1>span {
margin-inline-start: 20px;
}

.giovanni .slot1 .prime-counter {
margin-inline-start: 45px;
}

.slot2 {
margin-block-start: 150px;
}

0 comments on commit eaf9efc

Please sign in to comment.