psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main styles added

Browse Source
This commit is contained in:
andres alcocer
2018-11-17 20:45:11 -05:00
parent d457ad851f
commit 731af42186
14 changed files with 400 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/static/images/Netflix_Logo_RGB.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

72
src/static/images/add.svg Normal file
View File

@@ -0,0 +1,72 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 491.86 491.86" style="enable-background:new 0 0 491.86 491.86;" xml:space="preserve">
<g>
<g>
<path d="M465.167,211.614H280.245V26.691c0-8.424-11.439-26.69-34.316-26.69s-34.316,18.267-34.316,26.69v184.924H26.69
C18.267,211.614,0,223.053,0,245.929s18.267,34.316,26.69,34.316h184.924v184.924c0,8.422,11.438,26.69,34.316,26.69
s34.316-18.268,34.316-26.69V280.245H465.17c8.422,0,26.69-11.438,26.69-34.316S473.59,211.614,465.167,211.614z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

42
src/static/images/bell-logo.svg Normal file
View File

@@ -0,0 +1,42 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 459.334 459.334" style="enable-background:new 0 0 459.334 459.334;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<g>
<path d="M175.216,404.514c-0.001,0.12-0.009,0.239-0.009,0.359c0,30.078,24.383,54.461,54.461,54.461 s54.461-24.383,54.461-54.461c0-0.12-0.008-0.239-0.009-0.359H175.216z" fill="#FFFFFF"/>
<path d="M403.549,336.438l-49.015-72.002c0-22.041,0-75.898,0-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485 C254.152,10.963,243.19,0,229.667,0s-24.485,10.963-24.485,24.485v27.663c-57.237,11.381-100.381,61.879-100.381,122.459 c0,23.716,0,76.084,0,89.83l-49.015,72.002c-5.163,7.584-5.709,17.401-1.419,25.511c4.29,8.11,12.712,13.182,21.887,13.182 H383.08c9.175,0,17.597-5.073,21.887-13.182C409.258,353.839,408.711,344.022,403.549,336.438z" fill="#FFFFFF"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

48
src/static/images/bell.svg Normal file
View File

@@ -0,0 +1,48 @@
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M467.812,431.851l-36.629-61.056c-16.917-28.181-25.856-60.459-25.856-93.312V224c0-67.52-45.056-124.629-106.667-143.04
V42.667C298.66,19.136,279.524,0,255.993,0s-42.667,19.136-42.667,42.667V80.96C151.716,99.371,106.66,156.48,106.66,224v53.483
c0,32.853-8.939,65.109-25.835,93.291l-36.629,61.056c-1.984,3.307-2.027,7.403-0.128,10.752c1.899,3.349,5.419,5.419,9.259,5.419
H458.66c3.84,0,7.381-2.069,9.28-5.397C469.839,439.275,469.775,435.136,467.812,431.851z"/>
</g>
</g>
<g>
<g>
<path d="M188.815,469.333C200.847,494.464,226.319,512,255.993,512s55.147-17.536,67.179-42.667H188.815z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

41
src/static/images/drop-down-arrow.svg Normal file
View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="255px" height="255px" viewBox="0 0 255 255" style="enable-background:new 0 0 255 255;" xml:space="preserve">
<g>
<g id="arrow-drop-down">
<polygon points="0,63.75 127.5,191.25 255,63.75 "/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 761 B

38
src/static/images/play-button.svg Normal file
View File

@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 41.999 41.999" style="enable-background:new 0 0 41.999 41.999;" xml:space="preserve">
<path d="M36.068,20.176l-29-20C6.761-0.035,6.363-0.057,6.035,0.114C5.706,0.287,5.5,0.627,5.5,0.999v40
c0,0.372,0.206,0.713,0.535,0.886c0.146,0.076,0.306,0.114,0.465,0.114c0.199,0,0.397-0.06,0.568-0.177l29-20
c0.271-0.187,0.432-0.494,0.432-0.823S36.338,20.363,36.068,20.176z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 824 B

1
src/static/sass/base/_base.scss
View File

@@ -44,6 +44,7 @@
}
body {
font-family: 'Hind', sans-serif;
box-sizing: border-box;
background-color: $color-background;
}

44
src/static/sass/layout/_header.scss
View File

@@ -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;
}
}
}
}

79
src/static/sass/layout/_navigation.scss
View File

@@ -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;
}
}