added clouds with rain

package-lock.json

@@ -6059,8 +6059,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6097,8 +6096,7 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -6107,8 +6105,7 @@
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6211,8 +6208,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6222,7 +6218,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6235,20 +6230,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -6265,7 +6257,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6338,8 +6329,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6349,7 +6339,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6425,8 +6414,7 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6456,7 +6444,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6474,7 +6461,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6513,13 +6499,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },

src/App.js

 import React, { Component } from 'react';
 import { Container, Row, Col } from 'react-grid-system';
+
 import Cloud from './components/Cloud';
 
 import Mountain from './components/Mountain';
-import Sun from './components/Sun';
+//import Sun from './components/Sun';
 class App extends Component {
   render() {
     return (
@@ -12,15 +13,15 @@ class App extends Component {
   <Container>
   <Row>
     <Col sm={4} xs={12} md={4} >
+     
         <Cloud />
-    </Col>
+        </Col>
+    
     <Col sm={4} xs={12} md={4}> 
         <Mountain />
     </Col>
-    <Col sm={4} xs={12} md={4}>
-      <Sun />
-    </Col>
-  </Row>
+    
+      </Row>
   </Container>
       </div>
     );

src/components/App.css

+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/Cloud.js

 import React, { Component } from 'react';
+import cloud from './images/cloud.gif';
 class Cloud extends Component {
     render() {
         return (
-           <p>Cloud Component Edit Here</p>
+          <div>
+              <p>Cloud Component Edit Here</p>
+              <img src={cloud}/>
+
+          </div> 
         );
     }
 }

src/components/Mountain.js

 import React, { Component } from 'react';
+import mount from './images/pmount.gif'
 class Mountain extends Component {
     render() {
         return (
+           <div>
             <p>This is your Mountain Component</p>
+            <img src={mount}/> 
+            </div>
         );
     }
 }

src/components/Sun.js

 import React, { Component } from 'react';
 import logo from './logo.svg';
-import './App.css';
+import './components/App';
 import Sun from './components/Sun';
 
 class App extends Component {