Skip to content

Commit

Permalink
[feature: #163788958] refactore Footer and Home components
Browse files Browse the repository at this point in the history
  • Loading branch information
@XROLE
XROLE committed Feb 8, 2019
1 parent 02d4749 commit 899ba6a
Show file tree
Hide file tree
Showing 6 changed files with 304 additions and 275 deletions.
4 changes: 2 additions & 2 deletions .stylelintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"except": ["first-nested"],
"ignore": ["after-comment"]
} ],
"unit-whitelist": ["em", "rem", "%"],
"unit-whitelist": ["em", "rem", "%", "px", "s", "deg"],
"font-family-no-missing-generic-family-keyword": null
}
}

16 changes: 5 additions & 11 deletions src/app/footer/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import './footer.css';
import '../../style/footer.scss';

library.add(fas, fab);

Expand All @@ -13,19 +13,13 @@ export default function Footer() {
<div className="social-media-icon-div">
<FontAwesomeIcon
icon={['fab', 'facebook-square']}
style={{ fontSize: '25px', borderRadius: '50%', color: '#3B5998' }}
/>
<FontAwesomeIcon
icon={['fab', 'linkedin']}
style={{ fontSize: '25px', borderRadius: '50%', color: '#65A2D9' }}
/>
<FontAwesomeIcon
icon={['fab', 'twitter-square']}
style={{ fontSize: '25px', borderRadius: '50%', color: '#0E76A8' }}
className="facebook"
/>
<FontAwesomeIcon icon={['fab', 'linkedin']} className="linkden" />
<FontAwesomeIcon icon={['fab', 'twitter-square']} className="twitter" />
</div>
<div>
<p style={{ fontSize: '13px' }}>copyright &copy; LearnGround 2019.</p>
<p className="footer-text">copyright &copy; LearnGround 2019.</p>
</div>
</div>
);
Expand Down
259 changes: 128 additions & 131 deletions src/app/home/HomeComponent.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,138 +1,135 @@
import React, { Fragment } from 'react'
import './home.css'
import React, { Fragment } from 'react';
import '../../style/home.scss';

