added photo grids for album/photo galleries

src/Grid.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import Photo from './Photo.js';
+import Modal from './Modal.js'
+
+class Grid extends Component {
+
+	render() {
+		const gridElements = this.props.urls.map((grid) => 
+				<Photo src={grid.url} name={grid.name} className="grid__photo"
+				callbackFromParent={this.props.callbackFromParent} />
+		);
+
+		return (
+			<div className={this.props.className}>{gridElements}</div>
+		);
+	}
+}
+
+export default Grid;

src/Modal.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import Photo from './Photo.js';
+
+const display = {
+  display: 'block'
+};
+const hide = {
+  display: 'none'
+};
+
+class Modal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      toggle: false
+    }
+  }
+
+  render() {
+    return(
+      <div className="modal" style={this.props.toggle ? display : hide}>
+      <div className="modal-content">
+        <Photo className="modal__photo" src={this.props.src} />
+      </div>
+      <div className="overlay">
+      	Overlay
+      </div>
+    </div>
+    );
+
+  }
+}
+
+export default Modal;

src/Photo.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import Modal from './Modal.js'
+
+class Photo extends Component {
+	constructor(props) {
+		super(props);
+		this.state = { isClicked: false };
+	}
+
+	toggleClicked = () => {
+		this.setState({
+			isClicked: true
+		}, () => {
+			this.props.callbackFromParent(this.state.isClicked, this.props.src);
+		});
+	} 
+
+	render() {
+		return (
+			<div className={this.props.className}>
+				<img src={this.props.src} onClick={this.toggleClicked} />
+				<div className="label">
+					{this.props.name}
+				</div>
+			</div>
+		)
+	}
+}
+
+export default Photo;

src/pages/Album.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import Grid from '../Grid.js';
+import '../styles/css/Album.css';
+
+const items = [
+	{ name: '2017-2018', url: 'http://www.dogbreedslist.info/uploads/allimg/dog-pictures/Samoyed-2.jpg' },
+	{ name: '2016-2017', url: 'http://cdn.akc.org/Marketplace/Breeds/Pembroke_Welsh_Corgi_SERP.jpg' },
+	{ name: '2015-2016', url: 'https://i.ytimg.com/vi/wRx3Uvcktm8/maxresdefault.jpg' }
+];
+
+const items1 = [
+	{ name: '2014-2015', url: 'https://www.thelabradorsite.com/wp-content/uploads/2015/07/yellow-labrador-puppy-garden.jpg' }, 
+	{ name: '2013-2014', url: 'https://cdn.marketplace.akc.org/media/45488/1456977861_4573_8635.jpg' },
+];
+
+class Album extends Component {
+	render() {
+		return(
+			<div>
+				<div className="title">ALBUMS</div>
+				<Grid className="album__grid" urls={items} />
+				<Grid className="album__grid" urls={items1} />
+			</div>
+		)
+	}
+}
+
+export default Album;

src/pages/App.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import Photo from '../Photo.js';
+import Modal from '../Modal.js';
+import Grid from '../Grid.js';
+import '../styles/css/Gallery.css';
+
+// A base file for all your pages to come together.
+
+const items = [
+	{ url: 'http://www.dogbreedslist.info/uploads/allimg/dog-pictures/Samoyed-2.jpg' },
+	{ url: 'http://cdn.akc.org/Marketplace/Breeds/Pembroke_Welsh_Corgi_SERP.jpg' },
+	{ url: 'https://i.ytimg.com/vi/wRx3Uvcktm8/maxresdefault.jpg' }, 
+	{ url: 'https://www.thelabradorsite.com/wp-content/uploads/2015/07/yellow-labrador-puppy-garden.jpg' }, 
+	{ url: 'https://cdn.marketplace.akc.org/media/45488/1456977861_4573_8635.jpg' },
+	{ url: 'https://cdn.marketplace.akc.org/media/45488/1456977861_4573_8635.jpg' }
+];
+
+class App extends Component {
+
+	constructor(props) {
+	    super(props);
+
+	    this.state = { 
+	    	isOpen: false,
+	    	isPhotoClicked: false,
+	    	currPhoto: null
+	    };
+	}
+
+	toggleModal = () => {
+		this.setState({
+			isOpen: !this.state.isOpen
+		})
+
+	}
+
+	callback = (isClicked, photoSrc) => {
+		this.setState({ 
+			isPhotoClicked: isClicked,
+			currPhoto: photoSrc 
+		});
+		console.log(isClicked);
+	}
+
+	render() {
+		return(
+			<div>
+				<div className="title">PUMPKIN CARVING SOCIAL [FALL 2014]</div>
+				<Grid className="gallery__grid" callbackFromParent={this.callback} urls={items} />
+				<Modal className="modal" src={this.state.currPhoto} toggle={this.state.isPhotoClicked} />
+			</div>
+		)
+	}
+}
+
+export default App;

