Home page finished

Author: GokulnathP

src/pages/Home/Body1/Body1.module.css

@@ -56,7 +56,8 @@
 }
 
 .Image {
-	max-width: 50%;
+	width: 50%;
+	max-width: 450px;
 	text-align: center;
 }
 
@@ -66,13 +67,16 @@
 
 @media (max-width: 700px) {
 	.Body {
-		padding: 50px 30px;
+		flex-direction: column;
+		padding: 0px 30px;
 	}
 	.Image {
 		display: none;
 	}
 	.Content {
 		width: 100%;
+		padding-bottom: 25px;
+		padding-top: 25px;
 	}
 }
 

src/pages/Home/Body2/Body2.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import Github from '../../../img/github.png';
+import class1 from '../Body1/Body1.module.css';
+import class2 from './Body2.module.css';
+
+let classes = {
+    ...class1,
+    ...class2
+}
+
+const Body2 = () => {
+    return (
+        <div className={classes.Body}>
+            <div className={classes.Content}>
+                <h1 className={classes.Heading}>Collabrate</h1>
+                <p className={classes.Para}>Want to collabrate with code and improve the package, complete documentation of of code is available. Click below buttons to view documentation or start improving</p>
+                <div className={classes.Btns}>
+                    <Link to='/' className={[classes.Btn, classes.Start].join(' ')} >References</Link>
+                    <a href="https://github.com/git-co-commit/git-co-commit" target="_blank" rel="noopener noreferrer" className={[classes.Btn, classes.Download].join(' ')} >
+                        <img src={Github} alt="Github" className={classes.Github} /> <span className={classes.View}>View Code</span>
+                    </a>
+                </div>
+            </div>
+            <div className={classes.Content}>
+                <h1 className={classes.Heading}>Installation</h1>
+                <p className={classes.Para}>Install git co commit package using node package manager</p>
+                <code className={classes.Code}>
+                    <span># Via npm </span>
+                    <span>npm i -g git-co-commit</span>
+                </code>
+            </div>
+        </div>
+    )
+}
+
+export default Body2;

src/pages/Home/Body2/Body2.module.css

@@ -0,0 +1,20 @@
+.Github {
+	height: 20px;
+	border-radius: 50%;
+}
+
+.Code {
+	display: block;
+	background-color: #dbdbdb;
+	padding: 10px;
+}
+
+.Code span {
+	display: block;
+	padding: 5px;
+}
+
+.Github,
+.View {
+	vertical-align: middle;
+}

src/pages/Home/Body3/Body3.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import classes from './Body3.module.css';
+
+const Body3 = () => {
+    return (
+        <div className={classes.Body}>
+            <h1 className={classes.Title}>Install Git Co Commit Today</h1>
+            <h2 className={classes.SubTitle}>It's free and open source</h2>
+            <Link className={classes.Button} to='/'>Get started</Link>
+        </div>
+    );
+}
+
+export default Body3;

src/pages/Home/Body3/Body3.module.css

@@ -0,0 +1,53 @@
+.Body {
+	text-align: center;
+	max-width: 900px;
+	margin: 50px auto;
+	background-color: #e7e7e7;
+	padding: 50px;
+	line-height: 55px;
+}
+
+.Button {
+	background-color: #000b6f;
+	color: white;
+	padding: 10px 30px;
+	border: 2px solid blue;
+	text-decoration: none;
+}
+
+.Button:hover {
+	background-color: blue;
+}
+
+@media (max-width: 925px) {
+	.Body {
+		margin: 50px 20px;
+	}
+}
+
+@media (max-width: 600px) {
+	.Body {
+		padding: 20px 0;
+		line-height: 50px;
+	}
+	.Title {
+		font-size: 24px;
+	}
+	.SubTitle {
+		font-size: 20px;
+	}
+}
+
+@media (max-width: 400px) {
+	.Body {
+		margin: 50px 10px;
+		padding: 10px 0;
+		line-height: 45px;
+	}
+	.Title {
+		font-size: 19px;
+	}
+	.SubTitle {
+		font-size: 17px;
+	}
+}

src/pages/Home/Home.js

@@ -1,11 +1,15 @@
 import React from 'react';
 
 import Body1 from './Body1/Body1';
+import Body2 from './Body2/Body2';
+import Body3 from './Body3/Body3';
 
 const Home = () => {
     return (
         <div>
             <Body1 />
+            <Body2 />
+            <Body3 />
         </div>
     )
 }