Skip to content

Commit 266e4cd

Browse files
joegeorge022joegeorge022
authored
Feature/add netflix clone v2 (#709)
* Add index.html, styles.css, and images to Netflix Clone v2 * Update README.md to add Netflix Clone v2 section * Update README.md to add Netflix Clone demo section * Add output image of Netflix Clone website and update README.md * Update README.md and add files for Netflix Clone demo * Resolve merge conflict and update README.md with Netflix Clone demo * Add updated Netflix Clone v2 folder with necessary files * Add updated Netflix Clone v2 folder with necessary files
1 parent 2dc114b commit 266e4cd

20 files changed

+195
-0
lines changed

‎NETFLIX CLONE/ASSETS/.DS_Store

6 KB
Binary file not shown.

‎NETFLIX CLONE/ASSETS/VIDEOS/.DS_Store

6 KB
Binary file not shown.

‎.DS_Store renamed to ‎Netflix-Clone-v2/.DS_Store

6 KB
Binary file not shown.

‎Netflix-Clone-v2/Screenshot1.png

8.13 MB
Loading

‎Netflix-Clone-v2/Screenshot2.png

9.24 MB
Loading

‎Netflix-Clone-v2/Screenshot3.png

10 MB
Loading

‎Netflix-Clone-v2/cyberpunk-sound.mp3

10.9 MB
Binary file not shown.

‎Netflix-Clone-v2/images/movie1.jpg

1.03 MB
Loading

‎Netflix-Clone-v2/images/movie2.jpg

454 KB
Loading

‎Netflix-Clone-v2/images/movie3.jpg

263 KB
Loading

‎Netflix-Clone-v2/images/movie4.jpg

576 KB
Loading

‎Netflix-Clone-v2/images/movie5.jpg

966 KB
Loading

‎Netflix-Clone-v2/images/movie6.jpg

1.21 MB
Loading

‎Netflix-Clone-v2/images/movie7.jpg

492 KB
Loading

‎Netflix-Clone-v2/images/movie8.jpg

374 KB
Loading

‎Netflix-Clone-v2/img_main.jpg

1.73 MB
Loading

‎Netflix-Clone-v2/index.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Netflix Clone V2</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
9+
<style>
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
font-family: 'Roboto', sans-serif;
14+
background-image: url('img_main.jpg');
15+
background-size: cover;
16+
background-position: center;
17+
background-repeat: no-repeat;
18+
background-attachment: fixed;
19+
color: white;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
25+
<header class="navbar">
26+
<div class="logo">
27+
<a href="https://joegeorge022.github.io/Netflix-Clone-2/"><img src="netlfix_logo.png" alt="Netflix Logo"></a>
28+
</div>
29+
<div class="menu">
30+
<a href="#content1">Home</a>
31+
<a href="#content1">TV Shows</a>
32+
<a href="#content1">Movies</a>
33+
<a href="#content1">Latest</a>
34+
<a href="#content1">My List</a>
35+
</div>
36+
</header>
37+
38+
<section class="hero">
39+
<div class="hero-content">
40+
<h1>Watch the Best Movies & TV Shows</h1>
41+
<p>Webpage might not look good on a mobile.</p>
42+
<a href="#content1"><button class="cta-btn">Scroll Down</button></a>
43+
</div>
44+
</section>
45+
46+
<section id="content1" class="content-section">
47+
<h2>Popular on Netflix </h2>
48+
<div class="content-grid">
49+
<a href="https://www.youtube.com/watch?v=uLtkt8BonwM" target="_blank"><img src="images/movie1.jpg" alt="Movie 1"></a>
50+
<a href="https://www.youtube.com/watch?v=KvMY1uzSC1E" target="_blank"><img src="images/movie2.jpg" alt="Movie 2"></a>
51+
<a href="https://www.youtube.com/watch?v=KvMY1uzSC1E" target="_blank"><img src="images/movie3.jpg" alt="Movie 3"></a>
52+
<a href="https://www.youtube.com/watch?v=TcMBFSGVi1c" target="_blank"><img src="images/movie4.jpg" alt="Movie 4"></a>
53+
<a href="https://www.youtube.com/watch?v=s8gLcN47EMo" target="_blank"><img src="images/movie5.jpg" alt="Movie 5"></a>
54+
</div>
55+
</section>
56+
57+
<section id="content2" class="content-section">
58+
<h2>Goated Movies in IMDb </h2>
59+
<div class="content-grid">
60+
<a href="https://www.youtube.com/watch?v=zSWdZVtXT7E" target="_blank"><img src="images/movie6.jpg" alt="Movie 6"></a>
61+
<a href="https://www.youtube.com/watch?v=PLl99DlL6b4" target="_blank"><img src="images/movie7.jpg" alt="Movie 7"></a>
62+
<a href="https://www.youtube.com/watch?v=KvMY1uzSC1E" target="_blank"><img src="images/movie3.jpg" alt="Movie 3"></a>
63+
<a href="https://www.youtube.com/watch?v=YoHD9XEInc0" target="_blank"><img src="images/movie8.jpg" alt="Movie 8"></a>
64+
<a href="https://www.youtube.com/watch?v=s8gLcN47EMo" target="_blank"><img src="images/movie5.jpg" alt="Movie 5"></a>
65+
</div>
66+
</section>
67+
68+
<section id="content3" class="content-section">
69+
<h2>Most Loved Movies </h2>
70+
<div class="content-grid">
71+
<a href="https://www.youtube.com/watch?v=YoHD9XEInc0" target="_blank"><img src="images/movie8.jpg" alt="Movie 8"></a>
72+
<a href="https://www.youtube.com/watch?v=TcMBFSGVi1c" target="_blank"><img src="images/movie4.jpg" alt="Movie 4"></a>
73+
<a href="https://www.youtube.com/watch?v=s8gLcN47EMo" target="_blank"><img src="images/movie5.jpg" alt="Movie 5"></a>
74+
<a href="https://www.youtube.com/watch?v=PLl99DlL6b4" target="_blank"><img src="images/movie7.jpg" alt="Movie 7"></a>
75+
<a href="https://www.youtube.com/watch?v=zSWdZVtXT7E" target="_blank"><img src="images/movie6.jpg" alt="Movie 6"></a>
76+
</div>
77+
</section>
78+
79+
<footer class="footer">
80+
<p>© 2024 Netflix Clone - All rights reserved</p>
81+
</footer>
82+
83+
<audio autoplay loop>
84+
<source src="cyberpunk-sound.mp3" type="audio/mpeg">
85+
Your browser does not support the audio tag.
86+
</audio>
87+
88+
</body>
89+
</html>

‎Netflix-Clone-v2/netlfix_logo.png

23.7 KB
Loading

‎Netflix-Clone-v2/styles.css

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Roboto', sans-serif;
9+
background-color: #141414;
10+
color: #fff;
11+
}
12+
13+
.navbar {
14+
display: flex;
15+
justify-content: space-between;
16+
align-items: center;
17+
padding: 20px;
18+
position: relative;
19+
}
20+
21+
.navbar .logo {
22+
position: relative;
23+
top: 20px;
24+
left: 20px;
25+
}
26+
27+
28+
.navbar .logo img {
29+
width: 120px;
30+
}
31+
32+
.navbar .menu a {
33+
color: #fff;
34+
margin-left: 20px;
35+
text-decoration: none;
36+
font-size: 18px;
37+
}
38+
39+
.hero {
40+
height: 90vh;
41+
background-image: url('hero-image.jpg');
42+
background-size: cover;
43+
background-position: center;
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
text-align: center;
48+
}
49+
50+
.hero-content h1 {
51+
font-size: 50px;
52+
margin-bottom: 20px;
53+
}
54+
55+
.hero-content p {
56+
font-size: 20px;
57+
margin-bottom: 30px;
58+
}
59+
60+
.cta-btn {
61+
background-color: #e50914;
62+
color: #fff;
63+
border: none;
64+
padding: 15px 30px;
65+
font-size: 20px;
66+
cursor: pointer;
67+
}
68+
69+
.content-section {
70+
padding: 50px 20px;
71+
}
72+
73+
.content-section h2 {
74+
margin-bottom: 20px;
75+
font-size: 28px;
76+
}
77+
78+
.content-grid {
79+
display: grid;
80+
grid-template-columns: repeat(5, 1fr);
81+
gap: 20px;
82+
}
83+
84+
.content-grid img {
85+
width: 100%;
86+
height: auto;
87+
border-radius: 5px;
88+
}
89+
90+
.footer {
91+
text-align: center;
92+
padding: 20px;
93+
color: #fff;
94+
font-size: 14px;
95+
}

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
7373
- [NavBar](#navbar)
7474
- [Neon Button](#neon-button)
7575
- [Neon Card](#neon-card)
76+
- [Netlix Clone v2](#Netflix-Clone-v2)
7677
- [Neumorphism Card Design](#neumorphism-card-design)
7778
- [Parallax Scrolling](#parallax-scrolling)
7879
- [Pendulum](#pendulum)
@@ -595,6 +596,16 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
595596

596597
---
597598

599+
## <a id="Netflix-Clone-v2"></a>Netflix Clone Demo
600+
601+
[<img src="Netflix Clone v2/Screenshot1.png" height="230" title="Demo 1">](http://url-to-page)
602+
[<img src="Netflix Clone v2/Screenshot2.png" height="230" title="Demo 2">](http://url-to-page)
603+
[<img src="Netflix Clone v2/Screenshot3.png" height="230" title="Demo 3">](http://url-to-page)
604+
605+
**[⬆ back to top](#quick-links)**
606+
607+
---
608+
598609
## <a id="shake-button"></a>Shake Button
599610

600611
[<img src="images/shake-button.gif" height="230" title="Demo">](https://codepen.io/krushnarout/pen/zYyLEmM)

0 commit comments

Comments
 (0)