edited the scale of all the pages by reduing th paddiing

musaddique333 · Oct 8, 2023 · e5f4396 · e5f4396
1 parent e27d943
commit e5f4396
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 50 deletions.
diff --git a/CSS/characters.css b/CSS/characters.css
@@ -7,7 +7,6 @@
 body {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     background-image: url(../images/background/background_characters.jpeg);
     background-position: top;
     background-size: 400px;
@@ -23,7 +22,7 @@ body {
     justify-content: space-between;
     height: max-content;
     background-color: rgba(0, 0, 0, 0.503);
-    padding: 0 5%;
+    padding: 0 1%;
     margin: 0 0 5% 0;
 }
 
@@ -91,7 +90,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0;
+    padding: 0 1%;
     margin: 0;
 }
 
@@ -103,13 +102,23 @@ body {
     transform: scale(1.1);
 }
 
+.crew-more{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 1%;
+}
+
 .crew-name{
     align-self: center;
     color: rgba(255, 255, 255, 0.8);
     text-shadow: 5px 5px rgb(255, 0, 0);
+    background-color: rgba(0, 0, 0, 0.48);
+    border-radius: 10px;
+    padding: 10px;
     font-size: 500%;
     font-weight: bold;
-    margin: 0;
 }
 
 .know-more {
@@ -121,6 +130,12 @@ body {
     border: 2px solid rgb(255, 255, 255);
     border-radius: 5px;
     padding: 10px;
+    max-width: fit-content;
+
+}
+
+.know-more:hover {
+    transform: scale(1.1);
 }
 
 .know-more a{
@@ -133,8 +148,8 @@ body {
     border: 1px solid rgb(0, 0, 0);
     border-radius: 15px;
     background-color: rgba(0, 0, 0, 0.616);
-    padding: 0 2%;
-    margin: 5% 0 5% 0;
+    padding: 0 1%;
+    margin: 5% 0 0 0;
     max-width: max-content;
     align-self: center;
     max-height: 1000px;
@@ -198,7 +213,7 @@ td a:hover:not(.poster a, .voice_actor a){
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
-    padding: 0 5%;
+    padding: 0 1%;
     margin: 0 0 5% 0;
     background-color: rgba(0, 0, 0, 0.2);
 }
@@ -275,14 +290,13 @@ summary {
 
 /* footer */
 .footer {
-    margin: 5% 0 0 0;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 50px;
     background-color: rgba(0, 0, 0, 0.616);
-    padding: 0 5%;
-    margin: 0;
+    padding: 0 1%;
+    margin: 10% 0 0 0;
 }
 
 .footer footer {

diff --git a/CSS/contact.css b/CSS/contact.css
@@ -25,7 +25,7 @@ body {
     justify-content: space-between;
     height: max-content;
     background-color: rgba(0, 0, 0, 0.503);
-    padding: 0 5%;
+    padding: 0 1%;
     margin: 0 0 5% 0;
 }
 
@@ -93,7 +93,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0;
+    padding: 0 1%;
     margin: 0;
 }
 
@@ -196,16 +196,6 @@ input[type="submit"]:focus {
     text-shadow: none;
 }
 
-.footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 50px;
-    background-color: rgba(0, 0, 0, 0.616);
-    margin: 10% 0 0 0;
-    padding: 0 5%;
-}
-
 .wipeout{
     display: flex;
     align-items: center;
@@ -223,6 +213,16 @@ input[type="submit"]:focus {
     transform: scale(1.1);
 }
 
+.footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    background-color: rgba(0, 0, 0, 0.616);
+    margin: 10% 0 0 0;
+    padding: 0 1%;
+}
+
 .footer footer {
     color: rgba(255, 255, 255, 0.7);
     font-size: 120%;

diff --git a/CSS/gallery.css b/CSS/gallery.css
@@ -24,7 +24,7 @@ body {
     justify-content: space-between;
     height: max-content;
     background-color: rgba(0, 0, 0, 0.503);
-    padding: 0 5%;
+    padding: 0 1%;
     margin: 0 0 5% 0;
 }
 
@@ -92,7 +92,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0;
+    padding: 0 1%;
     margin: 0;
 }
 
@@ -108,14 +108,15 @@ body {
 .gallery {
     display: flex;
     flex-direction: column;
+    padding: 0 1%;
     gap: 10px;
 }
 
 .gallery_of_three {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 5%;
+    padding: 0 1%;
     margin: 0;
     overflow: auto;
     white-space: nowrap;
@@ -134,7 +135,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 5%;
+    padding: 0 1%;
     margin: 0;
     overflow: auto;
     white-space: nowrap;
@@ -188,7 +189,7 @@ body {
     justify-content: center;
     height: 50px;
     background-color: rgba(0, 0, 0, 0.616);
-    padding: 0 5%;
+    padding: 0 1%;
     margin: 5% 0 0 0;
 }
 

diff --git a/CSS/index.css b/CSS/index.css
@@ -8,7 +8,6 @@
 body {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     background-image: url(../images/background/background_index.jpg);
     background-position: center;
     background-size: cover;
@@ -25,7 +24,7 @@ body {
     justify-content: space-between;
     height: max-content;
     background-color: rgba(0, 0, 0, 0.503);
-    padding: 0 5%;
+    padding: 0 1%;
     margin: 0 0 5% 0;
 }
 
@@ -93,7 +92,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0;
+    padding: 0 1%;
     margin: 0;
 }
 
@@ -111,7 +110,7 @@ body {
     align-items: center;
     height: max-content;
     gap: 5%;
-    padding: 0 5%;
+    padding: 0 1%;
 }
 
 .detail {
@@ -260,7 +259,7 @@ body {
     height: 50px;
     background-color: rgba(0, 0, 0, 0.616);
     margin: 10% 0 0 0;
-    padding: 0 5%;
+    padding: 0 1%;
 }
 
 .footer footer {

diff --git a/CSS/plot.css b/CSS/plot.css
@@ -22,7 +22,7 @@ body {
   justify-content: space-between;
   height: max-content;
   background-color: rgba(0, 0, 0, 0.503);
-  padding: 0 5%;
+  padding: 0 1%;
   margin: 0 0 5% 0;
 }
 
@@ -90,7 +90,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
+  padding: 0 1%;
   margin: 0;
 }
 
@@ -201,7 +201,7 @@ body {
   justify-content: center;
   flex-direction: column;
   gap: 10px;
-  padding: 0 5%;
+  padding: 0 1%;
   margin: 5% 0 0 0;
   background-color: rgba(255, 255, 255, 0.5);
   border: #181d3b;
@@ -268,7 +268,7 @@ body {
   height: 50px;
   background-color: rgba(0, 0, 0, 0.616);
   margin: 10% 0 0 0;
-  padding: 0 5%;
+  padding: 0 1%;
 }
 
 .footer footer {

diff --git a/characters.html b/characters.html
@@ -30,13 +30,15 @@
     <div class="logo">
         <img src="./images/Icons/One-Piece-Logo.png" alt="">
     </div>
-    <div class="crew-name">
-        <main>The Straw Hat Crew</main>
-    </div>
-    <div class="know-more">
-        <a href="#desc-head">
-            <p>Click on the names in the table to know more..</p>
-        </a>
+    <div class="crew-more">
+        <div class="crew-name">
+            <main>The Straw Hat Crew</main>
+        </div>
+        <div class="know-more">
+            <a href="#desc-head">
+                <p>Click on the names in the table to know more..</p>
+            </a>
+        </div>
     </div>
     <div id="desc-head" class="wrapper">
         <table>
@@ -330,5 +332,4 @@
         <footer class="copy_right">© 2020 Anime, Inc. All Rights Reserved.</footer>
     </div>
 </body>
-
 </html>
diff --git a/index.html b/index.html
@@ -75,12 +75,13 @@
                     <img src="./images/Icons/play_icon.png" alt="Default Image">
                 </div>
             </a>
-            <a href="https://youtu.be/DNC28dpB9_Y?si=YM7y2SNWoTILhJ_C" style="text-decoration: none;" class="watch"><span
-                    class="imageText">Watch Trailer</span></a>
+            <a href="https://youtu.be/DNC28dpB9_Y?si=YM7y2SNWoTILhJ_C" style="text-decoration: none;"
+                class="watch"><span class="imageText">Watch Trailer</span></a>
         </div>
     </div>
     <div class="footer">
         <footer class="copy_right">© 2020 Anime, Inc. All Rights Reserved.</footer>
     </div>
     </div>
+
 </html>
diff --git a/plot.html b/plot.html
@@ -8,7 +8,6 @@
     <link href="https://fonts.cdnfonts.com/css/quela" rel="stylesheet">
     <title>Plot of One Piece</title>
 </head>
-
 <body>
     <div class="header">
         <header class="header_left">
@@ -449,7 +448,5 @@ <h3 id="egghead-arc">Egghead Arc</h3>
     <div class="footer">
         <footer class="copy_right">© 2020 Anime, Inc. All Rights Reserved.</footer>
     </div>
-
-    <body>
-
+<body>
 </html>