Skip to content

Commit

Permalink
Styled home and about pages and Fixed Errors, created footer, added f…
Browse files Browse the repository at this point in the history 
…acebook icon in the about page
  • Loading branch information
@AnuragD123
AnuragD123 committed Oct 2, 2021
1 parent e0c60db commit 747a116
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 47 deletions.
Binary file added Images/Gamabunta.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 34 additions & 21 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,30 @@
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-light nav1">
<a class="navbar-brand" href="#" style="color: beige;">Naruto</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<header>

<nav class="navbar navbar-expand-lg navbar-light nav1">
<a class="navbar-brand" href="#" style="color: beige;">Naruto</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="margin-left: 78%;">
<li class="nav-item active mx-4">
<a class="nav-link" href="./index.html" style="color: beige;">Home</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link" href="./about.html" style="color: beige;">About</a>
</li>
</div>
</nav>
</header>


<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="margin-left: 78%;">
<li class="nav-item active mx-4">
<a class="nav-link" href="./index.html" style="color: beige;">Home</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link" href="./about.html" style="color: beige;">About</a>
</li>
</div>
</nav>
<!--start-->
<main>
<div class="container">
<h1 class="about-title">
<b>This Project Is Developed by Vikhyat Singh</b>
Expand All @@ -52,7 +58,7 @@ <h1 class="about-title">
<h5 class="card-title">
<i class="fab fa-linkedin"></i> LinkedIn
</h5>
<p class="card-text">Let's Connect!</p>
<p class="card-text font-weight-lighter">Let's Connect!</p>
<a href="https://www.linkedin.com/in/vikhyat-singh-37777197/"
class="btn btn-outline-light btn-sm">LinkedIn</a>
</div>
Expand All @@ -62,7 +68,7 @@ <h5 class="card-title">
<div class="card text-white">
<div id="two" class="card-body">
<h5 class="card-title"><i class="fab fa-github"></i> Github</h5>
<p class="card-text">Check out my Github Profile!</p>
<p class="card-text font-weight-lighter">Check out my Github Profile!</p>
<a href="https://github.com/vikhyatsingh123/" class="btn btn-outline-light btn-sm">Github</a>
</div>
</div>
Expand All @@ -73,7 +79,7 @@ <h5 class="card-title"><i class="fab fa-github"></i> Github</h5>
<h5 class="card-title">
<i class="fab fa-instagram"></i> Instagram
</h5>
<p class="card-text">Let's follow each other!</p>
<p class="card-text font-weight-lighter">Let's follow each other!</p>
<a href="https://www.instagram.com/vikhyat552?r=nametag/"
class="btn btn-outline-light btn-sm">Instagram</a>
</div>
Expand All @@ -82,14 +88,21 @@ <h5 class="card-title">
<div class="col-lg-4 mb-4">
<div class="card text-white">
<div id="two" class="card-body">
<h5 class="card-title"><i class="fab fa-github"></i> Facebook</h5>
<p class="card-text">Check out my Facebook Profile!</p>
<h5 class="card-title"><i class="fab fa-facebook"></i> Facebook</h5>
<p class="card-text font-weight-lighter">Check out my Facebook Profile!</p>
<a href="https://facebook.com/vikhyatsingh123/" class="btn btn-outline-light btn-sm">Facebook</a>
</div>
</div>
</div>
</div>
</div>
</main>

<footer>
<nav class="navbar navbar-expand-lg navbar-light nav1">
<p class="mx-auto text-light font-weight-lighter">&copy Developed By- Vikhyat Singh</p>
</nav>
</footer>



Expand Down
86 changes: 60 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,30 @@
</head>

<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light nav1">
<a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="margin-left: 78%;">
<li class="nav-item active mx-4">
<a class="nav-link" href="./index.html" style="color: beige;">Home</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link" href="./about.html" style="color: beige;">About</a>
</li>
</div>
</nav>

<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-light nav1">
<a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="margin-left: 78%;">
<li class="nav-item active mx-4">
<a class="nav-link" href="./index.html" style="color: beige;">Home</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link" href="./about.html" style="color: beige;">About</a>
</li>
</div>
</nav>

</header>


<main>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
Expand Down Expand Up @@ -149,7 +156,7 @@ <h2 class="card-title">Hashirama Senju</h2>
<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="./Images/gamabunta.png" alt="Gamabunta" height="390px" width="300px">
<img src="./Images/Gamabunta.png" alt="Gamabunta" height="390px" width="300px">
</div>
<div class="col-md-8">
<div class="card-body">
Expand Down Expand Up @@ -642,6 +649,9 @@ <h2 class="card-title">Tsunade</h2>
<!--card end-->

<!-- card end-->



