Skip to content

Commit

Permalink
Merge 3c6ca18 into cc3bb55
Browse files Browse the repository at this point in the history
  • Loading branch information
XROLE committed Feb 8, 2019
2 parents cc3bb55 + 3c6ca18 commit 180787a
Show file tree
Hide file tree
Showing 11 changed files with 304 additions and 21 deletions.
10 changes: 5 additions & 5 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
trailingComma: 'all',
tabWidth: 4,
semi: false,
singleQuote: true,
}
trailingComma: 'all',
tabWidth: 2,
semi: true,
singleQuote: true,
};
5 changes: 2 additions & 3 deletions .stylelintrc
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@
"except": ["first-nested"],
"ignore": ["after-comment"]
} ],
"indentation": "tab",
"unit-whitelist": ["em", "rem", "%"],
"unit-whitelist": ["em", "rem", "%", "px", "s", "deg"],
"font-family-no-missing-generic-family-keyword": null
}
}

Empty file added __mocks__/fileMock.js
Empty file.
Empty file added __mocks__/styleMock.js
Empty file.
6 changes: 6 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
"enzyme-adapter-react-16": "^1.9.1",
"html-webpack-plugin": "^3.2.0",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"google-fonts-webpack-plugin": "^0.4.4",
"materialize-css": "^1.0.0-rc.2",
"node-sass": "^4.11.0",
"react": "^16.8.0",
"react-dom": "^16.8.0",
Expand All @@ -45,6 +48,7 @@
"stylelint-config-standard": "^18.2.0",
"stylelint-webpack-plugin": "^0.10.5",
"terser": "^3.14.1",
"url-loader": "^1.1.2",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
},
Expand All @@ -62,6 +66,8 @@
"jest": "^24.0.0",
"prettier": "1.16.4",
"pretty-quick": "^1.10.0",
"stylelint": "^9.10.1",
"stylelint-config-standard": "^18.2.0",
"webpack-dev-server": "^3.1.14"
},
"husky": {
Expand Down
135 changes: 129 additions & 6 deletions src/app/home/HomeComponent.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,134 @@
import React from 'react';
import React, { Fragment } from 'react';
import '../../style/home.scss';

const HomeComponent = () => {
return (
<div>
<h1> WELCOME TO LEARNGROUND </h1>
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 style={{ width: '65%', margin: '0 auto' }}>
<h2> ABOUT LEARNGROUND </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>
</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>
</Fragment>
);
};

export default HomeComponent;
12 changes: 12 additions & 0 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,18 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous"
/>
<title>LearnGround</title>
</head>
<body>
Expand Down
132 changes: 132 additions & 0 deletions src/style/home.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
body {
margin: 0;
padding: 0;
}

#landingPage {
height: 85%;
width: auto;
background-image: url('../img/landingPageImage.jpeg');
background-size: cover;
position: relative;
background-position: center center;
color: white;
}

#landingPage::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}

.title-div {
margin: 15% 19%;
position: absolute;
text-align: center;
font-family: Lato;
font-style: normal;
font-weight: normal;
line-height: normal;
font-size: 26px;
}

.get-started {
font-size: 37px;
padding: 0;
margin: 6% auto;
width: 300px;
border-radius: 5px;
}

.top-learners-div-container p {
width: 40%;
margin: 40px auto 0 auto;
}

.get-started p {
border: 3px solid #03d6f5;
padding: 15px 25px;
}

.get-started p:hover {
transform: scale(1.1);
cursor: pointer;
}

.about-div {
padding: 20px;
margin-bottom: 100px;
text-align: center;
line-height: normal;
}

.about-div h2 {
font-family: Lato;
font-weight: bold;
font-size: 33px;
margin: 10px auto 40px auto;
color: #880038;
}

.about-content-div {
width: 90%;
margin: 50px auto;
display: flex;
justify-content: space-between;
}

.about-text {
margin: 0 50px;
}

.interested-in-learnground {
margin-top: 70px;
font-size: 22px;
font-family: lato;
font-weight: bold;
}

.out {
display: block;
}

.register {
width: 170px;
color: white;
padding: 13px 30px;
font-size: 20px;
background-color: black;
}

.top-learners-div-container {
margin-top: 40px;
}

.top-learners-div-container h3 {
font-size: 25px;
}

.top-learners-div {
display: flex;
justify-content: space-around;
}

.top-learners-profile {
width: 20%;
}

.top-learners-profile-pix {
margin-top: 50px;
width: 90%;
border-radius: 50%;
}

.landingPage-video-div {
font-size: 30px;
margin: 100px auto 0 auto;
color: #880038;
}
4 changes: 2 additions & 2 deletions src/style/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ $font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
font: 100% $font-stack;
color: $primary-color;
}
5 changes: 0 additions & 5 deletions src/tests/setup.js

This file was deleted.

16 changes: 16 additions & 0 deletions webpack/webpack.common.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const path = require('path')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
Expand All @@ -24,12 +25,27 @@ module.exports = {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpg|gif)$/,
use: [{ loader: 'file-loader' }],
},
{
test: /\.(png|jpg|jpeg)$/,
loader: 'url-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
new StyleLintPlugin({
configFile: '.stylelintrc',
context: 'src',
files: '**/*.scss',
failOnError: false,
quiet: false,
}),
],
resolve: {
extensions: ['.js', '.jsx'],
Expand Down

0 comments on commit 180787a

Please sign in to comment.