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

header background

Browse Source
This commit is contained in:
andres alcocer
2018-11-15 15:43:13 -05:00
parent f9dbf2ae9d
commit 65db39c1f0
12 changed files with 159 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/static/images/cancel-music.svg Normal file
View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, 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 212.982 212.982" style="enable-background:new 0 0 212.982 212.982;" xml:space="preserve">
<g id="Close">
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312
c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312
l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937
c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z"/>
</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.0 KiB

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

@@ -45,7 +45,7 @@
body {
box-sizing: border-box;
background-color: fff;
background-color: $color-background;
}
html {
@@ -55,21 +55,8 @@ html {
// GRID AREA
.container {
display: grid;
grid-template-rows: 47vw min-content min-content min-content;
grid-template-columns: 4% repeat(10, 1fr) 4%;
}
.searchContent {
height: 100vh;
background-color: $color-background;
}
.search-container {
background-color: $color-background;
height: 150%;
padding-bottom: 10rem;
padding-left: 4rem;
}

45
src/static/sass/components/_modal.scss
View File

@@ -26,6 +26,15 @@
font-size: 2rem;
}
&__cancel {
cursor: pointer;
width: 1.8rem;
fill: #fff;
float: right;
padding-right: 2rem;
padding-top: 2rem;
}
&__overview {
color: $color-modal-grey;
padding-top: 2rem;
@@ -35,27 +44,19 @@
}
}
// .hide {
// transition: all 1s;
// // transform: translateY(-100vh);
// display: none;
// }
.show {
opacity: 1;
}
.show {
opacity: 1;
// transform: scale(1);
}
.hide {
transition: all 1s;
display: none;
}
.hide {
transition: all 1s;
// transform: translateY(-100vh);
display: none;
}
.shit {
background: linear-gradient(90deg, #000 50%, transparent);
width: 70%;
padding-top: 3rem;
height: 100%;
padding-left: 3.5rem;
}
.modal__container {
background: linear-gradient(90deg, #000 50%, transparent);
width: 70%;
padding-top: 3rem;
height: 100%;
padding-left: 3.5rem;
}

4
src/static/sass/components/_movie.scss
View File

@@ -1,5 +1,4 @@
.movie {
// z-index: -1;
flex: 1 1 auto;
padding-top: 6rem;
display: inline-block;
@@ -12,7 +11,8 @@
&:hover {
z-index: -1;
transform: scale(1.4);
transform: scale(1.25);
}
}

11
src/static/sass/components/_search.scss
View File

@@ -0,0 +1,11 @@
.searchContent {
height: 100vh;
background-color: $color-background;
}
.search-container {
background-color: $color-background;
height: 150%;
padding-bottom: 10rem;
padding-left: 4rem;
}

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

@@ -1,5 +1,9 @@
.header {
padding-top: 4rem;
background-color: rebeccapurple;
grid-column: 1 / 13;
&__background {
}
}