btn

src/App.vue

@@ -77,40 +77,29 @@ height: 100%;
   align-items: center;
 
 }
-.description__img{
+.btn_rl{
-  width: 330px;
+  margin: 20px;
-  height: 307px;
+  margin-top:40px;
-  border: #FFFFFF;
+  width: 250px;
-  background: #b12929;
+  height: 50px;
-}
+
-.description__text h1{
+  background: #D9D9D9;
- 
+  border-radius: 15px;
-  width: 670px;
+
-  height: 234px;
 
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  font-size: 20px;
+  font-size: 16px;
-  line-height: 24px;
+  line-height: 29px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
   letter-spacing: 0.16em;
   text-transform: uppercase;
-  color: #FFFFFF;
-}
 
-.description__btn{
+  color: rgb(52, 51, 51);
-  width: 330px;
-  height: 55.66px;
-
-  background: #D9D9D9;
-  border-radius: 15px;
-}
-
-.description__lr{
-  height: 400px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
 }
 </style>

src/components/Gamewin-comp.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="strukt">
+         <div class="pole">
+
+        </div>
+        <div class="chat">
+        
+        </div>
+    </div>  
+</template>
+
+<script>
+export default{
+    
+}
+</script>
+
+<style>
+.strukt{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+}
+.pole{
+    width: 800px;
+    height: 450px;
+    background: #ddd;
+}
+.chat{
+    width: 300px;
+    height: 450px;
+
+    background: #6C6C6C;
+    border: 2px solid #171717;
+    border-radius: 20px;
+}
+</style>

src/components/Home-comp.vue

@@ -4,17 +4,17 @@
     <div class="description__img">
       <img src="../img/game.png" alt="game">   
     </div>
-    <div class="description__btn">Мобильная версия</div>
+    <a class="btn_rl">Мобильная версия</a>
   </div>
   
   <div class="description__lr">
     <div class="description__text">
       <h1>
         Hues and Cues — это яркая игра, в которой перед игроками стоит задача объяснить цвета словами.
-        Используя только подсказки из одного и двух слов, игроки пытаются заставить других угадать определенный оттенок из ХХХ цветов на игровом поле. Чем ближе догадки к цели, тем больше очков заработает и загадывающий, и угадывающий. Поскольку все воображают цвета по-разному, соединять цвета и подсказки никогда не было так весело! 
+      </h1>
-      </h1>   
+      <h2>Используя только подсказки из одного и двух слов, игроки пытаются заставить других угадать определенный оттенок из ХХХ цветов на игровом поле. Чем ближе догадки к цели, тем больше очков заработает и загадывающий, и угадывающий. Поскольку все воображают цвета по-разному, соединять цвета и подсказки никогда не было так весело! </h2>   
     </div>
-    <div class="description__btn">Играть</div>
+    <a class="btn_rl">Играть</a>
   </div>
 
 </template>
@@ -29,7 +29,27 @@ export default {
 }
 </script>
 
-<style>
+<style scoped >
+h1{
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 24px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #FFFFFF;
+}
+h2{
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #FFFFFF;
+}
 .content{
   flex: 1 1 auto;
   background: #2D2D2D;
@@ -51,40 +71,22 @@ export default {
   align-items: center;
 
 }
-.description__img{
+.description__img img{
-  width: 330px;
+  width: 250px;
-  height: 307px;
-  border: #FFFFFF;
-  background: #b12929;
 }
-.description__text h1{
+
+
+.description__text{
  
   width: 670px;
   height: 234px;
-
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: #FFFFFF;
-}
-
-.description__btn{
-  width: 330px;
-  height: 55.66px;
-
-  background: #D9D9D9;
-  border-radius: 15px;
 }
 
 .description__lr{
-  height: 400px;
+  height: 500px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
 }
 </style>

src/components/Myprofile-comp.vue

@@ -22,8 +22,8 @@
         </div>
         
         <div class="btn">
-        <div class="btn_rl">Create</div>
+        <a class="btn_rl">назад</a>
-        <div class="btn_rl">Create</div>
+        <a class="btn_rl">Create</a>
         </div>
    
     </div>   
@@ -35,7 +35,7 @@ export default{
 }
 </script>
 
-<style>
+<style scoped >
 .cese{
     width: 100%;
     display:flex;
@@ -89,9 +89,7 @@ li{
 .logname h1{
     margin-left: 50px;
 }
-.statistic{
 
-}
 .statistic li{
     display: flex;
     justify-content: space-between;
@@ -116,12 +114,5 @@ li{
     justify-content: center;
     align-items: center;
 }
-.btn_rl{
-    margin: 20px;
-    width: 250px;
-    height: 50px;
 
-    background: #D9D9D9;
-    border-radius: 15px;
-}
 </style>

src/main.js

@@ -6,6 +6,7 @@ import App from './App.vue'
 
 import Home from './components/Home-comp'
 import My from './components/Myprofile-comp'
+import Game from './components/Gamewin-comp'
 
 const router = createRouter( { 
     history: createWebHistory(),   
@@ -19,6 +20,11 @@ const router = createRouter( {
         name:'my',
         component: My
     },
+    {
+        path:'/game',
+        name:'game',
+        component: Game
+    },
 ]
 });
 createApp(App)

src/router/index.js

@@ -1,30 +0,0 @@
-/*import Vue from 'vue'
-import VueRouter from 'vue-router'
-
-Vue.use(VueRouter);
-
-import Myprofile from '../components/Myprofile-comp'
-
-const Foo = { template: '<div>foo</div>' }
-
-/*let router = new VueRouter({
-    routes:[
-        {
-            path:'/',
-            name:'home',
-            component: Myprofile
-        }
-    ]
-  })
-
-  export default router;
-
-  const routes = [
-    { path: '/foo', component: Foo }
-  ]
-  const router = new VueRouter({
-    routes // сокращённая запись для `routes: routes`
-  })
-  const app = new Vue({
-    router
-  }).$mount('#app')*/