From 731af42186660df7892d46b73b3226a819654fe8 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Sat, 17 Nov 2018 20:45:11 -0500 Subject: [PATCH] main styles added --- src/components/Footer/Footer.js | 2 +- src/components/Header/Header.js | 27 +++--- .../MovieRow/MovieSummary/MovieSummary.js | 40 +++++---- src/containers/Navigation/Navigation.js | 21 ++++- src/index.html | 1 + src/static/images/Netflix_Logo_RGB.png | Bin 0 -> 16470 bytes src/static/images/add.svg | 72 ++++++++++++++++ src/static/images/bell-logo.svg | 42 ++++++++++ src/static/images/bell.svg | 48 +++++++++++ src/static/images/drop-down-arrow.svg | 41 +++++++++ src/static/images/play-button.svg | 38 +++++++++ src/static/sass/base/_base.scss | 1 + src/static/sass/layout/_header.scss | 44 +++++++--- src/static/sass/layout/_navigation.scss | 79 ++++++++++++++++-- 14 files changed, 400 insertions(+), 56 deletions(-) create mode 100755 src/static/images/Netflix_Logo_RGB.png create mode 100644 src/static/images/add.svg create mode 100644 src/static/images/bell-logo.svg create mode 100644 src/static/images/bell.svg create mode 100644 src/static/images/drop-down-arrow.svg create mode 100644 src/static/images/play-button.svg 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 0000000000000000000000000000000000000000..151775b3b17bc46f78a55856659ad924d6f3a9de GIT binary patch literal 16470 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 fCY0qJYI;`nP$+dZ9n~Ube8~R;VRQyx literal 0 HcmV?d00001 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