crayonix/giovani.lol
Archived
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added boostrap 4 to project and shared components

Browse Source
This commit is contained in:
Giovani
2019-04-09 13:36:49 -04:00
parent ab530b9cc4
commit 27c3a713bb
11 changed files with 118 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/App.js
View File

@@ -1,28 +1,12 @@
import React, { Component } from 'react';
import Header from './shared/header';
import Footer from "./shared/footer"
import Home from './pages/home'
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Header/>
<header className="App-header">
<img src="" className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<Footer/>
<Home/>
</div>
);
}

18
src/components/pages/home.js Normal file
View File

@@ -0,0 +1,18 @@
import React, {Component} from 'react';
import Header from '../shared/header';
import Footer from "../shared/footer";
import Carousel from '../shared/carousel';
class Home extends Component {
render() {
return (
<div>
<Header/>
<Carousel/>
<Footer/>
</div>
);
}
}
export default Home;

33
src/components/shared/carousel.js Normal file
View File

@@ -0,0 +1,33 @@
import React, {Component} from 'react';
import CarouselImageOne from '../../images/home/carouselImageOne.jpg'
import CarouselImageTwo from '../../images/home/carouselImageTwo.jpg'
class Carousel extends Component {
render() {
return (
<div id="carouselExampleControls" className="carousel slide" data-ride="carousel">
<div className="carousel-inner">
<div className="carousel-item active">
<img src={CarouselImageOne} className="d-block w-100" alt="..."/>
</div>
<div className="carousel-item">
<img src={CarouselImageOne} className="d-block w-100" alt="..."/>
</div>
<div className="carousel-item">
<img src={CarouselImageOne} className="d-block w-100" alt="..."/>
</div>
</div>
<a className="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>
);
}
}
export default Carousel;

17
src/components/shared/footer.js
View File

@@ -1,12 +1,21 @@
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class Footer extends Component {
render() {
return (
<h1>
This is a footer!
</h1>
<div className="container-fluid">
<div className="row">
<div class="col-sm">
One
</div>
<div class="col-sm">
Two
</div>
<div class="col-sm">
Three
</div>
</div>
</div>
);
}
}

26
src/components/shared/header.js
View File

@@ -1,12 +1,30 @@
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class Header extends Component {
render() {
return (
<h1>
This is a header!
</h1>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Features</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Pricing</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
);
}
}