Skip to content

Commit

Permalink
verified my html and css
Browse files Browse the repository at this point in the history
  • Loading branch information
musaddique333 committed Oct 8, 2023
1 parent 08529aa commit fb5b740
Show file tree
Hide file tree
Showing 9 changed files with 143 additions and 162 deletions.
8 changes: 4 additions & 4 deletions CSS/characters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ td {
border-collapse: collapse;
text-align: center;
background-color: rgba(122, 122, 122, 0.218);
text-wrap: nowrap;
white-space: nowrap;
}

thead {
Expand Down Expand Up @@ -219,14 +219,14 @@ td a:hover:not(.poster a, .voice_actor a){
background-color: rgba(0, 0, 0, 0.2);
}

.members-description main {
.members-description header {
color: rgb(255, 255, 255);
font-size: 300%;
font-weight: bold;
margin: 5% 0;
margin: 5% 0 0 0;
}

.members-description main:hover {
.members-description header:hover {
color: rgb(255, 0, 0);
background-color: aliceblue;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.601);
Expand Down
10 changes: 6 additions & 4 deletions CSS/contact.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ p {

label {
vertical-align: middle;
font-size: 100%;
font-size: 150%;
color: rgba(238, 238, 238, 0.7);
}

Expand All @@ -166,8 +166,10 @@ textarea {
}

textarea {
position: relative;
padding-top: 0.7%;
height: 120px;
font-size: 1.4em;
font-size: 100%;
line-height: 1em;
resize: none;
}
Expand All @@ -181,12 +183,12 @@ input[type="submit"] {

input[type="submit"]:focus {
background: rgba(238, 238, 238, 0.2);
color: rgba(238, 238, 238, 0.2);
color: rgb(255, 255, 255);
}

::-moz-selection {
background: rgba(238, 238, 238, 0.2);
color: rgba(238, 238, 238, 0.2);
color: rgba(255, 255, 255, 0.786);
text-shadow: none;
}

Expand Down
6 changes: 3 additions & 3 deletions CSS/gallery.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,8 +151,8 @@ body {
/* refrence avaliable in readme file */
.rotate_gallery {
align-self: center;
width: 24.9vw;
height: 200px;
width: 30vw;
height: 30vh;
transform-style: preserve-3d;
animation: rotate 30s linear infinite;
}
Expand All @@ -173,7 +173,7 @@ body {
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i) * 45deg)) translateZ(30vw);
transform: rotateY(calc(var(--i) * 45deg)) translateZ(36.2vw);
}

.rotate_gallery span img {
Expand Down
39 changes: 14 additions & 25 deletions CSS/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ body {
gap: 5%;
padding: 0 1%;
max-width: 100vw;
min-height: fit-content;
overflow-x: scroll;
}

Expand Down Expand Up @@ -155,7 +156,7 @@ body {
.genre_heading,
.release_heading,
.author_heading {
font-size: 120%;
font-size: 130%;
color: rgba(255, 0, 0, 0.932);
font-weight: bolder;
}
Expand All @@ -168,36 +169,24 @@ body {
font-style: italic;
}

.play_button {
.play_button a{
display: flex;
align-items: center;
justify-content: flex-start;
}

.button {
min-width: 120px;
min-height: 30px;
font-weight: bold;
background-color: rgb(255, 0, 0);
justify-content: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.932);
border: 0;
border-radius: 2px;
}

.button:hover {
background-color: rgba(255, 0, 0, 0.5);
font-size: 120%;
font-weight: bold;
background-color: rgba(255, 0, 0, 0.932);
padding: 10px;
transform: scale(1.1);
border-radius: 3px;
}

.button:active {
background-color: rgb(0, 0, 0);
}

.button:focus {
outline-color: transparent;
outline-style: solid;
box-shadow: 0 0 0 2px rgb(255, 0, 0);
.play_button a:hover{
color: rgba(255, 255, 255, 0.932);
background-color: rgba(0, 0, 0, 0.577);
border: 1px solid rgba(255, 0, 0, 0.932);
box-shadow: 1px 1px 10px #010101b0;
}

/* refrence avaliable in readme file */
Expand Down
24 changes: 12 additions & 12 deletions CSS/plot.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,17 +216,17 @@ body {
gap: 10px;
}

.content_of_plot h1,
.content_of_plot h2,
.content_of_plot h3,
.content_of_plot .h1,
.content_of_plot .h2,
.content_of_plot .h3,
.content_of_plot p{
font-weight: bold;
color: rgba(0, 0, 0);
}

.content_of_plot h1:hover,
.content_of_plot h2:hover,
.content_of_plot h3:hover,
.content_of_plot .h1:hover,
.content_of_plot .h2:hover,
.content_of_plot .h3:hover,
.content_of_plot p:hover{
color: rgba(255, 255, 255);
background-color: #f65964;
Expand All @@ -238,21 +238,21 @@ body {

}

.content_of_plot h1{
.content_of_plot .h1{
font-size: 300%;
}

.content_of_plot h2{
.content_of_plot .h2{
font-size: 250%;
}

.content_of_plot h3{
.content_of_plot .h3{
font-size: 200%;
}

.content_of_plot h1:not(:hover),
.content_of_plot h2:not(:hover),
.content_of_plot h3:not(:hover){
.content_of_plot .h1:not(:hover),
.content_of_plot .h2:not(:hover),
.content_of_plot .h3:not(:hover){
text-shadow: 10px 5px 10px rgba(96, 96, 96, 0.682);
text-decoration: 2px underline rgb(255, 0, 0);
}
Expand Down
63 changes: 31 additions & 32 deletions characters.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,20 @@
<header class="header_left">
<a href="https://aniwatch.to/" style="text-decoration: none;"><span>ANIME</span></a>
</header>
<hgroup class="header_right">
<div class="header_right">
<a href="./index.html">Home</a>
<a href="./characters.html" style="color: red; font-size: 150%;">Characters</a>
<a href="./plot.html">Plot</a>
<a href="./gallery.html">Gallery</a>
<a href="./contact.html">Contact</a>
</hgroup>
</div>
<div class="header_icons">
<a href="https://aniwatch.to/search?keyword=one+piece"><img src="./images/Icons/search.png" alt=""></a>
<a href="https://aniwatch.to/user/profile"><img src="./images/Icons/contacts.png" alt=""></a>
</div>
</div>
<div class="logo">
<img src="./images/Icons/One-Piece-Logo.png" alt="">
<img src="./images/Icons/One-Piece-Logo.png" alt="logo">
</div>
<div class="crew-more">
<div class="crew-name">
Expand All @@ -39,135 +39,134 @@
<p>Click on the names in the table to know more..</p>
</a>
</div>
<div>
<video src=""></video>
</div>
</div>
<div id="desc-head" class="wrapper">
<table>
<thead>
<th>Role</th>
<th>Epithet</th>
<th colspan="2">Fictional Characters</th>
<th>Bounty</th>
<th colspan="2">Voice Actors</th>
<tr>
<th>Role</th>
<th>Epithet</th>
<th colspan="2">Fictional Characters</th>
<th>Bounty</th>
<th colspan="2">Voice Actors</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#luffy">The Captain</a></td>
<td><a href="#luffy">Straw Hat Luffy</a></td>
<td><a href="#luffy">Monkey D Luffy</a></td>
<td class="poster"><a href="#luffy"><img src="./images/posters/luffy_poster.jpeg" alt=""></a>
<td class="poster"><a href="#luffy"><img src="./images/posters/luffy_poster.jpeg" alt="luffy poster"></a>
</td>
<td>3,000,000,000 Belly</td>
<td><a href="https://en.wikipedia.org/wiki/Mayumi_Tanaka">Mayumi Tanaka</a></td>
<td class="voice_actor"><a href="https://en.wikipedia.org/wiki/Mayumi_Tanaka"><img
src="./images/voice_actors/mayumi_tanaka.jpeg" alt=""></a></td>
src="./images/voice_actors/mayumi_tanaka.jpeg" alt="mayumi tanaka"></a></td>
</tr>
<tr>
<td><a href="#zoro">Swordsman</a></td>
<td><a href="#zoro">Pirate Hunter Zoro</a></td>
<td><a href="#zoro">Roronoa Zoro</a></td>
<td class="poster"><a href="#zoro"><img src="./images/posters/zoro_poster.jpeg" alt=""></a></td>
<td class="poster"><a href="#zoro"><img src="./images/posters/zoro_poster.jpeg" alt="zoro poster"></a></td>
<td>1,111,000,000 Belly</td>
<td><a href="https://en.wikipedia.org/wiki/Kazuya_Nakai">Kazuya Nakai</a></td>
<td class="voice_actor"><a href="https://en.wikipedia.org/wiki/Kazuya_Nakai"><img
src="./images/voice_actors/kazuya_nakai.png" alt=""></a></td>
src="./images/voice_actors/kazuya_nakai.png" alt="kazuya nakai"></a></td>
</tr>
<tr>
<td><a href="#nami">Navigator</a></td>
<td><a href="#nami">Cat Burglar Nami</a></td>
<td><a href="#nami">Nami</a></td>
<td class="poster"><a href="#nami"><img src="./images/posters/nami_poster.jpeg" alt=""></a></td>
<td class="poster"><a href="#nami"><img src="./images/posters/nami_poster.jpeg" alt="nami poster"></a></td>
<td>366,000,000 Belly</td>
<td><a href="https://en.wikipedia.org/wiki/Akemi_Okamura">Akemi Okamura</a></td>
<td class="voice_actor"><a href="https://en.wikipedia.org/wiki/Akemi_Okamura"><img
src="./images/voice_actors/akemi_okamura.jpg" alt=""></a></td>
src="./images/voice_actors/akemi_okamura.jpg" alt="akemi okamura"></a></td>
</tr>
<tr>
<td><a href="#usopp">Sniper</a></td>
<td><a href="#usopp">God Usopp</a></td>
<td><a href="#usopp">Usopp</a></td>
<td class="poster"><a href="#usopp"><img src="./images/posters/usopp_poster.jpeg" alt=""></a>
<td class="poster"><a href="#usopp"><img src="./images/posters/usopp_poster.jpeg" alt="usopp poster"></a>
</td>
<td>500,000,000 Belly</td>
<td><a href="https://en.wikipedia.org/wiki/Kappei_Yamaguchi">Kappei Yamaguchi</a></td>
<td class="voice_actor"><a href="https://en.wikipedia.org/wiki/Kappei_Yamaguchi"><img
src="./images/voice_actors/kappei_yamaguchi.jpeg" alt=""></a></td>
src="./images/voice_actors/kappei_yamaguchi.jpeg" alt="kappei yamaguchi"></a></td>
</tr>
<tr>
<td><a href="#sanji">Cook</a></td>
<td><a href="#sanji">Black Leg Sanji</a></td>
<td><a href="#sanji">Vinsmoke Sanji</a></td>
<td class="poster"><a href="#sanji"><img src="./images/posters/sanji_poster.jpeg" alt=""></a>
<td class="poster"><a href="#sanji"><img src="./images/posters/sanji_poster.jpeg" alt="sanji poster"></a>
</td>
<td>1,032,000,000 Belly</td>
<td><a href="https://en.wikipedia.org/wiki/Hiroaki_Hirata">Hiroaki Hirata</a></td>
<td class="voice_actor"><a href="https://en.wikipedia.org/wiki/Hiroaki_Hirata"><img
src="./images/voice_actors/hiroaki_hirata.jpeg" alt=""></a></td>
src="./images/voice_actors/hiroaki_hirata.jpeg" alt="hiroaki hirata"></a></td>
</tr>
<tr>
<td><a href="#chopper">Doctor</a></td>
<td><a href="#chopper">Cotton Candy Lover Chopper</a></td>
<td><a href="#chopper">Tony Tony Chopper</a></td>
<td class="poster"><a href="#chopper"><img src="./images/posters/chopper_poster.jpeg" alt=""></a>
<td class="poster"><a href="#chopper"><img src="./images/posters/chopper_poster.jpeg" alt="chopper poster"></a>
</td>
<td>1000 Belly</td>
<td><a href="https://en.wikipedia.org/wiki/Ikue_%C5%8Ctani">Ikue Otani</a></td>
<td class="voice_actor"><a href="https://en.wikipedia.org/wiki/Ikue_%C5%8Ctani"><img
src="./images/voice_actors/ikue_otani.jpg" alt=""></a></td>
src="./images/voice_actors/ikue_otani.jpg" alt="ikue otani"></a></td>
</tr>
<tr>
<td><a href="#robin">Archaeologist</a></td>
<td><a href="#robin">Devil Child Robin</a></td>
<td><a href="#robin">Nico Robin</a></td>
<td class="poster"><a href="#robin"><img src="./images/posters/robin_poster.jpeg" alt=""></a>
<td class="poster"><a href="#robin"><img src="./images/posters/robin_poster.jpeg" alt="robin poster"></a>
</td>
<td>930,000,000 Belly</td>
<td><a href="https://en.wikipedia.org/wiki/Yuriko_Yamaguchi_(voice_actress)">Yuriko Ymaguchi</a>
</td>
<td class="voice_actor"><a
href="https://en.wikipedia.org/wiki/Yuriko_Yamaguchi_(voice_actress)"><img
src="./images/voice_actors/yuriko_yamaguchi.jpeg" alt=""></a></td>
src="./images/voice_actors/yuriko_yamaguchi.jpeg" alt="yuriko yamaguchi"></a></td>
</tr>
<tr>
<td><a href="#franky">Shipwright</a></td>
<td><a href="#franky">Cyborg Franky</a></td>
<td><a href="#franky">Franky</a></td>
<td class="poster"><a href="#franky"><img src="./images/posters/franky_poster.jpeg" alt=""></a>
<td class="poster"><a href="#franky"><img src="./images/posters/franky_poster.jpeg" alt="franky poster"></a>
</td>
<td>394,000,000 Belly</td>
<td><a href="https://en.wikipedia.org/wiki/Kazuki_Yao">Kazuki Yao</a></td>
<td class="voice_actor"><a href="https://en.wikipedia.org/wiki/Kazuki_Yao"><img
src="./images/voice_actors/kazuki_yao.jpeg" alt=""></a></td>
src="./images/voice_actors/kazuki_yao.jpeg" alt="kazuki yao"></a></td>
</tr>
<tr>
<td><a href="#brook">Musician</a></td>
<td><a href="#brook">Soul King Brook</a></td>
<td><a href="#brook">Brook</a></td>
<td class="poster"><a href="#brook"><img src="./images/posters/brook_poster.jpeg" alt=""></a>
<td class="poster"><a href="#brook"><img src="./images/posters/brook_poster.jpeg" alt="brook poster"></a>
</td>
<td>383,000,000 Belly</td>
<td><a href="https://en.wikipedia.org/wiki/Ch%C5%8D">Yūichi Nagashima / Chō</a></td>
<td class="voice_actor"><a href="https://en.wikipedia.org/wiki/Ch%C5%8D"><img
src="./images/voice_actors/yūichi_nagashima.jpeg" alt=""></a></td>
src="./images/voice_actors/yūichi_nagashima.jpeg" alt="yuichi nagashima"></a></td>
</tr>
<tr>
<td><a href="#jinbe">Helmsman</a></td>
<td><a href="#jinbe">Knight Of The Sea Jinbe</a></td>
<td><a href="#jinbe">Jinbe</a></td>
<td class="poster"><a href="#jinbe"><img src="./images/posters/jinbe_poster.jpg" alt=""></a>
<td class="poster"><a href="#jinbe"><img src="./images/posters/jinbe_poster.jpg" alt="jinbe poster"></a>
</td>
<td>1,100,000,000 Belly</td>
<td><a href="https://en.wikipedia.org/wiki/Katsuhisa_H%C5%8Dki">Katsuhisa Hōki</a></td>
<td class="voice_actor"><a href="https://en.wikipedia.org/wiki/Katsuhisa_H%C5%8Dki"><img
src="./images/voice_actors/katsuhisa_hōki.jpeg" alt=""></a></td>
src="./images/voice_actors/katsuhisa_hōki.jpeg" alt="katsuhisa hoki"></a></td>
</tr>
</tbody>
</table>
</div>
<div class="members-description">
<main>Members Description</main>
<header>Members Description</header>
<ul>
<li>
<details>
Expand Down
Loading

0 comments on commit fb5b740

Please sign in to comment.