InventorsDev · lucky4242 · May 24, 2023 · May 24, 2023 · May 24, 2023
diff --git a/SOLUTIONREADME b/SOLUTIONREADME
@@ -0,0 +1,3 @@
+name: opuama lucky
+Here is the link to my work https://github.com/lucky4242/inventors
+ i could not finish it because of the limited time 
diff --git a/fonts/Satoshi-Variable.ttf b/fonts/Satoshi-Variable.ttf
diff --git a/fonts/scream.ttf b/fonts/scream.ttf
diff --git a/fonts/ubuntu.ttf b/fonts/ubuntu.ttf
diff --git a/image/cinema.jpg b/image/cinema.jpg
diff --git a/image/img.jpg b/image/img.jpg
diff --git a/image/inventors.PNG b/image/inventors.PNG
diff --git a/image/man.jpg b/image/man.jpg
diff --git a/image/photo.jpg b/image/photo.jpg
diff --git a/image/road.jpg b/image/road.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,32 @@
+@font-face {
+  font-family: myfont;
+  src: url(fonts/scream.ttf);
+}
+@font-face {
+  font-family: font;
+  src: url(fonts/ubuntu.ttf);
+}
+@font-face {
+  font-family: fonts;
+  src: url(fonts/satoshi.ttf);
+}
+* {
+  padding: 0px;
+  margin: 0px;
+}
+body {
+  width: 100%;
+  height: 100vh;
+  font-family: fonts;
+  background-image: url("image/photo.jpg");
+}
+nav {
+  display: flex;
+  /* justify-content: space-around; */
+  align-items: center;
+  position: absolute;
+  width: 1605.72px;
+  height: 188px;
+  left: calc(50% - 1605.72px / 2);
+  top: -20px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,174 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <!-- <div class="allmovies"> -->
+    <nav>
+      <div id="log">
+        <a href="#" class="logo">
+          <img src="image/inventors.PNG" />
+        </a>
+        <h2>inventors</h2>
+      </div>
+      <ul class="menu">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Discover</a></li>
+        <li><a href="#">Watchlist</a></li>
+        <li><a href="#">LiveTv</a></li>
+      </ul>
+      <div class="top">
+        <div class="search">
+          <input
+            type="text"
+            id="searc-item"
+            placeholder="search"
+            onkeyup="search()"
+          />
+          <i class="fa fa-search" aria-hidden="true"></i>
+        </div>
+        <a href="#" class="logo">
+          <img src="image/img.jpg" />
+        </a>
+      </div>
+    </nav>
+
+    <main class="main">
+      <div class="movie">
+        <div class="msg">
+          <!-- <h1 class="title">
+            <bold>Screa<span>m</span></bold>
+          </h1>
+          <h6 class="data">2023 2h 2m + cc + 4k</h6>
+          <div class="play">
+            <i class="fa fa-play-circle" aria-hidden="true"></i>
+            <input type="submit" value="play" />
+            <i id="plus" class="fa fa-plus" aria-hidden="true"></i>
+          </div>
+          <p class="des">
+            <small
+              >Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+              Inventore explicabo numquam.</small
+            >
+          </p>
+          <h5 class="txt">Honour. Mystery. Thriller</h5>
+          <div class="down">
+            <a href="#"><h6>scroll</h6></a>
+
+            <i class="fa fa-angle-double-down" aria-hidden="true"></i> -->
+        </div>
+      </div>
+      <div class="view">
+        <h4 class="trend">Trending</h4>
+        <div class="all">
+          <a href="#">View all</a>
+
+          <i class="fa fa-angle-left" aria-hidden="true"></i>
+          <i class="fa fa-angle-right" aria-hidden="true"></i>
+        </div>
+        <!-- </div> -->
+      </div>
+    </main>
+    <div class="container">
+      <div class="middle">
+        <!-- <div class="film">
+          <i id="plus" class="fa fa-plus" aria-hidden="true"></i>
+          <img src="image/man.jpg" alt="image" />
+        </div>
+        <div class="film">
+          <i id="plus" class="fa fa-plus" aria-hidden="true"></i>
+          <img src="image/man.jpg" alt="image" />
+        </div>
+        <div class="film">
+          <i id="plus" class="fa fa-plus" aria-hidden="true"></i>
+          <img src="image/man.jpg" alt="image" />
+        </div>
+        <div class="film">
+          <i id="plus" class="fa fa-plus" aria-hidden="true"></i>
+          <img src="image/man.jpg" alt="image" />
+        </div>
+        <div class="film">
+          <i id="plus" class="fa fa-plus" aria-hidden="true"></i>
+          <img src="image/man.jpg" alt="image" />
+        </div> -->
+      </div>
+
+      <div class="view" id="next">
+        <div class="w">
+          <h4 class="trend">Binge-worthy series</h4>
+        </div>
+        <div id="all">
+          <a href="#">View all</a>
+          <i class="fa fa-angle-left" aria-hidden="true"></i>
+          <i class="fa fa-angle-right" aria-hidden="true"></i>
+        </div>
+      </div>
+      <div class="movies-list">
+        <!-- <div class="movie-list"> -->
+        <!-- <div class="movies">
+        <img src="image/road.jpg" />
+        <div class="movie-info">
+          <h3>Movie Title <span>2020</span></h3>
+          <span class="period">9.8</span>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil,
+            culpa!
+          </p>
+          <div class="play">
+            <i class="fa fa-play-circle" aria-hidden="true"></i>
+            <input type="submit" value="play" />
+            <i id="arrow" class="fa fa-arrow-down" aria-hidden="true"></i>
+          </div>
+        </div>
+      </div> -->
+        <!-- <div class="movies">
+          <img src="image/road.jpg" />
+          <div class="movie-info">
+            <h3>Movie Title <span>2020</span></h3>
+            <span class="period">9.8</span>
+
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil,
+              culpa!
+            </p>
+            <div class="play">
+              <i class="fa fa-play-circle" aria-hidden="true"></i>
+              <input type="submit" value="play" />
+              <i id="arrow" class="fa fa-arrow-down" aria-hidden="true"></i>
+            </div>
+          </div>
+        </div>
+        <div class="movies">
+          <img src="image/road.jpg" />
+          <div class="movie-info">
+            <h3>Movie Title <span>2020</span></h3>
+            <span class="period">9.8</span>
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil,
+              culpa!
+            </p>
+            <div class="play">
+              <i class="fa fa-play-circle" aria-hidden="true"></i>
+              <input type="submit" value="play" />
+              <i id="arrow" class="fa fa-arrow-down" aria-hidden="true"></i>
+            </div>
+          </div>
+        </div> -->
+      </div>
+    </div>
+    <!-- </div> -->
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,78 @@
+const imgUrl = "https://image.tmdb.org/t/p/w500";
+
+fetch(
+  "https://api.themoviedb.org/3/movie/popular?api_key=70c9b853811aa8a0655ce96ab13cb6b3"
+)
+  .then((res) => {
+    return res.json();
+  })
+  .then((data) => {
+    console.log(data.results);
+    const containerPath = document.querySelector(".middle");
+    const moviePath = document.querySelector(".movies-list");
+    const bodymsg = document.querySelector(".msg");
+    // document.querySelector("body").style.backgroundImage = url(
+    //   "${imgUrl + data.results[15].poster_path}"
+    // );
+
+    for (let i = 0; i < 1; i++) {
+      const mgs = `
+     <h1 class="title">
+     <bold>${data.results[15].original_title}</bold>
+   </h1>
+   <h6 class="data">2023 2h 2m + cc + 4k</h6>
+   <div class="play">
+     <i class="fa fa-play-circle" aria-hidden="true"></i>
+     <input type="submit" value="play" />
+     <i id="plus" class="fa fa-plus" aria-hidden="true"></i>
+   </div>
+   <p class="des">
+     <small
+       >${data.results[15].overview}</small
+     >
+   </p>
+   <h5 class="txt">Honour. Mystery. Thriller</h5>
+   <div class="down">
+     <a href="#"><h6>scroll</h6></a>
+
+     <i class="fa fa-angle-double-down" aria-hidden="true"></i>
+   </div>`;
+      bodymsg.innerHTML += mgs;
+    }
+    for (let i = 0; i < 5; i++) {
+      const movieMarkup = `
+      <div class="film">
+            <i id="plus" class="fa fa-plus" aria-hidden="true"></i>
+            <img src="${imgUrl + data.results[i].poster_path}" alt="image" />
+          </div>
+      `;
+      containerPath.innerHTML += movieMarkup;
+    }
+    for (let i = 0; i < 2; i++) {
+      const trendMorvies = `
+      <div class ="movies">
+
+      <img src="${imgUrl + data.results[i].poster_path}" />
+      <div class="movie-info">
+        <h3>${data.results[i].original_title} <span>${
+        data.results[i].genre_ids
+      }</span></h3>
+        <span class="period">${data.results[i].popularity}</span>
+
+        <p>
+          ${data.results[i].overview}
+        </p>
+        <div class="play">
+          <i class="fa fa-play-circle" aria-hidden="true"></i>
+          <input type="submit" value="play" />
+          <i id="arrow" class="fa fa-arrow-down" aria-hidden="true"></i>
+        </div>
+        </div>
+      `;
+      moviePath.innerHTML += trendMorvies;
+    }
+  })
+  .catch((err) => console.log(err));
+const search = () => {
+  const searchBox = document.getElementById("search-item").value.toUppercase();
+};