-
Notifications
You must be signed in to change notification settings - Fork 0
/
index1.html
186 lines (173 loc) · 9.14 KB
/
index1.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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Features</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto:wght@100;400&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mate+SC&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</head>
<body>
<section id = "title">
<nav class="navbar navbar-expand-lg navbar-dark">
<!-- <a class="navbar-brand" href="">STREAMROOM</a> -->
<img class = "stream" src="images/stream1.png" alt="NO image">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop" href="">ABOUT</a>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel" style="background-image: linear-gradient(to right,black,red,#646464); ">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel" style="text-align:center;color:white;"></h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" style="color: white;font-size:20px;text-align:center;">
STREAMROOM is basically an online movie streaming platform wherein we can watch, chat & have fun. It is a unique platform because we are provided with remote access and yes! personal controls.
Now What are you waiting for..?
Go to the CREATE ROOM option and watch your favourite movie with friends and family !!!
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="">MOVIES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">PRICING</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">MEMBERS</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<form action="/logout">
<button class="btn btn-outline-dark btn1" type="submit">LOGOUT</button>
</form>
</li>
</ul>
</div>
</nav>
</section>
<div class="middle-container">
<div class="profile">
<h1>Watch Better</h1>
<h2 class="intro1">Watch Together. Watch better</h2>
<h2 class="intro">Watch your favourite movies with family and friends.</h2>
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000">
<img src="images/movies.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="https://thetempest.co/wp-content/uploads/2019/12/Untitled-design-34.png" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-outline-dark btn2" href="">CREATE A ROOM</button>
</div>
</div>
<hr>
<div>
<div class="last"></div>
<h2 class="feathead " > OUR FEATURES </h2>
<section class="about py-5">
<div class="row align-items-center container my-5 mx-auto">
<div class="text col-lg-6 col-md-6 col-12 w-50 pt-5 pb-5">
<h2 class="featlast" >GO CHAT</h2>
<p class="infolast">
Along with watching your favoutite movie
Go and chat with your friends and take this movie experience to another level!!!
</p>
</div>
<div class="img col-lg-6 col-md-6 col-12 w-50 pt-5 pb-5">
<i class="far fa-comments fa-10x ball"></i>
</div>
</div>
</section>
<section
class="discovery py-5" style="background-image: linear-gradient(to right,red,black,black);">
<div class="row align-items-center container my-5 mx-auto">
<div class="img col-lg-6 col-md-6 col-12 w-50 pt-5 pb-5">
<i class="fas fa-play-circle fa-10x ball"></i>
</div>
<div class="text col-lg-6 col-md-6 col-12 w-50 pt-5 pb-5">
<h2 class="feat">PERSONAL CONTROLS</h2>
<p class="info">
Missed something...? Wanna take a break...?
No problem You are provided with personal controls so that you
can watch the movie at your own time and preference !!!
</p>
</div>
</div>
</section>
<div class="last"></div>
<section class="about py-5" >
<div class="row align-items-center container my-5 mx-auto">
<div class="text col-lg-6 col-md-6 col-12 w-50 pt-5 pb-5">
<h2 class="featlast" >REMOTE ACCESS</h2>
<p class="infolast">
Watch your favoutite movie from anywhere at any place and at any time !!!
</p>
</div>
<div class="img col-lg-6 col-md-6 col-12 w-50 pt-5 pb-5">
<i class="fas fa-video fa-10x ball"></i>
</div>
</div>
</section>
<div class="contact-me">
<div class="feathead">
<h2>Get In Touch</h2>
</div>
<h3>To contact us click on the button below.</h3>
<p class="contact-msg"></p>
<button class="btn btn-outline-dark btn1" href="">CONTACT US</button>
</div>
</div>
<footer class="text-center text-white" style="background-color: #706c61">
<div class="container p-4 pb-0">
<section class="mb-0">
<!-- Facebook -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button" style="border-radius: 100%;"><i
class="fab fa-facebook-f"></i></a>
<!-- Instagram -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button" style="border-radius: 100%;"><i
class="fab fa-instagram"></i></a>
<!-- Linkedin -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button" style="border-radius: 100%;"><i
class="fab fa-linkedin-in"></i></a>
<!-- Github -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button" style="border-radius: 100%;"><i
class="fab fa-github"></i></a>
<p class="copyright">© 2021 STREAMROOM</p>
</section>
</div>
</footer>
</body>
</html>