-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (133 loc) · 6.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Netflix Clone</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
<section class="hero-section">
<header>
<img src="https://cdn.glitch.com/7f9e4f94-be6e-4dc1-9967-4d2ffc3952c2%2FLogo.png?v=1605658909471" class="Logo">
<div class="btn">Sign in</div>
</header>
<div class="container">
<div class="hero-elements">
<p class="hero-section--title">Unlimited movies, TV shows,and more.</p>
<p class="hero-section--subtitle">Watch anywhere.Cancel anytime.</p>
<p class="hero-section--text">Ready to watch? Enter your email to <br>create or restart your membership.</p>
</div>
<div class="hero-section--input">
<input type="text">
<label>Email Adress</label>
<div class="btn hero-section--btn">GET STARTED <i class="fa fa-chevron-right"></i></div>
</div>
</div>
</section>
<section class="all-section tv-section">
<div class="description">
<p class="section--title">Enjoy on your TV</p>
<p class="section--text">Watch on Smart TVs, Playstation, Xbox,Chromecast,Apple TV, Blu-ray players, and more</p>
</div>
<video autoplay loop>
<source src="https://cdn.glitch.com/7f9e4f94-be6e-4dc1-9967-4d2ffc3952c2%2FTV-animation-video.m4v?v=1605658909911" type="video/mp4">
</video>
<img class="img" src="https://cdn.glitch.com/7f9e4f94-be6e-4dc1-9967-4d2ffc3952c2%2FTV-animation.png?v=1605658910872">
</section>
<section class="all-section offline-section">
<div class="description">
<p class="section--title">Download your show to watch offline.</p>
<p class="section--text">Save your favorites easily and always have something to watch.</p>
</div>
<img class="img" src="https://cdn.glitch.com/7f9e4f94-be6e-4dc1-9967-4d2ffc3952c2%2FMobile-animation.jpg?v=1605658910916">
<div class="download-animmation">
<img src="https://cdn.glitch.com/7f9e4f94-be6e-4dc1-9967-4d2ffc3952c2%2FMobile-animation-img.png?v=1605658909697" width="30px">
<div class="download-animation--text">
<p>Stranger Things</p><br>
<h4>Downloading....</h4>
</div>
<div class="circle">
</div>
</div>
</section>
<section class="all-section multidevice-section">
<div class="description">
<p class="section--title">Watch everywhere</p>
<p class="section--text">Stream unlimited movies and TV shows on your phone, tablet, laptop and TV without paying more</p>
</div>
<video class='laptop-video' autoplay loop >
<source src="images/video-devices.m4v" type="video/mp4">
</video>
<img class="img" src="https://cdn.glitch.com/7f9e4f94-be6e-4dc1-9967-4d2ffc3952c2%2FAll-device-image.png?v=1605658911940">
</section>
<section class="all-section medium-device-section">
<div class="description">
<p class="section--title">Make any night family movie night.</p>
<p class="section--text">Discover TV shows and movies that the whole family can enjoy together.</p>
</div>
<img class="img" src="https://cdn.glitch.com/7f9e4f94-be6e-4dc1-9967-4d2ffc3952c2%2Fdefault.jpg?v=1605658910773">
</section>
<section class="all-section accordion-section">
<p class="section--title">Frequently Asked Questions</p>
<div class="accordion-element">
<span>What is Netflix<i class="fa fa-plus"></i></span>
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis delectus,
quam voluptatibus aliquid esse velit. Eveniet excepturi reiciendis consectetur numquam.</p>
</div>
<div class="accordion-element">
<span>How much does cost Netflix?<i class="fa fa-plus"></i></span>
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis delectus,
quam voluptatibus aliquid esse velit. Eveniet excepturi reiciendis consectetur numquam.</p>
</div>
<div class="accordion-element">
<span>Where can I watch?<i class="fa fa-plus"></i></span>
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis delectus,
quam voluptatibus aliquid esse velit. Eveniet excepturi reiciendis consectetur numquam.</p>
</div>
<div class="accordion-element">
<span>How do I cancel?<i class="fa fa-plus"></i></span>
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis delectus,
quam voluptatibus aliquid esse velit. Eveniet excepturi reiciendis consectetur numquam.</p>
</div>
<div class="accordion-element">
<span>What can I watch on Netflix?<i class="fa fa-plus"></i></span>
<p class="accordion-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis delectus,
quam voluptatibus aliquid esse velit. Eveniet excepturi reiciendis consectetur numquam.</p>
</div>
<p class="hero-section--text">Ready to watch? Enter your email to <br>create or restart your membership.</p>
<div class="hero-section--input">
<input type="text">
<label>Email Adress</label>
<div class="btn hero-section--btn">GET STARTED <i class="fa fa-chevron-right"></i></div>
</div>
</section>
<section class="all-section footer-section">
<p>Questions? Contact us</p>
<div class="footer-element">
<section>
<p>FAQ</p>
<p>Account</p>
<p>Investor Relations</p>
<p>Ways to watch</p>
<p>Privacy</p>
<p>Corporate Information</p>
<p>Speed Test</p>
<p>Netflix Originals</p>
</section>
<section >
<p>Help Center</p>
<p>Media Center</p>
<p>Jobs</p>
<p>Term of Use</p>
<p>Cookie Preference</p>
<p>Contact Us</p>
<p>Legal Notices</p>
</section>
</div>
</section>
<script src='main.js'></script>
</body>
</html>