src/pages/Events.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import Grid from '../Grid.js';
+import '../styles/css/Events.css';
+
+const items = [
+	{ name: 'First General Meeting', url: 'http://www.dogbreedslist.info/uploads/allimg/dog-pictures/Samoyed-2.jpg' },
+	{ name: 'Big C Hike + Pieology', url: 'http://cdn.akc.org/Marketplace/Breeds/Pembroke_Welsh_Corgi_SERP.jpg' },
+	{ name: '2nd General Meeting', url: 'https://i.ytimg.com/vi/wRx3Uvcktm8/maxresdefault.jpg' }
+];
+
+const items1 = [
+	{ name: 'Guide Dogs for the Blind', url: 'https://www.thelabradorsite.com/wp-content/uploads/2015/07/yellow-labrador-puppy-garden.jpg' }, 
+	{ name: 'Go Bears', url: 'https://cdn.marketplace.akc.org/media/45488/1456977861_4573_8635.jpg' },
+];
+
+class Events extends Component {
+	render() {
+		return(
+			<div>
+				<div className="title">2015-2016</div>
+				<Grid className="album__grid" urls={items} />
+				<Grid className="album__grid" urls={items1} />
+			</div>
+		)
+	}
+}
+
+export default Events;

src/pages/Gallery.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import Grid from '../Grid.js';
+import '../styles/css/Gallery.css';
+
+const items = [
+	{ url: 'http://www.dogbreedslist.info/uploads/allimg/dog-pictures/Samoyed-2.jpg' },
+	{ url: 'http://cdn.akc.org/Marketplace/Breeds/Pembroke_Welsh_Corgi_SERP.jpg' },
+	{ url: 'https://i.ytimg.com/vi/wRx3Uvcktm8/maxresdefault.jpg' }
+];
+
+const items1 = [
+	{ url: 'https://www.thelabradorsite.com/wp-content/uploads/2015/07/yellow-labrador-puppy-garden.jpg' }, 
+	{ url: 'https://cdn.marketplace.akc.org/media/45488/1456977861_4573_8635.jpg' },
+	{ url: 'https://cdn.marketplace.akc.org/media/45488/1456977861_4573_8635.jpg' }
+];
+
+class Gallery extends Component {
+	render() {
+		return(
+			<div>
+				<div className="title">PUMPKIN CARVING SOCIAL [FALL 2014]</div>
+				<Grid className="gallery__grid" urls={items} />
+				<Grid className="gallery__grid" urls={items1} />
+			</div>
+		)
+	}
+}
+
+export default Gallery;

src/styles/css/album.css

@@ -0,0 +1,45 @@
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
+* {
+  box-sizing: border-box; }
+
+body {
+  margin: 0;
+  padding: 0; }
+
+.title {
+  margin-top: 30px;
+  text-align: center;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 30px;
+  color: #424242; }
+
+.album__grid {
+  margin: auto;
+  max-width: 1200px; }
+  .album__grid .grid__photo {
+    width: 33%;
+    height: 350px;
+    display: inline-block;
+    margin-bottom: 70px;
+    padding: 25px;
+    vertical-align: top; }
+    .album__grid .grid__photo img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      max-width: 100%; }
+    .album__grid .grid__photo img:hover {
+      opacity: 0.5;
+      transition: 0.5s;
+      cursor: pointer; }
+    .album__grid .grid__photo .label {
+      font-family: 'Source Sans Pro', sans-serif;
+      border-bottom: 2.5px solid #424242;
+      padding-top: 11px;
+      padding-bottom: 7px;
+      font-size: 20px;
+      color: #424242; }
+
+@media (max-width: 900px) {
+  .album__grid .grid__photo {
+    width: 50%; } }

src/styles/css/events.css

@@ -0,0 +1,40 @@
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
+* {
+  box-sizing: border-box; }
+
+body {
+  margin: 0;
+  padding: 0; }
+
+.title {
+  margin-top: 30px;
+  text-align: center;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 30px;
+  color: #424242; }
+
+.album__grid {
+  margin: auto;
+  max-width: 1200px; }
+  .album__grid .grid__photo {
+    width: 33%;
+    height: 350px;
+    display: inline-block;
+    margin-bottom: 70px;
+    padding: 25px;
+    vertical-align: top; }
+    .album__grid .grid__photo img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover; }
+    .album__grid .grid__photo img:hover {
+      opacity: 0.5;
+      transition: 0.5s;
+      cursor: pointer; }
+    .album__grid .grid__photo .label {
+      font-family: 'Source Sans Pro', sans-serif;
+      border-bottom: 2.5px solid #424242;
+      padding-top: 11px;
+      padding-bottom: 7px;
+      font-size: 20px;
+      color: #424242; }

src/styles/css/gallery.css

@@ -0,0 +1,33 @@
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
+* {
+  box-sizing: border-box; }
+
+body {
+  margin: 0;
+  padding: 0; }
+
+.title {
+  margin-top: 30px;
+  text-align: center;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 30px;
+  color: #424242; }
+
+.gallery__grid {
+  margin: auto;
+  max-width: 1200px;
+  margin-top: 10px; }
+  .gallery__grid .grid__photo {
+    width: 33%;
+    height: 275px;
+    display: inline-block;
+    padding: 20px; }
+    .gallery__grid .grid__photo img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      vertical-align: top; }
+    .gallery__grid .grid__photo img:hover {
+      opacity: 0.5;
+      transition: 0.5s;
+      cursor: pointer; }