diff --git a/public/css/shop-homepage.css b/public/css/shop-homepage.css index b498194..01cced7 100755 --- a/public/css/shop-homepage.css +++ b/public/css/shop-homepage.css @@ -6,10 +6,12 @@ body { padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ + /*background-color: lavender;*/ + background-color: #1C0000; } - .slide-image { width: 100%; + height: 200px; } .carousel-holder { @@ -51,4 +53,4 @@ body { footer { margin: 50px 0; -} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index f8ab5bb..cffb6e6 100755 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,7 @@ - Shop Homepage - Start Bootstrap Template + Stephanie's Wine Shop @@ -28,7 +28,7 @@ - +
diff --git a/src/App.js b/src/App.js index 4139cab..14dda7d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,208 +1,51 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; - -function App() { +import "./index.css"; +import Header from "./components/Header"; +import ProductDetail from "./components/ProductDetail"; +import Footer from "./components/Footer"; +import Carousel from "./components/Carousel"; + +class App extends Component { + constructor(props) { + super(props); + this.state = { + numberOfItemsInCart: 0 + }; + } + + handleClick = () => { + this.setState({numberOfItemsInCart: this.state.numberOfItemsInCart + 1}); + } + + render() { return (
- - + {/*
*/} +
+ {/*
*/} - -
+
-

Shop Name

+

Wine List

- -
- -
- -
- -
- + {/**/} + + {/**/}
- -
-
- -
-

$24.99

-

First Product -

-

See more snippets like this online store item at Bootsnipp - http://bootsnipp.com.

-
-
-

15 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$64.99

-

Second Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

12 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$74.99

-

Third Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

31 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$84.99

-

Fourth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

6 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$94.99

-

Fifth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

18 reviews

-

- - - - - -

-
-
-
- -
-

Like this template? -

-

If you like this template, then check out this tutorial on how to build a working review system for your online store!

- View Tutorial -
- + {/**/} + + {/**/}
@@ -210,23 +53,18 @@ function App() {
- +
- -
-
-
-

Copyright © Your Website 2014

-
-
-
- + {/*
*/} +
+ {/*
*/}
); + } } -export default App; + export default App; diff --git a/src/components/Carousel.js b/src/components/Carousel.js new file mode 100644 index 0000000..c12948c --- /dev/null +++ b/src/components/Carousel.js @@ -0,0 +1,38 @@ +import React from "react"; +import '../index.css'; + +const Carousel = () => { + return ( +
+ +
+ +
+ +
+ ); +} +export default Carousel; diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..311f440 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,12 @@ +import React from "react"; + +const Footer = () => { + return ( +
+
+

Copyright © 2018 Stephanie's Wine

+
+
+ ); +} +export default Footer; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..f72d31b --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,40 @@ +import React from "react"; + +const Header = (props) => { + return ( + + ); +}; + +export default Header; diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js new file mode 100644 index 0000000..078125c --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,43 @@ +import React from 'react'; +import '../index.css'; + +const ProductDetail = (props) => { + const products= props.products; + const renderProduct = () => { + return ( + products.map((product) => { + return ( +
+
+ +
+

{product.price}

+

{product.name} +

+

{product.description}

+
+
+

{product.reviews}

+

+ + + + + +

+
+ +
+
+ ); + }) + ); + }; + return ( +
+ {renderProduct()} +
+ ); +}; + +export default ProductDetail; diff --git a/src/index.css b/src/index.css index e69de29..44d9f7a 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,15 @@ +.lead { + color: lavender; + text-shadow: 4px 4px 6px black; + font-weight: bold; + background-color: black; +} +.slide-image { + width: 100%; + height: 200px; +} +.footer p { + color: lavender; + text-shadow: 4px 4px 6px black; + background-color: black; +} diff --git a/src/index.js b/src/index.js index e58303d..2b76585 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,6 @@ import './index.css'; import state from './state'; ReactDOM.render( - , + , document.getElementById('root') ); diff --git a/src/state.js b/src/state.js index b54e269..ef94820 100644 --- a/src/state.js +++ b/src/state.js @@ -1,11 +1,12 @@ export default { - products:[{ + numberOfItemsInCart: 0, + products: [ { "id": 1, "name": "Body Luxuries Sweet Lavender Hand Sanitizer", "description": "Psychotropic drugs, not elsewhere classified", "reviews": 46, "rating": 2, - "imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff", + "imgUrl": "http://vinpro.co.za/wp-content/uploads/2015/10/Alcohol_Thumbnail.jpg", "price": "$95.11" }, { "id": 2, @@ -13,7 +14,7 @@ export default { "description": "You will be so happy when you use this product", "reviews": 2, "rating": 2, - "imgUrl": "http://dummyimage.com/125x134.jpg/cc0000/ffffff", + "imgUrl": "http://www.iheartradio.ca/image/policy:1.3042979:1502188239/CKTB-NEWS-WINE.jpg?f=default&$p$f=7665852&w=663&$w=4b85173", "price": "$37.09" }, { "id": 3, @@ -21,7 +22,7 @@ export default { "description": "Other disorders of continuity of bone, unsp tibia and fibula", "reviews": 27, "rating": 5, - "imgUrl": "http://dummyimage.com/149x190.jpg/dddddd/000000", + "imgUrl": "http://www.clker.com/cliparts/c/U/M/Z/e/Q/champagne-glasses-md.png", "price": "$51.83" }, { "id": 4, @@ -29,7 +30,7 @@ export default { "description": "Orchard as the place of occurrence of the external cause", "reviews": 60, "rating": 3, - "imgUrl": "http://dummyimage.com/162x153.jpg/cc0000/ffffff", + "imgUrl": "http://www.zastavki.com/pictures/originals/2014/Food___Drinks_Two_glasses_of_wine_082123_.jpg", "price": "$86.93" }, { "id": 5, @@ -37,7 +38,7 @@ export default { "description": "Injury of prostate", "reviews": 20, "rating": 1, - "imgUrl": "http://dummyimage.com/120x245.jpg/cc0000/ffffff", + "imgUrl": "https://www.athenasphere.com/wp-content/uploads/edd/2017/02/valentines-day-wine-picture.jpg", "price": "$70.10" }, { "id": 6, @@ -45,7 +46,7 @@ export default { "description": "this stuff is awesome", "reviews": 79, "rating": 3, - "imgUrl": "http://dummyimage.com/211x227.bmp/5fa2dd/ffffff", + "imgUrl": "http://hauteliving.com/wp-content/uploads/2015/10/shutterstock_115127932.jpg", "price": "$39.25" }, { "id": 7, @@ -53,7 +54,7 @@ export default { "description": "The best product ever", "reviews": 76, "rating": 3, - "imgUrl": "http://dummyimage.com/212x144.jpg/ff4444/ffffff", + "imgUrl": "http://www.goldengatefields.com/wp-content/uploads/2017/05/four-glasses.jpg", "price": "$99.91" }, { "id": 8, @@ -61,7 +62,7 @@ export default { "description": "Product 3", "reviews": 74, "rating": 3, - "imgUrl": "http://dummyimage.com/204x175.jpg/5fa2dd/ffffff", + "imgUrl": "https://sites.psu.edu/siowfa15/files/2015/11/wine-club.jpg", "price": "$67.17" }, { "id": 9, @@ -69,7 +70,7 @@ export default { "description": " cephalospor/oth beta-lactm antibiot, undet, sequela", "reviews": 9, "rating": 1, - "imgUrl": "http://dummyimage.com/212x108.bmp/cc0000/ffffff", + "imgUrl": "https://www.residenzamaritti.com/wp-content/uploads/2016/09/Tour-gastronomico-derale-edegustazione-vini.jpg", "price": "$96.84" }, { "id": 10, @@ -77,7 +78,7 @@ export default { "description": "Other Gram-negative sepsis", "reviews": 45, "rating": 2, - "imgUrl": "http://dummyimage.com/189x109.png/cc0000/ffffff", + "imgUrl": "http://www.vintagewinebarbistro.com/wp-content/uploads/2011/07/red-wine-bottles-wallpaper.jpg", "price": "$74.37" }] -} \ No newline at end of file +}