+
+ {/* add a ternary to show hero if no movie search and if movie is search, no hero */}
+
+
+
)
}
diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 0000000..4b7942d
--- /dev/null
+++ b/src/components/Button.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+class Button extends React.Component {
+ render(){
+ return (
+ The Internet's Biggest Collections Of Movies
+-
+
- Favourites +
+
+
+
+
+
+ );
+ }
+}
+
+export default Button;
\ No newline at end of file
diff --git a/src/components/Displayresults.js b/src/components/Displayresults.js
new file mode 100644
index 0000000..645f3f1
--- /dev/null
+++ b/src/components/Displayresults.js
@@ -0,0 +1,62 @@
+import React from 'react';
+
+
+class Displayresults extends React.Component {
+ constructor(){
+ super()
+ this.fetchFilmInfo = this.fetchFilmInfo.bind(this)
+ this.handleClick = this.handleClick.bind(this)
+ this.state ={
+ info: {},
+ MovieInfoHeading: ''
+
+ }
+ }
+
+ handleClick(){
+
+ }
+
+ fetchFilmInfo(){
+ fetch(`http://www.omdbapi.com/?apikey=8d5ab09&i=${this.props.movie.imdbID}`)
+ .then(response => response.json())
+ .then(body =>
+ this.setState({
+ info: body,
+ MovieInfoHeading: 'Movie Information:',
+ Plot: `Plot: ${body.Plot}`,
+ imdbRating: `Rating: ${body.imdbRating}`,
+ Director: `Director: ${body.Director}`,
+ Genre: `Genre: ${body.Genre}`,
+ Runtime: `Runtime: ${body.Runtime}`,
+ star:
+ }))
+ }
+
+ render(){
+
+
+ return (
+
+
+ 
+
+ );
+ }
+}
+
+export default Displayresults;
+
+
+
\ No newline at end of file
diff --git a/src/components/Hero.js b/src/components/Hero.js
new file mode 100644
index 0000000..eb96b04
--- /dev/null
+++ b/src/components/Hero.js
@@ -0,0 +1,49 @@
+import React from 'react';
+
+
+class Hero extends React.Component {
+ constructor(){
+ super();
+ this.fetchHero = this.fetchHero.bind(this)
+ this.state ={
+ movie: []
+ }
+ }
+
+ fetchHero(){
+ fetch("http://www.omdbapi.com/?apikey=8d5ab09&i=tt1270797")
+ .then(response => response.json())
+ .then(body => {(console.log(body))
+ this.setState({
+ movie: body
+ })
+ })
+ }
+
+ componentDidMount(){
+ this.fetchHero()
+ }
+
+
+
+ render(){
+ return (
+
+ {this.props.movie.Title} ({this.props.movie.Year})
+ Click For Movie Info +{this.state.Plot}
+{this.state.imdbRating}{this.state.star}
+{this.state.Director}
+{this.state.Genre}
+{this.state.Runtime}
+ + + Add To Favourites + +
+
+ );
+ }
+}
+
+export default Hero;
+
diff --git a/src/components/Results.js b/src/components/Results.js
new file mode 100644
index 0000000..59f0625
--- /dev/null
+++ b/src/components/Results.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import Displayresults from './Displayresults'
+
+class Results extends React.Component {
+ render(){
+ return (
+ Today's Featured Film
+VENOM
+In Theatres Soon!
+Scroll down to watch the trailer
+
+ 
+
+
+
+
+
+ {this.props.moviesArray.map(movie => {
+ return
+ })}
+
+ );
+ }
+}
+
+export default Results;
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 0000000..b5cbcfa
--- /dev/null
+++ b/src/components/Search.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import Displayresults from './Displayresults'
+class Search extends React.Component {
+constructor(){
+ super()
+ this.state = {
+ text: ""
+ }
+ this.handleSubmit = this.handleSubmit.bind(this)
+ this.handleChange = this.handleChange.bind(this)
+}
+
+ handleChange(event){
+ this.setState({
+ text:event.target.value
+ })
+ }
+
+ handleSubmit(event){
+ //capture user input submit
+ event.preventDefault()
+ this.props.receiver(this.state.text)
+ }
+
+
+ render(){
+ return (
+
+
+
+ );
+ }
+}
+
+export default Search;
+
diff --git a/style.css b/style.css
index e69de29..11a36fc 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,231 @@
+html{
+ box-sizing: border-box;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+body{
+ background: black;
+ color: white;
+ margin: 30px 50px;
+ line-height: 1.4;
+}
+
+
+li{
+ list-style-type: none;
+
+}
+
+ul{
+ display:flex;
+ justify-content: flex-end;
+}
+
+.welcome-heading{
+ display:flex;
+ justify-content: center;
+ text-align:center;
+}
+
+form{
+ display:flex;
+ justify-content: center;
+}
+
+.hero-heading {
+ text-align:center;
+ color:red;
+ text-shadow: #fff;
+ animation: blinker 2s linear infinite;
+}
+@keyframes blinker {
+ 50% {
+ opacity: 0;
+ }
+ }
+
+p.scroll-heading, h3.scroll-heading{
+ text-align:center;
+}
+
+h3.scroll-heading{
+ font-size: 10px;
+}
+
+p.scroll-heading{
+ text-decoration: underline;
+ font-size: 18px;
+ text-shadow: red;
+}
+
+h1.scroll-heading{
+ display: flex;
+ justify-content: center;
+}
+
+span{
+ display:flex;
+ justify-content: center;
+ color:lightgrey;
+}
+
+.movie-info{
+ color: lightgrey;
+}
+.add-to{
+ font-size: 10px;
+}
+
+.hero-image {
+ height: 400px;
+ width: 100%;
+}
+
+.hero-landing{
+ display:flex;
+ justify-content: center;
+ /* background: white;
+ border-radius: */
+}
+
+
+.hero-video{
+ display:flex;
+ justify-content: center;
+ width: 100%;
+}
+
+.results{
+ display: flex;
+ flex-direction: column;
+}
+
+
+.posters{
+ border-radius: 10% / 50%;
+}
+
+
+
+.buttons{
+ margin-top: 15px;
+ display: flex;
+ justify-content: center;
+ padding: 0.6rem 1.3rem;
+ text-transform: uppercase;
+ color: #0e2f44;
+ font-size: 0.8rem;
+
+ margin: 10px 0;
+ padding: 5px 15px;
+ text-decoration: none;
+
+}
+
+.load-button__next:hover{
+ transform: scale(1.1);
+ background-color: #0e2f44;
+ color: #fff;
+ transition: 0.4s;
+ text-decoration: underline;
+}
+
+.load-button__prev:hover{
+ transform: scale(1.1);
+ background-color: #0e2f44;
+ color: #fff;
+ transition: 0.4s;
+ text-decoration: underline;
+}
+
+.heart-icon{
+ display:flex;
+ justify-content: center;
+ font-size: 30px;
+}
+
+.fa-star:before {
+ content: "\f005";
+ color: gold;
+}
+
+
+@media screen and (min-width: 500px) {
+
+h1.scroll-heading{
+ display: flex;
+ justify-content: center;
+ color: lightgrey;
+}
+
+span{
+ display:flex;
+ justify-content: center;
+}
+
+ .posters{
+
+ width: 300px;
+ margin:auto;
+
+ }
+
+ .posters:hover{
+ transform: scale(1.1);
+
+ }
+
+ .results:hover{
+
+ background:#fff;
+ box-shadow: 0 0 10px rgba(255, 255, 255, 1),
+ 0 0 20px rgba(255, 255, 255, 1),
+ 0 0 30px rgba(255, 255, 255, 1),
+ 0 0 0 75px rgba(255, 255, 255, 0.05),
+ 0 0 0 60px rgba(255, 255, 255, 0.05),
+ 0 0 0 45px rgba(255, 255, 255, 0.05),
+ 0 0 0 30px rgba(255, 255, 255, 0.05),
+ 0 0 0 75px rgba(255, 255, 255, 0.05)
+
+ }
+ .hero-landing{
+ display:flex;
+ justify-content: center;
+ /* background: white;
+ border-radius: */
+}
+
+ .hero-image {
+ height: 400px;
+ width: 80%;
+}
+
+
+.hero-video{
+ display:flex;
+ justify-content: center;
+
+}
+
+p{
+ width: 260px;
+ margin: auto;
+ padding: 5px;
+ text-align: center;
+}
+
+
+.heart-icon{
+ font-size: 45px;
+ color: lightgrey;
+}
+
+.heart-icon:hover{
+ color: red;
+ transform: scale(1.1);
+}
+
+
+
+
+ }
\ No newline at end of file