mirror of
https://github.com/evgen-app/lending-next.git
synced 2024-11-13 02:36:35 +03:00
add adapt
This commit is contained in:
parent
827fabe758
commit
ff3a42d284
|
@ -19,9 +19,21 @@
|
||||||
margin-right: 40%;
|
margin-right: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.socMedia{
|
|
||||||
width: 70%;
|
|
||||||
}
|
|
||||||
.socMedia:hover{
|
.socMedia:hover{
|
||||||
width: 85%;
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
@media (max-width: 500px){
|
||||||
|
.socMedia{
|
||||||
|
width: 52px;
|
||||||
|
}
|
||||||
|
.copyright{
|
||||||
|
margin-right: 10%;
|
||||||
|
height: 24px;
|
||||||
|
width: 50px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -25,3 +25,8 @@
|
||||||
color: #000;
|
color: #000;
|
||||||
text-decoration:none;
|
text-decoration:none;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 500px){
|
||||||
|
.header{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
|
@ -9,6 +9,7 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main{
|
.main{
|
||||||
padding-top: 20%;
|
padding-top: 20%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -18,3 +19,12 @@
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px){
|
||||||
|
.main{
|
||||||
|
padding-top: 70%;
|
||||||
|
}
|
||||||
|
.inRow{
|
||||||
|
padding-top:75%;
|
||||||
|
}
|
||||||
|
}
|
45
components/mobile header/index.tsx
Normal file
45
components/mobile header/index.tsx
Normal file
|
@ -0,0 +1,45 @@
|
||||||
|
|
||||||
|
import Link from 'next/link'
|
||||||
|
import styles from './mobileHeader.module.css'
|
||||||
|
import react, {useState} from "react"
|
||||||
|
|
||||||
|
export const MobileHeader:React.FC = () =>{
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
return(
|
||||||
|
<div className={styles.mobileHeader}>
|
||||||
|
<div className={styles.mainMenu}>
|
||||||
|
<button className={styles.btn} onClick={() => setOpen(!open)}>
|
||||||
|
<img className={styles.img + (open? " " + styles.open:"")} src="/images/header.svg"/>
|
||||||
|
</button>
|
||||||
|
<div className={styles.text}>AR квест</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{ open?
|
||||||
|
<div className={styles.menu}>
|
||||||
|
<Link href="#main" >
|
||||||
|
<a onClick={() => setOpen(!open)} className={styles.link} style={{color: "#000 !important"}}>
|
||||||
|
Главная
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
<Link href="#buy">
|
||||||
|
<a onClick={() => setOpen(!open)} className={styles.link}>
|
||||||
|
Купить квест
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
<Link href="#team">
|
||||||
|
<a onClick={() => setOpen(!open)} className={styles.link}>
|
||||||
|
Наша команда
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
<Link href="#contacts">
|
||||||
|
<a onClick={() => setOpen(!open)} className={styles.link}>
|
||||||
|
Связь с нами
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div> : null
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
62
components/mobile header/mobileHeader.module.css
Normal file
62
components/mobile header/mobileHeader.module.css
Normal file
|
@ -0,0 +1,62 @@
|
||||||
|
|
||||||
|
@media (min-width: 500px){
|
||||||
|
.mobileHeader{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 500px){
|
||||||
|
|
||||||
|
.mobileHeader{
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top:0;
|
||||||
|
z-index: 0;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0px 0px 15px 15px;
|
||||||
|
border: 1px solid #EEEEEE;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-family: 'Inconsolata', monospace;
|
||||||
|
color: #323232;
|
||||||
|
font-size: 18px;
|
||||||
|
gap:25px;
|
||||||
|
padding: 20px;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu{
|
||||||
|
transition: 0.3s;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap:45px;
|
||||||
|
font-size:32px;
|
||||||
|
}
|
||||||
|
.mainMenu{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size:24px;
|
||||||
|
}
|
||||||
|
.img{
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
.img:hover{
|
||||||
|
width: 34px;
|
||||||
|
}
|
||||||
|
.open{
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
margin-left: 70%;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
margin-left:-90%;
|
||||||
|
border:none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
|
@ -2,3 +2,8 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 500px){
|
||||||
|
.ringVisible{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
|
@ -5,9 +5,9 @@ export const Rings:React.FC = () =>{
|
||||||
return(
|
return(
|
||||||
<div>
|
<div>
|
||||||
<img className={styles.ring} style={{left: "-50px", top:"0px"}} src="/images/ring.svg"/>
|
<img className={styles.ring} style={{left: "-50px", top:"0px"}} src="/images/ring.svg"/>
|
||||||
<img className={styles.ring} style={{right: "-50px", top:"0px", width: "20%"}} src="/images/ring.svg"/>
|
<img className={styles.ring + " " + styles.ringVisible} style={{right: "-50px", top:"0px", width: "20%"}} src="/images/ring.svg"/>
|
||||||
<img className={styles.ring} style={{right: "50%", top:"350px", width: "40%"}} src="/images/ring.svg"/>
|
<img className={styles.ring} style={{right: "50%", top:"350px", width: "40%"}} src="/images/ring.svg"/>
|
||||||
<img className={styles.ring} style={{right: "-100px", top:"750px", width: "35%"}} src="/images/ring.svg"/>
|
<img className={styles.ring + " " + styles.ringVisible} style={{right: "-100px", top:"750px", width: "35%"}} src="/images/ring.svg"/>
|
||||||
<img className={styles.ring} style={{left: "-10px", top:"900px", width: "10%"}} src="/images/ring.svg"/>
|
<img className={styles.ring} style={{left: "-10px", top:"900px", width: "10%"}} src="/images/ring.svg"/>
|
||||||
<img className={styles.ring} style={{right: "100px", top:"1500px", width: "25%"}} src="/images/ring.svg" />
|
<img className={styles.ring} style={{right: "100px", top:"1500px", width: "25%"}} src="/images/ring.svg" />
|
||||||
<img className={styles.ring} style={{left: "-100px", top:"1700px", width: "30%"}} src="/images/ring.svg"/>
|
<img className={styles.ring} style={{left: "-100px", top:"1700px", width: "30%"}} src="/images/ring.svg"/>
|
||||||
|
|
|
@ -12,6 +12,9 @@
|
||||||
gap:10px;
|
gap:10px;
|
||||||
margin-top:5%;
|
margin-top:5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.card{
|
.card{
|
||||||
font-family: 'Inconsolata', monospace;
|
font-family: 'Inconsolata', monospace;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
|
@ -53,3 +56,23 @@
|
||||||
.btn:hover{
|
.btn:hover{
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1150px){
|
||||||
|
.carousel{
|
||||||
|
flex-direction: column ;
|
||||||
|
}
|
||||||
|
.cardVisible{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px){
|
||||||
|
.solution{
|
||||||
|
padding-top: 20%;
|
||||||
|
}
|
||||||
|
}
|
|
@ -38,7 +38,7 @@ export const Solution:React.FC<SolutionIE> = (props) =>{
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.card} style={{justifyContent: "center"}}>
|
<div className={styles.card + " " + styles.cardVisible} style={{justifyContent: "center"}}>
|
||||||
Coming soon...
|
Coming soon...
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -53,6 +53,7 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team{
|
.team{
|
||||||
font-family: 'Inconsolata', monospace;
|
font-family: 'Inconsolata', monospace;
|
||||||
color: #323232;
|
color: #323232;
|
||||||
|
@ -66,6 +67,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.carouselAvatar{
|
.carouselAvatar{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -74,3 +76,39 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 1150px){
|
||||||
|
.carouselAvatar{
|
||||||
|
flex-direction: column ;
|
||||||
|
}
|
||||||
|
.danya{
|
||||||
|
margin-top: -250px;
|
||||||
|
}
|
||||||
|
.ilArrow{
|
||||||
|
width: 55%;
|
||||||
|
|
||||||
|
top: -50px;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
left: 27%
|
||||||
|
|
||||||
|
}
|
||||||
|
.ilText{
|
||||||
|
left: -30%
|
||||||
|
}
|
||||||
|
.denArrow{
|
||||||
|
width: 55%;
|
||||||
|
left: -35%;
|
||||||
|
transform: scale(-1, 1) rotate(-35deg);
|
||||||
|
}
|
||||||
|
.denText{
|
||||||
|
top: -170px;
|
||||||
|
left:15%
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.team{
|
||||||
|
padding-top: 50%;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -32,7 +32,7 @@ export const Team:React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.person}>
|
<div className={styles.person + " " + styles.danya} >
|
||||||
<img className={styles.avatar} src="/images/Danil.png"/>
|
<img className={styles.avatar} src="/images/Danil.png"/>
|
||||||
<img className={styles.denArrow} src="/images/arrow.svg"/>
|
<img className={styles.denArrow} src="/images/arrow.svg"/>
|
||||||
<div className={styles.denText}>
|
<div className={styles.denText}>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import type { NextPage } from 'next'
|
import type { NextPage } from 'next'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import { useState } from 'react'
|
import { useState,useEffect } from 'react'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import styles from '../styles/Home.module.css'
|
import styles from '../styles/Home.module.css'
|
||||||
import { Header } from '../components/header'
|
import { Header } from '../components/header'
|
||||||
|
@ -11,9 +11,13 @@ import { Team } from '../components/team'
|
||||||
import { Contacts } from '../components/contacts'
|
import { Contacts } from '../components/contacts'
|
||||||
import { MyFooter } from '../components/footer'
|
import { MyFooter } from '../components/footer'
|
||||||
import { Rings } from '../components/rings'
|
import { Rings } from '../components/rings'
|
||||||
|
import { MobileHeader } from '../components/mobile header'
|
||||||
const Home: NextPage = () => {
|
const Home: NextPage = () => {
|
||||||
let [showModal, setShowModal] = useState(false)
|
let [showModal, setShowModal] = useState(false)
|
||||||
|
const [width, setWidth] = useState(0)
|
||||||
|
useEffect(() => {
|
||||||
|
setWidth(window.innerWidth);
|
||||||
|
});
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<Head>
|
<Head>
|
||||||
|
@ -24,6 +28,7 @@ const Home: NextPage = () => {
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<Header></Header>
|
<Header></Header>
|
||||||
|
<MobileHeader></MobileHeader>
|
||||||
<Modal setShow={(a:boolean)=>setShowModal(a)} show={showModal}></Modal>
|
<Modal setShow={(a:boolean)=>setShowModal(a)} show={showModal}></Modal>
|
||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
<Main></Main>
|
<Main></Main>
|
||||||
|
|
5
public/images/header.svg
Normal file
5
public/images/header.svg
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
<svg width="205" height="146" viewBox="0 0 205 146" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="205" height="28" rx="14" fill="#2E2E2E"/>
|
||||||
|
<rect y="59" width="205" height="28" rx="14" fill="#2E2E2E"/>
|
||||||
|
<rect y="118" width="205" height="28" rx="14" fill="#2E2E2E"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 287 B |
|
@ -1,9 +1,11 @@
|
||||||
html,
|
html,a {
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
html{
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -23,6 +25,7 @@ body{
|
||||||
html::-webkit-scrollbar, .modal::-webkit-scrollbar {
|
html::-webkit-scrollbar, .modal::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
background-color: #f9f9fd;
|
background-color: #f9f9fd;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb {
|
html::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user