Commit 6cd20116 authored by NERUSU PRANEETH's avatar NERUSU PRANEETH

added 3 buttons for differnt phases in water cycle

parent df453a22
...@@ -8,17 +8,19 @@ import Cloud from './components/Cloud'; ...@@ -8,17 +8,19 @@ import Cloud from './components/Cloud';
import Mountain from './components/Mountain'; import Mountain from './components/Mountain';
import Sun from './components/Sun'; import Sun from './components/Sun';
import Rain from './components/Rain'; import Rain from './components/Rain';
import Button from './components/Button';
class App extends Component { class App extends Component {
render() { render() {
return ( return (
<div className='Cycle'> <div className='Cycle'>
<Button/>
<Button/>
<Container className='Container' > <Container className='Container' >
<Row> <Row>
<Col sm={4} xs={12} md={4} > <Col sm={4} xs={12} md={4} >
<Cloud /> <Cloud />
<Mountain /> <Mountain />
</Col> </Col>
......
...@@ -14,6 +14,18 @@ ...@@ -14,6 +14,18 @@
color: #282c34; color: #282c34;
}
.B1 {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
} }
.Cloud:hover{ .Cloud:hover{
......
import React, { Component } from 'react';
import mount from './images/hill.png'
import './App.css';
class Button extends Component {
render() {
return (
<div >
<button className="B1">
Phase-1
</button>
</div>
);
}
}
export default Button;
\ No newline at end of file
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