mirror of
https://github.com/evgen-app/lending-next.git
synced 2024-11-21 14:36:33 +03:00
add adapt
This commit is contained in:
Firesieht
parent
827fabe758
commit
ff3a42d284
|
|
@ -19,9 +19,21 @@
|
|||
margin-right: 40%;
|
||||
}
|
||||
|
||||
.socMedia{
|
||||
width: 70%;
|
||||
}
|
||||
.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;
|
||||
text-decoration:none;
|
||||
}
|
||||
@media (max-width: 500px){
|
||||
.header{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main{
|
||||
padding-top: 20%;
|
||||
display: flex;
|
||||
|
|
@ -18,3 +19,12 @@
|
|||
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;
|
||||
z-index: -1;
|
||||
}
|
||||
@media (max-width: 500px){
|
||||
.ringVisible{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,9 +5,9 @@ export const Rings:React.FC = () =>{
|
|||
return(
|
||||
<div>
|
||||
<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: "-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={{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"/>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
gap:10px;
|
||||
margin-top:5%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card{
|
||||
font-family: 'Inconsolata', monospace;
|
||||
background: #FFFFFF;
|
||||
|
|
@ -53,3 +56,23 @@
|
|||
.btn:hover{
|
||||
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>
|
||||
|
||||
</div>
|
||||
<div className={styles.card} style={{justifyContent: "center"}}>
|
||||
<div className={styles.card + " " + styles.cardVisible} style={{justifyContent: "center"}}>
|
||||
Coming soon...
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.team{
|
||||
font-family: 'Inconsolata', monospace;
|
||||
color: #323232;
|
||||
|
|
@ -66,6 +67,7 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.carouselAvatar{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -74,3 +76,39 @@
|
|||
justify-content: 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 className={styles.person}>
|
||||
<div className={styles.person + " " + styles.danya} >
|
||||
<img className={styles.avatar} src="/images/Danil.png"/>
|
||||
<img className={styles.denArrow} src="/images/arrow.svg"/>
|
||||
<div className={styles.denText}>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import type { NextPage } from 'next'
|
||||
import Head from 'next/head'
|
||||
import { useState } from 'react'
|
||||
import { useState,useEffect } from 'react'
|
||||
import Image from 'next/image'
|
||||
import styles from '../styles/Home.module.css'
|
||||
import { Header } from '../components/header'
|
||||
|
|
@ -11,9 +11,13 @@ import { Team } from '../components/team'
|
|||
import { Contacts } from '../components/contacts'
|
||||
import { MyFooter } from '../components/footer'
|
||||
import { Rings } from '../components/rings'
|
||||
import { MobileHeader } from '../components/mobile header'
|
||||
const Home: NextPage = () => {
|
||||
let [showModal, setShowModal] = useState(false)
|
||||
|
||||
const [width, setWidth] = useState(0)
|
||||
useEffect(() => {
|
||||
setWidth(window.innerWidth);
|
||||
});
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Head>
|
||||
|
|
@ -24,6 +28,7 @@ const Home: NextPage = () => {
|
|||
|
||||
<main>
|
||||
<Header></Header>
|
||||
<MobileHeader></MobileHeader>
|
||||
<Modal setShow={(a:boolean)=>setShowModal(a)} show={showModal}></Modal>
|
||||
<div className={styles.content}>
|
||||
<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,
|
||||
|
||||
a {
|
||||
html,a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
html{
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -23,6 +25,7 @@ body{
|
|||
html::-webkit-scrollbar, .modal::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #f9f9fd;
|
||||
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user