- 
- 
- 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Очень легкий
- Легкий
- Обычный
- Высокий
- Очень высокий
+ Очень легкий
+
+
+
+ Легкий
+
+
+
+ Обычный
+
+
+
+ Высокий
+
+
+
+ Очень высокий
+
+
+
-
Первая стадия
+ Первая стадия
@@ -43,7 +68,7 @@
-
Вторая стадия
+ Вторая стадия
@@ -51,7 +76,7 @@
-
diff --git a/index.js b/index.js
index 2aa49d36..47a780eb 100644
--- a/index.js
+++ b/index.js
@@ -3,30 +3,28 @@ import cardsDataBrown from './data/mythicCards/brown/indexBrown.js';
import cardsDataBlue from './data/mythicCards/blue/indexBlue.js';
// ---------------------------------------
-const cards = document.querySelectorAll('.ancient-cards img');
+const cards = document.querySelectorAll('.blood');
const deck = document.querySelector('.deck-of-cards');
const difficulty = document.querySelectorAll(".difficulty");
cards.forEach(card => {
card.addEventListener('click', () => {
- cards.forEach(card => card.classList.remove('fire-border'));
- card.classList.add('fire-border');
+ leaveUsedCard(card);
})
});
difficulty.forEach(item => {
item.addEventListener('click', () => {
- difficulty.forEach(item => item.classList.remove('fire-border'));
- item.classList.add('fire-border');
+ leaveUsedDifficulty(item);
deck.classList.add('show');
})
});
// ---------------------------------------
-const card1 = document.querySelector('.card1');
-const card2 = document.querySelector('.card2');
-const card3 = document.querySelector('.card3');
-const card4 = document.querySelector('.card4');
+const card1 = document.querySelector('.ancients-cards__card1');
+const card2 = document.querySelector('.ancients-cards__card2');
+const card3 = document.querySelector('.ancients-cards__card3');
+const card4 = document.querySelector('.ancients-cards__card4');
const veryEasy = document.querySelector('.very-easy');
const easy = document.querySelector('.easy');
@@ -66,21 +64,6 @@ function cardsColorValue(value_1, value_2, value_3, value_4, value_5, value_6, v
return value_1 + +value_2 + +value_3 + +value_4 + +value_5 + +value_6 + +value_7 + +value_8 + +value_9;
};
-function sumValues(card) {
- if (card === 'card1') {
- return cardsColorValue(0, 2, 2, 1, 3, 0, 3, 4, 0);
- }
- if (card === 'card2') {
- return cardsColorValue(1, 2, 1, 3, 2, 1, 2, 4, 0);
- }
- if (card === 'card3') {
- return cardsColorValue(0, 2, 1, 2, 3, 1, 3, 4, 0);
- }
- if (card === 'card4') {
- return cardsColorValue(1, 2, 1, 2, 3, 1, 2, 4, 0);
- }
-};
-
let allCards = cardsDataGreen.concat(cardsDataBrown, cardsDataBlue);
function createArrayWithColorAndDifficult(color, difficulty) {
@@ -188,6 +171,22 @@ function divisionToCircles(cards, array) {
array3 = sumValuesCirclesOneStage(green_3, brown_3, blue_3);
};
+function leaveUsedDifficulty(dif) {
+ difficulty.forEach(item => {
+ item.classList.add('hide');
+ });
+ dif.classList.remove('hide');
+ dif.classList.add('show');
+}
+
+function leaveUsedCard(card) {
+ cards.forEach(item => {
+ item.classList.add('hide');
+ });
+ card.classList.remove('hide');
+ card.classList.add('show');
+}
+
card1.addEventListener('click', () => {
document.querySelector('.difficulty-level').classList.add('show');
cardsColorValue(0, 2, 2, 1, 3, 0, 3, 4, 0);
@@ -316,6 +315,7 @@ document.querySelector('.deck').addEventListener('click', () => {
}
array1.shift();
} else if (array1.length === 0 && array2.length > 0) {
+ document.querySelector('.first-stage').classList.add('through');
randomCard.style.background = `url(${array2[0].cardFace}) center/cover`;
if (array2[0].color === 'green') {
secondGreenValue.value--;
@@ -328,6 +328,7 @@ document.querySelector('.deck').addEventListener('click', () => {
}
array2.shift();
} else if (array2.length === 0 && array3.length > 0) {
+ document.querySelector('.second-stage').classList.add('through');
randomCard.style.background = `url(${array3[0].cardFace}) center/cover`;
if (array3[0].color === 'green') {
thirdGreenValue.value--;
@@ -341,18 +342,17 @@ document.querySelector('.deck').addEventListener('click', () => {
array3.shift();
}
if (thirdGreenValue.value == 0 && thirdBrownValue.value == 0 && thirdBlueValue.value == 0) {
+ document.querySelector('.third-stage').classList.add('through');
+ document.querySelector('.deck').classList.add('hide');
function hideBlock() {
document.querySelector('.difficulty-level').classList.remove('show');
document.querySelector('.deck-of-cards').classList.remove('show');
}
+ function reloadPage() {
+ location.reload();
+ }
setTimeout(hideBlock, 5000);
- cards.forEach(card => {
- card.classList.remove('fire-border');
- });
-
- difficulty.forEach(item => {
- item.classList.remove('fire-border');
- });
+ setTimeout(reloadPage, 10000);
new Audio('./assets/Audio/film-ujasov-kino.mp3').play();
}
-});
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index 943ff957..afefcae3 100644
--- a/style.css
+++ b/style.css
@@ -51,20 +51,46 @@ body {
}
.ancient-cards {
display: flex;
- align-items: center;
+ align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
max-width: 35vw;
}
-.ancient-cards img {
+.ancient-cards .blood {
+ opacity: 0.5;
position: relative;
- padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition-duration: 1s;
+}
+.ancient-cards .blood:hover {
+ transform: scale(1.15);
+ transition-duration: 1s;
+ opacity: 1;
+}
+.ancient-cards img.cards {
+ position: relative;
+ margin: 10px;
border-radius: 30px;
cursor: pointer;
transition-duration: 0.2s;
}
+.ancient-cards img.blood-top {
+ cursor: pointer;
+ position: absolute;
+ top: 10px;
+ width: 230px;
+ border-radius: 30px;
+ z-index: 3;
+ height: 100px;
+}
.difficulty {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
padding: 10px;
color: white;
font-size: 20px;
@@ -76,31 +102,30 @@ body {
cursor: pointer;
border: 5px solid transparent;
border-radius: 10px;
- -o-border-image: url(/assets/Gif/fire-65.gif) 47%/0/0 stretch;
- border-image: url(/assets/Gif/fire-65.gif) 47%/0/0 stretch;
+}
+.difficulty .blood-top {
+ position: absolute;
+ border-radius: 10px;
+ width: 108%;
+ top: -6px;
+ height: 100px;
}
.difficulty:hover {
+ transform: scale(1.1);
opacity: 1;
transition-duration: 1s;
- border: 10px solid transparent;
- -o-border-image: url(/assets/Gif/fire-65.gif) 47%/1/0 stretch;
- border-image: url(/assets/Gif/fire-65.gif) 47%/1/0 stretch;
}
.difficulty:not(:last-child) {
margin-bottom: 15px;
}
.difficulty-level {
position: relative;
- max-width: 30vw;
- background-image: url(./assets/Scroll/scroll.png);
- background-repeat: no-repeat;
- background-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100px;
- top: -800px;
+ top: -1000px;
transition-duration: 2s;
}
@@ -125,7 +150,7 @@ body {
.stages__title {
margin-bottom: 10px;
margin-top: 10px;
- color: white;
+ color: black;
font-size: 30px;
}
.stages__quantity {
@@ -199,15 +224,6 @@ body {
transform: translateX(-250px);
}
-.fire-border {
- border: 10px solid transparent;
- -o-border-image: url(./assets/Gif/fire-65.gif) 47%/1/0 stretch;
- border-image: url(./assets/Gif/fire-65.gif) 47%/1/0 stretch;
- transform: scale(1.1);
- opacity: 1;
- transition-duration: 1s;
-}
-
.none-click {
pointer-events: none;
}
@@ -231,4 +247,68 @@ body {
.random-card.show {
transform: translateX(0px) rotateY(360deg);
transition-duration: 1s;
+}
+
+.through {
+ text-decoration: line-through;
+}
+
+@media (max-width: 391px) {
+ .water {
+ padding: 10px;
+ flex-direction: column;
+ }
+ .ancient-cards {
+ max-width: 100%;
+ }
+ .cards {
+ width: 125px;
+ height: 165px;
+ border-radius: 15px;
+ }
+ .ancient-cards img.cards {
+ margin: 10px;
+ }
+ .ancient-cards img.blood-top {
+ width: 124px;
+ top: 9px;
+ }
+ .difficulty-level {
+ flex-direction: row;
+ flex-wrap: wrap;
+ top: 0px;
+ padding: 10px;
+ }
+ .difficulty {
+ font-size: 14px;
+ }
+ .difficulty .blood-top {
+ width: 110%;
+ }
+ .deck-of-cards {
+ max-width: 100%;
+ padding: 0px;
+ }
+ .stages__title {
+ font-size: 16px;
+ margin: 0px;
+ }
+ .stages__quantity input {
+ width: 30px;
+ height: 30px;
+ font-size: 20px;
+ border-radius: 5px;
+ }
+ .working {
+ align-items: start;
+ padding: 5px;
+ }
+ .inverted-deck .deck {
+ width: 125px;
+ height: 165px;
+ }
+ .random-card {
+ width: 125px;
+ height: 165px;
+ }
}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/style.css.map b/style.css.map
index 5420d086..0a323c27 100644
--- a/style.css.map
+++ b/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,qBAAA;EACA,uDAAA;ACCJ;ADEA;EACI,kBAAA;EACA,SAAA;EACA,YAAA;EACA,gBAAA;EACA,qBAAA;EACA,gBAAA;ACAJ;;ADGA;EACI,kBAAA;EACA,gBAAA;EACA,gBAAA;EACA,yDAAA;EACA,6BAAA;EACA,sBAAA;ACAJ;;ADGA;EACI,aAAA;EACA,8BAAA;EACA,kBAAA;EACA,WAAA;EACA,aAAA;EACA,8CAAA;EACA,6CAAA;UAAA,qCAAA;EACA,aAAA;ACAJ;;ADGA;EACI;IACI,+BAAA;ECAN;EDGE;IACI,6BAAA;ECDN;AACF;;ADNA;EACI;IACI,+BAAA;ECAN;EDGE;IACI,6BAAA;ECDN;AACF;ADIA;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;EACA,eAAA;ACFJ;ADII;EACI,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,yBAAA;ACFR;;ADMA;EACI,aAAA;EACA,YAAA;EACA,eAAA;EACA,wDAAA;EACA,2BAAA;EACA,sBAAA;EACA,YAAA;EACA,uBAAA;EACA,eAAA;EACA,6BAAA;EACA,mBAAA;EACA,6DAAA;KAAA,0DAAA;ACHJ;ADKI;EACI,UAAA;EACA,uBAAA;EACA,8BAAA;EACA,6DAAA;KAAA,0DAAA;ACHR;ADMI;EACI,mBAAA;ACJR;ADOI;EACI,kBAAA;EACA,eAAA;EACA,iDAAA;EACA,4BAAA;EACA,2BAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,WAAA;EACA,uBAAA;ACLR;;ADSA;EACI,mBAAA;EACA,uBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,6BAAA;EACA,oBAAA;EACA,mBAAA;EACA,eAAA;ACNJ;;ADSA;EACI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;ACNJ;ADQI;EACI,mBAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;ACNR;ADSI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,UAAA;ACPR;ADSQ;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,oBAAA;EACA,UAAA;EACA,YAAA;EACA,mBAAA;ACPZ;ADSY;EACI,kBAAA;ACPhB;;ADaA;EACI,gDAAA;ACVJ;ADWI;EACI,qFAAA;ACTR;;ADaA;EACI,gDAAA;ACVJ;;ADaA;EACI,+CAAA;ACVJ;;ADaA;EACI,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACVJ;;ADaA;EACI,kBAAA;EACA,UAAA;EACA,kBAAA;ACVJ;ADYI;EACI,mBAAA;EACA,YAAA;EACA,uBAAA;EACA,eAAA;ACVR;ADYQ;EACI,UAAA;EACA,uBAAA;ACVZ;;ADeA;EACI,kBAAA;EACA,UAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,YAAA;EACA,yBAAA;EACA,6BAAA;ACZJ;;ADeA;EACI,8BAAA;EACA,8DAAA;KAAA,2DAAA;EACA,qBAAA;EACA,UAAA;EACA,uBAAA;ACZJ;;ADeA;EACI,oBAAA;ACZJ;;ADeA;EACI,QAAA;EACA,uBAAA;ACZJ;;ADeA;EACI,mBAAA;EACA,UAAA;EACA,uBAAA;ACZJ;;ADeA;EACI,mBAAA;EACA,uBAAA;ACZJ;;ADeA;EACI,0CAAA;EACA,uBAAA;ACZJ","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,qBAAA;EACA,uDAAA;ACCJ;ADEA;EACI,kBAAA;EACA,SAAA;EACA,YAAA;EACA,gBAAA;EACA,qBAAA;EACA,gBAAA;ACAJ;;ADGA;EACI,kBAAA;EACA,gBAAA;EACA,gBAAA;EACA,yDAAA;EACA,6BAAA;EACA,sBAAA;ACAJ;;ADGA;EACI,aAAA;EACA,8BAAA;EACA,kBAAA;EACA,WAAA;EACA,aAAA;EACA,8CAAA;EACA,6CAAA;UAAA,qCAAA;EACA,aAAA;ACAJ;;ADGA;EACI;IACI,+BAAA;ECAN;EDGE;IACI,6BAAA;ECDN;AACF;;ADNA;EACI;IACI,+BAAA;ECAN;EDGE;IACI,6BAAA;ECDN;AACF;ADIA;EACI,aAAA;EACA,uBAAA;EACA,uBAAA;EACA,eAAA;EACA,eAAA;ACFJ;ADII;EACI,YAAA;EACA,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,uBAAA;ACFR;ADGQ;EACI,sBAAA;EACA,uBAAA;EACA,UAAA;ACDZ;ADKI;EACI,kBAAA;EACA,YAAA;EACA,mBAAA;EACA,eAAA;EACA,yBAAA;ACHR;ADMI;EACI,eAAA;EACA,kBAAA;EACA,SAAA;EACA,YAAA;EACA,mBAAA;EACA,UAAA;EACA,aAAA;ACJR;;ADQA;EACI,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,wDAAA;EACA,2BAAA;EACA,sBAAA;EACA,YAAA;EACA,uBAAA;EACA,eAAA;EACA,6BAAA;EACA,mBAAA;ACLJ;ADOI;EACI,kBAAA;EACA,mBAAA;EACA,WAAA;EACA,SAAA;EACA,aAAA;ACLR;ADQI;EACI,qBAAA;EACA,UAAA;EACA,uBAAA;ACNR;ADSI;EACI,mBAAA;ACPR;ADUI;EACI,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,YAAA;EACA,uBAAA;ACRR;;ADYA;EACI,mBAAA;EACA,uBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,6BAAA;EACA,oBAAA;EACA,mBAAA;EACA,eAAA;ACTJ;;ADYA;EACI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;ACTJ;ADWI;EACI,mBAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;ACTR;ADYI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,UAAA;ACVR;ADYQ;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,oBAAA;EACA,UAAA;EACA,YAAA;EACA,mBAAA;ACVZ;ADYY;EACI,kBAAA;ACVhB;;ADgBA;EACI,gDAAA;ACbJ;ADeI;EACI,qFAAA;ACbR;;ADiBA;EACI,gDAAA;ACdJ;;ADiBA;EACI,+CAAA;ACdJ;;ADiBA;EACI,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACdJ;;ADiBA;EACI,kBAAA;EACA,UAAA;EACA,kBAAA;ACdJ;ADgBI;EACI,mBAAA;EACA,YAAA;EACA,uBAAA;EACA,eAAA;ACdR;ADgBQ;EACI,UAAA;EACA,uBAAA;ACdZ;;ADmBA;EACI,kBAAA;EACA,UAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,YAAA;EACA,yBAAA;EACA,6BAAA;AChBJ;;ADmBA;EACI,oBAAA;AChBJ;;ADmBA;EACI,QAAA;EACA,uBAAA;AChBJ;;ADmBA;EACI,mBAAA;EACA,UAAA;EACA,uBAAA;AChBJ;;ADmBA;EACI,mBAAA;EACA,uBAAA;AChBJ;;ADmBA;EACI,0CAAA;EACA,uBAAA;AChBJ;;ADmBA;EACI,6BAAA;AChBJ;;ADmBA;EACI;IACI,aAAA;IACA,sBAAA;EChBN;EDkBE;IACI,eAAA;EChBN;EDkBE;IACI,YAAA;IACA,aAAA;IACA,mBAAA;EChBN;EDkBE;IACI,YAAA;EChBN;EDkBE;IACI,YAAA;IACA,QAAA;EChBN;EDkBE;IACI,mBAAA;IACA,eAAA;IACA,QAAA;IACA,aAAA;EChBN;EDmBE;IACI,eAAA;ECjBN;EDmBE;IACI,WAAA;ECjBN;EDmBE;IACI,eAAA;IACA,YAAA;ECjBN;EDmBE;IACI,eAAA;IACA,WAAA;ECjBN;EDmBE;IACI,WAAA;IACA,YAAA;IACA,eAAA;IACA,kBAAA;ECjBN;EDmBE;IACI,kBAAA;IACA,YAAA;ECjBN;EDmBE;IACI,YAAA;IACA,aAAA;ECjBN;EDmBE;IACI,YAAA;IACA,aAAA;ECjBN;AACF","file":"style.css"}
\ No newline at end of file
diff --git a/style.scss b/style.scss
index 3931473c..df16eb79 100644
--- a/style.scss
+++ b/style.scss
@@ -44,21 +44,49 @@ body {
.ancient-cards {
display: flex;
- align-items: center;
+ align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
max-width: 35vw;
- img {
+ .blood {
+ opacity: .5;
position: relative;
- padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition-duration: 1s;
+ &:hover {
+ transform: scale(1.15);
+ transition-duration: 1s;
+ opacity: 1;
+ }
+ }
+
+ img.cards {
+ position: relative;
+ margin: 10px;
border-radius: 30px;
cursor: pointer;
transition-duration: .2s;
}
+
+ img.blood-top {
+ cursor: pointer;
+ position: absolute;
+ top: 10px;
+ width: 230px;
+ border-radius: 30px;
+ z-index: 3;
+ height: 100px;
+ }
}
.difficulty {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
padding: 10px;
color: white;
font-size: 20px;
@@ -70,13 +98,19 @@ body {
cursor: pointer;
border: 5px solid transparent;
border-radius: 10px;
- border-image: url(/assets/Gif/fire-65.gif) 47%/0/0 stretch;
+
+ .blood-top {
+ position: absolute;
+ border-radius: 10px;
+ width: 108%;
+ top: -6px;
+ height: 100px;
+ }
&:hover {
+ transform: scale(1.1);
opacity: 1;
transition-duration: 1s;
- border: 10px solid transparent;
- border-image: url(/assets/Gif/fire-65.gif) 47%/1/0 stretch;
}
&:not(:last-child) {
@@ -85,16 +119,12 @@ body {
&-level {
position: relative;
- max-width: 30vw;
- background-image: url(./assets/Scroll/scroll.png);
- background-repeat: no-repeat;
- background-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100px;
- top: -800px;
+ top: -1000px;
transition-duration: 2s;
}
}
@@ -120,7 +150,7 @@ body {
&__title {
margin-bottom: 10px;
margin-top: 10px;
- color: white;
+ color: black;
font-size: 30px;
}
@@ -151,8 +181,9 @@ body {
.green {
background-image: url(./assets/Stages/green.png);
+
&:hover {
- border: 2px solid linear-gradient(90deg, #000000,#230b10,#331016,#230b10,#000000);
+ border: 2px solid linear-gradient(90deg, #000000, #230b10, #331016, #230b10, #000000);
}
}
@@ -200,14 +231,6 @@ body {
transform: translateX(-250px);
}
-.fire-border {
- border: 10px solid transparent;
- border-image: url(./assets/Gif/fire-65.gif) 47%/1/0 stretch;
- transform: scale(1.1);
- opacity: 1;
- transition-duration: 1s;
-}
-
.none-click {
pointer-events: none;
}
@@ -231,4 +254,69 @@ body {
.random-card.show {
transform: translateX(0px) rotateY(360deg);
transition-duration: 1s;
+}
+
+.through {
+ text-decoration: line-through;
+}
+
+@media (max-width: 391px) {
+ .water {
+ padding: 10px;
+ flex-direction: column;
+ }
+ .ancient-cards {
+ max-width: 100%;
+ }
+ .cards {
+ width: 125px;
+ height: 165px;
+ border-radius: 15px;
+ }
+ .ancient-cards img.cards {
+ margin: 10px;
+ }
+ .ancient-cards img.blood-top {
+ width: 124px;
+ top: 9px;
+ }
+ .difficulty-level {
+ flex-direction: row;
+ flex-wrap: wrap;
+ top: 0px;
+ padding: 10px;
+ // left: -300px;
+ }
+ .difficulty {
+ font-size: 14px;
+ }
+ .difficulty .blood-top {
+ width: 110%;
+ }
+ .deck-of-cards {
+ max-width: 100%;
+ padding: 0px;
+ }
+ .stages__title {
+ font-size: 16px;
+ margin: 0px;
+ }
+ .stages__quantity input {
+ width: 30px;
+ height: 30px;
+ font-size: 20px;
+ border-radius: 5px;
+ }
+ .working {
+ align-items: start;
+ padding: 5px;
+ }
+ .inverted-deck .deck {
+ width: 125px;
+ height: 165px;
+ }
+ .random-card {
+ width: 125px;
+ height: 165px;
+ }
}
\ No newline at end of file
Третья стадия
+ Третья стадия
@@ -61,8 +86,8 @@
- 
+
+