Merge pull request #24 from NaseerShaikh1/development

Changed Styling and alignments

Author: developer-junaid

css/style.css

@@ -11,8 +11,9 @@
 }
 
 body {
-  background-color: #f0f0f0;
-}
+  background-color: #221f1f;
+  }
+  
 /* Css custom scroll-bar starts */
 ::-webkit-scrollbar {
   width: 10px;
@@ -86,13 +87,13 @@ body {
   padding: 4em 2em;
   text-align: center;
   height: 70%;
-  color: #000000;
+  color:wheat;
 }
 
 .about-section h2 {
   padding: 10px;
   font-weight: 600;
-  color: #0F044C;
+  color: wheat;
 }
 
 .about-section p {
@@ -109,12 +110,13 @@ body {
 .cast-section h1{
   padding: 10px;
   font-weight: 600;
-  color: #0F044C;
+  color: wheat;
 }
 .cast-section .cast-section_images{
   display: grid;
   grid-template-columns: repeat(7,1fr);
   gap:1rem;
+
 }
 
 .cast-section_images .card{
@@ -136,21 +138,41 @@ body {
 .season-section h1{
   padding: 10px;
   font-weight: 600;
-  color: #0F044C;
+  color:cadetblue;
+  display: flex;
+  flex-wrap: wrap !important;
+  text-align: center;
+}
+.season-section ul li{
+  display: inline-flex;
+ justify-content: center;
+ flex-wrap: wrap !important;
+ flex-direction: column;
+ margin: 20px 17px 1px 60px;
+
+}
+.button:hover{
+  font-size: 18px;
+  background-color: #221f1f;
+  color: white;
 }
 .button {
-  background-color: #ffffff;
+
+  background-color: #1c1d1c;
+
   border: none;
-  color: black;
+  color: wheat;
+
   padding: 15px 32px;
   display: flex;
   flex-wrap: wrap !important;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
+  border-radius: 14px;
+
   margin: 4px 2px;
-  cursor: pointer;
   border: 1px solid black;
 }
 
@@ -214,6 +236,16 @@ body {
   padding-top: 18px;
   padding: 30px;
 
+#castBtn{
+  border-radius: 10px;
+  font-size: larger;
+  background-color: #221f1f;
+  
+color:wheat;
+}
+#castBtn:hover{
+  height: 78px;
+
 }
 
 /* Style the video: 100% width and height to cover the entire window */
@@ -260,3 +292,12 @@ width: 100%;
     gap:1rem;
   }
 }
+#brand{
+  padding: 15px;
+}
+.mainpic{
+display: flex;
+justify-content: center;
+align-items: center;
+border-radius: 14px;
+}

images/image1.jpg

@@ -68,7 +68,20 @@ <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">
 
       <!-- Main -->
       <main>
+        <div class="branding mt-5">
+          <a
+            href="https://play.hbomax.com/page/urn:hbo:page:game-of-thrones-spotlight?_ga=2.197761007.1775255902.1664657922-1642261560.1664657922"
+            target="_blank"
+          >
+            <img
+              src="https://static.hbo.com/2022-08/house-of-the-dragon-world-of-westeros-collection-banner-1500x386.jpg?w=1500"
+              alt="branding"
+              class="w-100"
+          /></a>
+        </div>
+      
         <div class="main-div">
+
           <!-- The header background video -->
           <video controls="controls" autoplay="autoplay" muted="muted" loop="loop" id="myVideo">
             <source src="https://imdb-video.media-imdb.com/vi773440281/1434659607842-pgv4ql-1643136219803.mp4?Expires=1666948838&Signature=XoXSLB2VqjfERA-zfGvCiuypeJhTThQp5Z2QSaDwPqdeRF0Jm0FtmezzWGZXiB2X1B6beBxSp4JtYP1gma~6PBc67Og4qeL4j3pbwrE2hsMbFPvY8hwzklM~FfQYFse1VPgD-rpRSrxm-AauCJYkXCQYCgZrcB9IWnhic9nRo5kDJI9TjyqXQco6s-tAzyyBhvCsUM7rJ0OTSS4Kd2lHx4rGOFiOzd4Jh2wKJDnfVjIz0sL-w8nwQFrIzxOmHssqJyakOc3suk4UfFB~Pj6-FCf9qqR0X8YUorOnSL7lP0eGcmpya9aQHij3RBJxjgx1pU2gj3MTcNkzLv1eTJHsSQ__&Key-Pair-Id=APKAIFLZBVQZ24NQH3KA" type="video/mp4">
@@ -122,16 +135,21 @@ <h2>About Game of Thrones</h2>
           </section>
           <!-- // About -->
 
-          <!-- HBO BRANDING -->
-          <div class="branding">
+          <!--  HBO BRANDING -->
+          <div class="branding" id="brand">
             <a href="https://www.hbo.com/how-to-watch-hbo-max" target="_blank">
-              <img src="images/branding.jpg" alt="branding" class="w-100"/></a>
+              <img src="images/branding.jpg" alt="branding" class="w-100" 
+            /></a>
+
           </div>
           <!-- // HBO BRANDING -->
 
           <!-- CAST_SECTION -->
+ <h1 class="text-center">CAST & CREW</h1>
+
           <div class="cast-section text-center" id="cast">
             <h1>CAST & CREW</h1>
+
             <div class="cast-section_images">
               <div class="card" style="width: 10rem">
                 <img src="data:image/jpeg;base64,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" class="card-img-top" alt="..."/>
@@ -219,8 +237,15 @@ <h1>CAST & CREW</h1>
                 </div>
               </div>
             </div>
-            <p>
-              <a style="margin-left:30px;" href="https://www.hbo.com/game-of-thrones/cast-and-crew">See Full Cast</a >
+            <p class="text-center mt-5">
+              
+              <button class="" id="castBtn">
+                <a style="text-align: center;" href="https://www.hbo.com/game-of-thrones/cast-and-crew"
+                >
+              </a>See Full Cast
+                </button>
+              >
+
             </p>
           </div>
           <!-- // CAST_SECTION -->
@@ -322,6 +347,7 @@ <h5 class="card-title">Game of Thrones: Season 8</h5>
 
           <!-- //Season-section -->
 
+
           <!-- HBO BRANDING -->
           <div class="branding pt-2">
             <a href="https://play.hbomax.com/page/urn:hbo:page:game-of-thrones-spotlight?_ga=2.197761007.1775255902.1664657922-1642261560.1664657922" target="_blank">
@@ -337,9 +363,11 @@ <h5 class="card-title">Game of Thrones: Season 8</h5>
         <div class="footer bg-dark text-center">
           <div class="footer-content">
             <div class="footer-section about">
-              <h1 class="logo-text">HBO</h1>
-              <p class="footer-para">
-                © 2022 Home Box Office, Inc. All Rights Reserved. This website may contain mature content.
+              <h1 class="logo-text text-center mt-1" id="hb">HBO</h1>
+              <p class="footer-para text-center">
+                © 2022 Home Box Office, Inc. All Rights Reserved. This website
+                may contain mature content.
+
               </p>
             </div>
           </div>