mirror of
https://github.com/evgen-app/lending-next.git
synced 2024-11-10 17:36:32 +03:00
add adaptive layout
This commit is contained in:
parent
ff3a42d284
commit
12bf05f79b
|
@ -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"/>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
|
@ -58,3 +58,15 @@
|
|||
background-color: #f9f9fd;
|
||||
}
|
||||
|
||||
.img{
|
||||
}
|
||||
|
||||
@media (max-width: 800px){
|
||||
.modalButton{
|
||||
margin-left: 100;
|
||||
}
|
||||
.img{
|
||||
width: 60%;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -7,3 +7,9 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 260px){
|
||||
.ring{
|
||||
display: none;
|
||||
}
|
||||
}
|
|
@ -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%;
|
||||
|
@ -112,3 +112,99 @@
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
@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%
|
||||
}
|
||||
}
|
|
@ -4,7 +4,7 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"build": "next build && next export",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
|
|
|
@ -16,7 +16,9 @@ html{
|
|||
font-family: 'Inconsolata', monospace;
|
||||
|
||||
}
|
||||
|
||||
h1,h2{
|
||||
text-align: center;
|
||||
}
|
||||
body{
|
||||
background: #FAFAFA;
|
||||
overflow-x: hidden;
|
||||
|
|
Loading…
Reference in New Issue
Block a user