add adapt

This commit is contained in:
Firesieht 2022-05-03 21:34:11 +03:00
parent 827fabe758
commit ff3a42d284
14 changed files with 227 additions and 14 deletions

View File

@ -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;
}
}

View File

@ -25,3 +25,8 @@
color: #000;
text-decoration:none;
}
@media (max-width: 500px){
.header{
display: none;
}
}

View File

@ -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%;
}
}

View 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>
)
}

View 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;
}

View File

@ -2,3 +2,8 @@
position: absolute;
z-index: -1;
}
@media (max-width: 500px){
.ringVisible{
display: none;
}
}

View File

@ -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"/>

View File

@ -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%;
}
}

View File

@ -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>

View File

@ -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%;
}
}

View File

@ -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}>

View File

@ -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
View 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

View File

@ -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 {