feat: implemented games page
This commit is contained in:
parent
b63d620d0f
commit
686c871b27
21
src/components/GameCard.tsx
Normal file
21
src/components/GameCard.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import '../styles/cardGames.css'
|
||||||
|
|
||||||
|
type GameCardProps = {
|
||||||
|
backgroundLink: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const GameCard = ({ backgroundLink }: GameCardProps) => {
|
||||||
|
return (
|
||||||
|
<a className='cardGameMainWrapperLink' href='search.html'>
|
||||||
|
<div
|
||||||
|
className='cardGameMain'
|
||||||
|
style={{
|
||||||
|
background: `url("${backgroundLink}") center / cover no-repeat`
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
<div className='cardGameMainTitle'>
|
||||||
|
<p>This is a game title, the best game title</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}
|
@ -1,6 +1,8 @@
|
|||||||
import navStyles from '../styles/nav.module.scss'
|
import navStyles from '../styles/nav.module.scss'
|
||||||
import mainStyles from '../styles//main.module.scss'
|
import mainStyles from '../styles//main.module.scss'
|
||||||
import { Banner } from '../components/Banner'
|
import { Banner } from '../components/Banner'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
import { appRoutes } from '../routes'
|
||||||
|
|
||||||
export const Header = () => {
|
export const Header = () => {
|
||||||
return (
|
return (
|
||||||
@ -10,14 +12,17 @@ export const Header = () => {
|
|||||||
<div className={mainStyles.ContainerMain}>
|
<div className={mainStyles.ContainerMain}>
|
||||||
<div className={navStyles.NavMainTopInside}>
|
<div className={navStyles.NavMainTopInside}>
|
||||||
<div className={navStyles.NMTI_Sec}>
|
<div className={navStyles.NMTI_Sec}>
|
||||||
<a className={navStyles.NMTI_Sec_HomeLink} href='index.html'>
|
<Link
|
||||||
|
to={appRoutes.index}
|
||||||
|
className={navStyles.NMTI_Sec_HomeLink}
|
||||||
|
>
|
||||||
<div className={navStyles.NMTI_Sec_HomeLink_Logo}>
|
<div className={navStyles.NMTI_Sec_HomeLink_Logo}>
|
||||||
<img
|
<img
|
||||||
className={navStyles.NMTI_Sec_HomeLink_LogoImg}
|
className={navStyles.NMTI_Sec_HomeLink_LogoImg}
|
||||||
src='assets/img/DEG%20Mods%20Logo%20With%20Text.svg'
|
src='assets/img/DEG%20Mods%20Logo%20With%20Text.svg'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className={navStyles.NMTI_Sec}>
|
<div className={navStyles.NMTI_Sec}>
|
||||||
<div className={navStyles.NMTI_SecInside}>
|
<div className={navStyles.NMTI_SecInside}>
|
||||||
@ -92,18 +97,30 @@ export const Header = () => {
|
|||||||
<div className={navStyles.NavMainBottom}>
|
<div className={navStyles.NavMainBottom}>
|
||||||
<div className={mainStyles.ContainerMain}>
|
<div className={mainStyles.ContainerMain}>
|
||||||
<div className={navStyles.NavMainBottomInside}>
|
<div className={navStyles.NavMainBottomInside}>
|
||||||
<a className={navStyles.NavMainBottomInsideLink} href='games.html'>
|
<Link
|
||||||
|
to={appRoutes.games}
|
||||||
|
className={navStyles.NavMainBottomInsideLink}
|
||||||
|
>
|
||||||
Games
|
Games
|
||||||
</a>
|
</Link>
|
||||||
<a className={navStyles.NavMainBottomInsideLink} href='mods.html'>
|
<Link
|
||||||
|
to={appRoutes.mods}
|
||||||
|
className={navStyles.NavMainBottomInsideLink}
|
||||||
|
>
|
||||||
Mods
|
Mods
|
||||||
</a>
|
</Link>
|
||||||
<a className={navStyles.NavMainBottomInsideLink} href='about.html'>
|
<Link
|
||||||
|
to={appRoutes.about}
|
||||||
|
className={navStyles.NavMainBottomInsideLink}
|
||||||
|
>
|
||||||
About
|
About
|
||||||
</a>
|
</Link>
|
||||||
<a className={navStyles.NavMainBottomInsideLink} href='blog.html'>
|
<Link
|
||||||
|
to={appRoutes.blog}
|
||||||
|
className={navStyles.NavMainBottomInsideLink}
|
||||||
|
>
|
||||||
Blog
|
Blog
|
||||||
</a>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
87
src/pages/games.tsx
Normal file
87
src/pages/games.tsx
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
import '../styles/pagination.css'
|
||||||
|
import '../styles/styles.css'
|
||||||
|
import '../styles/search.css'
|
||||||
|
import { GameCard } from '../components/GameCard'
|
||||||
|
|
||||||
|
export const GamesPage = () => {
|
||||||
|
return (
|
||||||
|
<div className='InnerBodyMain'>
|
||||||
|
<div className='ContainerMain'>
|
||||||
|
<div className='IBMSecMainGroup IBMSecMainGroupAlt'>
|
||||||
|
<div className='IBMSecMain'>
|
||||||
|
<div className='SearchMainWrapper'>
|
||||||
|
<div className='IBMSMTitleMain'>
|
||||||
|
<h2 className='IBMSMTitleMainHeading'>Games</h2>
|
||||||
|
</div>
|
||||||
|
<div className='SearchMain'>
|
||||||
|
<div className='SearchMainInside'>
|
||||||
|
<div className='SearchMainInsideWrapper'>
|
||||||
|
<input type='text' className='SMIWInput' />
|
||||||
|
<button className='btn btnMain SMIWButton' type='button'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
>
|
||||||
|
<path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSecMain IBMSMListWrapper'>
|
||||||
|
<div className='IBMSMList IBMSMListFeaturedAlt'>
|
||||||
|
<GameCard backgroundLink='https://m.media-amazon.com/images/M/MV5BZTRiNTgxMjQtNDE3OS00YTg4LTg3NTItY2EyNGUzYjAzZGZmXkEyXkFqcGdeQXVyMTI0MzI0MzE4._V1_FMjpg_UX1000_.jpg' />
|
||||||
|
<GameCard backgroundLink='https://upload.wikimedia.org/wikipedia/en/0/0c/Witcher_3_cover_art.jpg' />
|
||||||
|
<GameCard backgroundLink='https://cdn2.steamgriddb.com/file/sgdb-cdn/grid/9153bb77795515274c2be61ccc59c952.jpg' />
|
||||||
|
<GameCard backgroundLink='https://static.trueachievements.com/boxart/Game_12493.jpg' />
|
||||||
|
<GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||||||
|
<GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||||||
|
<GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||||||
|
<GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||||||
|
<GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||||||
|
<GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSecMain'>
|
||||||
|
<div className='PaginationMain'>
|
||||||
|
<div className='PaginationMainInside'>
|
||||||
|
<a
|
||||||
|
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
|
||||||
|
href='#'
|
||||||
|
>
|
||||||
|
<i className='fas fa-chevron-left'></i>
|
||||||
|
</a>
|
||||||
|
<div className='PaginationMainInsideBoxGroup'>
|
||||||
|
<a className='PaginationMainInsideBox PMIBActive' href='#'>
|
||||||
|
<p>1</p>{' '}
|
||||||
|
</a>
|
||||||
|
<a className='PaginationMainInsideBox' href='#'>
|
||||||
|
<p>2</p>{' '}
|
||||||
|
</a>
|
||||||
|
<a className='PaginationMainInsideBox' href='#'>
|
||||||
|
<p>3</p>
|
||||||
|
</a>
|
||||||
|
<p className='PaginationMainInsideBox PMIBDots'>...</p>
|
||||||
|
<a className='PaginationMainInsideBox' href='#'>
|
||||||
|
<p>8</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
|
||||||
|
href='#'
|
||||||
|
>
|
||||||
|
<i className='fas fa-chevron-right'></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -1,5 +1,5 @@
|
|||||||
|
import { GameCard } from '../components/GameCard'
|
||||||
import '../styles/cardBlogs.css'
|
import '../styles/cardBlogs.css'
|
||||||
import '../styles/cardGames.css'
|
|
||||||
import '../styles/cardLists.css'
|
import '../styles/cardLists.css'
|
||||||
import '../styles/cardMod.css'
|
import '../styles/cardMod.css'
|
||||||
import '../styles/SimpleSlider.css'
|
import '../styles/SimpleSlider.css'
|
||||||
@ -129,11 +129,11 @@ export const HomePage = () => {
|
|||||||
<h2 className='IBMSMTitleMainHeading'>Cool Games</h2>
|
<h2 className='IBMSMTitleMainHeading'>Cool Games</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className='IBMSMList IBMSMListFeaturedAlt'>
|
<div className='IBMSMList IBMSMListFeaturedAlt'>
|
||||||
<GameCard backgroungLink='https://m.media-amazon.com/images/M/MV5BZTRiNTgxMjQtNDE3OS00YTg4LTg3NTItY2EyNGUzYjAzZGZmXkEyXkFqcGdeQXVyMTI0MzI0MzE4._V1_FMjpg_UX1000_.jpg' />
|
<GameCard backgroundLink='https://m.media-amazon.com/images/M/MV5BZTRiNTgxMjQtNDE3OS00YTg4LTg3NTItY2EyNGUzYjAzZGZmXkEyXkFqcGdeQXVyMTI0MzI0MzE4._V1_FMjpg_UX1000_.jpg' />
|
||||||
<GameCard backgroungLink='https://upload.wikimedia.org/wikipedia/en/0/0c/Witcher_3_cover_art.jpg' />
|
<GameCard backgroundLink='https://upload.wikimedia.org/wikipedia/en/0/0c/Witcher_3_cover_art.jpg' />
|
||||||
<GameCard backgroungLink='https://cdn2.steamgriddb.com/file/sgdb-cdn/grid/9153bb77795515274c2be61ccc59c952.jpg' />
|
<GameCard backgroundLink='https://cdn2.steamgriddb.com/file/sgdb-cdn/grid/9153bb77795515274c2be61ccc59c952.jpg' />
|
||||||
<GameCard backgroungLink='https://static.trueachievements.com/boxart/Game_12493.jpg' />
|
<GameCard backgroundLink='https://static.trueachievements.com/boxart/Game_12493.jpg' />
|
||||||
<GameCard backgroungLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
<GameCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||||||
</div>
|
</div>
|
||||||
<div className='IBMSMAction'>
|
<div className='IBMSMAction'>
|
||||||
<a
|
<a
|
||||||
@ -212,26 +212,6 @@ export const HomePage = () => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
type GameCardProps = {
|
|
||||||
backgroungLink: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const GameCard = ({ backgroungLink }: GameCardProps) => {
|
|
||||||
return (
|
|
||||||
<a className='cardGameMainWrapperLink' href='search.html'>
|
|
||||||
<div
|
|
||||||
className='cardGameMain'
|
|
||||||
style={{
|
|
||||||
background: `url("${backgroungLink}") center / cover no-repeat`
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
<div className='cardGameMainTitle'>
|
|
||||||
<p>This is a game title, the best game title</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
type ModCardProps = {
|
type ModCardProps = {
|
||||||
backgroundLink: string
|
backgroundLink: string
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,13 @@
|
|||||||
|
import { GamesPage } from '../pages/games'
|
||||||
import { HomePage } from '../pages/home'
|
import { HomePage } from '../pages/home'
|
||||||
|
|
||||||
export const appRoutes: Record<string, string> = {
|
export const appRoutes = {
|
||||||
index: '/',
|
index: '/',
|
||||||
home: '/home'
|
home: '/home',
|
||||||
|
games: '/games',
|
||||||
|
mods: '/mods',
|
||||||
|
about: '/about',
|
||||||
|
blog: '/blog'
|
||||||
}
|
}
|
||||||
|
|
||||||
export const routes = [
|
export const routes = [
|
||||||
@ -13,5 +18,21 @@ export const routes = [
|
|||||||
{
|
{
|
||||||
path: appRoutes.home,
|
path: appRoutes.home,
|
||||||
element: <HomePage />
|
element: <HomePage />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: appRoutes.games,
|
||||||
|
element: <GamesPage />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: appRoutes.mods,
|
||||||
|
element: <HomePage />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: appRoutes.about,
|
||||||
|
element: <HomePage />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: appRoutes.blog,
|
||||||
|
element: <HomePage />
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
103
src/styles/pagination.css
Normal file
103
src/styles/pagination.css
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
.PaginationMain {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PaginationMainInside {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
grid-gap: 10px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.PaginationMainInside {
|
||||||
|
flex-direction: row;
|
||||||
|
height: unset;
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.PaginationMainInsideBox {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
text-decoration: unset;
|
||||||
|
color: unset;
|
||||||
|
padding: 10px 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(35,35,35,0);
|
||||||
|
border-radius: 10px;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 0 8px 0 rgba(0,0,0,0);
|
||||||
|
transform: scale(1);
|
||||||
|
border: solid 1px rgba(255,255,255,0);
|
||||||
|
color: rgba(255,255,255,0.1);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PaginationMainInsideBox.PaginationMainInsideBoxArrows {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.PaginationMainInsideBox.PaginationMainInsideBoxArrows {
|
||||||
|
order: 2;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.PaginationMainInsideBox:hover {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
text-decoration: unset;
|
||||||
|
color: unset;
|
||||||
|
background: linear-gradient(to top right, #232323, #262626, #232323);
|
||||||
|
box-shadow: 0 0 16px 0 rgba(0,0,0,0.1);
|
||||||
|
transform: scale(1.01);
|
||||||
|
border: solid 1px rgba(255,255,255,0.1);
|
||||||
|
color: rgba(255,255,255,0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.PaginationMainInsideBox:active {
|
||||||
|
transition: ease 0.1s;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.PaginationMainInsideBox.PMIBActive {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
text-decoration: unset;
|
||||||
|
color: unset;
|
||||||
|
transform: scale(1.01);
|
||||||
|
border: solid 1px rgba(255,255,255,0.1);
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.PMIBDots {
|
||||||
|
border: unset;
|
||||||
|
background: unset;
|
||||||
|
box-shadow: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PaginationMainInsideBoxGroup {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.PaginationMainInsideBoxGroup {
|
||||||
|
width: 100%;
|
||||||
|
order: 1;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
108
src/styles/search.css
Normal file
108
src/styles/search.css
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
.SearchMain {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.SearchMain {
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.SearchMainInside {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(to top right, #262626, #292929, #262626);
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.SearchMainInsideWrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.65fr 0.35fr;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
width: 100%;
|
||||||
|
grid-gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SMIWInput {
|
||||||
|
outline: unset;
|
||||||
|
border: unset;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(0,0,0,0);
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 10px 0 0 10px;
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.SMIWInput:focus {
|
||||||
|
background: rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.SMIWButton {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
color: rgba(255,255,255,0.15);
|
||||||
|
border: unset;
|
||||||
|
outline: unset;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(255,255,255,0);
|
||||||
|
border-radius: 0;
|
||||||
|
border-left: solid 1px rgba(255,255,255,0.05);
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.SMIWButton:focus {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
border: unset;
|
||||||
|
outline: unset;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(to top right, #2f2f2f, #303030, #2f2f2f);
|
||||||
|
border-radius: 0;
|
||||||
|
border-left: solid 1px rgba(255,255,255,0);
|
||||||
|
box-shadow: 0 0 8px 0 rgba(0,0,0,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.SMIWInput:focus + .SMIWButton {
|
||||||
|
background: rgba(0,0,0,0.05);
|
||||||
|
background: linear-gradient(to top right, #2f2f2f, #303030, #2f2f2f);
|
||||||
|
}
|
||||||
|
|
||||||
|
.SearchMainWrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.SearchMainWrapper {
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user