├── scripts.js
├── styles.css
├── README.md
├── index.html
└── netflixstyles.css
/scripts.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | this is a file for additional .css i future :D
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Netflix-Website-Project
2 | this is a html css website project
3 | This is a website which i fuckin created for fun and for faking the madafucking Netflix Website
4 | Fuck the shoits
5 | HellYeah !!
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Netflix - Watch TV Shows Online, Watch Movies Online
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
43 |
44 |
45 |
46 |
47 |
Enjoy on your TV.
48 |
Watch on your smart-TV, PlayStation,
XBox, ChromeCast, AppleTV, blu-
ray players and more.
49 |
50 |
51 |
54 |
55 |
Download your shows
to watch offline.
56 |
Save your favourites easily and
always have something to watch.
57 |
58 |
59 |
62 |
Watch Everywhere.
63 |
Stream unlimited movies and TV
shows on your phon, tablet, laptop,
and TV.
64 |
67 |
Frequently Asked Questions...
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
78 |
79 |
80 |
81 |
Ready to watch? Enter your email to create or restart your membership.
82 |
83 |
84 |
103 |
104 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/netflixstyles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --primary-color: #e50914;
3 | }
4 |
5 | * {
6 | box-sizing: border-box;
7 | margin: 0;
8 | padding: 0;
9 | }
10 |
11 | body {
12 | font-family: 'Arial' , sans-serif;
13 | --webkit-font-smoothing: antialiased;
14 | background: #000;
15 | color: #999;
16 | text-align: center;
17 | }
18 |
19 | ul {
20 | list-style: none;
21 | }
22 |
23 | h1{
24 | font-size: 4rem;
25 | }
26 |
27 | h1, h2, h3, h4 {
28 | color: #fff;
29 | }
30 |
31 | a{
32 | color: #fff;
33 | text-decoration: none;
34 | }
35 |
36 | p {
37 | margin: 0.5rem 0;
38 | }
39 |
40 | img {
41 | width: 100%;
42 | }
43 |
44 | .showcase {
45 | width: 100%;
46 | height: 93vh;
47 | position: left;
48 | background: url('https://raw.githubusercontent.com/Tsiangana/AOFlix/master/img/capa3.png') no-repeat center center/cover;
49 | border-bottom: 8px solid #222;
50 | text-indent: 5px;
51 | }
52 |
53 | .showcase-top {
54 | position: absolute;
55 | height: 130px;
56 | width: 90px;
57 | margin-left: 170px;
58 | background-color: var(--primary-color);
59 | color: #fff;
60 | padding: 15px;
61 | padding-top: 24px;
62 | font-size: 14px;
63 | font-weight: 600;
64 | font-family: sans-serif;
65 | cursor: pointer;
66 | }
67 |
68 | .showcase-top img {
69 | width: 170px;
70 | position: absolute;
71 | top: 50%;
72 | left: 50%;
73 | transform: translate( -50%, -50%);
74 | border-bottom: 8px solid #222;
75 | }
76 |
77 | nav {
78 | float: right;
79 | padding-top: 30px;
80 | padding-right: 50px;
81 | }
82 |
83 | /* Button */
84 | .btn {
85 | display: inline-block;
86 | background: var(--primary-color);
87 | text-align: center;
88 | border : none;
89 | cursor: pointer;
90 |
91 | margin-right: 0.5rem;
92 | outline: none;
93 | box-shadow: 0 1px 0 rgba(0,0,0,0.45);
94 | border-radius: 5px;
95 | transition: background-color .4s;
96 | padding: 0.5rem 1rem;
97 | }
98 |
99 | .btn:hover {
100 | opacity: 0.7;
101 | }
102 |
103 | .btn-rounded {
104 | border-radius: 5px;
105 | }
106 |
107 | .btn-x1 {
108 | font-size: 1rem;
109 | padding: 0.8rem 1.3rem;
110 | text-transform: uppercase;
111 | }
112 |
113 | .search-box {
114 | position: center;
115 | transform: translate(-50,-50);
116 | height: 60px;
117 | }
118 |
119 | input {
120 | height: 49px;
121 | width: 550px;
122 | border-radius: 5px;
123 | padding: 0px 10px;
124 | }
125 |
126 | .enjoy-tv {
127 | font-size: 30px;
128 | text-align: left;
129 | position: relative;
130 | padding: 150px 10%;
131 | padding-left: 280px;
132 | margin-bottom: 0;
133 | background: 0 0;
134 | color: #fff;
135 | display: flex;
136 | align-items: center;
137 | border-bottom: 8px solid #222;
138 | }
139 |
140 | .enjoy-tv img {
141 | width: 450px;
142 | }
143 |
144 | .Watch-offline {
145 | font-size: 30px;
146 | text-align: left;
147 | position: relative;
148 | padding: 150px 10%;
149 | margin-bottom: 0;
150 | padding-left: 230px;
151 | background: var(--primary-color);
152 | color: #fff;
153 | display: flex;
154 | align-items: center;
155 | border-bottom: 8px solid #222;
156 | }
157 |
158 | .Watch-offline img {
159 | width: 450px;
160 | margin-left: 20px;
161 | }
162 |
163 | .watch-everywhere {
164 | font-size: 30px;
165 | text-align: left;
166 | position: relative;
167 | padding: 150px 10%;
168 | padding-left: 280px;
169 | margin-bottom: 0;
170 | color: #fff;
171 | display: block;
172 | border-bottom: 8px solid #222;
173 | background: url('https://www.showmetech.com.br/wp-content/uploads//2023/04/imagem_2023-04-05_171218497.png.webp') no-repeat center center/cover;
174 | }
175 |
176 | .watch-everywhere img {
177 | width: 450px;
178 | position: absolute;
179 | top: 50%;
180 | left: 50%;
181 | transform: translate(+20%, -50%);
182 | display: block;
183 | }
184 |
185 | .ask-question {
186 | padding-top: 60px;
187 | padding-bottom: 50px;
188 | }
189 |
190 | .ask-question h1 {
191 | font-size: 50px;
192 | padding-bottom: 50px;
193 | }
194 |
195 | .ask-question button {
196 | display: center;
197 | text-align: left;
198 | background-color: #303030;
199 | color: white;
200 | height: 65px;
201 | width: 700px;
202 | font-size: 0.9rem;
203 | padding: 0.3rem 0.5rem;
204 | text-transform: uppercase;
205 | border-radius: 2px;
206 | }
207 |
208 | .page-down {
209 | border-top: 8px solid #222;
210 | background-color: var(--primary-color);
211 | font-size: 0.8rem;
212 | margin-bottom: 1.5rem;
213 | padding: 25px;
214 | display: grid;
215 | grid-template-columns: repeat(5, 1fr);
216 | grid-gap: 0.5rem;
217 | }
--------------------------------------------------------------------------------