diff --git a/assets/Ancients/Aza.jpg b/assets/Ancients/Aza.jpg
new file mode 100644
index 00000000..47247a53
Binary files /dev/null and b/assets/Ancients/Aza.jpg differ
diff --git a/assets/Ancients/Cthulthu.png b/assets/Ancients/Cthulthu.png
index b3edd2a2..04f2fa98 100644
Binary files a/assets/Ancients/Cthulthu.png and b/assets/Ancients/Cthulthu.png differ
diff --git a/assets/MythicCards/blue/index.js b/assets/MythicCards/blue/index.js
index ddb11de7..76e847f9 100644
--- a/assets/MythicCards/blue/index.js
+++ b/assets/MythicCards/blue/index.js
@@ -1,29 +1,17 @@
-import blue1 from './blue1.png';
-import blue2 from './blue2.png';
-import blue3 from './blue3.png';
-import blue4 from './blue4.png';
-import blue5 from './blue5.png';
-import blue6 from './blue6.png';
-import blue7 from './blue7.png';
-import blue8 from './blue8.png';
-import blue9 from './blue9.png';
-import blue10 from './blue10.png';
-import blue11 from './blue11.png';
-import blue12 from './blue12.png';
 
-const cards = {
-  blue1,
-  blue2,
-  blue3,
-  blue4,
-  blue5,
-  blue6,
-  blue7,
-  blue8,
-  blue9,
-  blue10,
-  blue11,
-  blue12,
+const blueCards = {
+  blue1:'./assets/MythicCards/blue/blue1.png',
+  blue2:'./assets/MythicCards/blue/blue2.png',
+  blue3:'./assets/MythicCards/blue/blue3.png',
+  blue4:'./assets/MythicCards/blue/blue4.png',
+  blue5:'./assets/MythicCards/blue/blue5.png',
+  blue6:'./assets/MythicCards/blue/blue6.png',
+  blue7:'./assets/MythicCards/blue/blue7.png',
+  blue8:'./assets/MythicCards/blue/blue8.png',
+  blue9:'./assets/MythicCards/blue/blue9.png',
+  blue10:'./assets/MythicCards/blue/blue10.png',
+  blue11:'./assets/MythicCards/blue/blue11.png',
+  blue12:'./assets/MythicCards/blue/blue12.png',
 }
 
-export default cards
\ No newline at end of file
+export default blueCards
\ No newline at end of file
diff --git a/assets/MythicCards/brown/index.js b/assets/MythicCards/brown/index.js
index db9dcc4f..28592bde 100644
--- a/assets/MythicCards/brown/index.js
+++ b/assets/MythicCards/brown/index.js
@@ -1,47 +1,25 @@
-import brown1 from './brown1.png';
-import brown2 from './brown2.png';
-import brown3 from './brown3.png';
-import brown4 from './brown4.png';
-import brown5 from './brown5.png';
-import brown6 from './brown6.png';
-import brown7 from './brown7.png';
-import brown8 from './brown8.png';
-import brown9 from './brown9.png';
-import brown10 from './brown10.png';
-import brown11 from './brown11.png';
-import brown12 from './brown12.png';
-import brown13 from './brown13.png';
-import brown14 from './brown14.png';
-import brown15 from './brown15.png';
-import brown16 from './brown16.png';
-import brown17 from './brown17.png';
-import brown18 from './brown18.png';
-import brown19 from './brown19.png';
-import brown20 from './brown20.png';
-import brown21 from './brown21.png';
-
-const cards = {
-  brown1,
-  brown2,
-  brown3,
-  brown4,
-  brown5,
-  brown6,
-  brown7,
-  brown8,
-  brown9,
-  brown10,
-  brown11,
-  brown12,
-  brown13,
-  brown14,
-  brown15,
-  brown16,
-  brown17,
-  brown18,
-  brown19,
-  brown20,
-  brown21,
+const brownCards = {
+  brown1:'./assets/MythicCards/brown/brown1.png',
+  brown2:'./assets/MythicCards/brown/brown2.png',
+  brown3:'./assets/MythicCards/brown/brown3.png',
+  brown4:'./assets/MythicCards/brown/brown4.png',
+  brown5:'./assets/MythicCards/brown/brown5.png',
+  brown6:'./assets/MythicCards/brown/brown6.png',
+  brown7:'./assets/MythicCards/brown/brown7.png',
+  brown8:'./assets/MythicCards/brown/brown8.png',
+  brown9:'./assets/MythicCards/brown/brown9.png',
+  brown10:'./assets/MythicCards/brown/brown10.png',
+  brown11:'./assets/MythicCards/brown/brown11.png',
+  brown12:'./assets/MythicCards/brown/brown12.png',
+  brown13:'./assets/MythicCards/brown/brown13.png',
+  brown14:'./assets/MythicCards/brown/brown14.png',
+  brown15:'./assets/MythicCards/brown/brown15.png',
+  brown16:'./assets/MythicCards/brown/brown16.png',
+  brown17:'./assets/MythicCards/brown/brown17.png',
+  brown18: './assets/MythicCards/brown/brown18.png',
+  brown19:'./assets/MythicCards/brown/brown19.png',
+  brown20:'./assets/MythicCards/brown/brown20.png',
+  brown21:'./assets/MythicCards/brown/brown21.png',
 }
 
-export default cards
\ No newline at end of file
+export default brownCards
\ No newline at end of file
diff --git a/assets/MythicCards/green/index.js b/assets/MythicCards/green/index.js
index 74249ee4..968dbb02 100644
--- a/assets/MythicCards/green/index.js
+++ b/assets/MythicCards/green/index.js
@@ -1,41 +1,24 @@
-import green1 from './green1.png';
-import green2 from './green2.png';
-import green3 from './green3.png';
-import green4 from './green4.png';
-import green5 from './green5.png';
-import green6 from './green6.png';
-import green7 from './green7.png';
-import green8 from './green8.png';
-import green9 from './green9.png';
-import green10 from './green10.png';
-import green11 from './green11.png';
-import green12 from './green12.png';
-import green13 from './green13.png';
-import green14 from './green14.png';
-import green15 from './green15.png';
-import green16 from './green16.png';
-import green17 from './green17.png';
-import green18 from './green18.png';
 
-const cards = {
-  green1,
-  green2,
-  green3,
-  green4,
-  green5,
-  green6,
-  green7,
-  green8,
-  green9,
-  green10,
-  green11,
-  green12,
-  green13,
-  green14,
-  green15,
-  green16,
-  green17,
-  green18,
-};
+const greenCards =  {
+  green1:'./assets/MythicCards/green/green1.png',
+  green2:'./assets/MythicCards/green/green2.png',
+  green3:'./assets/MythicCards/green/green3.png',
+  green4:'./assets/MythicCards/green/green4.png',
+  green5:'./assets/MythicCards/green/green5.png',
+  green6:'./assets/MythicCards/green/green6.png',
+  green7:'./assets/MythicCards/green/green7.png',
+  green8:'./assets/MythicCards/green/green8.png',
+  green9:'./assets/MythicCards/green/green9.png',
+  green10:'./assets/MythicCards/green/green10.png',
+  green11:'./assets/MythicCards/green/green11.png',
+  green12:'./assets/MythicCards/green/green12.png',
+  green13:'./assets/MythicCards/green/green13.png',
+  green14:'./assets/MythicCards/green/green14.png',
+  green15:'./assets/MythicCards/green/green15.png',
+  green16:'./assets/MythicCards/green/green16.png',
+  green17:'./assets/MythicCards/green/green17.png',
+  green18:'./assets/MythicCards/green/green18.png',
+  }
 
-export default cards;
\ No newline at end of file
+
+export default greenCards
diff --git a/assets/card.jpg b/assets/card.jpg
new file mode 100644
index 00000000..0b0c59d0
Binary files /dev/null and b/assets/card.jpg differ
diff --git a/assets/home.png b/assets/home.png
index cdc7792d..a475f1c7 100644
Binary files a/assets/home.png and b/assets/home.png differ
diff --git a/data/ancients.js b/data/ancients.js
index e19926c1..86f8ae0e 100644
--- a/data/ancients.js
+++ b/data/ancients.js
@@ -1,4 +1,4 @@
-import Ancients from '../assets/Ancients/index'
+const Ancients = '../assets/Ancients/index.js'
 
 const ancientsData = [
   {
diff --git a/data/mythicCards/blue/index.js b/data/mythicCards/blue/index.js
index 6439ca19..7bee8caa 100644
--- a/data/mythicCards/blue/index.js
+++ b/data/mythicCards/blue/index.js
@@ -1,78 +1,78 @@
-import blueCardsAssets from '../../../assets/MythicCards/blue';
+const blueCardsAssets = "../../../assets/MythicCards/blue";
 
-const cardsData = [
+const blueCardsData = [
   {
-    id: 'blue1',
-    cardFace: blueCardsAssets.blue1,
-    difficulty: 'hard',
-    color:'blue'
+    id: "blue1",
+    cardFace: "./assets/MythicCards/blue/blue1.png",
+    difficulty: "hard",
+    color: "blue",
   },
   {
-    id: 'blue2',
-    cardFace: blueCardsAssets.blue2,
-    difficulty: 'hard',
-    color:'blue'
+    id: "blue2",
+    cardFace: "./assets/MythicCards/blue/blue2.png",
+    difficulty: "hard",
+    color: "blue",
   },
   {
-    id: 'blue3',
-    cardFace: blueCardsAssets.blue3,
-    difficulty: 'easy',
-    color:'blue'
+    id: "blue3",
+    cardFace: "./assets/MythicCards/blue/blue3.png",
+    difficulty: "easy",
+    color: "blue",
   },
   {
-    id: 'blue4',
-    cardFace: blueCardsAssets.blue4,
-    difficulty: 'easy',
-    color:'blue'
+    id: "blue4",
+    cardFace: "./assets/MythicCards/blue/blue4.png",
+    difficulty: "easy",
+    color: "blue",
   },
   {
-    id: 'blue5',
-    cardFace: blueCardsAssets.blue5,
-    difficulty: 'easy',
-    color:'blue'
+    id: "blue5",
+    cardFace: "./assets/MythicCards/blue/blue5.png",
+    difficulty: "easy",
+    color: "blue",
   },
   {
-    id: 'blue6',
-    cardFace: blueCardsAssets.blue6,
-    difficulty: 'hard',
-    color:'blue'
+    id: "blue6",
+    cardFace: "./assets/MythicCards/blue/blue6.png",
+    difficulty: "hard",
+    color: "blue",
   },
   {
-    id: 'blue7',
-    cardFace: blueCardsAssets.blue7,
-    difficulty: 'normal',
-    color:'blue'
+    id: "blue7",
+    cardFace: "./assets/MythicCards/blue/blue7.png",
+    difficulty: "normal",
+    color: "blue",
   },
   {
-    id: 'blue8',
-    cardFace: blueCardsAssets.blue8,
-    difficulty: 'hard',
-    color:'blue'
+    id: "blue8",
+    cardFace: "./assets/MythicCards/blue/blue8.png",
+    difficulty: "hard",
+    color: "blue",
   },
   {
-    id: 'blue9',
-    cardFace: blueCardsAssets.blue9,
-    difficulty: 'normal',
-    color:'blue'
+    id: "blue9",
+    cardFace: "./assets/MythicCards/blue/blue9.png",
+    difficulty: "normal",
+    color: "blue",
   },
   {
-    id: 'blue10',
-    cardFace: blueCardsAssets.blue10,
-    difficulty: 'easy',
-    color:'blue'
+    id: "blue10",
+    cardFace: "./assets/MythicCards/blue/blue10.png",
+    difficulty: "easy",
+    color: "blue",
   },
   {
-    id: 'blue11',
-    cardFace: blueCardsAssets.blue11,
-    difficulty: 'normal',
-    color:'blue'
+    id: "blue11",
+    cardFace: "./assets/MythicCards/blue/blue11.png",
+    difficulty: "normal",
+    color: "blue",
   },
   {
-    id: 'blue12',
-    cardFace: blueCardsAssets.blue12,
-    difficulty: 'normal',
-    color:'blue'
+    id: "blue12",
+    cardFace: "./assets/MythicCards/blue/blue12.png",
+    difficulty: "normal",
+    color: "blue",
   },
-]
+];
 
-export default cardsData
\ No newline at end of file
+export default blueCardsData;
diff --git a/data/mythicCards/brown/index.js b/data/mythicCards/brown/index.js
index 0bce7522..f313290b 100644
--- a/data/mythicCards/brown/index.js
+++ b/data/mythicCards/brown/index.js
@@ -1,132 +1,130 @@
-import brownCardsAssets from '../../../assets/MythicCards/brown';
-
-const cardsData = [
+const brownCardsData = [
   {
-    id: 'brown1',
-    cardFace: brownCardsAssets.brown1,
-    difficulty: 'normal',
-    color:'brown'
+    id: "brown1",
+    cardFace: "./assets/MythicCards/brown/brown1.png",
+    difficulty: "normal",
+    color: "brown",
   },
   {
-    id: 'brown2',
-    cardFace: brownCardsAssets.brown2,
-    difficulty: 'normal',
-    color:'brown'
+    id: "brown2",
+    cardFace: "./assets/MythicCards/brown/brown2.png",
+    difficulty: "normal",
+    color: "brown",
   },
   {
-    id: 'brown3',
-    cardFace: brownCardsAssets.brown3,
-    difficulty: 'normal',
-    color:'brown'
+    id: "brown3",
+    cardFace: "./assets/MythicCards/brown/brown3.png",
+    difficulty: "normal",
+    color: "brown",
   },
   {
-    id: 'brown4',
-    cardFace: brownCardsAssets.brown4,
-    difficulty: 'normal',
-    color:'brown'
+    id: "brown4",
+    cardFace: "./assets/MythicCards/brown/brown4.png",
+    difficulty: "normal",
+    color: "brown",
   },
   {
-    id: 'brown5',
-    cardFace: brownCardsAssets.brown5,
-    difficulty: 'normal',
-    color:'brown'
+    id: "brown5",
+    cardFace: "./assets/MythicCards/brown/brown5.png",
+    difficulty: "normal",
+    color: "brown",
   },
   {
-    id: 'brown6',
-    cardFace: brownCardsAssets.brown6,
-    difficulty: 'hard',
-    color:'brown'
+    id: "brown6",
+    cardFace: "./assets/MythicCards/brown/brown6.png",
+    difficulty: "hard",
+    color: "brown",
   },
   {
-    id: 'brown7',
-    cardFace: brownCardsAssets.brown7,
-    difficulty: 'hard',
-    color:'brown'
+    id: "brown7",
+    cardFace: "./assets/MythicCards/brown/brown7.png",
+    difficulty: "hard",
+    color: "brown",
   },
   {
-    id: 'brown8',
-    cardFace: brownCardsAssets.brown8,
-    difficulty: 'hard',
-    color:'brown'
+    id: "brown8",
+    cardFace: "./assets/MythicCards/brown/brown8.png",
+    difficulty: "hard",
+    color: "brown",
   },
   {
-    id: 'brown9',
-    cardFace: brownCardsAssets.brown9,
-    difficulty: 'hard',
-    color:'brown'
+    id: "brown9",
+    cardFace: "./assets/MythicCards/brown/brown9.png",
+    difficulty: "hard",
+    color: "brown",
   },
   {
-    id: 'brown10',
-    cardFace: brownCardsAssets.brown10,
-    difficulty: 'hard',
-    color:'brown'
+    id: "brown10",
+    cardFace: "./assets/MythicCards/brown/brown10.png",
+    difficulty: "hard",
+    color: "brown",
   },
   {
-    id: 'brown11',
-    cardFace: brownCardsAssets.brown11,
-    difficulty: 'easy',
-    color:'brown'
+    id: "brown11",
+    cardFace: "./assets/MythicCards/brown/brown11.png",
+    difficulty: "easy",
+    color: "brown",
   },
   {
-    id: 'brown12',
-    cardFace: brownCardsAssets.brown12,
-    difficulty: 'easy',
-    color:'brown'
+    id: "brown12",
+    cardFace: "./assets/MythicCards/brown/brown12.png",
+    difficulty: "easy",
+    color: "brown",
   },
   {
-    id: 'brown13',
-    cardFace: brownCardsAssets.brown13,
-    difficulty: 'easy',
-    color:'brown'
+    id: "brown13",
+    cardFace: "./assets/MythicCards/brown/brown13.png",
+    difficulty: "easy",
+    color: "brown",
   },
   {
-    id: 'brown14',
-    cardFace: brownCardsAssets.brown14,
-    difficulty: 'easy',
-    color:'brown'
+    id: "brown14",
+    cardFace: "./assets/MythicCards/brown/brown14.png",
+    difficulty: "easy",
+    color: "brown",
   },
   {
-    id: 'brown15',
-    cardFace: brownCardsAssets.brown15,
-    difficulty: 'normal',
-    color:'brown'
+    id: "brown15",
+    cardFace: "./assets/MythicCards/brown/brown15.png",
+    difficulty: "normal",
+    color: "brown",
   },
   {
-    id: 'brown16',
-    cardFace: brownCardsAssets.brown16,
-    difficulty: 'normal',
-    color:'brown'
+    id: "brown16",
+    cardFace: "./assets/MythicCards/brown/brown16.png",
+    difficulty: "normal",
+    color: "brown",
   },
   {
-    id: 'brown17',
-    cardFace: brownCardsAssets.brown17,
-    difficulty: 'normal',
-    color:'brown'
+    id: "brown17",
+    cardFace: "./assets/MythicCards/brown/brown17.png",
+    difficulty: "normal",
+    color: "brown",
   },
   {
-    id: 'brown18',
-    cardFace: brownCardsAssets.brown18,
-    difficulty: 'normal',
-    color:'brown'
+    id: "brown18",
+    cardFace: "./assets/MythicCards/brown/brown18.png",
+    difficulty: "normal",
+    color: "brown",
   },
   {
-    id: 'brown19',
-    cardFace: brownCardsAssets.brown19,
-    difficulty: 'normal',
-    color:'brown'
+    id: "brown19",
+    cardFace: "./assets/MythicCards/brown/brown19.png",
+    difficulty: "normal",
+    color: "brown",
   },
   {
-    id: 'brown20',
-    cardFace: brownCardsAssets.brown20,
-    difficulty: 'normal',
-    color:'brown'
+    id: "brown20",
+    cardFace: "./assets/MythicCards/brown/brown20.png",
+    difficulty: "normal",
+    color: "brown",
   },
   {
-    id: 'brown21',
-    cardFace: brownCardsAssets.brown21,
-    difficulty: 'easy',
-    color:'brown'
+    id: "brown21",
+    cardFace: "./assets/MythicCards/brown/brown21.png",
+    difficulty: "easy",
+    color: "brown",
   },
-]
+];
 
-export default cardsData
\ No newline at end of file
+export default brownCardsData;
diff --git a/data/mythicCards/green/index.js b/data/mythicCards/green/index.js
index cca6e9df..77e54777 100644
--- a/data/mythicCards/green/index.js
+++ b/data/mythicCards/green/index.js
@@ -1,114 +1,112 @@
-import greenCardsAssets from '../../../assets/MythicCards/green';
-
-const cardsData = [
+const greenCardsData = [
   {
-    id: 'green1',
-    cardFace: greenCardsAssets.green1,
-    difficulty: 'easy',
-    color:'green'
+    id: "green1",
+    cardFace: "./assets/MythicCards/green/green1.png",
+    difficulty: "easy",
+    color: "green",
   },
   {
-    id: 'green2',
-    cardFace: greenCardsAssets.green2,
-    difficulty: 'hard',
-    color:'green'
+    id: "green2",
+    cardFace: "./assets/MythicCards/green/green2.png",
+    difficulty: "hard",
+    color: "green",
   },
   {
-    id: 'green3',
-    cardFace: greenCardsAssets.green3,
-    difficulty: 'hard',
-    color:'green'
+    id: "green3",
+    cardFace: "./assets/MythicCards/green/green3.png",
+    difficulty: "hard",
+    color: "green",
   },
   {
-    id: 'green4',
-    cardFace: greenCardsAssets.green4,
-    difficulty: 'hard',
-    color:'green'
+    id: "green4",
+    cardFace: "./assets/MythicCards/green/green4.png",
+    difficulty: "hard",
+    color: "green",
   },
   {
-    id: 'green5',
-    cardFace: greenCardsAssets.green5,
-    difficulty: 'hard',
-    color:'green'
+    id: "green5",
+    cardFace: "./assets/MythicCards/green/green5.png",
+    difficulty: "hard",
+    color: "green",
   },
   {
-    id: 'green6',
-    cardFace: greenCardsAssets.green6,
-    difficulty: 'hard',
-    color:'green'
+    id: "green6",
+    cardFace: "./assets/MythicCards/green/green6.png",
+    difficulty: "hard",
+    color: "green",
   },
   {
-    id: 'green7',
-    cardFace: greenCardsAssets.green7,
-    difficulty: 'normal',
-    color:'green'
+    id: "green7",
+    cardFace: "./assets/MythicCards/green/green7.png",
+    difficulty: "normal",
+    color: "green",
   },
   {
-    id: 'green8',
-    cardFace: greenCardsAssets.green8,
-    difficulty: 'normal',
-    color:'green'
+    id: "green8",
+    cardFace: "./assets/MythicCards/green/green8.png",
+    difficulty: "normal",
+    color: "green",
   },
   {
-    id: 'green9',
-    cardFace: greenCardsAssets.green9,
-    difficulty: 'normal',
-    color:'green'
+    id: "green9",
+    cardFace: "./assets/MythicCards/green/green9.png",
+    difficulty: "normal",
+    color: "green",
   },
   {
-    id: 'green10',
-    cardFace: greenCardsAssets.green10,
-    difficulty: 'normal',
-    color:'green'
+    id: "green10",
+    cardFace: "./assets/MythicCards/green/green10.png",
+    difficulty: "normal",
+    color: "green",
   },
   {
-    id: 'green11',
-    cardFace: greenCardsAssets.green11,
-    difficulty: 'normal',
-    color:'green'
+    id: "green11",
+    cardFace: "./assets/MythicCards/green/green11.png",
+    difficulty: "normal",
+    color: "green",
   },
   {
-    id: 'green12',
-    cardFace: greenCardsAssets.green12,
-    difficulty: 'easy',
-    color:'green'
+    id: "green12",
+    cardFace: "./assets/MythicCards/green/green12.png",
+    difficulty: "easy",
+    color: "green",
   },
   {
-    id: 'green13',
-    cardFace: greenCardsAssets.green13,
-    difficulty: 'normal',
-    color:'green'
+    id: "green13",
+    cardFace: "./assets/MythicCards/green/green13.png",
+    difficulty: "normal",
+    color: "green",
   },
   {
-    id: 'green14',
-    cardFace: greenCardsAssets.green14,
-    difficulty: 'normal',
-    color:'green'
+    id: "green14",
+    cardFace: "./assets/MythicCards/green/green14.png",
+    difficulty: "normal",
+    color: "green",
   },
   {
-    id: 'green15',
-    cardFace: greenCardsAssets.green15,
-    difficulty: 'normal',
-    color:'green'
+    id: "green15",
+    cardFace: "./assets/MythicCards/green/green15.png",
+    color: "green",
   },
   {
-    id: 'green16',
-    cardFace: greenCardsAssets.green16,
-    difficulty: 'easy',
-    color:'green'
+    id: "green16",
+    cardFace: "./assets/MythicCards/green/green16.png",
+    difficulty: "easy",
+    color: "green",
   },
   {
-    id: 'green17',
-    cardFace: greenCardsAssets.green17,
-    difficulty: 'easy',
-    color:'green'
+    id: "green17",
+    cardFace: "./assets/MythicCards/green/green17.png",
+    difficulty: "easy",
+    color: "green",
   },
   {
-    id: 'green18',
-    cardFace: greenCardsAssets.green18,
-    difficulty: 'easy',
-    color:'green'
-  },
+    id: "green18",
+    cardFace: "./assets/MythicCards/green/green18.png",
+    difficulty: "easy",
+    color: "green",
+  }
 ]
+    
+export default greenCardsData;
 
-export default cardsData
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..88f8086d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>Codejam Demo</title>
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="ancient">
+      <div class="aza"></div>
+     </div>
+    <div class="hardness-choise">
+      <div class="hardness">
+              <div class="normal">Средняя</div>
+             </div>
+    </div>
+
+    <div class="stack">
+      <div class="stages">
+        <div class="stage1">
+          <span>1-й этап</span>
+          <div class="dots">
+            <div class="green dot">0</div>
+            <div class="brown dot">0</div> 
+            <div class="blue dot">0</div> 
+          </div>
+        </div>
+              <div class="stage2">
+            <span>2-й этап</span>
+          <div class="dots">
+            <div class="green dot">0</div>
+            <div class="brown dot">0</div> 
+            <div class="blue dot">0</div> 
+          </div>
+              </div>
+        <div class="stage3">
+          <span>3-й этап</span>
+          <div class="dots">
+            <div class="green dot">0</div>
+            <div class="brown dot">0</div> 
+            <div class="blue dot">0</div> 
+          </div>
+        </div>
+      </div>
+      <div class="shuffle_deck">Замешать колоду</div>
+      <div class="deck"></div>
+          <div class="card">
+            <img src="./././assets/MythicCards/brown/brown19.png" alt="" class="random-card">
+          </div>
+    </div>
+      <script type="module" src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 00000000..06798a59
--- /dev/null
+++ b/script.js
@@ -0,0 +1,230 @@
+// // Импорт всех js файлов
+
+import greenCards from "./assets/MythicCards/green/index.js";
+import brownCards from "./assets/MythicCards/brown/index.js";
+import blueCards from "./assets/MythicCards/blue/index.js";
+import blueCardsData from "./data/mythicCards/blue/index.js";
+import brownCardsData from "./data/mythicCards/brown/index.js";
+import ancientsData from "./data/ancients.js";
+import difficulties from "./data/difficulties.js";
+import greenCardsData from "./data/mythicCards/green/index.js";
+
+// // Объявление переменных
+
+const ancient = document.querySelector(".aza");
+const hardness = document.querySelector(".hardness");
+const stack = document.querySelector(".stack");
+const normal = document.querySelector(".normal");
+const shuffleDeck = document.querySelector(".shuffle_deck");
+const deck = document.querySelector(".deck");
+const randomCardShow = document.querySelector(".card");
+const randomCardPlay= document.querySelector(".random-card");
+
+// // Листенеры
+
+ancient.addEventListener("click", hardnessChoise);
+normal.addEventListener("click", shuffleButton2);
+shuffleDeck.addEventListener("click", Deck);
+deck.addEventListener("click", randomCardFunc);
+
+// // Функция отображения уровней сложности
+
+function hardnessChoise() {
+  hardness.classList.add("activ");
+}
+
+// // Функции отображения кнопки перемешивания колоды, после выбора уровня сложности
+
+function shuffleButton2() {
+  shuffleDeck.classList.add("activ");
+  deck.classList.remove("activ");
+   normal.classList.add("activ");
+  randomCardShow.classList.remove("activ");
+}
+
+// // Функция отображения колоды, после нажатия на кнопку перемешивания колоды
+
+function Deck() {
+  shuffleDeck.classList.remove("activ");
+  deck.classList.add("activ");
+  shuffleCards();
+ }
+
+// // Функция отображения рандомной карты снизу колоды
+
+function randomCardFunc() {
+  deck.classList.add("activ");
+  shuffleDeck.classList.remove("activ");
+  randomCardShow.classList.add("activ");
+  showCard()
+}
+
+let useCardsSrc;
+let useCards = [];
+
+function getRandomCard(arr) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+function repeat(arr1, arr, sum) {
+  let card;
+  while (arr1.length < sum) {
+  card = getRandomCard(arr);
+  if (!arr1.includes(card)) {
+      arr1.push(card);
+    }
+  }
+}
+function repeat1(arr1, arr, sum) {
+  while (arr1.length < sum) {
+    const num = Math.floor(Math.random() * arr.length);
+    arr1.push(arr[num]);
+    arr.splice(num, 1);
+  }
+}
+
+// Функция перемешивания карт
+
+function shuffleCards() {
+  useCards.splice(0, useCards.length);
+  const greenuseCards = [];
+  const brownuseCards = [];
+  const blueuseCards = [];
+
+  const sumGreenCards =
+    +ancientsData[0].firstStage.greenCards +
+    +ancientsData[0].secondStage.greenCards +
+    +ancientsData[0].thirdStage.greenCards;
+  const sumBrownCards =
+    +ancientsData[1].firstStage.brownCards +
+    +ancientsData[1].secondStage.brownCards +
+    +ancientsData[1].thirdStage.brownCards;
+  const sumBlueCards =
+    +ancientsData[1].firstStage.blueCards +
+    +ancientsData[1].secondStage.blueCards +
+    +ancientsData[1].thirdStage.blueCards;
+
+  repeat(greenuseCards, greenCardsData, sumGreenCards);
+  repeat(brownuseCards, brownCardsData, sumBrownCards);
+  repeat(blueuseCards, blueCardsData, sumBlueCards);
+
+  const sumFirstStageGreenCards = ancientsData[0].firstStage.greenCards;
+  const sumFirstStageBrownCards = ancientsData[0].firstStage.brownCards;
+  const sumFirstStageBlueCards = ancientsData[0].firstStage.blueCards;
+
+  const firstStageGreen = [];
+  const firstStageBrown = [];
+  const firstStageBlue = [];
+
+  repeat1(firstStageGreen, greenuseCards, sumFirstStageGreenCards);
+  repeat1(firstStageBrown, brownuseCards, sumFirstStageBrownCards);
+  repeat1(firstStageBlue, blueuseCards, sumFirstStageBlueCards);
+  const sumSecondStageGreenCards = ancientsData[0].secondStage.greenCards;
+  const sumSecondStageBrownCards = ancientsData[0].secondStage.brownCards;
+  const sumSecondStageBlueCards = ancientsData[0].secondStage.blueCards;
+
+  const secondStageGreen = [];
+  const secondStageBrown = [];
+  const secondStageBlue = [];
+
+  repeat1(secondStageGreen, greenuseCards, sumSecondStageGreenCards);
+  repeat1(secondStageBrown, brownuseCards, sumSecondStageBrownCards);
+  repeat1(secondStageBlue, blueuseCards, sumSecondStageBlueCards);
+
+  const sumThirdStageGreenCards = ancientsData[0].thirdStage.greenCards;
+  const sumThirdStageBrownCards = ancientsData[0].thirdStage.brownCards;
+  const sumThirdStageBlueCards = ancientsData[0].thirdStage.blueCards;
+
+  const thirdStageGreen = [];
+  const thirdStageBrown = [];
+  const thirdStageBlue = [];
+  repeat1(thirdStageGreen, greenuseCards, sumThirdStageGreenCards);
+  repeat1(thirdStageBrown, brownuseCards, sumThirdStageBrownCards);
+  repeat1(thirdStageBlue, blueuseCards, sumThirdStageBlueCards);
+
+  const firstStageCards = firstStageGreen.concat(
+    firstStageBrown,
+    firstStageBlue
+  );
+  const secondStageCards = secondStageGreen.concat(
+    secondStageBrown,
+    secondStageBlue
+  );
+  const thirdStageCards = thirdStageGreen.concat(
+    thirdStageBrown,
+    thirdStageBlue
+  );
+
+  const firstStageMix = firstStageCards
+    .map((i) => [Math.random(), i])
+    .sort()
+    .map((i) => i[1]);
+  const secondStageMix = secondStageCards
+    .map((i) => [Math.random(), i])
+    .sort()
+    .map((i) => i[1]);
+  const thirdStageMix = thirdStageCards
+    .map((i) => [Math.random(), i])
+    .sort()
+    .map((i) => i[1]);
+
+  useCards.splice(-1, 0, ...useCards.splice(-1, 1, firstStageMix));
+  useCards.splice(-1, 0, ...useCards.splice(-1, 1, secondStageMix));
+  useCards.splice(-1, 0, ...useCards.splice(-1, 1, thirdStageMix));
+  useCardsSrc = firstStageMix.concat(secondStageMix, thirdStageMix);
+  randomCardPlay.src = " ";
+  tracker();
+}
+
+// Функция отображения рандомной карты
+
+function showCard() {
+  if (useCards[0].length != 0) {
+    randomCardPlay.src = useCards[0][0].cardFace;
+     useCards[0].splice(0, 1);
+    tracker();
+   } else if (useCards[1].length != 0) {
+    randomCardPlay.src = useCards[1][0].cardFace;
+     useCards[1].splice(0, 1);
+    tracker();
+     } else if (useCards[2].length != 0) {
+    randomCardPlay.src = useCards[2][0].cardFace;
+       useCards[2].splice(0, 1);
+    tracker();
+     } else deck.classList.remove("activ");
+}
+
+// Функция трекер
+
+function tracker() {
+  const dot = document.querySelectorAll(".dot");
+  dot[0].textContent = useCards[0].filter(
+    (card) => card.color === "green"
+  ).length;
+  dot[1].textContent = useCards[0].filter(
+    (card) => card.color === "brown"
+  ).length;
+  dot[2].textContent = useCards[0].filter(
+    (card) => card.color === "blue"
+  ).length;
+
+  dot[3].textContent = useCards[1].filter(
+    (card) => card.color === "green"
+  ).length;
+  dot[4].textContent = useCards[1].filter(
+    (card) => card.color === "brown"
+  ).length;
+  dot[5].textContent = useCards[1].filter(
+    (card) => card.color === "blue"
+  ).length;
+
+  dot[6].textContent = useCards[2].filter(
+    (card) => card.color === "green"
+  ).length;
+  dot[7].textContent = useCards[2].filter(
+    (card) => card.color === "brown"
+  ).length;
+  dot[8].textContent = useCards[2].filter(
+    (card) => card.color === "blue"
+  ).length;
+}
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..a8835082
--- /dev/null
+++ b/style.css
@@ -0,0 +1,176 @@
+body {
+  box-sizing: border-box;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  background-image: url("assets/home.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.ancient {
+  display: flex;
+  width: 40%;
+  height: 100vh;
+  flex-wrap: wrap;
+
+}
+
+.aza {
+  display: flex;
+  background-image: url("assets/Ancients/Aza.jpg");
+  height:270px;
+  width: 210px;
+  background-size: contain;
+  border-radius: 10px;
+  background-repeat: no-repeat;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
+.aza:hover {
+  cursor: pointer;
+ }
+
+
+.hardness-choise{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    width: 20%;
+    height: 100vh;
+  }
+
+.hardness {
+  display: none;
+}
+
+.hardness.activ {
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+}
+
+.normal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 76px;
+  height: 35px;
+  border: 1px solid yellow;
+  margin-top: 40px;
+  color: white;
+  border-radius: 10px;
+}
+
+.normal.activ{
+  background-color: blue;
+}
+
+.normal,
+.shuffle_deck:hover {
+  cursor: pointer;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 40%;
+  height: 100vh;
+}
+
+.stages{
+     display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+span{
+    display: block;
+    color: white;
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 24px;
+}
+
+.dots{
+  display: flex;
+    margin-bottom: 15px;
+}
+.dot {
+  display: flex;
+  width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-right: 10px;
+    justify-content: center;
+    align-items: center;
+}
+.green {
+    background-color: green;
+}
+.brown{
+  background-color: #8B4513;
+}
+.blue {
+  background-color: blue;
+}
+
+
+.shuffle_deck{
+    display: none;
+}
+
+.shuffle_deck.activ{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 130px;
+  height: 35px;
+  border: 1px solid;
+  margin-top: 40px;
+  color: white;
+  border-radius: 10px;
+}
+
+.deck.activ{
+    display: flex;
+    background-position: center;
+    background-image: url("assets/card.jpg");
+    height: 200px;
+    width: 160px;
+    background-repeat: no-repeat;
+    /* margin-top: 20px; */
+    border-radius: 20px;
+    
+}
+
+.deck{
+    display: none;
+}
+
+.card.activ{
+  display: flex;
+  margin-top: 20px;
+  height: 200px;
+    width: 160px;
+  border-radius: 20px;
+}
+
+.random-card{
+  height: 180px;
+  width: 120px;
+  margin-left: 20px;
+}
+
+.card {
+  display: none;
+}
+
+.deck.activ, .card.activ:hover{
+  cursor: pointer;
+}
\ No newline at end of file