diff --git a/index.html b/index.html
index 1d798d57..8da47784 100644
--- a/index.html
+++ b/index.html
@@ -7495,3 +7495,23 @@ <h2 class="card-title">Madara Uchiha (Ghost of Uchiha) </h2>
 </div>
 </body>
 </html>
+   <!--card end-->
+            <!-- KaguyaOtsutsuki card start-->
+   
+            <div class="card mb-3 card-bg my-4" style="max-width: 100%;">
+              <div class="row no-gutters">
+                 <div class="col-md-4">
+                    <img src= "https://staticc.sportskeeda.com/editor/2022/06/8f445-16565892254111.png"] alt=[KaguyaOtsutsuki] height="390px" width="300px">  
+                  </div>
+                  <div class="col-md-8">
+                   <div class="card-body">
+                      <h2 class="card-title">[[KaguyaOtsutsuki]</h2>
+                      <p class="card-text">[Princess Kaguya Ōtsutsuki, rarely going by her title, is the main antagonist of the Naruto franchise as a whole. She is the source of all the conflict of the entire manga and anime series Naruto, and by far the biggest threat faced by the protagonists]</p>
+                      <p>Naruto franchise. She is the source of the whole conflict and the biggest threat faced by the heroes, however she is not the final villain of the series as Sasuke Uchiha is fought after her defeat. She was originally a low-ranking member of the Ōtsutsuki Clan and the former partner of Isshiki.
+
+Kaguya came to Earth to serve as a sacrifice to cultivate a God Tree. However, be it for power, fear of death or a fondness for the planet, she betrayed her partner and the rest of her clan. She then became the first being to ever wield chakra, turning into an unfathomably powerful goddess in order to save the world from war, only to become a power-crazed tyrant.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!--[Kaguya Otsutsuki card] card end-->
diff --git a/style.css b/style.css
index 0852a78d..74da3759 100644
--- a/style.css
+++ b/style.css
@@ -663,3 +663,55 @@ footer
   left: 40%;
   bottom: 0;
 }
+html,
+body,
+img,
+figure {
+  max-width: 100%;
+}
+html,
+body {
+  overflow-x: hidden;
+  color: #000;
+  -ms-overflow-style: scrollbar;}
+ 
+.button {
+  display: inline-block;
+  border-radius: 4px;
+  background-color: #f4511e;
+  border: none;
+  color: #FFFFFF;
+  text-align: center;
+  font-size: 28px;
+  padding: 20px;
+  width: 200px;
+  transition: all 0.5s;
+  cursor: pointer;
+  margin: 5px;
+}
+
+.button span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+.button span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+.button:hover span {
+  padding-right: 25px;
+}
+
+.button:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+