Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29
KingNish smolSWE commited on
Commit
58cac9f
·
verified ·
1 Parent(s): 1cf9796

SmolSWE text (#11)

Browse files

- SmolSWE text (fc48debb2ce544484eac4f58507ce370c991d3cf)


Co-authored-by: smolSWE Bot <smolSWE@users.noreply.huggingface.co>

Files changed (3) hide show
  1. index.html +5 -20
  2. script.js +24 -0
  3. style.css +27 -0
index.html CHANGED
@@ -5,9 +5,13 @@
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Netflix Clone</title>
 
8
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
10
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 
 
 
11
  <link rel="stylesheet" href="style.css">
12
  </head>
13
  <body class="font-sans bg-black text-white">
@@ -70,24 +74,5 @@
70
  </footer>
71
 
72
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
73
- <script src="script.js"></script>
74
- <script>
75
- const movies = [
76
- { imageUrl: 'https://picsum.photos/200/300', altText: 'Movie 1' },
77
- { imageUrl: 'https://picsum.photos/201/300', altText: 'Movie 2' },
78
- { imageUrl: 'https://picsum.photos/202/300', altText: 'Movie 3' },
79
- { imageUrl: 'https://picsum.photos/203/300', altText: 'Movie 4' },
80
- { imageUrl: 'https://picsum.photos/204/300', altText: 'Movie 5' },
81
- { imageUrl: 'https://picsum.photos/205/300', altText: 'Movie 6' },
82
- ];
83
-
84
- const swiperMoviesContainer = document.getElementById('swiper-movies');
85
- const gridMoviesContainer = document.getElementById('grid-movies');
86
-
87
- movies.forEach(movie => {
88
- swiperMoviesContainer.innerHTML += createMovieCard(movie.imageUrl, movie.altText);
89
- gridMoviesContainer.innerHTML += `<div class="animate__animated animate__fadeInUp"><img src="${movie.imageUrl}" alt="${movie.altText}" class="w-full h-auto hover:scale-105 transition-transform duration-200"></div>`;
90
- });
91
- </script>
92
- </body>
93
  </html>
 
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Netflix Clone</title>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
9
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
10
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
11
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
15
  <link rel="stylesheet" href="style.css">
16
  </head>
17
  <body class="font-sans bg-black text-white">
 
74
  </footer>
75
 
76
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
77
+ <script src="script.js"></script></body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  </html>
script.js CHANGED
@@ -19,3 +19,27 @@ function createMovieCard(imageUrl, altText) {
19
  </div>
20
  `;
21
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </div>
20
  `;
21
  }
22
+
23
+ window.addEventListener('load', () => {
24
+ gsap.fromTo('.fade-in', { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1, stagger: 0.3 });
25
+ });
26
+
27
+ const movies = [
28
+ { imageUrl: 'https://picsum.photos/200/300', altText: 'Movie 1' },
29
+ { imageUrl: 'https://picsum.photos/201/300', altText: 'Movie 2' },
30
+ { imageUrl: 'https://picsum.photos/202/300', altText: 'Movie 3' },
31
+ { imageUrl: 'https://picsum.photos/203/300', altText: 'Movie 4' },
32
+ { imageUrl: 'https://picsum.photos/204/300', altText: 'Movie 5' },
33
+ { imageUrl: 'https://picsum.photos/205/300', altText: 'Movie 6' },
34
+ ];
35
+
36
+ const swiperMoviesContainer = document.getElementById('swiper-movies');
37
+ const gridMoviesContainer = document.getElementById('grid-movies');
38
+
39
+ movies.forEach((movie, index) => {
40
+ swiperMoviesContainer.innerHTML += createMovieCard(movie.imageUrl, movie.altText);
41
+ const gridItem = document.createElement('div');
42
+ gridItem.innerHTML = `<img src="${movie.imageUrl}" alt="${movie.altText}" class="w-full h-auto hover:scale-105 transition-transform duration-200">`;
43
+ gridMoviesContainer.appendChild(gridItem);
44
+ gsap.fromTo(gridItem, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.5, delay: index * 0.1 });
45
+ });
style.css CHANGED
@@ -2,3 +2,30 @@
2
  @tailwind base;
3
  @tailwind components;
4
  @tailwind utilities;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  @tailwind base;
3
  @tailwind components;
4
  @tailwind utilities;
5
+
6
+ body {
7
+ font-family: 'Roboto', sans-serif;
8
+ }
9
+
10
+ header {
11
+ background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
12
+ padding: 1rem 0;
13
+ }
14
+
15
+ footer {
16
+ background: linear-gradient(to right, #222, #000);
17
+ padding: 2rem 0;
18
+ }
19
+
20
+ .swiper-container {
21
+ width: 100%;
22
+ padding-top: 50px;
23
+ padding-bottom: 50px;
24
+ }
25
+
26
+ .swiper-slide {
27
+ background-position: center;
28
+ background-size: cover;
29
+ width: 300px;
30
+ height: 300px;
31
+ }