add adaptive layout

This commit is contained in:
Firesieht 2022-05-07 00:23:01 +03:00
parent ff3a42d284
commit 12bf05f79b
8 changed files with 160 additions and 8 deletions

View File

@ -5,7 +5,7 @@ export const Main:React.FC = () =>{
return(
<div className={styles.main} id="main">
<h1 >AR Quest</h1>
<h2>Квесты прямо в вашем доме!</h2>
<h2 style={{"textAlign":"center"}}>Квесты прямо в вашем доме!</h2>
<Link href="#buy" >
<a className={styles.inRow}>
Далее <img src="/images/arrowUp.svg"/>

View File

@ -60,3 +60,39 @@
border:none;
background-color: transparent;
}
@media (max-width: 385px){
.text{
margin-left: 40px;
}
.btn{
margin-left:-60%;
}
}
@media (max-width: 300px){
.text{
margin-left: 40px;
}
.btn{
margin-left:-30%;
}
}
@media (max-width: 300px){
.text{
margin-left: 40px;
}
.btn{
margin-left:-30%;
}
}
@media (max-width: 260px){
.menu{
font-size: 20px;
}
}

View File

@ -58,3 +58,15 @@
background-color: #f9f9fd;
}
.img{
}
@media (max-width: 800px){
.modalButton{
margin-left: 100;
}
.img{
width: 60%;
padding-bottom: 200px;
}
}

View File

@ -49,7 +49,7 @@ export const Modal:React.FC<{show:boolean, setShow:(a:boolean)=>void }> = (props
</ul>
</div>
<h2>Фото</h2>
<img src="/images/mockups.png"/>
<img className={styles.img} src="/images/mockups.png"/>
</div>
</div>
);

View File

@ -6,4 +6,10 @@
.ringVisible{
display: none;
}
}
@media (max-width: 260px){
.ring{
display: none;
}
}

View File

@ -86,13 +86,13 @@
.ilArrow{
width: 55%;
top: -50px;
transform: rotate(-25deg);
left: 27%
top: -60px;
transform: rotate(-35deg);
left: 40%
}
.ilText{
left: -30%
left: -10%
}
.denArrow{
width: 55%;
@ -111,4 +111,100 @@
padding-top: 50%;
}
}
@media (max-width: 430px) {
.team{
padding-top: 50%;
}
.avatar{
width: 40%;
}
.carouselAvatar{
font-size: 12px;
flex-direction: column ;
}
.miText{
position: relative;
top:-380px;
left: 13%
}
.miArrow{
top: -200px;
left: -30%;
width: 40%;
}
.danya{
margin-top: -150px;
}
.ilArrow{
width: 40%;
top: -50px;
transform: rotate(-35deg);
left: 30%
}
.ilText{
top:-140px;
left: -5%
}
.denArrow{
width: 40%;
left: -30%;
transform: scale(-1, 1) rotate(-35deg);
}
.denText{
top: -130px;
left:10%
}
}
@media (max-width: 300px) {
.team{
padding-top: 50%;
}
.avatar{
width: 40%;
}
.carouselAvatar{
font-size: 10px;
flex-direction: column ;
}
.miText{
position: relative;
top:-300px;
left: 10%
}
.miArrow{
top: -150px;
left: -33%;
width: 40%;
}
.danya{
margin-top: -150px;
}
.ilArrow{
width: 40%;
top: -50px;
transform: rotate(-35deg);
left: 30%
}
.ilText{
top:-100px;
left: -5%
}
.denArrow{
width: 40%;
left: -30%;
transform: scale(-1, 1) rotate(-35deg);
}
.denText{
top: -100px;
left:10%
}
}

View File

@ -4,7 +4,7 @@
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"build": "next build && next export",
"start": "next start",
"lint": "next lint"
},

View File

@ -16,7 +16,9 @@ html{
font-family: 'Inconsolata', monospace;
}
h1,h2{
text-align: center;
}
body{
background: #FAFAFA;
overflow-x: hidden;