parent
30cb365e9e
commit
ef2e71fe22
27 changed files with 426 additions and 57 deletions
|
After Width: | Height: | Size: 924 B |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 418 KiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 183 KiB |
|
After Width: | Height: | Size: 7.8 MiB |
@ -1,2 +1,3 @@ |
||||
declare module '*.jpg'; |
||||
declare module '*.jpeg'; |
||||
declare module '*.png'; |
||||
@ -0,0 +1,29 @@ |
||||
.app-download{ |
||||
width: 100%; |
||||
margin: 0px auto; |
||||
padding: 30px 0px; |
||||
color: white; |
||||
h1{ |
||||
font-family: numeralBold; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.app-download{ |
||||
max-width: 1250px; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.app-download{ |
||||
max-width: 1250px; |
||||
h1{ |
||||
font-size: calc(100vw / 40); |
||||
line-height: 2em; |
||||
} |
||||
img{ |
||||
height: 60px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
import React from 'react' |
||||
import bazar from '../../../assets/images/bazar.png'; |
||||
import './index.scss'; |
||||
|
||||
export default function AppDownload() { |
||||
return ( |
||||
<section className="app-download d-flex justify-content-between align-items-end"> |
||||
<h1>اینجا جایگاه یک <br/> متن ویژه است که باید در این <br/> قسمت قرار بگیرد.</h1> |
||||
<img src={bazar} /> |
||||
</section> |
||||
) |
||||
} |
||||
@ -0,0 +1,82 @@ |
||||
.footer{ |
||||
width: 100%; |
||||
font-family: numeralLight; |
||||
background-color: #1a1a1a; |
||||
&__container{ |
||||
width: 100%; |
||||
margin : 0px auto; |
||||
p{ |
||||
margin: 0px; |
||||
color: #A2A2A2; |
||||
} |
||||
a{ |
||||
color: #A2A2A2; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px){ |
||||
.footer{ |
||||
&__container{ |
||||
max-width: 1250px; |
||||
} |
||||
li{ |
||||
font-size: 14px; |
||||
} |
||||
p{ |
||||
font-size: 14px; |
||||
} |
||||
ul{ |
||||
li{ |
||||
padding: 6px 0px 6px 60px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px){ |
||||
.footer{ |
||||
&__container{ |
||||
max-width: 1250px; |
||||
} |
||||
li{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
ul{ |
||||
li{ |
||||
padding: 6px 0px 6px 60px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
@media screen and (min-width: 641px) and (max-width: 1007px){ |
||||
.footer{ |
||||
&__container{ |
||||
max-width: 900px; |
||||
} |
||||
li{ |
||||
font-size: calc(100vw / 80); |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 80); |
||||
} |
||||
ul{ |
||||
li{ |
||||
padding: 6px 0px 6px 30px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
@media screen and (max-width: 640px){ |
||||
.footer{ |
||||
display : none !important; |
||||
} |
||||
} |
||||
@ -0,0 +1,72 @@ |
||||
.home-header-item{ |
||||
width: 100%; |
||||
color: white; |
||||
font-family: numeralLight; |
||||
margin: 0px 15px; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px){ |
||||
.home-header-item{ |
||||
max-width: 1250px; |
||||
height: 400px; |
||||
div{ |
||||
width: 29%; |
||||
h1{ |
||||
font-family: numeralMedium; |
||||
font-size: 24px; |
||||
} |
||||
h2{ |
||||
font-size: 20px; |
||||
} |
||||
p{ |
||||
margin-top: 20px; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.home-header-item{ |
||||
max-width: 1250px; |
||||
height: 400px; |
||||
div{ |
||||
width: 31%; |
||||
h1{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 60); |
||||
} |
||||
h2{ |
||||
font-size: calc(100vw / 70); |
||||
font-family: numeralMedium; |
||||
} |
||||
p{ |
||||
margin-top: 20px; |
||||
font-size:calc(100vw / 90); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 640px) and (max-width: 1007px) { |
||||
.home-header-item{ |
||||
max-width: 900px; |
||||
height: 235px; |
||||
div{ |
||||
width: 31%; |
||||
h1{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 50); |
||||
} |
||||
h2{ |
||||
font-size: calc(100vw / 60); |
||||
} |
||||
p{ |
||||
margin-top: 20px; |
||||
font-size: calc(100vw / 70); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
import React from "react"; |
||||
import './index.scss'; |
||||
|
||||
export default function Item(props: any) { |
||||
const { data } = props; |
||||
const style = { |
||||
background: `url(${data.imageUrl})`, |
||||
backgroundSize : '100% 100%', |
||||
backgroundRepeat : 'no-repeat', |
||||
backgroundAttachment : 'fixed', |
||||
backgroundPosition: '0px 0px', |
||||
}; |
||||
return ( |
||||
<div |
||||
className="home-header-item d-flex justify-content-end align-items-center" |
||||
style={style} |
||||
> |
||||
<div> |
||||
<h1>{data.name}</h1> |
||||
<h2>{data.subTitle}</h2> |
||||
<p>{data.text}</p> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
.home-header{ |
||||
position: relative; |
||||
width: 100%; |
||||
margin: 0px auto; |
||||
margin-top: 30px; |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px){ |
||||
.home-header{ |
||||
max-width: 1250px; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.home-header{ |
||||
max-width: 1250px; |
||||
} |
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
import React from 'react' |
||||
import Carousel from 'react-elastic-carousel'; |
||||
import './index.scss'; |
||||
import Item from './Item/index'; |
||||
|
||||
export default function Header(props : any) { |
||||
const {headerData} = props; |
||||
return ( |
||||
<header className="home-header"> |
||||
<Carousel |
||||
itemsToShow={1} |
||||
isRTL={true} |
||||
enableTilt={false} |
||||
showArrows={true} |
||||
pagination={false} |
||||
> |
||||
{headerData.map((item : Object, i : Number) => ( |
||||
<Item data={item} key={i} /> |
||||
))} |
||||
</Carousel> |
||||
</header> |
||||
) |
||||
} |
||||
|
||||
@ -1,6 +1,21 @@ |
||||
.home { |
||||
background-color: #0f0f0f; |
||||
background: hsla(0, 0%, 31%, 1); |
||||
background: linear-gradient( |
||||
90deg, |
||||
hsla(0, 0%, 31%, 1) 0%, |
||||
hsla(0, 0%, 0%, 1) 100% |
||||
); |
||||
background: -moz-linear-gradient( |
||||
90deg, |
||||
hsla(0, 0%, 31%, 1) 0%, |
||||
hsla(0, 0%, 0%, 1) 100% |
||||
); |
||||
background: -webkit-linear-gradient( |
||||
90deg, |
||||
hsla(0, 0%, 31%, 1) 0%, |
||||
hsla(0, 0%, 0%, 1) 100% |
||||
); |
||||
width: 100%; |
||||
overflow-x: hidden; |
||||
padding: 0px 10px; |
||||
padding-top: 60px; |
||||
} |
||||
Loading…
Reference in new issue