Dynamic About font
This commit is contained in:
Letícia Camara
parent
44719fb040
commit
926fe33bea
1 changed files with 229 additions and 200 deletions
|
|
@ -11,217 +11,246 @@ import AboutImage5 from '../../assets/img/about/ab5.png';
|
|||
/**
|
||||
* The about section of the home page.
|
||||
*/
|
||||
function AboutSection() {
|
||||
return (
|
||||
<section className="about bg-secondary" id="about">
|
||||
<div className="col-md-10 mx-md-auto">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6 order-lg-2">
|
||||
<div className="margin-5">
|
||||
<img alt="" className="img-fluid" src={AboutImage1} />
|
||||
class AboutSection extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
|
||||
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.updateWindowDimensions();
|
||||
window.addEventListener('resize', this.updateWindowDimensions);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.updateWindowDimensions);
|
||||
}
|
||||
|
||||
updateWindowDimensions() {
|
||||
this.setState({ width: window.innerWidth, height: window.innerHeight });
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const fontSize = (this.state.width > 1000) ? 16 * (1 + (this.state.width/5000)): 16;
|
||||
|
||||
return (
|
||||
<section className="about bg-secondary" id="about">
|
||||
<div className="col-md-10 mx-md-auto">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6 order-lg-2">
|
||||
<div className="margin-5">
|
||||
<img alt="" className="img-fluid" src={AboutImage1} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-lg-1">
|
||||
<div className="margin-5">
|
||||
<h2 className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang1">
|
||||
<FormattedMessage id="home.about.about1_title" />
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<p className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang2" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about1_description1" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang3" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about1_description2" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang4" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about1_description3" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang5" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about1_description4" />
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-lg-1">
|
||||
<div className="margin-5">
|
||||
<h2 className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang1">
|
||||
<FormattedMessage id="home.about.about1_title" />
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<p className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang2">
|
||||
<FormattedMessage id="home.about.about1_description1" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang3">
|
||||
<FormattedMessage id="home.about.about1_description2" />
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="margin-5">
|
||||
<img alt="" className="img-fluid" src={AboutImage2} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="margin-5">
|
||||
<h2 className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang6">
|
||||
<FormattedMessage id="home.about.about2_title" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<p className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang7" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about2_description1" />
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang8" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about2_description2" />
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang9" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about2_description3" />
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang4">
|
||||
<FormattedMessage id="home.about.about1_description3" />
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6 order-lg-2">
|
||||
<div className="margin-5">
|
||||
<img alt="" className="img-fluid" src={AboutImage3} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-lg-1">
|
||||
<div className="margin-5">
|
||||
<h2 className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang10">
|
||||
<FormattedMessage id="home.about.about3_title" />
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<p className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang11" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about3_description1" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang5">
|
||||
<FormattedMessage id="home.about.about1_description4" />
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang12" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about3_description2" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang13" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about3_description3" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang14" style={{fontSize}}>
|
||||
<FormattedHTMLMessage id="home.about.about3_description4" />
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="margin-5">
|
||||
<img alt="" className="img-fluid" src={AboutImage4} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="margin-5">
|
||||
<h2 className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang15">
|
||||
<FormattedMessage id="home.about.about4_title" />
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<p className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang16" style={{fontSize}}>
|
||||
<FormattedHTMLMessage id="home.about.about4_description1" />
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang17" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about4_description2" />
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6 order-lg-2">
|
||||
<div className="margin-5">
|
||||
<img alt="" className="img-fluid" src={AboutImage5} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-lg-1">
|
||||
<div className="margin-5">
|
||||
<h2 className="display-5 about-text">
|
||||
<span>
|
||||
<span id="ab_lang18">
|
||||
<FormattedMessage id="home.about.about5_title" />
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<p className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang19" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about5_description1" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang20" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about5_description2" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang21" style={{fontSize}}>
|
||||
<FormattedMessage id="home.about.about5_description3" />
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="margin-5">
|
||||
<img alt="" className="img-fluid" src={AboutImage2} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="margin-5">
|
||||
<h2 className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang6">
|
||||
<FormattedMessage id="home.about.about2_title" />
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<p className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang7">
|
||||
<FormattedMessage id="home.about.about2_description1" />
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang8">
|
||||
<FormattedMessage id="home.about.about2_description2" />
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang9">
|
||||
<FormattedMessage id="home.about.about2_description3" />
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6 order-lg-2">
|
||||
<div className="margin-5">
|
||||
<img alt="" className="img-fluid" src={AboutImage3} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-lg-1">
|
||||
<div className="margin-5">
|
||||
<h2 className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang10">
|
||||
<FormattedMessage id="home.about.about3_title" />
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<p className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang11">
|
||||
<FormattedMessage id="home.about.about3_description1" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang12">
|
||||
<FormattedMessage id="home.about.about3_description2" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang13">
|
||||
<FormattedMessage id="home.about.about3_description3" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang14">
|
||||
<FormattedHTMLMessage id="home.about.about3_description4" />
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="margin-5">
|
||||
<img alt="" className="img-fluid" src={AboutImage4} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="margin-5">
|
||||
<h2 className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang15">
|
||||
<FormattedMessage id="home.about.about4_title" />
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<p className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang16">
|
||||
<FormattedHTMLMessage id="home.about.about4_description1" />
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang17">
|
||||
<FormattedMessage id="home.about.about4_description2" />
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6 order-lg-2">
|
||||
<div className="margin-5">
|
||||
<img alt="" className="img-fluid" src={AboutImage5} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-lg-1">
|
||||
<div className="margin-5">
|
||||
<h2 className="display-5 about-text">
|
||||
<span>
|
||||
<span id="ab_lang18">
|
||||
<FormattedMessage id="home.about.about5_title" />
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<p className="about-text">
|
||||
<span>
|
||||
<span id="ab_lang19">
|
||||
<FormattedMessage id="home.about.about5_description1" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang20">
|
||||
<FormattedMessage id="home.about.about5_description2" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<span>
|
||||
<span id="ab_lang21">
|
||||
<FormattedMessage id="home.about.about5_description3" />
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export { AboutSection };
|
||||
|
|
|
|||
Loading…
Reference in a new issue