Reza_ashrafi
/
danovin_vod
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added object footer

Browse Source
master
RezaAshrafi77 3 years ago
parent a152a7e228
commit 6c29fc8ff6
6 changed files with 103 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/icons/ar.png
  2. BIN
      src/assets/icons/download.png
  3. 33
      src/assets/images/object__footer.svg
  4. 1
      src/types/images.d.ts
  5. 54
      src/views/Home/AppDownload/index.scss
  6. 18
      src/views/Home/AppDownload/index.tsx

BIN
src/assets/icons/ar.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
src/assets/icons/download.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 883 B

33
src/assets/images/object__footer.svg
Unescape View File

@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1751" height="496.5" viewBox="0 0 1751 496.5">
<g id="آبجکت_فوتر" data-name="آبجکت فوتر" transform="translate(-33 -2503.5)">
<rect id="Rectangle_50" data-name="Rectangle 50" width="70" height="69" rx="9" transform="translate(1714 2931)" fill="#ffff4a"/>
<rect id="Rectangle_51" data-name="Rectangle 51" width="159" height="157" rx="9" transform="translate(1409 2822)" fill="#4e4e4e"/>
<rect id="Rectangle_58" data-name="Rectangle 58" width="94" height="93" rx="9" transform="translate(891 2808)" fill="#4e4e4e"/>
<g id="Group_18" data-name="Group 18" transform="translate(-665 21)" opacity="0.39">
<rect id="Rectangle_59" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(698 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-2" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(731 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-3" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(764 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-4" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(797 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-5" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(830 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-6" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(863 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-7" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(896 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-8" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(929 2735)" fill="#4e4e4e"/>
</g>
<g id="Group_19" data-name="Group 19" transform="translate(262 -121)" opacity="0.39">
<rect id="Rectangle_59-9" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(698 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-10" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(731 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-11" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(764 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-12" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(797 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-13" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(830 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-14" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(863 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-15" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(896 2735)" fill="#4e4e4e"/>
<rect id="Rectangle_59-16" data-name="Rectangle 59" width="29" height="28" rx="5" transform="translate(929 2735)" fill="#4e4e4e"/>
</g>
<rect id="Rectangle_52" data-name="Rectangle 52" width="215" height="66" rx="9" transform="translate(620 2913)" fill="#4e4e4e"/>
<rect id="Rectangle_57" data-name="Rectangle 57" width="73" height="72" rx="9" transform="translate(56 2549)" fill="#4e4e4e"/>
<rect id="Rectangle_53" data-name="Rectangle 53" width="99" height="99" rx="9" transform="translate(1297 2533)" fill="#4e4e4e"/>
<path id="Rectangle_54" data-name="Rectangle 54" d="M0,0H49A50,50,0,0,1,99,50v0A49,49,0,0,1,50,99h0A50,50,0,0,1,0,49V0A0,0,0,0,1,0,0Z" transform="translate(994 2706)" fill="#32d9d9"/>
<path id="Rectangle_55" data-name="Rectangle 55" d="M0,0H29.5A29.5,29.5,0,0,1,59,29.5v0A29.5,29.5,0,0,1,29.5,59h0A29.5,29.5,0,0,1,0,29.5V0A0,0,0,0,1,0,0Z" transform="translate(1698.686 2562.5) rotate(-90)" fill="#6eff4a"/>
<rect id="Rectangle_49" data-name="Rectangle 49" width="105" height="103" rx="9" transform="translate(711 2562)" fill="#c2e1ff" opacity="0.35"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

1
src/types/images.d.ts vendored
Unescape View File

@ -1,3 +1,4 @@
declare module '*.jpg'; declare module '*.jpg';
declare module '*.jpeg'; declare module '*.jpeg';
declare module '*.png'; declare module '*.png';
declare module '*.svg';

54
src/views/Home/AppDownload/index.scss
Unescape View File

@ -3,14 +3,56 @@
margin: 0px auto; margin: 0px auto;
padding: 30px 0px; padding: 30px 0px;
color: white; color: white;
background : url(../../../assets/images/object__footer.svg) no-repeat;
background-size : 100% 100%;
background-position : 0px 0px;
h1{ h1{
font-family: numeralBold; font-family: numeralBold;
} }
&__figure{
&--screen{
width: 220px;
height: 185px;
border-top: 12px solid black;
border-right: 12px solid black;
border-left: 12px solid black;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: #E3E3E3;
}
&--details{
width: 320px;
padding: 10px;
background-color: black;
border-radius: 10px;
h2,p{
margin: 0px;
margin-right: 5px;
}
h2{
color: white;
font-family: numeralBold;
margin-bottom: 5px;
}
p{
color: #FFD70F;
font-family: numeralLight;
}
}
}
} }
@media screen and (min-width: 1441px) { @media screen and (min-width: 1441px) {
.app-download{ .app-download{
max-width: 1250px; max-width: 1250px;
&__figure{
h2{
font-size: 16px;
}
p{
font-size: 13px;
}
}
} }
} }
@ -21,8 +63,16 @@
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
line-height: 2em; line-height: 2em;
} }
img{ &__figure{
height: 60px; h2{
font-size: calc(100vw / 120);
}
p{
font-size: calc(100vw / 150);
}
img{
width: 40px;
}
} }
} }

18
src/views/Home/AppDownload/index.tsx
Unescape View File

@ -1,12 +1,26 @@
import React from 'react' import React from 'react'
import bazar from '../../../assets/images/bazar.png'; import ar from '../../../assets/icons/ar.png';
import download from '../../../assets/icons/download.png';
import './index.scss'; import './index.scss';
export default function AppDownload() { export default function AppDownload() {
return ( return (
<section className="app-download d-flex justify-content-between align-items-end"> <section className="app-download d-flex justify-content-between align-items-end">
<h1>اینجا جایگاه یک <br/> متن ویژه است که باید در این <br/> قسمت قرار بگیرد.</h1> <h1>اینجا جایگاه یک <br/> متن ویژه است که باید در این <br/> قسمت قرار بگیرد.</h1>
<img src={bazar} /> <figure className="app-download__figure d-flex flex-column align-items-center">
<div className="app-download__figure--screen">
</div>
<div className="app-download__figure--details d-flex justify-content-between align-items-center">
<div className="d-flex align-items-center">
<img src={ar} alt={'واقعیت افزوده'} />
<div className="d-flex flex-column">
<h2>دانلود اپلیکیشن اندرویدی</h2>
<p>به راحتی آب خوردن از کافه بازار و گوناگون</p>
</div>
</div>
<img src={download} alt="دانلود" />
</div>
</figure>
</section> </section>
) )
} }

Write Preview
Loading…
Cancel
Save