sid-f22 · jenipharachel · Sep 19, 2019 · Sep 19, 2019 · Sep 19, 2019 · Sep 19, 2019
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,14 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4"
+    "bootstrap": "^4.3.1",
+    "node-modules": "^1.0.1",
+    "react": "^16.9.0",
+    "react-bootstrap": "^1.0.0-beta.12",
+    "react-dom": "^16.9.0",
+    "react-router": "^5.0.1",
+    "react-router-dom": "^5.0.1",
+    "react-scripts": "^1.1.4",
+    "reactstrap": "^8.0.1",
+    "swift": "^2.6.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -1,15 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      rel="stylesheet"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App/App.css b/src/App/App.css
@@ -0,0 +1,3 @@
+.App {
+  width: 1440pt;
+}
diff --git a/src/App/App.js b/src/App/App.js
@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import "./App.css";
+import Header from "../Header/Header";
+import HomePage from "../HomePage/HomePage";
+import Features from "../Features/Features";
+
+class App extends Component {
+  state = {
+    show: false,
+    activeModal: null
+  };
+
+  showModal = activeModal => {
+    this.setState({
+      ...this.state,
+      show: !this.state.show,
+      activeModal: activeModal
+    });
+  };
+
+  closeModal = () => {
+    this.setState({
+      ...this.state,
+      show: !this.state.show
+    });
+    this.props.history.push(`/home`);
+  };
+
+  render() {
+    return (
+      <div className="App">
+        <Header path={this.props.match.path} />
+        <HomePage
+          showModal={this.showModal}
+          closeModal={this.closeModal}
+          activeModal={this.state.activeModal}
+          show={this.state.show}
+        />
+        <Features />
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/App.test.js → src/App/App.test.js b/src/App.test.js → src/App/App.test.js
diff --git a/src/Contact/Contact.css b/src/Contact/Contact.css
@@ -0,0 +1,37 @@
+.Contact {
+  height: 380pt;
+  font-family: "Roboto-Regular";
+  color: rgb(89, 95, 111);
+  letter-spacing: 0pt;
+}
+
+#map {
+  height: 216pt;
+  width: 360pt;
+  /* position: relative;
+  top: 68pt;
+  left: 830pt; */
+  box-shadow: 10pt 20pt 60pt rgba(0, 0, 0, 0.3);
+}
+
+#social {
+  height: 20pt;
+  width: 140pt;
+  /* position: relative;
+  top: 48pt;
+  left: 244pt; */
+}
+
+#logo {
+  /* height: 29pt; */
+  width: 86pt;
+  /* position: relative;
+  top: -168pt;
+  left: 244pt; */
+}
+
+/* #text {
+  position: relative;
+  top: -123pt;
+  left: 97pt;
+} */
diff --git a/src/Contact/Contact.js b/src/Contact/Contact.js
@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import { Container, Row, Col } from "reactstrap";
+import "./Contact.css";
+import map from "../media/map.png";
+import social from "../media/socialMedia.png";
+import logo from "../media/logo@2x.png";
+
+class Contact extends Component {
+  render() {
+    return (
+      <div className="Contact">
+        <Container>
+          <Row>
+            <Col>
+              <Row>
+                <img src={logo} id="logo" alt="website logo" />
+              </Row>
+
+              <div id="text">
+                <Row>
+                  <h4>Wear Great Clothes Bro</h4>
+                </Row>
+                <Row>
+                  <p>
+                    Lorem Ipsum is simply dummy text of the printing and
+                    typesetting industry. Lorem Ipsum has been the.
+                  </p>
+                </Row>
+              </div>
+              <Row>
+                <img src={social} id="social" alt="social" />
+              </Row>
+            </Col>
+            <Col>
+              <img src={map} id="map" alt="map" />
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    );
+  }
+}
+
+export default Contact;
diff --git a/src/Desc.js b/src/Desc.js
@@ -0,0 +1,18 @@
+import React from "react";
+import "./NormalView/NormalView.css";
+
+const Desc = () => {
+  return (
+    <div>
+      <h5>$ 45.84</h5>
+      <h4>Soft-Feel Cardigan</h4>
+      <p>
+        Bunch of components will help
+        <br /> you to prototype, design &<br /> build much faster.
+      </p>
+      <h6>85 Reviews</h6>
+    </div>
+  );
+};
+
+export default Desc;
diff --git a/src/Features/Features.css b/src/Features/Features.css
@@ -0,0 +1,51 @@
+.Features {
+  height: 827pt;
+  /* width: 1440pt; */
+  background-color: rgb(18, 48, 117);
+}
+
+.Features img {
+  margin-top: 150pt;
+  margin-left: 150pt;
+}
+
+.Features p {
+  font-size: 36pt;
+  color: rgb(255, 255, 255);
+  margin-left: 150pt;
+  font-family: "Roboto-Light";
+}
+
+.Features #numbers {
+  margin-left: 150pt;
+  box-shadow: 20pt 20pt 60pt rgba(0, 0, 0, 0.4);
+}
+
+.Features #numbers p {
+  font-size: 24pt;
+  /* position: relative; */
+  float: left;
+  font-family: "Roboto Bold";
+  padding: 20pt 26pt 19pt 27pt;
+  border-radius: 50%;
+  margin-left: 0pt;
+  margin-right: 225pt;
+  background-color: rgb(250, 43, 86);
+}
+
+.Features #text p {
+  /* position: relative;
+  left: -90pt;
+  top: 120pt;
+  float: left; */
+  height: 42pt;
+  width: 263pt;
+  margin-right: 29pt;
+  font-size: 18pt;
+  padding: 0pt;
+  margin-left: 0pt;
+}
+
+.Features #text {
+  margin-left: 150pt;
+}
diff --git a/src/Features/Features.js b/src/Features/Features.js
@@ -0,0 +1,50 @@
+import React, { Component } from "react";
+import "./Features.css";
+import idea from "../media/idea.png";
+
+class Features extends Component {
+  render() {
+    return (
+      <div className="Features">
+        <img src={idea} alt="idea" />
+        <p>
+          Best Collection of all Clothes
+          <br />
+          High Quality
+        </p>
+
+        <div id="numbers">
+          <p>1</p>
+          <p>2</p>
+          <p>3</p>
+          <p>4</p>
+        </div>
+
+        <div id="text">
+          <p>
+            Well Designed
+            <br />
+            Components & Templates
+          </p>
+          <p>
+            Great Documentation &
+            <br />
+            Organized Files
+          </p>
+          <p>
+            Save Hours of
+            <br />
+            Dancing
+          </p>
+          <p>
+            Well Designed
+            <br />
+            Components & Templates
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Features;
diff --git a/src/Header/Header.css b/src/Header/Header.css
@@ -0,0 +1,18 @@
+div.header {
+  padding: 0px;
+  margin: 0px;
+  width: 100%;
+}
+
+.header .link {
+  margin-right: 30pt;
+  font-size: 16pt;
+  font-family: Roboto-Regular;
+  text-decoration: none;
+  color: rgb(89, 95, 111);
+}
+
+.header img {
+  /* height: 29pt; */
+  width: 86pt;
+}