This commit is contained in:
Firesieht 2022-03-19 03:53:42 +03:00
commit 11997e2a7c
4 changed files with 166 additions and 0 deletions

11
package.json Normal file
View File

@ -0,0 +1,11 @@
{
"name": "quest-lending",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

3
src/images/star.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="36" height="35" viewBox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 0.0537109L23.502 11.4057L36 13.1322L26.904 21.8742L29.124 34.2927L18 28.3422L6.8745 34.2927L9.096 21.8742L0 13.1322L12.498 11.4057L18 0.0537109Z" fill="#FFCB7F"/>
</svg>

After

Width:  |  Height:  |  Size: 279 B

91
src/index.css Normal file
View File

@ -0,0 +1,91 @@
.header{
position: fixed;
left: 0;
top:0;
z-index: 100;
background: #fff;
border-radius: 0px 0px 15px 15px;
border: 1px solid #EEEEEE;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
font-family: 'Inconsolata', monospace;
color: #323232;
font-size: 18px;
gap:25px;
padding: 20px
}
.link{
color: #323232;
text-decoration: none;
}
.link:active{
color: #323232;
text-decoration:none;
}
.content{
margin-top: 100px;
}
.main{
margin-top: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.solution{
margin-top: 21%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.carousel{
display: flex;
flex-direction: row;
gap:10px;
margin-top:5%;
}
.card{
font-family: 'Inconsolata', monospace;
background: #FFFFFF;
border: 1px solid #EEEEEE;
display: flex;
flex-direction: column;
font-size: 20px !important;
gap:10px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 40px;
}
.card_grade{
display: flex;
flex-direction: row;
align-items: center;
}
.btn{
background: #6F39B5;
border-radius: 10px;
font-family: 'Montserrat', sans-serif;
color: #FFFFFF;
font-size: 18px;
border:none;
outline: none;
padding: 10px;
cursor: pointer;
}
.btn:hover{
opacity: 0.5;
}
h1{
font-family: 'Montserrat', sans-serif;
}
h2{
color: #323232;
font-family: 'Inconsolata', monospace;
}
body{
background: #FAFAFA;
}

61
src/index.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<head>
<link href="./index.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&family=Montserrat:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<a class="link" style="color:#000 !important; margin-left: 25px;" href="#main">Главная</a>
<a class="link" href="#solution">Что мы предлагаем</a>
<a class="link" href="#buy">Купить квест</a>
<a class="link" href="#team">Наша команда</a>
<a class="link" href="#contacts">Связь с нами</a>
</div>
<div class="content">
<div class="main">
<h1>AR Quest</h1>
<h2>Квесты прямо в вашем доме!</h2>
</div>
<div class="solution">
<h1>Что мы предлагаем</h1>
<h2>Приедем к вам - соберем квест</h2>
<div class="carousel">
<div class="card">
<h2 style="align-self: center;">Спаси корабль</h2>
<div>Вы-пилот корабля, вам надо спасти <br> корабль и доставить ценный груз на <br> другую планету.</div>
<div class="card_grade">
<div>Сложность:</div>
<div>
<img src="./images/star.svg">
<img src="./images/star.svg">
<img src="./images/star.svg">
</div>
</div>
<div class="card_grade">
<div>Сюжет:</div>
<div>
<img src="./images/star.svg">
<img>
<img>
</div>
</div>
<button class="btn">Подробнее</button>
<button class="btn">купить</button>
</div>
<div class="card" style="justify-content: center;">
Coming soon...
</div>
</div>
</div>
<div class="buy">
<h1>Наша команда</h1>
</div>
<div class="team"></div>
<div class="contacts"></div>
</div>
</body>