/
index.html
126 lines (120 loc) · 3.87 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Film Site</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="buttons.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body id="section1">
<header>
<div class="header-logo">
<a href="#"><b>MovieApp</b></a>
</div>
<nav>
<a href="#">Films</a>
<a href="#">Series</a>
<a href="#" class="btn inblue_text_white">Login</a>
</nav>
<div>
<a href="#section1"><span class="material-symbols-outlined">arrow_upward</span></a>
</div>
</header>
<section>
<div class="section-poster">
<h1>Welcome to MovieApp</h1>
</div>
<div class="section-info clearfix">
<div class="section-info__top">
<h2>How it works?</h2>
<br>
<p>We will show you step by step how to start watching your favorite movies & tv shows starting now!</p>
</div>
<div class="section-info__items clearfix">
<div class="section-info__item">
<h2>Register</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labo</p>
</div>
<div class="section-info__item">
<h2>Choose a Plan</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labo</p>
</div>
<div class="section-info__item">
<h2>Enjoy Movies</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labo</p>
</div>
</div>
</div>
<div class="photo-info clearfix">
<img src="images/interstellar.jpeg">
<div class="photo-info__info">
<h2>Watch all Movies & TV Shows once they get released!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco </p>
<a href="#" class="btn inblue_text_white">View Features</a>
</div>
</div>
<div class="plans-div clearfix">
<h2>Become a Premium Member</h2>
<div id="plans">
<div class="plan down">
<h2>Free</h2>
<h3><b>0/mounth</b></h3>
<ul>
<li>HD avaible</li>
<li>Unlimited Movies and TV shows</li>
<li>Watch on your phone & tablet</li>
<li>Download and watch offline</li>
<li>Screens you can watch</li>
<li>First Mounth Free</li>
</ul>
<a href="#" class="btn inorange-text_white">Choose Plan</a>
</div>
<div class="plan recommended-plan">
<h2 id="recommend-text">Recommended</h2>
<h2>Basic</h2>
<h3><b>$9.99/mounth</b></h3>
<ul>
<li>HD avaible</li>
<li>Unlimited Movies and TV shows</li>
<li>Watch on your phone & tablet</li>
<li>Download and watch offline</li>
<li>Screens you can watch</li>
<li>First Mounth Free</li>
</ul>
<a href="#" class="btn inwhite-text_blue">Choose Plan</a>
</div>
<div class="plan down">
<h2>Premium</h2>
<h3><b>$19.99/mounth</b></h3>
<ul>
<li>HD avaible</li>
<li>Unlimited Movies and TV shows</li>
<li>Watch on your phone & tablet</li>
<li>Download and watch offline</li>
<li>Screens you can watch</li>
<li>First Mounth Free</li>
</ul>
</ul>
<a href="#" class="btn inorange-text_white">Choose Plan</a>
</div>
</div>
</div>
</section>
<footer>
<h2>Created by Mohsumzadah</h2>
<a href="https://www.facebook.com/mohsumzadah/" class="btn inwhite-text_blue">Facebook</a>
<a href="https://github.com/mohsumzadah" class="btn inwhite-text_blue">GitHub</a>
<a href="https://www.linkedin.com/in/mohsumzadah/" class="btn inwhite-text_blue">Facebook</a>
</footer>
</body>
</html>