Skip to content

Commit 36cb45d

Browse files
committed
initial commit
1 parent b3a47a2 commit 36cb45d

File tree

449 files changed

+109692
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

449 files changed

+109692
-0
lines changed

assets/css/global.css

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
:root{
2+
--body-color: white;
3+
--headline-color: white;
4+
--link-color: rgb(255, 255, 255);
5+
--white-color: white;
6+
--light-color: rgb(231, 231, 231);
7+
8+
--button-color: #e50914;
9+
--border-color: #e50914;
10+
--border: 1px solid #e50914;
11+
--border-radius: 3px;
12+
13+
--txt-shadow: 1px 1px 2px rgb(228, 228, 228);
14+
15+
--font-weight-800: 800;
16+
--font-weight-400: 400;
17+
--font-weight-300: 300;
18+
19+
--font-size-20: 20px;
20+
--font-size-24: 24px;
21+
--font-size-18: 18px;
22+
--font-size-17: 17px;
23+
--font-size-40: 40px;
24+
--font-size-28: 28px;
25+
26+
--font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
27+
--box-shadow: 0px 0px 48px -24px rgba(0,0,0,0.5);
28+
}
29+
html, body{
30+
margin: 0;
31+
padding: 0;
32+
font-size: var(--font-size-18);
33+
font-family: var(--font-primary);
34+
color: var(--body-color);
35+
scroll-behavior: smooth;
36+
transition: all .3s;
37+
line-height: 1.6;
38+
overflow-x: hidden;
39+
}
40+
h2, h3{
41+
font-size: var(--font-size-24);
42+
font-weight: var(--font-weight-800);
43+
}
44+
45+
h4, h5, h6{
46+
font-size: var(--font-size-20);
47+
font-weight: var(--font-weight-800);
48+
}
49+
p, span{
50+
font-size: var(--font-size-17);
51+
margin: 0;
52+
padding: 0;
53+
}
54+
a{
55+
color: var(--link-color);
56+
text-decoration: none;
57+
}
58+
a:hover{
59+
color: var(--link-color);
60+
}
61+
input:focus,
62+
select:focus,
63+
textarea:focus,
64+
button:focus {
65+
outline: none;
66+
}
67+
.d-flex{
68+
display: flex;
69+
flex-wrap: wrap;
70+
}
71+
.flex-basis{
72+
flex-basis: 100%;
73+
}
74+
.flex-center{
75+
justify-content: center;
76+
}
77+
.flex-start{
78+
justify-content: flex-start;
79+
}
80+
.flex-end{
81+
justify-content: flex-end;
82+
}
83+
.flex-middle{
84+
align-items: center;
85+
}
86+
.direction-column{
87+
flex-direction: column;
88+
}
89+
.space-between{
90+
justify-content: space-between;
91+
}
92+
93+
94+
.w-50{
95+
width: 50%;
96+
}
97+
.w-40{
98+
width: 40%;
99+
}
100+
.w-60{
101+
width: 60%;
102+
}
103+
.w-30{
104+
width: 30%;
105+
}
106+
107+
.f-w-8{
108+
font-weight: var(--font-weight-800);
109+
}
110+
.f-w-4{
111+
font-weight: var(--font-weight-400);
112+
}
113+
.f-w-3{
114+
font-weight: var(--font-weight-300);
115+
}
116+
117+
.f-s-40{
118+
font-size: var(--font-size-40);
119+
}
120+
.f-s-24{
121+
font-size: var(--font-size-24);
122+
}
123+
.f-s-20{
124+
font-size: var(--font-size-20);
125+
}
126+
.f-s-28{
127+
font-size: var(--font-size-28);
128+
}
129+
130+
.button{
131+
border: var(--border);
132+
border-radius: var(--border-radius);
133+
padding: 10px 20px;
134+
color: var(--link-color) !important;
135+
transition: all .3s;
136+
cursor: pointer;
137+
font-size: var(--font-size-18);
138+
}
139+
140+
.blue-color{
141+
color: var(--link-color);
142+
}
143+
144+
.p-t-4{
145+
padding-top: 40px;
146+
}
147+
.p-b-4{
148+
padding-bottom: 40px;
149+
}
150+
.p-t-2{
151+
padding-top: 20px;
152+
}
153+
.p-y-40{
154+
padding: 0px 40px;
155+
}
156+
.p-y-20{
157+
padding: 0px 20px;
158+
}
159+
.p-x-20{
160+
padding: 20px 0px;
161+
}
162+
.container{
163+
max-width: 1280px;
164+
margin: 0px auto;
165+
padding: 10px 10px;
166+
}

