Skip to content

Commit

Permalink
created new chart and added types
Browse files Browse the repository at this point in the history
  • Loading branch information
@yashrajbharti
yashrajbharti committed Jan 1, 2024
1 parent 91d736f commit 5725a1a
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 110 deletions.
Binary file modified images/Chart.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
142 changes: 75 additions & 67 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,28 @@
<img src="./images/pokedex.png" alt="" height="50px">
<section id="screenshot">
<div class="arlo leader-wrapper">
<div class="slot1">
<span class="shiny">
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<span>
<div class="slot">
<div class="row">
<span class="shiny">
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
</div>
</div>
<div class="slot2 slot">
Expand Down Expand Up @@ -172,26 +174,28 @@
</div>
</div>
<div class="cliff leader-wrapper">
<div class="slot1">
<span class="shiny">
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<span>
<div class="slot">
<div class="row">
<span class="shiny">
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
</div>
</div>
<div class="slot2 slot">
Expand Down Expand Up @@ -332,26 +336,28 @@
</div>
</div>
<div class="sierra leader-wrapper">
<div class="slot1">
<span class="shiny">
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<span>
<div class="slot">
<div class="row">
<span class="shiny">
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
</div>
</div>
<div class="slot2 slot">
Expand Down Expand Up @@ -492,26 +498,28 @@
</div>
</div>
<div class="giovanni leader-wrapper">
<div class="slot1">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<div class="slot">
<div class="row">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<div class="prime-counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
<div class="counter">
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
<span>
<img class="pokemon" src="" alt="pokemon" width="150px" height="150px">
<div class="disc-container"></div>
</span>
</div>
</div>
</div>
<div class="slot2 slot">
Expand Down
89 changes: 46 additions & 43 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ section {
inline-size: 3264px;
block-size: 2331px;
background-image: url(./images/Chart.png);
background-size: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0px;
Expand All @@ -38,69 +39,37 @@ section {
}

.sierra {
margin-inline-start: 22px;
margin-inline-start: 15px;
}

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

span {
position: relative;
}

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

.slot1>span,
.slot .row>span {
position: relative;
margin-inline-start: 20px;
margin-inline-start: 15px;
}

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

.cliff :is(.slot1>span, .slot .row>span) {
margin-inline-start: 10px;
}


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

.cliff .slot .row .prime-counter {
margin-inline-start: 65px;
}

.sierra :is(.slot1>span, .slot .row>span) {
margin-inline-start: 50px;
}

.sierra :is(.slot1 .prime-counter, .slot .row .prime-counter) {
margin-inline-start: 35px;
}

.giovanni :is(.slot1>span, .slot .row>span) {
margin-inline-start: 20px;
}

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

.giovanni .slot .row .prime-counter {
margin-inline-start: 55px;
}

.slot2 {
margin-block-start: 150px;
}
Expand All @@ -109,10 +78,6 @@ span {
margin-block-start: 130px;
}

.giovanni .slot3 {
margin-block-start: 120px;
}

.shiny::after {
content: url(./images/Shiny.webp);
position: absolute;
Expand Down Expand Up @@ -214,18 +179,56 @@ span {

.type-disc {
position: relative;
padding: 12px;
height: 50px;
width: 50px;
padding: 8px;
height: 25px;
width: 25px;
box-sizing: border-box;
clip-path: circle(40%);
scale: 2;
}

.disc-container {
position: absolute;
display: flex;
}

img.pokemon {
scale: 0.88;
transform-origin: 0;
}

.counter span:last-of-type .disc-container {
translate: 150px 0;
}

.arlo .slot>.row>span>img {
translate: 20px 0;
}

.cliff .prime-counter {
translate: -10px 0;
}

.cliff .counter {
translate: -5px 0;
}

.sierra .prime-counter {
translate: -10px 0;
}

.sierra .counter {
translate: -5px 0;
}

.giovanni .prime-counter {
translate: -20px 0;
}

.giovanni .counter {
translate: -15px 0;
}

.arlo .counter {
translate: 5px 0;
}

0 comments on commit 5725a1a

Please sign in to comment.