Commit df453a22 authored by NERUSU PRANEETH's avatar NERUSU PRANEETH

Added background to container and complete application and other css attributes

parent 2fd1176b
......@@ -12442,6 +12442,19 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.2.tgz",
"integrity": "sha512-D+NxhSR2HUCjYky1q1DwpNUD44cDpUXzSmmFyC3ug1bClcU/iDNy0YNn1iwme28fn+NFhpA13IndOd42CrFb+Q=="
},
"react-marquee": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-marquee/-/react-marquee-1.0.0.tgz",
"integrity": "sha512-AXHGGWdK+BBhKln/ysXD1CLV6pdv9LDm0beoyQ+RYI8FO2PzqwGqDYrS6ssH3TvYytiLCxY0pIxUGGXNn1f/gg==",
"requires": {
"prop-types": "*"
}
},
"react-rain-animation": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/react-rain-animation/-/react-rain-animation-1.0.4.tgz",
"integrity": "sha1-y+TJbVglIRo837pmdNdK/IsjU8k="
},
"react-scripts": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.5.tgz",
......@@ -12497,6 +12510,14 @@
"workbox-webpack-plugin": "3.6.3"
}
},
"react-spring": {
"version": "8.0.9",
"resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.9.tgz",
"integrity": "sha512-ii1NhZnKifyser174wH5uJJmGQUdqxl4Fs0ilXXUjKmJbaHF1Cmxv8aabTUh2MzRQ2/tx54JBiF4GTKTinnCzw==",
"requires": {
"@babel/runtime": "^7.3.1"
}
},
"read-pkg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
......
......@@ -6,7 +6,10 @@
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-grid-system": "^4.4.2",
"react-scripts": "2.1.5"
"react-marquee": "^1.0.0",
"react-rain-animation": "^1.0.4",
"react-scripts": "2.1.5",
"react-spring": "^8.0.9"
},
"scripts": {
"start": "react-scripts start",
......
import React, { Component } from 'react';
import './components/App.css';
import { Container, Row, Col } from 'react-grid-system';
......@@ -6,21 +7,25 @@ import Cloud from './components/Cloud';
import Mountain from './components/Mountain';
import Sun from './components/Sun';
import Rain from './components/Rain';
class App extends Component {
render() {
return (
<div>
<div className='Cycle'>
<Container>
<Container className='Container' >
<Row>
<Col sm={4} xs={12} md={4} >
<Cloud />
<Mountain />
</Col>
<Col sm={2} xs={12} md={4}>
<Mountain />
<Col sm={4} xs={12} md={4}>
<Cloud />
</Col>
<Col sm={4} xs={12} md={4}>
......
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
.Cycle{
background-color: #282c34;
}
.App-header {
background-color: #282c34;
.Container
{
background-color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
color: #282c34;
}
.Cloud:hover{
float:right;
}
.hill{
align-items: center;
}
.Mountain {
width: 1000px;
height:600px;
bottom:0;
}
.App {
text-align: center;
}
.Sun {
animation: App-logo-spin infinite 20s linear;
height: 20vmin;
pointer-events: none;
}
.App-link {
color: #61dafb;
}
......
import React, { Component } from 'react';
import cloud from './images/cloud.gif';
import './App.css';
class Cloud extends Component {
render() {
return (
<div>
<p>Cloud Component Edit Here</p>
<img src={cloud}/>
<img className="Cloud" src={cloud}/>
</div>
);
......
import React, { Component } from 'react';
import mount from './images/pmount.gif'
import mount from './images/hill.png'
import './App.css';
class Mountain extends Component {
render() {
return (
<div>
<p>This is your Mountain Component</p>
<img src={mount}/>
<img className="Mountain" src={mount}/>
</div>
);
}
......
import React, {Component} from 'react';
import ReactRain from 'react-rain-animation';
import "react-rain-animation/lib/style.css";
class Rain{
render(){
return(
<ReactRain numDrops="500" />
);
}
}
export default Rain;
\ No newline at end of file
......@@ -5,9 +5,9 @@ import sun from './images/Sun.png';
class Sun extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={sun} className="App-logo" />
<div >
<header >
<img src={sun} className="Sun" />
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment