halitbatur · rokayaamjaad · Nov 8, 2022 · Nov 12, 2022 · Nov 12, 2022 · Nov 12, 2022
diff --git a/README.md b/README.md
@@ -61,6 +61,7 @@ Add a universal footer that includes:
 - Add the rating and genres to the movies in the home page and a description
   when you hover over one of them
 
+
 ## Single Movie Page
 
 We build part of the single movie page for you, but the information isn't

diff --git a/images/1.png b/images/1.png
diff --git a/images/11.png b/images/11.png
diff --git a/images/2.png b/images/2.png
diff --git a/images/3.png b/images/3.png
diff --git a/images/4.png b/images/4.png
diff --git a/images/aboutmain.jpg b/images/aboutmain.jpg
diff --git a/images/joker1.png b/images/joker1.png
diff --git a/images/joker2.jpg b/images/joker2.jpg
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/thehobbit1.jpg b/images/thehobbit1.jpg
diff --git a/images/thehobbit2.jpg b/images/thehobbit2.jpg
diff --git a/images/traingle1.png b/images/traingle1.png
diff --git a/images/traingle2.png b/images/traingle2.png
diff --git a/images/traingle3.png b/images/traingle3.png
diff --git a/images/traingle4.png b/images/traingle4.png
diff --git a/index.html b/index.html
@@ -1,18 +1,118 @@
 <!DOCTYPE html>
-<html>
+<html lang="ar">
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <link rel="stylesheet" href="style.css">
-    <title>Movie</title>
+    <link rel="stylesheet" href="mainslider.css">
+    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
+    <script src="https://kit.fontawesome.com/1b2ca39d1b.js" crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>MOVIES</title>
 </head>
 
-<body>
-    <div class="container">
+
+<body class="bg-black">
+
+<div class="aboutdescreption-bage">
+<p class="moviesparaghrap  mt-3  text-center text-5xl text-white ">WHO WE ARE?</p>
+  <div class="flex mt-20 ml-10">
+
+    <div class="mainmovie-div flex flex-col gap-24  bg-black ml-24 ">
+      <div class="">
+        <p class="moviesparaghrap  mt-3  text-center text-5xl text-red-900 ">Popcorn Store</p>
+      </div>
+      <div class="">
+        <p class="moviesparaghrap2 font-bold center text-center text-lg text-white ">Popcorn Store is a place where it is okay to judge a good movie or a series just kidding but do not say anything bad about the office  here we can give good suggestions about which movie to watch tonight,made with love by Rokaya UI Master Rozhiar the JS wizard and Wafa the Design Lord.</p>
+      </div>
+
     </div>
-    <script type="text/javascript" src="script.js"></script>
+
+  <div class="red-circle w-9 h-9 bg-red-900 mr-32  mt-3 rounded-full "></div>
+  <div class="line-1 rounded absolute "></div>
+
+  <div class="mainmovie-div  bg-no-repeat bg-cover bg-center " >
+     <div class="about-triangle1 z-50  absolute"></div>
+     <div class="about-triangle2 z-50   absolute"></div>
+     </div>
+
+
+
+    </div>
+  </div>
+
+  <div class="jokermovie flex justify-center mt-52 ">
+            <div class="triangle-right1 mt-40 z-50  absolute"></div>
+            <a class="triangle-right2 mt-36 z-50  absolute" target="_blank" href="https://www.youtube.com/watch?v=zAGVQLHvwOY"></a>
+            <div class="triangle-bottomleft  mt-72 z-50  absolute"></div>
+            <div class="hobbittriangle-topright  -mt-8  z-50  absolute"></div>
+            <div class="w-auto h-80 ">
+                <div class="flex flex-col  justify-center absolute">
+                    <p class="thehobbit-text ml-3  mt-3 z-50   bg-no-repeat bg-cover bg-center " >THE<br> HOBBIT</p>
+                </div>
+
+                <div class="w-80 h-96 bg-white opacity-30 absolute ">
+                </div>
+                <img class="object-cover w-80 h-96 " src="./images/thehobbit2.jpg" alt="">
+            </div>
+
+            <div class="w-auto h-80 bg-red-500">
+                <img class="object-cover h-96 " style="width:650px" src="./images/thehobbit1.jpg" alt="">
+            </div>
+
+        </div>
+
+        <div class="w-full h-auto  mt-72">
+<img class="object-cover w-full h-96 " src="./images/11.png" alt="">
+<p class="moviesparaghrap   -mt-80  absolute z-50 text-center text-6xl text-white " style="margin-left:500px;">RECENT MOVIES</p>
+<div class="absolute -mt-48">
+  <img class="bg-cover  " src="./images/traingle3.png" alt="">
+  <img class="bg-cover -mt-56" src="./images/traingle4.png" alt="">
+</div>
+
+<div class="grid grid-cols-3 gap-10  ml-10 mr-10  -mt-24">
+  <div class="container h-96 bg-gray-300 bg-no-repeat bg-cover bg-center" >
+   <div class="triangle-right  z-50  absolute"></div>
+   <div id="triangle-topright" class="ml-1.5 z-50  absolute"></div>
+   <div class="overlay">
+     <div class="movieheader-text text-4xl"></div>
+     <p class="moviegener-style text-lg text-white mt-64 ml-5  "></p>
+     <div class="star-icon flex mt-5 ml-5 text-white text-5xl"></div>
+   </div>
+   </div>
+
+
+   <div class="container h-96 bg-gray-300 bg-no-repeat bg-cover bg-center" >
+
+   <div class="overlay">
+     <div class="movieheader-text text-4xl"></div>
+     <p class="moviegener-style text-lg text-white mt-64 ml-5  "></p>
+     <div class="star-icon flex mt-5 ml-5 text-white text-5xl"></div>
+   </div>
+   </div>
+
+   <div class="container h-96 bg-gray-300 bg-no-repeat bg-cover bg-center" >
+   <div class="triangle-left z-50  absolute"></div>
+   <div class="overlay">
+     <div class="movieheader-text text-4xl"></div>
+     <p class="moviegener-style text-lg text-white mt-64 ml-5  "></p>
+     <div class="star-icon flex mt-5 ml-5 text-white text-5xl"></div>
+   </div>
+   </div>
+
+</div>
+        </div>
+
+
+    <script src="script.js"></script>
 </body>
 
 </html>
diff --git a/mainslider.css b/mainslider.css
@@ -0,0 +1,149 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  color: #444;
+  font-family: 'Roboto', sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.slider {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row nowrap;
+      -ms-flex-flow: row nowrap;
+          flex-flow: row nowrap;
+  -webkit-box-align: end;
+  -webkit-align-items: flex-end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.slider__nav {
+  width: 6px;
+  height: 50px;
+  margin: 2rem 12px;
+  transform: rotate(20deg);
+  border-radius: 34%;
+  z-index: 10;
+  outline: 3px solid #ccc;
+  outline-offset: -6px;
+  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.slider__nav:checked {
+  -webkit-animation: check 0.4s linear forwards;
+          animation: check 0.4s linear forwards;
+}
+.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
+  left: 0%;
+}
+.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
+  left: -100%;
+}
+.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
+  left: -200%;
+}
+.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
+  left: -300%;
+}
+.slider__inner {
+  position: absolute;
+
+  top: 0;
+  left: 0;
+  width: 400%;
+  height: 100%;
+  -webkit-transition: left 0.4s;
+  transition: left 0.4s;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row nowrap;
+      -ms-flex-flow: row nowrap;
+          flex-flow: row nowrap;
+}
+.slider__contents {
+  height: 100%;
+  padding: 2rem;
+  text-align: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  -webkit-flex-flow: column nowrap;
+      -ms-flex-flow: column nowrap;
+          flex-flow: column nowrap;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.slider__image {
+  font-size: 2.7rem;
+      color: #2196F3;
+}
+.slider__caption {
+  font-weight: 500;
+  margin: 2rem 0 1rem;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  text-transform: uppercase;
+}
+.slider__txt {
+  color: #999;
+  margin-bottom: 3rem;
+  max-width: 300px;
+}
+
+@-webkit-keyframes check {
+  50% {
+    outline-color: #333;
+    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
+  }
+  100% {
+    outline-color: #333;
+    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
+  }
+}
+
+@keyframes check {
+  50% {
+    outline-color: #BC1B1B;
+    box-shadow: 0 0 0 12px #860808, 0 0 0 36px rgba(51, 51, 51, 0.2);
+  }
+  100% {
+    outline-color: #BC1B1B;
+    box-shadow: 0 0 0 0 #860808, 0 0 0 0 rgba(51, 51, 51, 0);
+  }
+}