assets/css/landing-pages.css

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
html,body{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
5+
font-size: 16px;
6+
direction: ltr;
7+
-webkit-font-smoothing: antialiased;
8+
color: white;
9+
overflow-x: hidden;
10+
}
11+
.d-flex{
12+
display: flex;
13+
flex-wrap: wrap;
14+
}
15+
.flex-basis{
16+
flex-basis: 100%;
17+
}
18+
.flex-center{
19+
justify-content: center;
20+
}
21+
.middle-align{
22+
align-items: center;
23+
}
24+
.direction-column{
25+
flex-direction: column;
26+
}
27+
.flex-start{
28+
align-items: flex-start;
29+
}
30+
.space-between{
31+
justify-content: space-between;
32+
}
33+
34+
h1,h2{
35+
font-size: 40px;
36+
}
37+
a{
38+
text-decoration: none;
39+
color: white;
40+
text-transform: none;
41+
}
42+
.button{
43+
border: none;
44+
padding: 8px 20px;
45+
font-size: 16px;
46+
border-radius: 2px;
47+
text-transform: uppercase;
48+
font-weight: 400;
49+
background: #e50914;
50+
color: white;
51+
cursor: pointer;
52+
}
53+
54+
/* index page styling start */
55+
body::before{
56+
content: '';
57+
left: 0;
58+
top: 0;
59+
z-index: -1;
60+
position: fixed;
61+
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.9) 100%),url('../../images/netflix\ clone\ home\ page\ background\ image\ multiple\ shows\ collage.jpg');
62+
background-repeat: no-repeat;
63+
background-size: cover;
64+
width: 100%;
65+
height: 100%;
66+
}
67+
68+
main{
69+
max-width: 1280px;
70+
margin: auto;
71+
}
72+
header{
73+
padding: 30px 10px;
74+
}
75+
76+
#landing-hero-section{
77+
position: relative;
78+
width: 100%;
79+
padding: 100px 0;
80+
margin: 0 auto;
81+
text-align: center;
82+
z-index: 1;
83+
}
84+
85+
#landing-hero-section h1{
86+
max-width: 640px;
87+
text-align: center;
88+
margin: auto;
89+
font-size: 3.125rem;
90+
}
91+
#landing-hero-section h2{
92+
margin: 1rem auto;
93+
text-align: center;
94+
max-width: 640px;
95+
font-size: 1.625rem;
96+
font-weight: 400;
97+
}
98+
#landing-hero-section form{
99+
flex-flow: column-reverse;
100+
max-width: 950px;
101+
padding-top: .85rem;
102+
}
103+
#landing-hero-section form h3{
104+
font-weight: 400;
105+
}
106+
#landing-hero-section .emailField{
107+
padding: 10px;
108+
font-size: 16px;
109+
font-weight: 500;
110+
color: #1f1f1f;
111+
min-width: 450px;
112+
height: 60px !important;
113+
box-sizing: border-box;
114+
border-top-left-radius: 5px;
115+
border-bottom-left-radius: 5px;
116+
border: 0;
117+
}
118+
119+
#landing-hero-section .email-form-lockup{
120+
text-align: center;
121+
flex-direction: row;
122+
margin: auto;
123+
}
124+
#landing-hero-section .submit{
125+
font-size: 1.625rem;
126+
min-height: 60px;
127+
border: 1px solid #e50914;
128+
border-radius: 0;
129+
border-top-right-radius: 5px;
130+
border-bottom-right-radius: 5px;
131+
}
132+
133+
#right-icon{
134+
width: 1.425rem;
135+
color: white;
136+
margin-bottom: -2px;
137+
}
138+
139+
@media (max-width: 770px){
140+
.email-form-lockup{
141+
display: block;
142+
}
143+
.submit{
144+
margin-top: 15px;
145+
}
146+
}
147+
148+
/* <!--Login form styling start--> */
149+
input:focus,
150+
select:focus,
151+
textarea:focus,
152+
button:focus {
153+
outline: none;
154+
}
155+
156+
.loginContainer{
157+
max-width: 300px;
158+
margin: auto;
159+
background-color: black;
160+
box-shadow: var(--box-shadow);
161+
padding: 30px 60px 68px 40px;
162+
border-radius: 3px;
163+
}
164+
.loginContainer h2{
165+
color: #fff;
166+
font-size: 32px;
167+
font-weight: bold;
168+
margin-bottom: 28px !important;
169+
}
170+
#loginForm input, #loginForm button{
171+
padding: 16px 5px;
172+
margin-top: 30px;
173+
border: 0;
174+
}
175+
#loginForm input{
176+
background: #333;
177+
color: white;
178+
border-radius: 3px;
179+
}
180+
#loginForm #email{
181+
margin: 0;
182+
}
183+
#loginForm .para{
184+
margin-top: 20px;
185+
color: gray;
186+
}
187+
#loginForm #errorEmail, #errorPassword{
188+
color: #E87C03;
189+
font-size: 14px;
190+
}
191+
#loginForm p .signUp{
192+
color: white;
193+
}
194+
/* Register page styling start */
195+
196+
197+
198+
199+
/* Logout page styling start */
200+
.logoutContainer{
201+
color: black;
202+
max-width: 400px;
203+
background: white;
204+
margin: auto;
205+
margin-top: 60px;
206+
padding: 30px;
207+
border-radius: 3px;
208+
}
209+
.logoutContainer p{
210+
margin-top: 20px;
211+
}
212+
.logoutContainer button{
213+
margin-top: 30px;
214+
padding: 15px;
215+
font-size: 20px;
216+
}
217+
.logoutButton{
218+
background: #0080ff;
219+
}

assets/js/main-script.js

Whitespace-only changes.

0 commit comments

Comments
 (0)