Technigo · Sherrydev11 · Sep 19, 2024 · Sep 21, 2024 · Sep 22, 2024 · Sep 29, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/books-images/1984.jpg b/books-images/1984.jpg
diff --git a/books-images/harry-potter-and-the-sorcerer.jpg b/books-images/harry-potter-and-the-sorcerer.jpg
diff --git a/books-images/moby-dick.jpg b/books-images/moby-dick.jpg
diff --git a/books-images/pride-and-prejudice.jpg b/books-images/pride-and-prejudice.jpg
diff --git a/books-images/the-chronicles-of-narnia.jpg b/books-images/the-chronicles-of-narnia.jpg
diff --git a/books-images/the-great-gatsby.jpg b/books-images/the-great-gatsby.jpg
diff --git a/books-images/the-hobbit.jpg b/books-images/the-hobbit.jpg
diff --git a/books-images/the-lord-of-the-rings.jpg b/books-images/the-lord-of-the-rings.jpg
diff --git a/books-images/to-kill-a-mockingbird.jpg b/books-images/to-kill-a-mockingbird.jpg
diff --git a/books-images/unknown.jpg b/books-images/unknown.jpg
diff --git a/index.html b/index.html
@@ -1,13 +1,162 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
   <!-- Don't forget to change the title and connect the CSS file -->
-  <title>Project Library</title>
+  <title>Rent a movie</title>
 </head>
+
 <body>
-  <h1>Project Library</h1>
-  <!-- Don't forget to connect the JavaScript file -->
+
+  <div class="hero">
+    <div class="hero-h1">
+      <h1>FilmNest</h1>
+    </div>
+
+  </div>
+
+  <div class="filter" id="filter-button">
+    <p>Filter by genre
+      <button id="sci-fi">Sci-Fi</button>
+      <button id="horror">Horror</button>
+      <button id="comedy">Comedy</button>
+      <button id="romance">Romance</button>
+    </p>
+  </div>
+
+  <div class="sort" id="filter-button">
+    <p> Sort by year
+      <button id="sort-new-to-old">Sort New to Old</button>
+      <button id="sort-old-to-new">Sort Old to New</button>
+
+    </p>
+  </div>
+
+
+
+  <section id="movies-section">
+    <!-- Movie Inception -->
+    <article>
+      <img src="./movie-images/inception-movie.jpg" alt="Inception" />
+      <div class="card-content">
+        <h2>Inception</h2>
+        <p><strong>Director:</strong> Christopher Nolan | <strong>Year:</strong> 2010</p>
+        <p><strong>Genre:</strong> Sci-Fi</p>
+        <p class="description">A mind-bending exploration of dreams within dreams, directed by Christopher Nolan.</p>
+      </div>
+    </article>
+
+    <!-- Movie Get Out -->
+    <article>
+      <img src="./movie-images/get-out-movie.jpeg" alt="Get Out">
+      <div class="card-content">
+        <h2>Get Out</h2>
+        <p><strong>Director:</strong> Jordan Peele | <strong>Year:</strong> 2017</p>
+        <p><strong>Genre:</strong> Horror</p>
+        <p class="description">A social horror film that blends suspense with sharp commentary on race and society.
+        </p>
+      </div>
+    </article>
+
+    <!-- Movie Back To Future -->
+    <article>
+      <img src="./movie-images/back-to-future.jpg" alt="Back to the Future">
+      <div class="card-content">
+        <h2>Back to the Future</h2>
+        <p><strong>Director:</strong> Robert Zemeckis | <strong>Year:</strong> 1985</p>
+        <p><strong>Genre:</strong> Sci-Fi</p>
+        <p class="description">A classic time-travel adventure with humor, starring Michael J. Fox.</p>
+      </div>
+    </article>
+
+    <!-- Movie The Exorcist -->
+    <article>
+      <img src="./movie-images/the-exorcist.jpg" alt="The Exorcist">
+      <div class="card-content">
+        <h2>The Exorcist</h2>
+        <p><strong>Director:</strong> William Friedkin | <strong>Year:</strong> 1973</p>
+        <p><strong>Genre:</strong> Horror</p>
+        <p class="description">One of the scariest films of all time, revolving around demonic possession.</p>
+      </div>
+    </article>
+
+    <!-- Movie The Hangover -->
+    <article>
+      <img src="./movie-images/the-hangover.jpeg" alt="The Hangover">
+      <div class="card-content">
+        <h2>The Hangover</h2>
+        <p><strong>Director:</strong> Todd Phillips | <strong>Year:</strong> 2009</p>
+        <p><strong>Genre:</strong> Comedy</p>
+        <p class="description">A hilarious tale of a wild night gone wrong, featuring unforgettable misadventures.</p>
+      </div>
+    </article>
+
+    <!-- Movie Matrix -->
+    <article>
+      <img src="./movie-images/matrix.jpg" alt="The Matrix">
+      <div class="card-content">
+        <h2>The Matrix</h2>
+        <p><strong>Directors:</strong> Lana Wachowski, Lilly Wachowski | <strong>Year:</strong> 1999</p>
+        <p><strong>Genre:</strong> Sci-Fi</p>
+        <p class="description">A groundbreaking sci-fi action film about reality, artificial intelligence, and
+          rebellion.</p>
+      </div>
+    </article>
+
+    <!-- Movie Shaun of the Dead -->
+    <article>
+      <img src="./movie-images/shaun-of-the-dead.jpg" alt="Shaun of the Dead">
+      <div class="card-content">
+        <h2>Shaun of the Dead</h2>
+        <p><strong>Director:</strong> Edgar Wright | <strong>Year:</strong> 2004</p>
+        <p><strong>Genre:</strong> Horror, Comedy</p>
+        <p class="description">A man's uneventful life takes a turn when he has to lead his friends and family through
+          a
+          zombie apocalypse.</p>
+      </div>
+    </article>
+
+    <!-- Movie A Quiet Place -->
+    <article>
+      <img src="./movie-images/a-quiet-place.jpg" alt="A Quiet Place">
+      <div class="card-content">
+        <h2>A Quiet Place</h2>
+        <p><strong>Director:</strong> John Krasinski | <strong>Year:</strong> 2018</p>
+        <p><strong>Genre:</strong> Horror, Sci-Fi, Thriller</p>
+        <p class="description">A tense, almost silent thriller about surviving in a world where making noise can be
+          deadly.</p>
+      </div>
+    </article>
+
+    <!-- Movie Guardians of the Galaxy -->
+    <article>
+      <img src="./movie-images/guardian-of-galaxy.jpg" alt="Guardians of the Galaxy">
+      <div class="card-content">
+        <h2>Guardians of the Galaxy</h2>
+        <p><strong>Director:</strong> James Gunn | <strong>Year:</strong> 2014</p>
+        <p><strong>Genre:</strong> Sci-Fi, Action, Comedy</p>
+        <p class="description">A fun-filled space adventure with a quirky band of misfits saving the universe.</p>
+      </div>
+    </article>
+
+    <!-- Movie Her -->
+    <article>
+      <img src="./movie-images/her.jpeg" alt="Her">
+      <div class="card-content">
+        <h2>Her</h2>
+        <p><strong>Director:</strong> Spike Jonze | <strong>Year:</strong> 2013</p>
+        <p><strong>Genre:</strong> Sci-Fi, Romance</p>
+        <p class="description">A futuristic love story between a man and an artificial intelligence operating system.
+        </p>
+      </div>
+    </article>
+  </section>
+
+  <script src="script.js"></script>
+
 </body>
