commit all project

shaimaa4739 · Jun 6, 2022 · 5ca6f47 · 5ca6f47
commit 5ca6f47
Show file tree

Hide file tree

Showing 299 changed files with 97,650 additions and 0 deletions.
diff --git a/Images/Mov.jpg b/Images/Mov.jpg
diff --git a/Images/Paw.jpg b/Images/Paw.jpg
diff --git a/Images/back.jpg b/Images/back.jpg
diff --git a/Images/go.jpg b/Images/go.jpg
diff --git a/Images/gofree.jpg b/Images/gofree.jpg
diff --git a/Images/lo.jpg b/Images/lo.jpg
diff --git a/Images/mo.jpg b/Images/mo.jpg
diff --git a/Images/rrr.jfif b/Images/rrr.jfif
diff --git a/Images/ryan.jpg b/Images/ryan.jpg
diff --git a/Images/ryan1.jpg b/Images/ryan1.jpg
diff --git a/Images/seee.jpg b/Images/seee.jpg
diff --git a/Images/she.jpg b/Images/she.jpg
diff --git a/css/gofree.css b/css/gofree.css
@@ -0,0 +1,62 @@
+.movie{
+    background-color: var(--dark-color);
+
+}
+.movie .cov {
+    margin: 30px;
+    background-repeat: no-repeat;
+    text-align: center;
+    border-radius: 20px;
+
+}
+.movie img{
+    border-radius: 20px;
+    width: 600px;
+}
+:root{
+    --dark-color: #0C0F38;
+    --yellow-color: #ccbf8a;
+    --purple-color: #8308EB;
+    --red-color: #fd3030;
+
+
+}
+.aboutmovie{
+    margin: 50px;
+    border-radius: 25px;
+    background-color: var(--dark-color);
+}
+.aboutmovie .btn{
+    background-color:  var(--purple-color);
+    border-color: white;
+    color:  yellow;
+    font-weight: bold;
+    border-radius: 25px;
+    padding: 10px;
+
+}
+.aboutmovie .btn:hover{
+    background-color: white;
+    border-color: var(--purple-color);
+    color: var(--dark-color);
+
+}
+.aboutmovie p{
+    color: white;
+    font-size: 1.5rem;
+}
+.aboutmovie #btn2{
+    background-color:yellow;
+    border-color: white;
+    color:  var(--purple-color);
+    font-weight: bold;
+    border-radius: 25px;
+    padding: 10px;
+
+}
+.aboutmovie #btn2:hover{
+    background-color: white;
+    border-color: var(--purple-color);
+    color: var(--purple-color);
+
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,122 @@
+:root{
+    --dark-color: #0C0F38;
+    --yellow-color: #FDD430;
+    --purple-color: #8308EB;
+}
+body{
+    font-family: 'lato',sans-serif;
+}
+.navbar-expand-sm{
+    background-color: var(--dark-color) !important;
+}
+.navbar-expand-sm .navbar-brand{
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+.navbar-expand-sm .navbar-brand:hover{
+    color: var(--yellow-color) ;
+}
+.navbar-expand-sm .navbar-nav .nav-item{
+    padding-left: 10px;
+    padding-right: 10px;
+}
+.navbar-expand-sm .navbar-nav .nav-item .nav-link{
+    font-size: 1.2rem;
+}
+.navbar-expand-sm .navbar-nav .nav-item .nav-link:hover{
+    color: var(--yellow-color) ;
+}
+.showcase{
+    background-color: var(--dark-color) !important; 
+}
+.moviename{
+    color: var(--yellow-color) !important;
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+.content .btn-light{
+    background-color:  var(--yellow-color);
+    border-color: white;
+    color: var(--dark-color);
+    font-weight: bold;
+    border-radius: 25px;
+    padding: 10px;
+
+}
+.content .btn-light:hover{
+    background-color: white;
+    border-color: var(--yellow-color);
+    color: var(--dark-color);
+
+}
+.services .btn-light{
+    background-color:  var(--yellow-color);
+    border-color: white;
+    color: var(--dark-color);
+    font-weight: bold;
+    border-radius: 25px;
+    padding: 10px;
+
+}
+.services .btn-light:hover{
+    background-color: white;
+    border-color: var(--yellow-color);
+    color: var(--dark-color);
+
+}
+
+
+.about h2
+.services h2{
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 45px;
+    text-shadow: .5px .5px .5px #000 ;
+}
+.about p{
+    width: 80%;
+    margin-top: 20px;
+    text-align: center;
+    font-size: 1rem;
+}
+.about .btn-dark{
+    background-color:  var(--dark-color);
+    border-color: white;
+    color: var(--yellow-color);
+    font-weight: bold;
+    border-radius: 25px;
+    padding: 10px;
+}
+.about .btn-dark:hover{
+    background-color: var(--yellow-color) ;
+    border-color: white;
+    color: var(--dark-color);
+    font-weight: bold;
+    border-radius: 25px;
+    padding: 10px;
+}
+.services{
+    background-color: var(--dark-color);
+    color: white;
+}
+.services h2{
+    margin-bottom: 16px;
+}
+.services .service
+{
+    padding: 12px;
+    border: 2px solid white;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-radius: 20px;
+    margin-right: 10px;
+    margin-left: 10px;
+
+}
+.services p{
+    font-size: 0.9rem ;
+}
+.services img
+{
+    width: 75%;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+    <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>Bootstrap Start</title>
+        <!-- include bootstrap.css -->
+        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+        <link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+        <link rel="stylesheet" href="css/style.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    </head>
+    <body>
+
+      <nav class="navbar navbar-expand-sm navbar-dark bg-dark p-3 ">
+        <a class="navbar-brand" href="#">Movie Night</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav ms-auto">
+            <li class="nav-item active">
+              <a class="nav-link" href="#">Home </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="index2.html">Movie</a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+
+      <section class="showcase py-5 text-white">
+        <div class="container">
+          <div class="row">
+          <div class="col-lg-8">
+            <div class="content ml-5 animate__animated animate__fadeInLeft">
+              <h1>New Movies</h1>
+              <div class="moviename">Free Guy</div>
+              <p>Some quick example text to build on the card title and  <br>make up the bulk of the card's content.</p>
+              <a href="index2.html" class="btn btn-light btn-md">Watch Now</a>
+            </div>
+          </div>
+          <div class="col-lg-4">
+          <div class="banner-img animate__animated animate__fadeInRight">
+            <img src="images/mo.jpg" alt="">
+          </div>
+
+        </div>
+        </div>
+        </div>
+      </section>
+
+      <section class="about text-center my-5 py-5">
+        <div class="container">
+          <h2>What's new in Movie Night</h2>
+          <img src="Images/Mov.jpg" alt="">
+          <p class="mx-auto">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto vitae quaerat aspernatur deserunt repudiandae perferendis optio. Explicabo at distinctio debitis quasi qui, dolorem ab! Porro eum numquam eveniet fugiat blanditiis!
+          </p>
+          <a href="#films" class="btn btn-dark btn-md">Show More</a>
+        </div>
+      </section>
+
+      <section class="services my-3 text-center p-5" id="films">
+        <div class="container">
+          <h1>Our Team</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae eum ullam id debitis cum sequi, <br>fuga dolorem? Rem temporibus molestias praesentium unde distinctio nihil, sed, delectus quae deserunt adipisci vero?</p>
+          <div class="row d-flex justify-content-center"> 
+            <div class="col-lg-3 col-offset-lg-1 col-md-6 col-sm-12 service">
+              <h4>consectetur adipisicing</h4>
+              <img src="images/Paw.jpg" alt="">
+              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus, iure voluptatum. Minus dolorem rem ea maxime sit officia. Sint impedit perspiciatis odio aut est dolorum veritatis facilis laudantium adipisci possimus.</p>
+              <a href="index2.htmlindex2.html" class="btn btn-light btn-md">Watch Now</a>
+
+            </div>
+            <div class="col-lg-3 col-offset-lg-1 col-md-6 col-sm-12 service">
+              <h4>consectetur adipisicing</h4>
+              <img src="images/Paw.jpg" alt="">
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio illum porro minima culpa animi unde ipsum ipsam. Aliquam earum quibusdam corrupti repellat corporis qui eaque eos temporibus, doloribus quidem modi!</p>
+              <a href="index2.html" class="btn btn-light btn-md">Watch Now</a>
+
+            </div>
+            <div class="col-lg-3 col-offset-lg-1 col-md-6 col-sm-12 service">
+              <h4>consectetur adipisicing</h4>
+              <img src="images/Paw.jpg" alt="">
+              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis obcaecati unde rerum blanditiis dolorum quasi omnis quisquam sunt iure itaque nostrum atque suscipit, maxime, rem sapiente. Illum quos impedit nobis?</p>
+              <a href="index2.html" class="btn btn-light btn-md">Watch Now</a>
+
+            </div>
+            <div class="col-lg-3 col-offset-lg-1 col-md-6 col-sm-12 service">
+              <h4>consectetur adipisicing</h4>
+              <img src="images/Paw.jpg" alt="">
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta alias nesciunt ipsam voluptate ea, accusamus, quae consequuntur repudiandae, iure consectetur ducimus sit provident quasi numquam sint necessitatibus. Voluptatem, eligendi quos!</p>
+              <a href="index2.html" class="btn btn-light btn-md">Watch Now</a>
+
+            </div>
+            <div class="col-lg-3 col-offset-lg-1 col-md-6 col-sm-12 service">
+              <h4>consectetur adipisicing</h4>
+              <img src="images/Paw.jpg" alt="">
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quos possimus doloribus cumque sed labore quis voluptatem ducimus, voluptatibus fugiat amet modi quasi asperiores quam veniam. Tempora optio aspernatur minima?</p>
+              <a href="index2.html" class="btn btn-light btn-md">Watch Now</a>
+
+            </div>
+            <div class="col-lg-3 col-offset-lg-1 col-md-6 col-sm-12 service">
+              <h4>consectetur adipisicing</h4>
+              <img src="images/Paw.jpg" alt="">
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis veniam delectus quos repellat totam ipsam dolor, minima molestiae, perspiciatis commodi dolore optio quasi sequi voluptas sed nesciunt, laborum voluptatem voluptatibus.</p>
+              <a href="index2.html" class="btn btn-light btn-md">Watch Now</a>
+
+            </div>
+          </div>
+        </div>
+      </section>
+
+        <!-- include popper.js -->
+        <script src="node_modules/popper.js/dist/popper.min.js"></script>
+        <!-- include bootstrap.min.js -->
+        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <script src="js/script.js"></script>
+    </body>
+</html>