btn
This commit is contained in:
Dari Chernyh
parent
0a35ac6390
commit
8d9df012d3
6 changed files with 97 additions and 100 deletions
43
src/App.vue
43
src/App.vue
|
|
@ -77,40 +77,29 @@ height: 100%;
|
|||
align-items: center;
|
||||
|
||||
}
|
||||
.description__img{
|
||||
width: 330px;
|
||||
height: 307px;
|
||||
border: #FFFFFF;
|
||||
background: #b12929;
|
||||
}
|
||||
.description__text h1{
|
||||
.btn_rl{
|
||||
margin: 20px;
|
||||
margin-top:40px;
|
||||
width: 250px;
|
||||
height: 50px;
|
||||
|
||||
background: #D9D9D9;
|
||||
border-radius: 15px;
|
||||
|
||||
width: 670px;
|
||||
height: 234px;
|
||||
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
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{
|
||||
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;
|
||||
color: rgb(52, 51, 51);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
39
src/components/Gamewin-comp.vue
Normal file
39
src/components/Gamewin-comp.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<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{
|
||||
width: 330px;
|
||||
height: 307px;
|
||||
border: #FFFFFF;
|
||||
background: #b12929;
|
||||
.description__img img{
|
||||
width: 250px;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
</div>
|
||||
|
||||
<div class="btn">
|
||||
<div class="btn_rl">Create</div>
|
||||
<div class="btn_rl">Create</div>
|
||||
<a class="btn_rl">назад</a>
|
||||
<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>
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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')*/
|
||||
Loading…
Add table
Add a link
Reference in a new issue