Reza_ashrafi
3 years ago
parent
d2cd387411
commit
11dbca78b6
24 changed files with 669 additions and 71 deletions
|
After Width: | Height: | Size: 901 KiB |
|
After Width: | Height: | Size: 207 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
@ -0,0 +1,453 @@ |
||||
.about { |
||||
main { |
||||
li::before { |
||||
color: #aaa; |
||||
content: "\2022"; |
||||
font-weight: bold; |
||||
display: inline-block; |
||||
width: 1em; |
||||
margin-left: -1em; |
||||
} |
||||
ul { |
||||
list-style: circle !important; |
||||
margin-top: 10px !important; |
||||
} |
||||
p, |
||||
li { |
||||
color: #aaa; |
||||
margin-top: 2px; |
||||
line-height: 1.5; |
||||
} |
||||
} |
||||
|
||||
header { |
||||
margin-top: 30px; |
||||
width: 70%; |
||||
h1 { |
||||
display: inline; |
||||
color: #00cc69; |
||||
} |
||||
p { |
||||
margin-top: 10px; |
||||
text-align: justify; |
||||
margin-bottom: 20px; |
||||
} |
||||
} |
||||
|
||||
&__fury { |
||||
margin-top: 30px; |
||||
margin-bottom: 30px; |
||||
justify-content: space-between; |
||||
&--right { |
||||
align-items: center; |
||||
width: 48%; |
||||
.right-top { |
||||
h1 { |
||||
display: inline; |
||||
letter-spacing: -1px; |
||||
color: #00cc69; |
||||
} |
||||
p { |
||||
margin-top: 10px; |
||||
text-align: justify; |
||||
} |
||||
} |
||||
.right-bottom { |
||||
margin: 20px 30px 20px 0px; |
||||
h2 { |
||||
display: inline; |
||||
color: #00cc69; |
||||
} |
||||
ul { |
||||
margin: 0px; |
||||
// list-style: none; |
||||
padding: 0px; |
||||
margin-top: 5px; |
||||
} |
||||
} |
||||
} |
||||
&--left { |
||||
width: 48%; |
||||
height: 100%; |
||||
position: relative; |
||||
& img { |
||||
border-radius: 15px; |
||||
// position: absolute; |
||||
} |
||||
} |
||||
} |
||||
&__advantages { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-top: 10px; |
||||
margin-bottom: 10px; |
||||
justify-content: space-around; |
||||
&--right { |
||||
width: 48%; |
||||
height: 100%; |
||||
& img { |
||||
border-radius: 15px; |
||||
width: 100%; |
||||
} |
||||
} |
||||
&--left { |
||||
padding-right: 20px; |
||||
padding-top: 0px; |
||||
width: 48%; |
||||
height: 100%; |
||||
align-items: flex-end; |
||||
margin-top: 5px; |
||||
h1 { |
||||
display: inline; |
||||
color: #00cc69; |
||||
} |
||||
ul { |
||||
margin: 0px; |
||||
padding: 0px; |
||||
margin-top: 5px; |
||||
li { |
||||
text-align: justify; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.about { |
||||
header { |
||||
h1 { |
||||
font-size: 24px; |
||||
} |
||||
p { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
|
||||
&__fury { |
||||
margin-top: 30px; |
||||
width: 100%; |
||||
margin-bottom: 30px; |
||||
justify-content: space-between; |
||||
&--right { |
||||
align-items: center; |
||||
.right-top { |
||||
h1 { |
||||
font-size: 23px; |
||||
} |
||||
p { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
.right-bottom { |
||||
margin: 20px 30px 20px 0px; |
||||
h2 { |
||||
font-size: 18px; |
||||
} |
||||
ul { |
||||
li { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&--left { |
||||
& img { |
||||
width: 100%; |
||||
} |
||||
&__1 { |
||||
top: 100px; |
||||
left: 00px; |
||||
z-index: 100; |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
&__advantages { |
||||
&--right { |
||||
& img { |
||||
} |
||||
} |
||||
&--left { |
||||
h1 { |
||||
font-size: 18px; |
||||
} |
||||
ul { |
||||
li { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.about { |
||||
main { |
||||
padding: 0px 10px; |
||||
} |
||||
header { |
||||
h1 { |
||||
font-size: calc(100vw / 65); |
||||
} |
||||
p { |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
|
||||
&__fury { |
||||
margin-top: 30px; |
||||
width: 100%; |
||||
margin-bottom: 30px; |
||||
justify-content: space-between; |
||||
&--right { |
||||
align-items: center; |
||||
.right-top { |
||||
h1 { |
||||
font-size: calc(100vw / 60); |
||||
} |
||||
p { |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
.right-bottom { |
||||
margin: 20px 30px 20px 0px; |
||||
h2 { |
||||
font-size: 18px; |
||||
} |
||||
ul { |
||||
li { |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&--left { |
||||
& img { |
||||
width: 100%; |
||||
} |
||||
&__1 { |
||||
top: 100px; |
||||
left: 00px; |
||||
z-index: 100; |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
&__advantages { |
||||
&--right { |
||||
& img { |
||||
} |
||||
} |
||||
&--left { |
||||
h1 { |
||||
font-size:calc(100vw / 65); |
||||
} |
||||
ul { |
||||
li { |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width : 641px) and (max-width: 1007px) { |
||||
.about { |
||||
main { |
||||
padding: 0px 30px; |
||||
} |
||||
header { |
||||
margin: 0px; |
||||
width: 100%; |
||||
h1 { |
||||
font-size: calc(100vw / 35); |
||||
} |
||||
p { |
||||
font-size: calc(100vw / 50); |
||||
} |
||||
} |
||||
|
||||
&__fury { |
||||
flex-direction: column-reverse; |
||||
margin-top: 30px; |
||||
&--right { |
||||
align-items: center; |
||||
width : 100%; |
||||
margin-top: 20px; |
||||
.right-top { |
||||
h1 { |
||||
font-size: calc(100vw / 38); |
||||
} |
||||
p { |
||||
font-size: calc(100vw / 55); |
||||
} |
||||
} |
||||
.right-bottom { |
||||
margin: 20px 30px 0px 0px; |
||||
h2 { |
||||
font-size: calc(100vw / 48); |
||||
} |
||||
ul { |
||||
li { |
||||
font-size: calc(100vw / 55); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&--left { |
||||
width: 100%; |
||||
position: static; |
||||
margin-bottom: 0px; |
||||
& img { |
||||
height: 300px; |
||||
margin: 0px auto; |
||||
// width: 100%; |
||||
} |
||||
&__1 { |
||||
top: 100px; |
||||
left: 00px; |
||||
z-index: 100; |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
&__advantages { |
||||
position: static; |
||||
flex-direction: column; |
||||
height: auto; |
||||
margin-bottom: 0px; |
||||
&--right { |
||||
width: 100%; |
||||
& img{ |
||||
margin: 0px auto; |
||||
width: auto; |
||||
height: 300px; |
||||
} |
||||
} |
||||
&--left { |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
h1 { |
||||
font-size: calc(100vw / 40); |
||||
} |
||||
ul { |
||||
li { |
||||
font-size: calc(100vw / 55); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 640px) { |
||||
.about { |
||||
main { |
||||
padding: 0px 10px; |
||||
} |
||||
header { |
||||
margin: 0px; |
||||
width: 100%; |
||||
h1 { |
||||
font-size: calc(100vw / 22); |
||||
} |
||||
p { |
||||
font-size: calc(100vw / 35); |
||||
} |
||||
} |
||||
|
||||
&__fury { |
||||
flex-direction: column-reverse; |
||||
margin-top: 30px; |
||||
&--right { |
||||
align-items: center; |
||||
width : 100%; |
||||
margin-top: 20px; |
||||
.right-top { |
||||
h1 { |
||||
font-size: calc(100vw / 24); |
||||
} |
||||
p { |
||||
font-size: calc(100vw / 35); |
||||
} |
||||
} |
||||
.right-bottom { |
||||
margin: 20px 30px 0px 0px; |
||||
h2 { |
||||
font-size: calc(100vw / 30); |
||||
} |
||||
ul { |
||||
li { |
||||
font-size: calc(100vw / 38); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&--left { |
||||
width: 100%; |
||||
position: static; |
||||
margin-bottom: 0px; |
||||
& img { |
||||
width: 100%; |
||||
} |
||||
&__1 { |
||||
top: 100px; |
||||
left: 00px; |
||||
z-index: 100; |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
&__advantages { |
||||
position: static; |
||||
flex-direction: column; |
||||
height: auto; |
||||
margin-bottom: 0px; |
||||
&--right { |
||||
width: 100%; |
||||
} |
||||
&--left { |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
h1 { |
||||
font-size: calc(100vw / 26); |
||||
} |
||||
ul { |
||||
li { |
||||
font-size: calc(100vw / 35); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.linegr { |
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+49,000000+100&0+0,0.65+49,0+100 */ |
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+49,000000+100&0+0,0.51+49,0+100 */ |
||||
background: -moz-linear-gradient( |
||||
left, |
||||
rgba(255, 255, 255, 0) 0%, |
||||
rgba(255, 255, 255, 0.01) 1%, |
||||
rgba(255, 255, 255, 0.51) 49%, |
||||
rgba(255, 255, 255, 0) 100% |
||||
); /* FF3.6-15 */ |
||||
background: -webkit-linear-gradient( |
||||
left, |
||||
rgba(255, 255, 255, 0) 0%, |
||||
rgba(255, 255, 255, 0.01) 1%, |
||||
rgba(255, 255, 255, 0.51) 49%, |
||||
rgba(255, 255, 255, 0) 100% |
||||
); /* Chrome10-25,Safari5.1-6 */ |
||||
background: linear-gradient( |
||||
to right, |
||||
rgba(255, 255, 255, 0) 0%, |
||||
rgba(255, 255, 255, 0.01) 1%, |
||||
rgba(255, 255, 255, 0.51) 49%, |
||||
rgba(255, 255, 255, 0) 100% |
||||
); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffffff', endColorstr='#ffffffff',GradientType=1 ); /* IE6-9 */ |
||||
} |
||||
@ -0,0 +1,129 @@ |
||||
import React, { Component, Fragment } from "react"; |
||||
import Navbar from "../../components/Navbar/index"; |
||||
import Footer from "../Home/Footer/index"; |
||||
|
||||
import pic from "../../assets/images/pic.png"; |
||||
import aboutLg from "../../assets/images/about-lg.png"; |
||||
|
||||
import "./index.scss"; |
||||
|
||||
export default function About({ |
||||
fury, |
||||
advantages, |
||||
keywords, |
||||
keywords2, |
||||
first, |
||||
}: any) { |
||||
return ( |
||||
<div className="about main d-flex flex-column"> |
||||
<Navbar /> |
||||
<main className="d-flex flex-column align-items-center"> |
||||
<header> |
||||
<h1>{first.title}</h1> |
||||
<p |
||||
style={{ |
||||
lineHeight: 2, |
||||
}} |
||||
> |
||||
{first.text} |
||||
</p> |
||||
</header> |
||||
<div className="linegr" style={{ width: "100%", height: "4px" }}></div> |
||||
<div className="about__fury d-flex"> |
||||
<div className="about__fury--right d-flex flex-column justify-content-center"> |
||||
<div className="right-top align-self-start"> |
||||
<h1>{fury.title}</h1> |
||||
<p>{fury.text}</p> |
||||
</div> |
||||
<div className="right-bottom align-self-start"> |
||||
<h2>{keywords.title}</h2> |
||||
<ul> |
||||
{keywords.list.map((item: any, i: any) => ( |
||||
<Fragment key={i}> |
||||
<li style={{ padding: 5 }}>{item}</li> |
||||
</Fragment> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
<div className="right-bottom align-self-start"> |
||||
<h2>{keywords2.title}</h2> |
||||
<ul> |
||||
{keywords2.list.map((item: any, i: any) => ( |
||||
<Fragment key={i}> |
||||
<li |
||||
style={{ |
||||
padding: 5, |
||||
}} |
||||
> |
||||
{item} |
||||
</li> |
||||
</Fragment> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div className="about__fury--left d-flex align-items-center"> |
||||
<img src={aboutLg} alt="عکس" /> |
||||
{/* {this.props.absoluteImages.map((item, i) => ( |
||||
<img src={item.imageUrl} className={item.class} alt="عکس" /> |
||||
))} */} |
||||
</div> |
||||
</div> |
||||
<div className="about__advantages d-flex"> |
||||
<div className="about__advantages--right d-flex"> |
||||
<img src={pic} alt={"عکس"} /> |
||||
</div> |
||||
<div className="about__advantages--left"> |
||||
<h1>{advantages.title}</h1> |
||||
<ul> |
||||
{advantages.list.map((item: any, i: any) => ( |
||||
<Fragment key={i}> |
||||
<li style={{ padding: 5 }}>{item}</li> |
||||
</Fragment> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</main> |
||||
<Footer /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
About.defaultProps = { |
||||
first: { |
||||
title: "درباره ما", |
||||
text: "ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی جذاب بصورت کتاب با کمک پلتفرم دانوین، قصد تغییراتی بنیادین در نظام آموزش و پرورش کشور داریم. دانوین پلتفرمی شامل کتاب، محتوای الکترونیکی، رویه های آموزشی، پشتیبانی علمی و نرم افزار ارائه خدمات با رویکرد مخاطب محور است.", |
||||
}, |
||||
fury: { |
||||
title: " ماموریت ما در دانوین چیست ؟", |
||||
text: "ارتقای سطح کیفیت و جذابیت آموزش در مدارس بصورت سازگار با نظام رسمی و کنونی آ.پ در راستای نیل به اهداف سند تحول", |
||||
}, |
||||
|
||||
keywords: { |
||||
title: "کیفیت آموزش را بالا میبریم", |
||||
list: [ |
||||
"شایستگی در ایجاد فهم علمی در موضوع هدف و در موضوعات وابسته به آن", |
||||
"شایستگی در ایجاد زمینه ی معرفتی- ارزشی موثر برای محتواهای آموزشی", |
||||
], |
||||
}, |
||||
keywords2: { |
||||
title: "جذابیت کلید بهبود یادگیری", |
||||
list: [ |
||||
"بکارگیری عوامل متنوع سازگار با ارزشها برای علاقمندی دانش آموز و معلم به استفاده از محتوای دانوین", |
||||
"سازگار با نظام آ.پ : بطوریکه بتواند در مدارس فعلی مورد استفاده قرار گرفته و با نظام رسمی فعلی در تضاد نباشد", |
||||
"در راستای نیل به سند تحول : تلاش برای نزدیکی گام به گام به آرمانها و اهداف سند تحول", |
||||
], |
||||
}, |
||||
advantages: { |
||||
title: " مزیت رقابتی دانوین", |
||||
list: [ |
||||
"بکارگیری بروز ترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)", |
||||
"دارای رویکرد آموزش سرگرم کننده ", |
||||
"بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی", |
||||
"رویکرد معرفتی-ارزشی", |
||||
"ویدئو های منحصر بفرد", |
||||
"متن گفتگو محور ، روایی ، قابل فهم ،جذاب و سرگرم کننده", |
||||
], |
||||
}, |
||||
}; |
||||
Loading…
Reference in new issue