Added rain animation with ReactRain animation

src/App.js

@@ -13,18 +13,23 @@ import Mountain from './components/Mountain';
 import Sun from './components/Sun';
 import Rain from './components/Rain';
 import Bird from './components/images/Bird.gif';
+import A1up from './components/A1up';
+import ReactRain from 'react-rain-animation';
+import "react-rain-animation/lib/style.css";
+
 
 class App extends Component {
   render() {
     return (
+      
   
 
  
    <div id="hero" className="Cycle" style={{backgroundImage:'url(' + Hill + ')'}}>
 
-
+  <ReactRain numDrops="500"></ReactRain>   
     <Container className='Container'>
-      
+    
       <Row justify='start'>
         
         <Col xs={4} >
@@ -43,6 +48,7 @@ class App extends Component {
 
       
       <Row>
+      
          <Col  xs={0.4}>
            <Sun />
          </Col>
@@ -52,7 +58,7 @@ class App extends Component {
             <Cloud2 />
           </Col>
 
-          <Col xs={1.}>
+          <Col xs={1}>
              <Cloud2 />
              <Cloud />
           </Col>
@@ -133,11 +139,12 @@ class App extends Component {
               <Button className="B1"></Button>
            </Col>
         </Row>
-    
+         
     </Container>
     
    </div>
    
+   
   
 
     );

src/components/A1up.js

+import React, { Component } from 'react';
+//import logo from './logo.svg';
+import a1up from './images/a1up.png';
+
+class A1up extends Component {
+  render() {
+    return (
+      <div >
+        <header >
+          <img src={a1up} className="A1up" />
+        </header>
+      </div>
+    );
+  }
+}
+
+export default A1up;
\ No newline at end of file

src/components/App.css

@@ -5,7 +5,7 @@
 
 
 .Body{
-  background-color: #FFBD00;
+  background-color:  #FFBD00;
   text-align:left;
 
 }
@@ -73,6 +73,10 @@ float:right;
   text-align: center;
 }
 
+.A1up:hover{
+  float: right;
+}
+
 .Sun {
   animation: App-logo-spin infinite 20s linear;
   height: 20vmin;
@@ -98,3 +102,35 @@ float:right;
 
 
 
+
+
+
+
+body {
+background:#0D343A;
+background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(#000000)  );
+background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);
+
+overflow:hidden;}
+
+
+.drop {
+  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
+  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
+	width:1px;
+	height:89px;
+	position: absolute;
+	bottom:200px;
+	-webkit-animation: fall .63s linear infinite;
+  -moz-animation: fall .63s linear infinite;
+  
+}
+
+/* animate the drops*/
+@-webkit-keyframes fall {
+	to {margin-top:900px;}
+}
+@-moz-keyframes fall {
+	to {margin-top:900px;}
+}
+