+
 </html>
diff --git a/movie-images/.DS_Store b/movie-images/.DS_Store
diff --git a/movie-images/a-quiet-place.jpg b/movie-images/a-quiet-place.jpg
diff --git a/movie-images/back-to-future.jpg b/movie-images/back-to-future.jpg
diff --git a/movie-images/get-out-movie.jpeg b/movie-images/get-out-movie.jpeg
diff --git a/movie-images/guardian-of-galaxy.jpg b/movie-images/guardian-of-galaxy.jpg
diff --git a/movie-images/her.jpeg b/movie-images/her.jpeg
diff --git a/movie-images/inception-movie.jpg b/movie-images/inception-movie.jpg
diff --git a/movie-images/matrix.jpg b/movie-images/matrix.jpg
diff --git a/movie-images/movie image.webp b/movie-images/movie image.webp
diff --git a/movie-images/shaun-of-the-dead.jpg b/movie-images/shaun-of-the-dead.jpg
diff --git a/movie-images/the-exorcist.jpg b/movie-images/the-exorcist.jpg
diff --git a/movie-images/the-hangover.jpeg b/movie-images/the-hangover.jpeg
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -4,4 +4,4 @@ PS. Don't forget to add it in your readme as well.
 
 ## Collaborators
 Add your collaborators here. Write their GitHub usernames in square brackets. If there's more than one, separate them with a comma, like this:
-[github-username-1, github-username-2]
+[github-username-1](https://github.com/smily342), [https://github.com/Heleneabrahamsson]
diff --git a/recipe-images/baked-chicken.jpg b/recipe-images/baked-chicken.jpg
diff --git a/recipe-images/cheat’s-cheesy-focaccia.jpg b/recipe-images/cheat’s-cheesy-focaccia.jpg
diff --git a/recipe-images/chicken-paprikash.jpg b/recipe-images/chicken-paprikash.jpg
diff --git a/recipe-images/deep-fried-fish-bones.jpg b/recipe-images/deep-fried-fish-bones.jpg
diff --git a/recipe-images/fish-dish.jpg b/recipe-images/fish-dish.jpg
diff --git a/recipe-images/grilled.jpg b/recipe-images/grilled.jpg
diff --git a/recipe-images/individual-vegetarian-lasagnes.jpg b/recipe-images/individual-vegetarian-lasagnes.jpg
diff --git a/recipe-images/meat.jpg b/recipe-images/meat.jpg
diff --git a/recipe-images/vegetarian-shepherd's-pie.jpg b/recipe-images/vegetarian-shepherd's-pie.jpg
diff --git a/recipe-images/vegetarian-stir-fried-garlic-s.jpg b/recipe-images/vegetarian-stir-fried-garlic-s.jpg