const HomeComponent = () => {
return (
<Fragment>
<div id="landingPage">
<div className="title-div">
<div>
<div>
<h1>Learning made easy with learnGround</h1>
</div>
<div className="get-started">
<p> Get Started </p>
</div>
</div>
</div>
return (
<Fragment>
<div id="landingPage">
<div className="title-div">
<div>
<div>
<h1>Learning made easy with learnGround</h1>
</div>
<div className="get-started">
<p> Get Started </p>
</div>
</div>
</div>
</div>
<div className="about-div">
<div className="about-learnground">
<h2> ABOUT LEARNGROUD </h2>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing el ea commodo
consequat. Duis aute irure dolor in reprehLorem ipsum dolor sit
amet, consectetur adipiscing el ea commodo consequat. Duis aute
irure dolor in repreh
</h3>
</div>
<div className="about-content-div">
<div className="about-text">
<i className="fas fa-pencil-alt" />
<p>first about</p>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in repreh
</p>
</div>
</div>
<div className="about-text">
<i className="fas fa-pencil-alt" />
<p>first about</p>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in repreh
</p>
</div>
</div>
<div className="about-text">
<i className="fas fa-pencil-alt" />
<p>first about</p>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in repreh
</p>
</div>
</div>
</div>
<div className="interested-in-learnground">
<p>
INTERESTED IN LEARNGROUND? DONT BE LEFT{' '}
<span className="out">OUT </span>{' '}
</p>
<span className="register">REGISTER</span>
</div>
<hr className="first-line" />
<div className="top-learners-div-container">
<div>
<h3>TOP LEARNERS</h3>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from
</p>
</div>
<dir className="top-learners-div">
<div className="top-learners-profile">
<img
src="https://previews.123rf.com/images/rahultiwari3190/rahultiwari31901605/rahultiwari3190160500123/57910047-a-young-beautiful-indian-college-student-isolated-white-background.jpg"
alt="Top learner"
className="top-learners-profile-pix"
/>
<p> ANI JASMINE</p>
</div>
<div className="about-div">
<div style={{ width: '65%', margin: '0 auto' }}>
<h2> ABOUT LEARNGROUD </h2>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing el ea
commodo consequat. Duis aute irure dolor in reprehLorem
ipsum dolor sit amet, consectetur adipiscing el ea
commodo consequat. Duis aute irure dolor in repreh
</h3>
</div>
<div className="about-content-div">
<div className="about-text">
<i className="fas fa-pencil-alt" />
<p>first about</p>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in repreh
</p>
</div>
</div>
<div className="about-text">
<i className="fas fa-pencil-alt" />
<p>first about</p>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in repreh
</p>
</div>
</div>
<div className="about-text">
<i className="fas fa-pencil-alt" />
<p>first about</p>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in repreh
</p>
</div>
</div>
</div>
<div className="interested-in-learnground">
<p>
INTERESTED IN LEARNGROUND? DONT BE LEFT{' '}
<span className="out">OUT </span>{' '}
</p>
<span className="register">REGISTER</span>
</div>
<hr style={{ color: 'red', width: '80%', marginTop: '70px' }} />
<div className="top-learners-div-container">
<div>
<h3>TOP LEARNERS</h3>
<p>
Contrary to popular belief, Lorem Ipsum is not
simply random text. It has roots in a piece of
classical Latin literature from
</p>
</div>
<dir className="top-learners-div">
<div className="top-learners-profile">
<img
src="https://previews.123rf.com/images/rahultiwari3190/rahultiwari31901605/rahultiwari3190160500123/57910047-a-young-beautiful-indian-college-student-isolated-white-background.jpg"
alt="Top learner"
className="top-learners-profile-pix"
/>
<p> ANI JASMINE</p>
</div>

<div className="top-learners-profile">
<img
src="https://previews.123rf.com/images/rahultiwari3190/rahultiwari31901605/rahultiwari3190160500123/57910047-a-young-beautiful-indian-college-student-isolated-white-background.jpg"
alt="Top learner"
className="top-learners-profile-pix"
/>
<p> ANI JASMINE</p>
</div>
<div className="top-learners-profile">
<img
src="https://previews.123rf.com/images/rahultiwari3190/rahultiwari31901605/rahultiwari3190160500123/57910047-a-young-beautiful-indian-college-student-isolated-white-background.jpg"
alt="Top learner"
className="top-learners-profile-pix"
/>
<p> ANI JASMINE</p>
</div>

<div className="top-learners-profile">
<img
src="https://previews.123rf.com/images/rahultiwari3190/rahultiwari31901605/rahultiwari3190160500123/57910047-a-young-beautiful-indian-college-student-isolated-white-background.jpg"
alt="Top learner"
className="top-learners-profile-pix"
/>
<p> ANI JASMINE</p>
</div>
</dir>
</div>
<div className="landingPage-video-div">
<h4>WHAT YOU NEED TO KNOW ABOUT LEARNING</h4>
<div>
<iframe
width="760"
height="415"
src="https://www.youtube.com/embed/5JKgUoY9pTg"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture"
allowFullScreen
/>
</div>
</div>
<div className="top-learners-profile">
<img
src="https://previews.123rf.com/images/rahultiwari3190/rahultiwari31901605/rahultiwari3190160500123/57910047-a-young-beautiful-indian-college-student-isolated-white-background.jpg"
alt="Top learner"
className="top-learners-profile-pix"
/>
<p> ANI JASMINE</p>
</div>
</Fragment>
)
}
</dir>
</div>
<div className="landingPage-video-div">
<h4>WHAT YOU NEED TO KNOW ABOUT LEARNING</h4>
<div>
<iframe
width="760"
height="415"
src="https://www.youtube.com/embed/5JKgUoY9pTg"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture"
allowFullScreen
title="learnground"
/>
</div>
</div>
</div>
</Fragment>
);
};

export default HomeComponent
export default HomeComponent;
Loading

0 comments on commit 899ba6a

Please sign in to comment.