diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index b5e104d..480f2c2 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -4,7 +4,7 @@ const footer = () => ( ); diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 98847f6..be718f3 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -1,8 +1,6 @@ -import React, { Component } from 'react'; - - - - +import React, { Component } from 'react'; +import PlayLogo from '../../static/images/play-button.svg'; +import AddLogo from '../../static/images/add.svg'; class Header extends Component { @@ -20,8 +18,14 @@ class Header extends Component {

{this.props.movie.name}

- - + +

{this.props.movie.overview}

@@ -32,14 +36,5 @@ class Header extends Component { } -// const header = (props) => ( - -//
-//
-//

{props.movie.name}

- -//
-//
-// ); export default Header; \ No newline at end of file diff --git a/src/components/MovieRow/MovieSummary/MovieSummary.js b/src/components/MovieRow/MovieSummary/MovieSummary.js index 9668bbf..70e229d 100644 --- a/src/components/MovieRow/MovieSummary/MovieSummary.js +++ b/src/components/MovieRow/MovieSummary/MovieSummary.js @@ -7,24 +7,28 @@ class MovieSummary extends Component { render() { - return ( - -
-

{this.props.movie.title || this.props.movie.name}

-

- Rating: {this.props.movie.vote_average * 10}% - Release date: {this.props.movie.release_date || this.props.movie.first_air_date} Runtime: {this.props.movie.runtime || this.props.movie.episode_run_time}m -

-

{this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""} - {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""}

-

{this.props.movie.overview}

- - -

staring: mdf gglo bool emmy djf

-

Genres: mdf gglo bool emmy djf

-
- - ) + return +
+

+ {this.props.movie.title || this.props.movie.name} +

+

+ + Rating: {this.props.movie.vote_average * 10}%{" "} + + Release date: {this.props.movie.release_date || this.props.movie.first_air_date} Runtime: {this.props.movie.runtime || this.props.movie.episode_run_time }m +

+

+ {this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""} + {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""} +

+

{this.props.movie.overview}

+ + +

staring: mdf gglo bool emmy djf

+

Genres: mdf gglo bool emmy djf

+
+ ; } } diff --git a/src/containers/Navigation/Navigation.js b/src/containers/Navigation/Navigation.js index 60193aa..ffc9e20 100644 --- a/src/containers/Navigation/Navigation.js +++ b/src/containers/Navigation/Navigation.js @@ -1,6 +1,9 @@ import React, { Component } from 'react'; import NavigationItem from '../../components/NavigationItems/NavigationItem/NavigationItem' import SearchLogo from '../../static/images/search-icon.svg'; +import NetflixLogo from '../../static/images/Netflix_Logo_RGB.png'; +import BellLogo from '../../static/images/bell-logo.svg'; +import DropdownArrow from '../../static/images/drop-down-arrow.svg'; class navigation extends Component { state = { @@ -33,7 +36,7 @@ class navigation extends Component { ) diff --git a/src/index.html b/src/index.html index 0529bc2..0d117d9 100644 --- a/src/index.html +++ b/src/index.html @@ -4,6 +4,7 @@ + Netflix Clone diff --git a/src/static/images/Netflix_Logo_RGB.png b/src/static/images/Netflix_Logo_RGB.png new file mode 100755 index 0000000..151775b Binary files /dev/null and b/src/static/images/Netflix_Logo_RGB.png differ diff --git a/src/static/images/add.svg b/src/static/images/add.svg new file mode 100644 index 0000000..86ea7ca --- /dev/null +++ b/src/static/images/add.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/images/bell-logo.svg b/src/static/images/bell-logo.svg new file mode 100644 index 0000000..9e48c8b --- /dev/null +++ b/src/static/images/bell-logo.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/images/bell.svg b/src/static/images/bell.svg new file mode 100644 index 0000000..f8d1090 --- /dev/null +++ b/src/static/images/bell.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/images/drop-down-arrow.svg b/src/static/images/drop-down-arrow.svg new file mode 100644 index 0000000..368bf50 --- /dev/null +++ b/src/static/images/drop-down-arrow.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/images/play-button.svg b/src/static/images/play-button.svg new file mode 100644 index 0000000..2fb8194 --- /dev/null +++ b/src/static/images/play-button.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/sass/base/_base.scss b/src/static/sass/base/_base.scss index 51ecc1d..0392931 100644 --- a/src/static/sass/base/_base.scss +++ b/src/static/sass/base/_base.scss @@ -44,6 +44,7 @@ } body { + font-family: 'Hind', sans-serif; box-sizing: border-box; background-color: $color-background; } diff --git a/src/static/sass/layout/_header.scss b/src/static/sass/layout/_header.scss index 91f8a3e..31bb9a3 100644 --- a/src/static/sass/layout/_header.scss +++ b/src/static/sass/layout/_header.scss @@ -17,31 +17,51 @@ &-btnPlay, &-btnMyList { cursor: pointer; - font-size: 1.5rem; + font-size: 1.6rem; color: #fff; - border-radius: 5px; - padding-left: 4rem; + outline: none; + border: none; + font-weight: 700; + border-radius: .2vw; + padding-left: 5rem; margin-right: 1rem; - padding-right: 4rem; - border: 1px solid rgba(255, 255, 255, .4); + padding-right: 5rem; padding-top: 1rem; - background-color: rgba(51, 51, 51, .4); + background-color: rgba(51,51,51,.5); padding-bottom: 1rem; - + &-add { + width: 15px; + height: 15px; + fill: #fff; + margin-right: 1rem; + } + &-play { + width: 15px; + height: 15px; + fill: #fff; + margin-right: 1rem; + } + &:hover { - color: $color-dark; - background-color: #fff; - transition: all .3s; + color: #000; + background-color: #e6e6e6; + transition: all .2s; + box-shadow: 0 1px 2px rgba(0, 0, 0, .3); + + & > * { + fill: #000; + } } } &-overview { width: 45rem; line-height: 1.3; - padding-top: 1.5rem; + padding-top: 2.5rem; font-size: 1.8rem; } } -} \ No newline at end of file +} + diff --git a/src/static/sass/layout/_navigation.scss b/src/static/sass/layout/_navigation.scss index 2501c7c..1a6ce08 100644 --- a/src/static/sass/layout/_navigation.scss +++ b/src/static/sass/layout/_navigation.scss @@ -27,15 +27,61 @@ font-size: 4rem; } + &--bellLogo { + cursor: pointer; + height: 2.2rem; + fill: red; + width: 2.2rem; + padding-right: 2.5rem; + } + + &--userLogo { + margin-top: 2rem; + border-radius: 5px; + cursor: pointer; + background-color: rgb(201, 199, 78); + height: 2.5rem; + width: 2.5rem; + margin-right: .5rem; + + &:hover .dropdownContent { + transition: all .4s; + opacity: 1; + visibility: visible; + } + } + + &--downArrow { + cursor: pointer; + fill: #fff; + height: 1rem; + width: 1rem; + margin-right: 5.8rem; + + } + + &--logo { + margin-top: 1rem; + height: 5rem; + padding-right: 1rem; + + } + &-link { - color: #fff; + font-weight: 500; + font-size: 1.5rem; + color: rgb(221, 221, 221); text-decoration: none; margin-right: 2rem; - + transition: all .2s; + &:last-child { padding-right: 2.6rem; } + &:hover { + color: rgb(167, 167, 167); + } } @@ -54,19 +100,17 @@ width: 0px; padding: 10px; padding-right: 2rem; - // background: none; background: $color-background; border: 1px solid #fff; transition: width .5s; cursor: pointer; opacity: 0; - // transition: all .5s; + &:focus { padding-left: 4rem; width: 22rem; - // border: 1px solid #fff; cursor: text; opacity: 1; @@ -82,4 +126,29 @@ height: 1.8rem; transform: translateX(2.4rem) translateY(1rem); cursor: pointer; +} + + + +.dropdownContent { + opacity: 0; + visibility: hidden; + height: 20rem; + width: 15rem; + background-color: red; + transform: translateY(4.6rem) translateX(-11rem); + +} + +.dropdownContainer { + height: 100%; + display: flex; + justify-content: center; + align-content: center; + + &:hover .dropdownContent { + transition: all .4s; + opacity: 1; + visibility: visible; + } } \ No newline at end of file