<div class="card mb-3 card-bg my-4" style="max-width: 100%;">
<div class="row no-gutters">
<div class="col-md-4">
Expand All @@ -651,19 +661,33 @@ <h2 class="card-title">Tsunade</h2>
<div class="card-body">
<h2 class="card-title">Shino Aburame</h2>
<p class="card-text">Shino Aburame is a supporting character in Naruto Shippuden. He is a shinobi of Konohagakure's Aburame clan. He is a close friend of Naruto and has helped him in various missions </p>
<p>He is a member of team Kurenai. He showed great potential as a shinobi and after the time-skip he was promoted to Chunin.As a member of the Aburame clan, he can create insect replica of himself. </p>
<img src="./Images/Temari.png" alt="Temari" height="390px" width="300px">
<p>He is a member of team Kurenai. He showed great potential as a shinobi and after the time-skip he was promoted to Chunin.As a member of the Aburame clan, he can create insect replica of himself.
</p>
</div>
</div>
</div>
</div>




<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="./Images/Temari.png" alt="Temari" height="390px" width="300px">
</div>
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title">Temari</h2>
<p class="card-text">A ninja from The Hidden Sand Village. She is the older sister of Gaara and Kankuro, and is quite proficient in using a huge fan as her weapon for long range attacks.</p>
<p>We first see Temari entering the Leaf village with Kankuro and Gaara, her 2 siblings. In the first round of the preliminaries of the final chunin exam Temari fights against Ten-Ten who she easily defeats and continues to the final against Shikamaru. In this fight Shikamaru tries to catch Temari with his shadow possession, she manages to outrun this for a while but in the end Shikamaru's great mind outwits her, however Shikamaru runs out of chakra and he gives up, this leaves Temari as the winner. When the invasion of Konoha begins, Temari is forced to help Gaara flee the village. In the anime, when Sasuke begins to pursue them, Temari stays behind in an effort to slow Sasuke down, though he defeats her with little effort. After Gaara is defeated, Temari and Kankuro carry him home.</p>
</div>
<p>We first see Temari entering the Leaf village with Kankuro and Gaara, her 2 siblings. In the first round of the preliminaries of the final chunin exam Temari fights against Ten-Ten who she easily defeats and continues to the final against Shikamaru. In this fight Shikamaru tries to catch Temari with his shadow possession, she manages to outrun this for a while but in the end Shikamaru's great mind outwits her, however Shikamaru runs out of chakra and he gives up, this leaves Temari as the winner. When the invasion of Konoha begins, Temari is forced to help Gaara flee the village. In the anime, when Sasuke begins to pursue them, Temari stays behind in an effort to slow Sasuke down, though he defeats her with little effort. After Gaara is defeated, Temari and Kankuro carry him home.
</p>
</div>
</div>
</div>
</div>
<!--card end-->


<!-- card end-->
<div class="card mb-3 card-bg my-4" style="max-width: 100%;">
<div class="row no-gutters">
Expand All @@ -690,7 +714,7 @@ <h2 class="card-title">Danzō Shimura</h2>
</div>
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title">itachi</h2>
<h2 class="card-title">Itachi</h2>
<p class="card-text">Itachi is one of the main villains in Naruto, as the murderer of the entire Uchiha Clan. He's the older brother of Sasuke Uchiha and also the reason for Sasuke's need for more power, which resulted in his defection from The Leaf
in search of Orochimaru. Itachi is a member of the akatsuki organization and is partnered with Kisame Hoshigaki, a former member of the seven ninja swordsmen of the hidden mist. Before joining the Akatsuki and defecting the
leaf village, Itachi was a member of the hidden leaf's Anbu</p>
Expand Down Expand Up @@ -725,13 +749,17 @@ <h2 class="card-title">Jiraiya</h2>
<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="./Images/Hanzo-the-Salamander.jpg.jpg" alt="Hanzo" height="390px" width="300px">
<img src="./Images/Hanzo-the-Salamander.jpg" alt="Hanzo" height="390px" width="300px">
</div>
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title">Hanzo-the-Salamander.jpg</h2>
<h2 class="card-title">Hanzo-the-Salamander</h2>
<p class="card-text">Hanzo was the leader of the Hidden Rain Village. In his prime, Hanzo was capable of taking on all three members of the Legendary Sannin; he managed to beat all three of them but spared their lives and coined the name "Legendary Sannin."</p>
<p>Despite this incredible feat and the fact that he tends to be considered among the greatest shinobi to ever exist, Hanzo's name is scarcely mentioned during debates.</p>
</div>
</div>
</div>
</div>
<!-- card end-->
<div class="card mb-3 card-bg my-4" style="max-width: 100%;">
<div class="row no-gutters">
Expand Down Expand Up @@ -837,6 +865,12 @@ <h2 class="card-title">Sanae</h2>


</div>
</main>
<footer>
<nav class="navbar navbar-expand-lg navbar-light nav1">
<p class="mx-auto text-light font-weight-lighter">&copy Developed By- Vikhyat Singh</p>
</nav>
</footer>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
Expand Down
5 changes: 5 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ h1 {
}
.about-title {
padding-top: 2%;
color:white;
font-weight:normal;
}

@media only screen and (max-width: 600px) {
Expand All @@ -84,4 +86,7 @@ h1 {
.navTitle {
padding-left: 3px;
}
}
.card h2{
color:#dc3545;
}

0 comments on commit 747a116

Please sign in to comment.