SnippSync

Always Fresh Code

style.css

netflix-clone
Lines 0-164
Auto-synced 27 days ago
This snippet automatically syncs with your GitHub repository
SnippSync
CSS
style.css
1* {
2    padding: 0;
3    margin: 0;
4    box-sizing: border-box;
5}
6
7body {
8    font-family: 'helvetica Neue', helvetica, arial, sans serif;
9    background-color: #000;
10    color: #fff;
11}
12
13
14header {
15    display: grid;
16    grid-template-columns: 1fr 1fr;
17    padding: 26px 56px;
18    position: absolute;
19    z-index: 5;
20    width: 100%;
21
22}
23
24header a.logo {
25    display: block;
26}
27
28header .logo svg {
29    fill: #e50914;
30    height: 37px;
31}
32
33header div+div {
34    text-align: right;
35}
36
37header a.button {
38    display: inline-block;
39    background-color: #e50914;
40    color: #fff;
41    text-decoration: none;
42    padding: 7px 17px;
43    border-radius: 3px;
44}
45
46header select {
47    background: transparent;
48    color: #fff;
49    padding: 6px 0 6px 20px;
50    border-radius: 3px;
51}
52
53header div {
54    display: inline-block;
55    margin-right: 30px;
56
57}
58
59header div.select svg {
60    height: 20px;
61    fill: #fff;
62    position: absolute;
63    margin-top: 5px;
64    margin-left: 4px;
65}
66
67div.splash {
68    position: relative;
69
70}
71
72
73div.splash div.gradient {
74    position: absolute;
75    inset: 0;
76    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%)
77}
78
79div.splash div.background img {
80    max-width: 100%;
81    opacity: 0, 6;
82
83}
84
85div.splash div.content {
86    max-width: 655px;
87    position: absolute;
88    inset: 0;
89    left: 50%;
90    margin-left: -327.5px;
91    display: grid;
92    align-items: center;
93    text-align: center;
94
95}
96
97div.splash h1,
98div.splash h2,
99div.splash h3 {
100    font-weight: normal;
101
102}
103
104div.splash h1 {
105    font-size: 3.125rem;
106    font-weight: bold;
107
108
109}
110
111div.splash h2 {
112    font-size: 1.625rem;
113    margin-top: 13px;
114    margin-bottom: 29px;
115
116}
117
118div.splash h3 {
119    font-size: 1.2rem;
120
121}
122
123div.splash form {
124    position: relative;
125    display: grid;
126    margin-top: 20px;
127    grid-template-columns: 1fr max-content;
128
129}
130
131div.splash input {
132    padding: 10px;
133    font-size: 1.2rem;
134    width: 100%;
135}
136
137div.splash input~span {
138    position: absolute;
139    left: 12px;
140    top: 14px;
141    z-index: 3;
142    color: #aaa;
143    transition: all 0.3s ease;
144    pointer-events: none;
145
146}
147div.splash input:focus{
148    padding-top: 14px;
149    padding-bottom: 6px;
150
151}
152div.splash input:focus ~ span{
153    top: 2px;
154    font-size: .8rem;
155}
156div.splash button{
157    font-size: 1.625rem;
158    padding: 7.5px 26px;
159    background-color: #e50914;
160    color: #fff;
161    border: none;
162    border-top-right-radius:5px ;
163    border-bottom-right-radius: 5px;
164}
165

Powered by SnippSync • Always fresh, always in sync

Create Your Own Auto-Synced Snippets

Keep Your Documentation Always Fresh

Create snippets that automatically sync with your GitHub repositories. Never worry about outdated documentation again.

Auto-sync with GitHub
Beautiful embeds
Share anywhere