diff --git a/CSS/characters.css b/CSS/characters.css index e69de29..d86d62c 100644 --- a/CSS/characters.css +++ b/CSS/characters.css @@ -0,0 +1,284 @@ +* { + font-family: 'Quela', sans-serif; + margin: 0; + padding: 0; +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + background-image: url(../images/background/background_characters.jpeg); + background-size: cover; + background-repeat: no-repeat repeat; + padding: 0; + margin: 0; +} + +/* 1st part */ +.header { + display: flex; + align-items: center; + justify-content: space-between; + height: max-content; + background-color: rgba(0, 0, 0, 0.503); + padding: 0 5%; + margin: 0 0 5% 0; +} + +.header_left { + flex: 1; + display: flex; + align-items: center; +} + +.header_left span { + text-decoration: none; + color: rgb(255, 0, 0); + font-size: 300%; + font-weight: bolder; +} + +.header_left span:hover { + color: rgba(255, 255, 255, 0.775); + text-shadow: 2px 2px rgb(255, 0, 0); +} + +.header_right { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 5%; + flex-wrap: wrap; +} + +.header_right a { + text-decoration: none; + color: rgba(255, 255, 255, 0.729); + font-size: 120%; + font-weight: bold; +} + +.header_right a:hover { + color: rgb(255, 0, 0); + text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.7); +} + +.header_icons { + flex: 1; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; +} + +.header_icons img { + cursor: pointer; + height: 30px; +} + +.header_icons img:hover { + transform: scale(1.2); +} + +/* logo section */ +.logo { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; +} + +.logo img { + height: 200px; +} + +.crew-name{ + align-self: center; + color: rgba(255, 255, 255, 0.8); + text-shadow: 5px 5px rgb(255, 0, 0); + font-size: 500%; + font-weight: bold; + margin: 0; +} + +.know-more { + margin-top: 2%; + align-self: center; + color: rgb(255, 255, 255); + font-size: 150%; + background-color: rgba(255, 0, 0, 0.616); + border: 2px solid rgb(255, 255, 255); + border-radius: 5px; + padding: 10px; +} + +.know-more a{ + text-decoration: none; + color: rgb(255, 255, 255); +} + +/* Table part */ +.wrapper { + 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; + max-width: max-content; + align-self: center; + max-height: 1000px; + overflow-y: scroll; + scrollbar-width: thin; +} + +table, +th, +td { + border: 2px solid rgb(255, 255, 121); + border-collapse: collapse; + text-align: center; + background-color: rgba(122, 122, 122, 0.218); +} + +thead { + top: 0; + font-size: 200%; + position: sticky; + background-color: teal; + color: wheat; + height: 100px; +} + +td{ + font-size: 120%; + color: rgb(255, 255, 255); + max-width: fit-content; + padding: 20px; +} + +.poster img, +.voice_actor img { + width: 150px; + height: 200px; +} + +.voice_actor img { + object-fit: cover; +} + +td a{ + text-decoration: none; + color: rgb(255, 255, 255); + font-weight: bold; +} + +td a:hover:not(.poster a, .voice_actor a){ + color: teal; + background-color: rgba(255, 255, 255, 0.672); + box-shadow: 2px 2px 5px rgb(34, 34, 34); + border-radius: 5px; + padding: 30px; + cursor: pointer; +} + +/* character description */ +.members-description { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 0 5%; + margin: 0 0 5% 0; + background-color: rgba(0, 0, 0, 0.2); +} + +.members-description main { + color: rgb(255, 255, 255); + font-size: 300%; + font-weight: bold; + margin: 5% 0; +} + +.members-description main:hover { + color: rgb(255, 0, 0); + background-color: aliceblue; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.601); + border: 2px solid rgba(255, 0, 0, 0.724); + border-radius: 20px; + padding: 10px; + cursor: pointer; +} + +.members-description ul { + list-style: none; +} + +.members-description details p{ + color: rgb(255, 255, 255); + font-weight: bold; + font-size: 150%; +} + +details[open] { + padding-bottom: 1em; + background: rgba(0, 0, 0, 0.5); + border: 2px solid; + border-radius: 10px; + padding: 30px; +} + +summary { + position: relative; +} + +summary::marker { + content: none; +} + +summary::before, +summary::after { + content: ''; +} + +summary { + cursor: pointer; +} + +.name { + color: rgb(0, 255, 255); + font-size: 200%; + font-weight: bold; + margin: 10px 0; +} + +.name:hover:not(.details[open]){ + color: rgb(255, 255, 255); + background-color: rgba(255, 0, 0, 0.639); + box-shadow: 2px 2px 5px rgb(34, 34, 34); + border-radius: 10px; + padding: 10px; + cursor: pointer; + max-width: fit-content; + border: 1px solid rgba(255, 255, 255, 0.717); +} + +/* 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; +} + +.footer footer { + color: rgba(255, 255, 255, 0.7); + font-size: 120%; + font-weight: bold; +} \ No newline at end of file diff --git a/CSS/contact.css b/CSS/contact.css new file mode 100644 index 0000000..3d65f39 --- /dev/null +++ b/CSS/contact.css @@ -0,0 +1,223 @@ +* { + box-sizing: border-box; + font-family: 'Quela', sans-serif; + margin: 0; + padding: 0; +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + background-image: url(../images/background/background_index.jpg); + background-position: center; + background-size: cover; + background-repeat: no-repeat repeat; + padding: 0; + margin: 0; +} + + +/* 1st part */ +.header { + display: flex; + align-items: center; + justify-content: space-between; + height: max-content; + background-color: rgba(0, 0, 0, 0.503); + padding: 0 5%; + margin: 0 0 5% 0; +} + +.header_left { + flex: 1; + display: flex; + align-items: center; +} + +.header_left span { + text-decoration: none; + color: rgb(255, 0, 0); + font-size: 300%; + font-weight: bolder; +} + +.header_left span:hover { + color: rgba(255, 255, 255, 0.775); + text-shadow: 2px 2px rgb(255, 0, 0); +} + +.header_right { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 5%; + flex-wrap: wrap; +} + +.header_right a { + text-decoration: none; + color: rgba(255, 255, 255, 0.729); + font-size: 120%; + font-weight: bold; +} + +.header_right a:hover { + color: rgb(255, 0, 0); + text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.7); +} + +.header_icons { + flex: 1; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; +} + +.header_icons img { + cursor: pointer; + height: 30px; +} + +.header_icons img:hover { + transform: scale(1.2); +} + +/* logo section */ +.logo { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; +} + +.logo img { + height: 200px; +} + +/* 2nd part */ +.blackboard { + position: relative; + width: 640px; + margin: 7% auto; + border: tan solid 12px; + border-top: #bda27e solid 12px; + border-left: #b19876 solid 12px; + border-bottom: #c9ad86 solid 12px; + box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5); + background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1)); + background-color: #333; +} + +.blackboard:before { + box-sizing: border-box; + display: block; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient( 175deg, transparent, transparent 40px, rgba(120, 120, 120, 0.1) 100px, rgba(120, 120, 120, 0.1) 110px, transparent 220px, transparent), linear-gradient( 200deg, transparent 80%, rgba(50, 50, 50, 0.3)), radial-gradient( ellipse at right bottom, transparent, transparent 200px, rgba(80, 80, 80, 0.1) 260px, rgba(80, 80, 80, 0.1) 320px, transparent 400px, transparent); + border: #2c2c2c solid 2px; + content: "Contact Us"; + font-size: 2.2em; + color: rgba(238, 238, 238, 0.7); + text-align: center; + padding-top: 20px; +} + +.form { + padding: 70px 20px 20px; +} + +p { + position: relative; + margin-bottom: 1em; +} + +label { + vertical-align: middle; + font-size: 1.6em; + color: rgba(238, 238, 238, 0.7); +} + +p:nth-of-type(5) > label { + vertical-align: top; +} + +input, +textarea { + vertical-align: middle; + padding-left: 10px; + background: none; + border: none; + font-size: 1.6em; + color: rgba(238, 238, 238, 0.8); + line-height: .6em; + outline: none; +} + +textarea { + height: 120px; + font-size: 1.4em; + line-height: 1em; + resize: none; +} + +input[type="submit"] { + cursor: pointer; + color: rgba(238, 238, 238, 0.7); + line-height: 1em; + padding: 0; +} + +input[type="submit"]:focus { + background: rgba(238, 238, 238, 0.2); + color: rgba(238, 238, 238, 0.2); +} + +::-moz-selection { + background: rgba(238, 238, 238, 0.2); + color: rgba(238, 238, 238, 0.2); + text-shadow: none; +} + +::selection { + background: rgba(238, 238, 238, 0.4); + color: rgba(238, 238, 238, 0.3); + 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; + justify-content: center; + height: 50px; + max-width: fit-content; + background-color: rgba(0, 0, 0, 0.616); + margin: 10% 0 0 0; + padding: 0 5%; + border-radius: 5px; +} + +.wipeout:hover{ + background-color: rgba(0, 0, 0, 0.616); + transform: scale(1.1); +} + +.footer footer { + color: rgba(255, 255, 255, 0.7); + font-size: 120%; + font-weight: bold; +} \ No newline at end of file diff --git a/CSS/gallery.css b/CSS/gallery.css index 4db864a..fa32fb5 100644 --- a/CSS/gallery.css +++ b/CSS/gallery.css @@ -1,4 +1,4 @@ -*{ +* { box-sizing: border-box; font-family: 'Quela', sans-serif; margin: 0; @@ -9,7 +9,8 @@ body { display: flex; flex-direction: column; justify-content: center; - background-image: url(../images/background\ gallery.jpg); + background-image: url(../images/background/background_gallery.jpg); + background-position: center; background-size: cover; background-repeat: no-repeat repeat; padding: 0; @@ -24,14 +25,13 @@ body { height: max-content; background-color: rgba(0, 0, 0, 0.503); padding: 0 5%; - margin: 0; + margin: 0 0 5% 0; } .header_left { flex: 1; display: flex; align-items: center; - /* justify-content: flex-start; */ } .header_left span { @@ -41,6 +41,11 @@ body { font-weight: bolder; } +.header_left span:hover { + color: rgba(255, 255, 255, 0.775); + text-shadow: 2px 2px rgb(255, 0, 0); +} + .header_right { flex: 1; display: flex; @@ -57,7 +62,12 @@ body { font-weight: bold; } -.header_icons{ +.header_right a:hover { + color: rgb(255, 0, 0); + text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.7); +} + +.header_icons { flex: 1; display: flex; align-items: center; @@ -65,20 +75,36 @@ body { gap: 10px; } -.header_icons span{ +.header_icons img { cursor: pointer; - color: rgba(255, 255, 255, 0.729); - font-size: 200%; + height: 30px; +} + +.header_icons img:hover { + transform: scale(1.2); +} + +/* logo section */ +.logo { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; +} + +.logo img { + height: 200px; } /* 2nd part */ -.gallery{ +.gallery { display: flex; flex-direction: column; gap: 10px; } -.gallery_of_three{ +.gallery_of_three { display: flex; align-items: center; justify-content: space-between; @@ -89,7 +115,7 @@ body { margin-bottom: 100px; } -.gallery_of_three img{ +.gallery_of_three img { object-fit: cover; width: 450px; height: 300px; @@ -97,7 +123,7 @@ body { } /* 3rd part */ -.poster{ +.poster { display: flex; align-items: center; justify-content: space-between; @@ -108,42 +134,59 @@ body { margin-top: 100px; } -.poster img{ +.poster img { width: 300px; height: 500px; border: solid 1px #CCC } -.rotate_gallery{ +/* refrence avaliable in readme file */ +.rotate_gallery { align-self: center; - width:300px; - height:200px; + width: 300px; + height: 200px; transform-style: preserve-3d; - animation:rotate 20s linear infinite; - } - - @keyframes rotate{ - from{ - transform:perspective(1200px) rotateY(0deg); + animation: rotate 20s linear infinite; +} + +@keyframes rotate { + from { + transform: perspective(1200px) rotateY(0deg); } - - to{ - transform:perspective(1200px) rotateY(360deg); + + to { + transform: perspective(1200px) rotateY(360deg); } - } - - .rotate_gallery span{ - position:absolute; - width:100%; - height:100%; - transform-origin:center; - transform-style:preserve-3d; - transform:rotateY(calc(var(--i) * 45deg)) translateZ(380px); - } - - .rotate_gallery span img{ - position:absolute; - width:100%; - height:100%; - object-fit:cover; - } \ No newline at end of file +} + +.rotate_gallery span { + position: absolute; + width: 100%; + height: 100%; + transform-origin: center; + transform-style: preserve-3d; + transform: rotateY(calc(var(--i) * 45deg)) translateZ(380px); +} + +.rotate_gallery span img { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; +} + +.footer { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + background-color: rgba(0, 0, 0, 0.616); + padding: 0 5%; + margin: 5% 0 0 0; +} + +.footer footer { + color: rgba(255, 255, 255, 0.7); + font-size: 120%; + font-weight: bold; +} \ No newline at end of file diff --git a/CSS/index.css b/CSS/index.css index b5132ca..d70093c 100644 --- a/CSS/index.css +++ b/CSS/index.css @@ -1,4 +1,4 @@ -*{ +* { box-sizing: border-box; font-family: 'Quela', sans-serif; margin: 0; @@ -8,9 +8,8 @@ body { display: flex; flex-direction: column; - /* align-items: center; */ justify-content: center; - background-image: url(../images/background_index.jpg); + background-image: url(../images/background/background_index.jpg); background-position: center; background-size: cover; background-repeat: no-repeat repeat; @@ -25,16 +24,15 @@ body { align-items: center; justify-content: space-between; height: max-content; - background-color: rgba(0, 0, 0, 0.614); + background-color: rgba(0, 0, 0, 0.503); padding: 0 5%; - margin: 0; + margin: 0 0 5% 0; } .header_left { flex: 1; display: flex; align-items: center; - /* justify-content: flex-start; */ } .header_left span { @@ -44,6 +42,11 @@ body { font-weight: bolder; } +.header_left span:hover { + color: rgba(255, 255, 255, 0.775); + text-shadow: 2px 2px rgb(255, 0, 0); +} + .header_right { flex: 1; display: flex; @@ -60,7 +63,12 @@ body { font-weight: bold; } -.header_icons{ +.header_right a:hover { + color: rgb(255, 0, 0); + text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.7); +} + +.header_icons { flex: 1; display: flex; align-items: center; @@ -68,10 +76,26 @@ body { gap: 10px; } -.header_icons span{ +.header_icons img { cursor: pointer; - color: rgba(255, 255, 255, 0.729); - font-size: 200%; + height: 30px; +} + +.header_icons img:hover { + transform: scale(1.2); +} + +/* logo section */ +.logo { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; +} + +.logo img { + height: 200px; } /* 2nd part */ @@ -79,8 +103,8 @@ body { display: flex; align-items: center; height: max-content; - gap: 10%; - padding: 10% 5%; + gap: 5%; + padding: 0 5%; } .detail { @@ -90,40 +114,39 @@ body { align-items: flex-start; justify-content: flex-start; gap: 30px; - /* position: fixed; */ } -.one_piece{ +.one_piece { font-size: 400%; font-weight: bolder; color: rgba(255, 255, 255, 0.898); } -.rating{ +.rating { display: flex; justify-content: flex-end; align-items: center; gap: 10px; } -.checked{ - color: rgb(246, 255, 0); +.rating img { + height: 30px; } -.description{ +.description { font-size: 120%; color: rgba(206, 206, 206, 0.855); } .genre, .release, -.author{ +.author { display: flex; } .genre_heading, .release_heading, -.author_heading{ +.author_heading { font-size: 120%; color: rgba(255, 0, 0, 0.932); font-weight: bolder; @@ -131,19 +154,19 @@ body { .genre_content, .release_content, -.author_content{ +.author_content { font-size: 120%; color: rgba(255, 255, 255, 0.932); font-style: italic; } -.play_button{ +.play_button { display: flex; align-items: center; justify-content: flex-start; } -.button{ +.button { min-width: 120px; min-height: 30px; font-weight: bold; @@ -153,51 +176,73 @@ body { border-radius: 2px; } -.button:hover{ +.button:hover { background-color: rgba(255, 0, 0, 0.5); } -.button:active{ +.button:active { background-color: rgb(0, 0, 0); } -.button:focus{ +.button:focus { outline-color: transparent; outline-style: solid; box-shadow: 0 0 0 2px rgb(255, 0, 0); } -.opening_clip, -.opening_clip a{ +/* refrence avaliable in readme file */ +.imageBox { flex: 1; display: flex; align-items: center; - justify-content: center; + justify-content: flex-start; gap: 10px; + flex-wrap: wrap; } -.opening_clip a{ - flex-wrap: wrap; +.imageBox a { + position: relative; } -.opening_clip a i{ - font-size: 1000%; - text-decoration: none; - color: rgba(255, 255, 255, 0.808); +.imageBox img { + width: 150px; } -.opening_clip a i:hover{ - color: rgba(255, 0, 0, 0.7); +.imageBox .hoverImg { + position: absolute; + left: 0; + top: 0; + display: none; } -.opening_clip a i:active{ - color: rgba(0, 0, 0, 0.7); +.imageBox a:hover .hoverImg { + display: flex; } -.opening_clip a span{ +.imageBox a span { font-size: 150%; - color: rgba(255, 255, 255, 0.932); + color: rgb(255, 255, 255, 1); + text-shadow: 0px 0px 20px rgba(255, 0, 0, 0.9); flex-wrap: wrap; } - \ No newline at end of file +.imageBox a span:hover { + color: rgb(255, 0, 0, 0.9); + text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.7); +} + +.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%; +} + +.footer footer { + color: rgba(255, 255, 255, 0.7); + font-size: 120%; + font-weight: bold; +} \ No newline at end of file diff --git a/CSS/plot.css b/CSS/plot.css index e69de29..145ea70 100644 --- a/CSS/plot.css +++ b/CSS/plot.css @@ -0,0 +1,272 @@ +* { + box-sizing: border-box; + font-family: "Quela", sans-serif; +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + background-image: url(../images/background/background_plot.jpg); + background-position: top; + padding: 0; + margin: 0; +} + +/* 1st part */ +.header { + display: flex; + align-items: center; + justify-content: space-between; + height: max-content; + background-color: rgba(0, 0, 0, 0.503); + padding: 0 5%; + margin: 0 0 5% 0; +} + +.header_left { + flex: 1; + display: flex; + align-items: center; +} + +.header_left span { + text-decoration: none; + color: rgb(255, 0, 0); + font-size: 300%; + font-weight: bolder; +} + +.header_left span:hover { + color: rgba(255, 255, 255, 0.775); + text-shadow: 2px 2px rgb(255, 0, 0); +} + +.header_right { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 5%; + flex-wrap: wrap; +} + +.header_right a { + text-decoration: none; + color: rgba(255, 255, 255, 0.729); + font-size: 120%; + font-weight: bold; +} + +.header_right a:hover { + color: rgb(255, 0, 0); + text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.7); +} + +.header_icons { + flex: 1; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; +} + +.header_icons img { + cursor: pointer; + height: 30px; +} + +.header_icons img:hover { + transform: scale(1.2); +} + +/* logo section */ +.logo { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; +} + +.logo img { + height: 200px; +} + +/* table of contents part */ +.toc-wrapper { + background: #fff; + box-shadow: 0 3px 30px rgba(0, 0, 0, 0.2); + min-width: 600px; + max-width: fit-content; + margin: auto; + border-radius: 0 50px 0 50px; + padding: 0; + max-height: 500px; + overflow-y: scroll; +} + +.toc-header { + background: #181d3b; + padding: 30px; + margin: 0; + border-radius: 0 50px 0 100px; + min-height: 100px; + display: flex; + align-items: center; +} + +.toc-heading { + font-size: 30px; + color: #fff; + margin: 0; + text-align: center; + width: 100%; + font-weight: 600; +} + +.toc-list-wrapper { + background-color: #181d3b; + border-radius: 50px 50px 0 50px; +} + +.toc-list-main { + border-radius: 0 0 0 100px; + background: #fff; + margin: 0; + padding: 50px; + list-style: none; +} + +.toc-list { + border-radius: 0 0 0 100px; + background: #fff; + margin: 0; + list-style: none; +} + +.toc-list-item { + margin: 15px; +} + +.toc-list-item a { + position: relative; + color: #4c4c4c; + text-decoration: none; + font-weight: 600; + font-size: 18px; + display: block; + padding: 10px 10px 10px 50px; + border-radius: 10px; + cursor: pointer; + transition: 0.2s ease; +} + +.toc-list-item a::before { + content: ""; + width: 25px; + height: 25px; + background-color: #f65964; + position: absolute; + border-radius: 60%; + left: 10px; + top: 0; + bottom: 0; + margin: auto; +} + +.toc-list-item a:hover { + box-shadow: 0 8px 15px rgb(246, 90, 100, 0.55); + background: #f65964; + color: #fff; +} + +.toc-list-item a:hover::before { + background: #fff; +} + +/* cotent part */ +.content_of_plot{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 10px; + padding: 0 5%; + margin: 5% 0 0 0; + background-color: rgba(255, 255, 255, 0.5); + border: #181d3b; + border-radius: 50px; +} + +.arcs_and_sagas{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 10px; +} + +.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 p:hover{ + color: rgba(255, 255, 255); + background-color: #f65964; + cursor: pointer; + padding: 10px; + border-radius: 10px; + max-width: fit-content; + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6) + +} + +.content_of_plot h1{ + font-size: 300%; + color: rgba(0, 0, 0); +} + +.content_of_plot h2{ + font-size: 250%; + color: rgb(0, 94, 255); +} + +.content_of_plot h3{ + font-size: 200%; + color: rgb(0, 255, 149); +} + +.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); +} + +.content_of_plot p{ + font-size: 120%; +} + +.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%; +} + +.footer footer { + color: rgba(255, 255, 255, 0.7); + font-size: 120%; + font-weight: bold; +} diff --git a/CSS/trivia.css b/CSS/trivia.css deleted file mode 100644 index e69de29..0000000 diff --git a/characters.html b/characters.html index cee4e91..e0b6592 100644 --- a/characters.html +++ b/characters.html @@ -1,29 +1,334 @@ + - + - Cast + Characters in One Piece +
-
+
ANIME -
-
+ +
Home - Gallery - Characters + Characters Plot - Trivia -
+ Gallery + Contact +
- - + +
-
+ +
+
The Straw Hat Crew
+
+
+ +

Click on the names in the table to know more..

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleEpithetFictional CharactersBountyVoice Actors
The CaptainStraw Hat LuffyMonkey D Luffy + 3,000,000,000 BellyMayumi Tanaka
SwordsmanPirate Hunter ZoroRoronoa Zoro1,111,000,000 BellyKazuya Nakai
NavigatorCat Burglar NamiNami366,000,000 BellyAkemi Okamura
SniperGod UsoppUsopp + 500,000,000 BellyKappei Yamaguchi
CookBlack Leg SanjiVinsmoke Sanji + 1,032,000,000 BellyHiroaki Hirata
DoctorCotton Candy Lover ChopperTony Tony Chopper + 1000 BellyIkue Otani
ArchaeologistDevil Child RobinNico Robin + 930,000,000 BellyYuriko Ymaguchi +
ShipwrightCyborg FrankyFranky + 394,000,000 BellyKazuki Yao
MusicianSoul King BrookBrook + 383,000,000 BellyYūichi Nagashima / Chō
HelmsmanKnight Of The Sea JinbeJinbe + 1,100,000,000 BellyKatsuhisa Hōki
+
+
+
Members Description
+ +
+ - \ No newline at end of file + + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..6a19a75 --- /dev/null +++ b/contact.html @@ -0,0 +1,67 @@ + + + + + + + + + + Contact us forum + + + +
+
+ ANIME +
+
+ Home + Characters + Plot + Gallery + Contact +
+
+ + +
+
+ +
+
+
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ +

+
+
+
+ + + + \ No newline at end of file diff --git a/gallery.html b/gallery.html index 5e52b6c..7731633 100644 --- a/gallery.html +++ b/gallery.html @@ -7,79 +7,85 @@ - Gallery + Some images from One Piece
-
+
ANIME -
-
+ +
Home - Gallery Characters Plot - Trivia -
+ Gallery + Contact +
- - + +
+ + \ No newline at end of file diff --git a/images/Icons/One-Piece-Logo.png b/images/Icons/One-Piece-Logo.png new file mode 100644 index 0000000..fabb1f9 Binary files /dev/null and b/images/Icons/One-Piece-Logo.png differ diff --git a/images/Icons/contacts.png b/images/Icons/contacts.png new file mode 100644 index 0000000..ce9304e Binary files /dev/null and b/images/Icons/contacts.png differ diff --git a/images/Icons/play_icon.png b/images/Icons/play_icon.png new file mode 100644 index 0000000..d7d3559 Binary files /dev/null and b/images/Icons/play_icon.png differ diff --git a/images/Icons/play_icon_hover.png b/images/Icons/play_icon_hover.png new file mode 100644 index 0000000..26c69ec Binary files /dev/null and b/images/Icons/play_icon_hover.png differ diff --git a/images/Icons/search.png b/images/Icons/search.png new file mode 100644 index 0000000..5c31ed8 Binary files /dev/null and b/images/Icons/search.png differ diff --git a/images/Icons/star.png b/images/Icons/star.png new file mode 100644 index 0000000..1bcb4ed Binary files /dev/null and b/images/Icons/star.png differ diff --git a/images/background/background_characters.jpeg b/images/background/background_characters.jpeg new file mode 100644 index 0000000..065d928 Binary files /dev/null and b/images/background/background_characters.jpeg differ diff --git a/images/background gallery.jpg b/images/background/background_gallery.jpg similarity index 100% rename from images/background gallery.jpg rename to images/background/background_gallery.jpg diff --git a/images/background_index.jpg b/images/background/background_index.jpg similarity index 100% rename from images/background_index.jpg rename to images/background/background_index.jpg diff --git a/images/background/background_plot.jpg b/images/background/background_plot.jpg new file mode 100644 index 0000000..5139886 Binary files /dev/null and b/images/background/background_plot.jpg differ diff --git a/images/gallery1.jpg b/images/main_gallery/gallery1.jpg similarity index 100% rename from images/gallery1.jpg rename to images/main_gallery/gallery1.jpg diff --git a/images/gallery3.jpg b/images/main_gallery/gallery3.jpg similarity index 100% rename from images/gallery3.jpg rename to images/main_gallery/gallery3.jpg diff --git a/images/gallery5.jpg b/images/main_gallery/gallery5.jpg similarity index 100% rename from images/gallery5.jpg rename to images/main_gallery/gallery5.jpg diff --git a/images/brook_poster.jpeg b/images/posters/brook_poster.jpeg similarity index 100% rename from images/brook_poster.jpeg rename to images/posters/brook_poster.jpeg diff --git a/images/chopper_poster.jpeg b/images/posters/chopper_poster.jpeg similarity index 100% rename from images/chopper_poster.jpeg rename to images/posters/chopper_poster.jpeg diff --git a/images/franky_poster.jpeg b/images/posters/franky_poster.jpeg similarity index 100% rename from images/franky_poster.jpeg rename to images/posters/franky_poster.jpeg diff --git a/images/jinbe_poster.jpg b/images/posters/jinbe_poster.jpg similarity index 100% rename from images/jinbe_poster.jpg rename to images/posters/jinbe_poster.jpg diff --git a/images/luffy_poster.jpeg b/images/posters/luffy_poster.jpeg similarity index 100% rename from images/luffy_poster.jpeg rename to images/posters/luffy_poster.jpeg diff --git a/images/nami_poster.jpeg b/images/posters/nami_poster.jpeg similarity index 100% rename from images/nami_poster.jpeg rename to images/posters/nami_poster.jpeg diff --git a/images/robin_poster.jpeg b/images/posters/robin_poster.jpeg similarity index 100% rename from images/robin_poster.jpeg rename to images/posters/robin_poster.jpeg diff --git a/images/sanji_poster.jpeg b/images/posters/sanji_poster.jpeg similarity index 100% rename from images/sanji_poster.jpeg rename to images/posters/sanji_poster.jpeg diff --git a/images/shanks_poster.jpeg b/images/posters/shanks_poster.jpeg similarity index 100% rename from images/shanks_poster.jpeg rename to images/posters/shanks_poster.jpeg diff --git a/images/usopp_poster.jpeg b/images/posters/usopp_poster.jpeg similarity index 100% rename from images/usopp_poster.jpeg rename to images/posters/usopp_poster.jpeg diff --git a/images/zoro_poster.jpeg b/images/posters/zoro_poster.jpeg similarity index 100% rename from images/zoro_poster.jpeg rename to images/posters/zoro_poster.jpeg diff --git a/images/rotate1.jpeg b/images/rotate_image/rotate1.jpeg similarity index 100% rename from images/rotate1.jpeg rename to images/rotate_image/rotate1.jpeg diff --git a/images/rotate2.jpeg b/images/rotate_image/rotate2.jpeg similarity index 100% rename from images/rotate2.jpeg rename to images/rotate_image/rotate2.jpeg diff --git a/images/rotate3.jpeg b/images/rotate_image/rotate3.jpeg similarity index 100% rename from images/rotate3.jpeg rename to images/rotate_image/rotate3.jpeg diff --git a/images/rotate4.jpeg b/images/rotate_image/rotate4.jpeg similarity index 100% rename from images/rotate4.jpeg rename to images/rotate_image/rotate4.jpeg diff --git a/images/rotate5.jpeg b/images/rotate_image/rotate5.jpeg similarity index 100% rename from images/rotate5.jpeg rename to images/rotate_image/rotate5.jpeg diff --git a/images/rotate6.jpeg b/images/rotate_image/rotate6.jpeg similarity index 100% rename from images/rotate6.jpeg rename to images/rotate_image/rotate6.jpeg diff --git a/images/rotate7.jpeg b/images/rotate_image/rotate7.jpeg similarity index 100% rename from images/rotate7.jpeg rename to images/rotate_image/rotate7.jpeg diff --git a/images/rotate8.jpeg b/images/rotate_image/rotate8.jpeg similarity index 100% rename from images/rotate8.jpeg rename to images/rotate_image/rotate8.jpeg diff --git a/images/voice_actors/akemi_okamura.jpg b/images/voice_actors/akemi_okamura.jpg new file mode 100644 index 0000000..fe0d259 Binary files /dev/null and b/images/voice_actors/akemi_okamura.jpg differ diff --git a/images/voice_actors/hiroaki_hirata.jpeg b/images/voice_actors/hiroaki_hirata.jpeg new file mode 100644 index 0000000..4cfb51e Binary files /dev/null and b/images/voice_actors/hiroaki_hirata.jpeg differ diff --git a/images/voice_actors/ikue_otani.jpg b/images/voice_actors/ikue_otani.jpg new file mode 100644 index 0000000..49e7b53 Binary files /dev/null and b/images/voice_actors/ikue_otani.jpg differ diff --git a/images/voice_actors/kappei_yamaguchi.jpeg b/images/voice_actors/kappei_yamaguchi.jpeg new file mode 100644 index 0000000..43f978a Binary files /dev/null and b/images/voice_actors/kappei_yamaguchi.jpeg differ diff --git "a/images/voice_actors/katsuhisa_h\305\215ki.jpeg" "b/images/voice_actors/katsuhisa_h\305\215ki.jpeg" new file mode 100644 index 0000000..c4e9abd Binary files /dev/null and "b/images/voice_actors/katsuhisa_h\305\215ki.jpeg" differ diff --git a/images/voice_actors/kazuki_yao.jpeg b/images/voice_actors/kazuki_yao.jpeg new file mode 100644 index 0000000..0d0605e Binary files /dev/null and b/images/voice_actors/kazuki_yao.jpeg differ diff --git a/images/voice_actors/kazuya_nakai.png b/images/voice_actors/kazuya_nakai.png new file mode 100644 index 0000000..baccd83 Binary files /dev/null and b/images/voice_actors/kazuya_nakai.png differ diff --git a/images/voice_actors/mayumi_tanaka.jpeg b/images/voice_actors/mayumi_tanaka.jpeg new file mode 100644 index 0000000..48ebb25 Binary files /dev/null and b/images/voice_actors/mayumi_tanaka.jpeg differ diff --git a/images/voice_actors/yuriko_yamaguchi.jpeg b/images/voice_actors/yuriko_yamaguchi.jpeg new file mode 100644 index 0000000..9cb8a87 Binary files /dev/null and b/images/voice_actors/yuriko_yamaguchi.jpeg differ diff --git "a/images/voice_actors/y\305\253ichi_nagashima.jpeg" "b/images/voice_actors/y\305\253ichi_nagashima.jpeg" new file mode 100644 index 0000000..2148f55 Binary files /dev/null and "b/images/voice_actors/y\305\253ichi_nagashima.jpeg" differ diff --git a/index.html b/index.html index 49df311..a550b8e 100644 --- a/index.html +++ b/index.html @@ -5,39 +5,41 @@ - One Piece
-
+
ANIME -
-
+ +
Home - Gallery Characters Plot - Trivia -
+ Gallery + Contact +
- - + +
+
- One Piece +
One Piece
- - - - - + + + + +   5.0 (imdb)     EP  1000+
@@ -64,15 +66,21 @@ NOW
- -
+
- - - + +
\ No newline at end of file diff --git a/plot.html b/plot.html index 5c1345c..01bc80f 100644 --- a/plot.html +++ b/plot.html @@ -1,29 +1,455 @@ + - - + - Plot/Story + Plot of One Piece +
-
+
ANIME +
+
+ Home + Characters + Plot + Gallery + Contact +
+
+ +
- + +
+
+

Contents

- +
+
+

Overview

+

+ One Piece (stylized in all caps) is a Japanese manga series written and illustrated by Eiichiro Oda. It + has been serialized in Shueisha's shōnen manga magazine Weekly Shōnen Jump since July 1997, with its + individual chapters compiled into 106 tankōbon volumes as of July 2023. The story follows the adventures + of Monkey D. Luffy and his crew, the Straw Hat Pirates, where he explores the Grand Line in search of + the mythical treasure known as the "One Piece" in order to become the next King of the Pirates. + + The manga spawned a media franchise, having been adapted into a festival film by Production I.G, and an + anime series by Toei Animation, which began broadcasting in 1999. Additionally, Toei has developed + fourteen animated feature films, one original video animation, and thirteen television specials. Several + companies have developed various types of merchandising and media, such as a trading card game and + numerous video games. The manga series was licensed for an English language release in North America and + the United Kingdom by Viz Media and in Australia by Madman Entertainment. The anime series was licensed + by 4Kids Entertainment for an English-language release in North America in 2004 before the license was + dropped and subsequently acquired by Funimation in 2007. +

+
+
+

Main Story Arcs

+

+ The manga can currently be broken down into 11 parts, following the feats of the Straw Hat Pirates: the + East Blue Saga, the Arabasta Saga, the Sky Island Saga, the Water 7 Saga, the Thriller Bark Saga, the + Summit War Saga, the Fish-Man Island Saga, the Dressrosa Saga, the Whole Cake Island Saga, the Wano + Country Saga, and the Final Saga. Each saga is divided into smaller story arcs. +

+
+
+

East Blue Saga

+

The East Blue Saga[1] (“東の海”イースト・ブルー編, "Īsuto Burū" Hen?) is both the first saga and introductory saga of the manga and anime One Piece.

+ +

Monkey D. Luffy meets the Red Hair Pirates as a young boy living in East Blue, swearing becoming the next Pirate King. 10 years later, Luffy sets sail and experiences first adventures, recruiting the first members of the Straw Hat Pirates.

+

In the manga and anime, this saga does not have a main antagonist, following the "villain of the week" format, with each arc having independent antagonists. The first season of the live-action series adapted Monkey D. Garp as a main antagonist, to serve as the main threat.

+
+

Romance Dawn Arc

+

The Romance Dawn Arc is the first story arc of the manga and anime One Piece, and the first story arc of the East Blue Saga.

+

Seven-year-old Monkey D. Luffy befriends the Red Hair Pirates and swears to their captain, Shanks, that he will become a great pirate. Ten years later, Luffy sets sail and confronts the brutish female pirate Alvida. He then travels to Shells Town, which is ruled over by the tyrannical Marine Captain Morgan. There he meets "Pirate Hunter" Roronoa Zoro, a dangerous criminal whom he wishes to become his first crewmate.

+
+
+

Orange Town Arc

+

The Orange Town Arc, also referred to as the Organ Islands Arc, is the second story arc of the manga and anime One Piece, and the second story arc of the East Blue Saga.

+

As Luffy and Zoro aimlessly sail across the sea, they end up at Orange Town, an island under siege by clown-themed pirate Buggy and his crew. There, Luffy meets a pirate-targeting burglar, Nami, who he wishes to recruit into his crew as his navigator.

+
+
+

Syrup Village Arc

+

The Syrup Village Arc, also referred to as the Gecko Islands Arc, is the third story arc of the manga and anime One Piece, and the third story arc of the East Blue Saga.

+

Luffy, Zoro and Nami arrive at Syrup Village looking for a ship, where they meet Usopp, the local village liar. After they learn of a secret plot against Usopp's friend Kaya, they decide they have no choice but to help him defeat Captain Kuro in order to save her.

+
+
+

Baratie Arc

+

The Baratie Arc, also referred to as the Sambas Region Arc, is the fourth story arc of the manga and anime One Piece, and the fourth story arc of the East Blue Saga.

+

The Straw Hat Pirates meet Johnny and Yosaku, old friends of Zoro, who direct them to the restaurant ship Baratie, a "floating oasis" in the middle of the ocean. There they meet chef Sanji, who Luffy wishes to recruit as his crew's cook. However, pirate admiral Don Krieg sets his sights on the Baratie as a replacement for his devastated fleet, and the restaurant soon comes under siege. As the battle breaks out, Zoro comes face to face with his ultimate rival, Dracule Mihawk, while Nami absconds with the Going Merry, forcing the crew to split up and take chase while Luffy protects the Baratie from Krieg.

+
+
+

Arlong Park Arc

+

The Arlong Park Arc, also referred to as the Cocoyasi Village Arc and Conomi Islands Arc, is the fifth story arc of the manga and anime One Piece, and the fifth story arc of the East Blue Saga. This is the last arc of season one of the Live Action series.

+

Zoro, Usopp and Johnny track Nami, who stole the Going Merry, to Cocoyasi Village, her hometown. They discover that it is ruled by Arlong and the Arlong Pirates, a pirate crew of Fish-Men of which Nami is a member. After Luffy and his new cook Sanji arrive on the island with Yosaku, Nami's past and true motives come to light. The Straw Hats decide to free both her and the village from the Fish-Men's claws.

+
+
+

Loguetown Arc

+

The Loguetown Arc, also referred to as the Polestar Islands Arc, is the sixth story arc of the manga and anime One Piece, and both the sixth and last story of the East Blue Saga.

+

The Straw Hat Pirates stop at the city of Loguetown, where Gold Roger was born and executed, to get supplies before heading to the Grand Line. However, a powerful Marine captain, as well as some old enemies, stand in their way.

+
+
+
+

Alabasta Saga

+

The "Arabasta Saga"[1] (アラバスタ編, Arabasuta-hen?), also referred to as the "Baroque Works Saga", is the second saga of the manga and anime One Piece.

+

When the Straw Hat Pirates enter the Grand Line, they encounter the whale Laboon. Then, they set sail to Whisky Peak where they're targeted by the criminal organization Baroque Works and also decide to help Nefertari Vivi. After adventures on Little Garden and Drum Island, the Straw Hat Pirates and Vivi reach Arabasta, Vivi's home, where a war is about to take place, caused by Baroque Works' head, Mr. 0.

+
+

Reverse Mountain Arc

+

The Reverse Mountain Arc, also referred to as the Laboon Arc and Twin Cape Arc, is the seventh story arc of the manga and anime One Piece, and the first story arc of the Arabasta Saga.

+

The Straw Hat Pirates make their way to Reverse Mountain and begin the perilous task of scaling its tricky rapids in order to enter the Grand Line. As they descend the mountain, they come face to face with not only the giant whale Laboon, but also mysterious agents Mr. 9 and Miss Wednesday.

+
+
+

Whiskey Peak Arc

+

The Whisky Peak Arc, also referred to as the Cactus Island Arc, is the eighth story arc of the manga and anime One Piece, and the second story arc of the Arabasta Saga.

+

With a Log Pose now in hand, the Straw Hat Pirates are directed toward Whisky Peak, a town that welcomes pirates with open arms and treats them like celebrities. However, the townsfolk have a dark secret, and an even deeper mystery awaits.

+
+
+

Little Garden Arc

+

The Little Garden Arc is the ninth story arc of the manga and anime One Piece, and the third story arc of the Arabasta Saga.

+

Now with Vivi in tow, the Straw Hat Pirates travel to the prehistoric island of Little Garden. There, they encounter two Giants, Dorry and Brogy, who have been dueling one another on the island for the past century. After befriending the giants, the crew are ambushed by new and familiar officers of Baroque Works.

+
+
+

Drum Island Arc

+

The Drum Island Arc, also referred to as the Drum Kingdom Arc, is the tenth story arc of the manga and anime One Piece, and the fourth story arc of the Arabasta Saga.

+

After Nami falls ill with an unknown disease, the Straw Hat Pirates travel to Drum Island in search of a doctor. The crew meets a bizarre talking reindeer named Tony Tony Chopper, who helps them fend off the country's former despot king Wapol after he returns to reclaim his throne.

+
+
+

Alabasta Arc

+

The Arabasta Arc, also referred to as the Arabasta Kingdom Arc and Sandy Island Arc, is the eleventh story arc of the manga and anime One Piece, and both the fifth and last story arc of the Arabasta Saga.

+

The Straw Hats finally reach the desert kingdom of Arabasta and begin their race across the land to reach Alubarna before a massive war can break out between the kingdom's royal guards and the rebels. However, the true perpetrator of the war, Mr. 0, and his remaining Baroque Works officer agents stand in the way of the Straw Hats reaching their goal.

+
+
+
+

Sky Island Saga

+

The "Sky Island Saga" (空島編, Sorajima Hen?), also referred to as the "Skypiea Saga", is the third saga of the manga and anime One Piece.

+

The Straw Hat Pirates arrive at Jaya, where they meet Mont Blanc Cricket. With Cricket's help, the Straw Hats manage to reach Skypiea. There they face the false God that rules the sky, Enel.

+
+

Jaya Arc

+

The Jaya Arc is the twelfth story arc of the manga and anime One Piece, and the first story arc of the Sky Island Saga.

+

After the Straw Hat Pirates' Log Pose points them towards the sky, they travel to the island of Jaya and work with Mont Blanc Cricket to determine if there is indeed an island in the sky. While in the pirate-populated port town of Mock Town, Luffy ends up in conflict with the overconfident and cruel Bellamy, while also meeting an enigmatic man who advises Luffy to never give up on his dreams.

+
+
+

Skypiea Arc

+

The Skypiea Arc, also referred to as the Sky Island Arc, is the thirteenth story arc of the manga and anime One Piece, and both the second and last story arc of the Sky Island Saga.

+

The Straw Hats arrive on the Sky Island Skypiea and learn of its connections to Jaya and Mont Blanc Noland's tale of a lost city of gold. As the crew embarks in search of treasure, they become entangled in a three-way war between the native Skypieans, the vengeful Shandians, and the land's cruel "god", Enel.

+
+
+
+

Water 7 Saga

+

The Water 7 Saga (ウォーターセブン編, Wōtā Sebun Hen?),[1] also referred to as the Water 7–Enies Lobby Saga (ウォーターセブン・エニエスロビー編, Wōtā Sebun–Eniesu Robī Hen?),[2] "World Government Saga" and "CP9 Saga", is the fourth saga of the manga and anime One Piece.

+

After their adventure in Skypiea, the Straw Hat Pirates land safely back in the Blue Sea, only to find themselves confronted by the Foxy Pirates in a Davy Back Fight. Then, the crew reaches Water 7, where they soon fall into trouble though, making enemies with the Franky Family and CP9 of the World Government. The crew also begins to fall apart. On Enies Lobby, it comes to the showdown between the Straw Hats and CP9. In the meantime, Ace finds Blackbeard, causing a fateful duel.

+
+

Long Ring Long Land Arc

+

The Long Ring Long Land Arc is the fourteenth story arc of the manga and anime One Piece, and the first story arc of the Water 7 Saga.

+

Upon arriving on Long Ring Long Land, the Straw Hat Pirates are ambushed by the Foxy Pirates and challenged to a "Davy Back Fight," with the Straw Hat crew's members at stake.

+
+
+

Water 7 Arc

+

The Water 7 Arc, also referred to as the Capital of Water Arc, is the fifteenth story arc of the manga and anime One Piece, and the second story arc of the Water 7 Saga.

+

The Straw Hats arrive at the oceanic metropolis of Water 7 to find a shipwright who can repair the Going Merry, as well as potentially join their crew. They soon become targeted by the Franky Family, the city's underground gang, and become involved in a plot within the Galley-La Company. Between the disappearance of Robin and a schism that develops between Luffy and Usopp, the crew begins to fall apart.

+
+
+

Enies Lobby Arc

+

The Enies Lobby Arc, also referred to as the Judicial Island Arc, is the sixteenth story arc of the manga and anime One Piece, and the third story arc of the Water 7 Saga.

+

The Straw Hats, Sogeking, the Franky Family, and the shipwrights of the Galley-La Company arrive at Enies Lobby aboard the Rocketman to rescue Nico Robin and Franky. Standing in their way, however, are the forces of the World Government, including its deadly assassination unit, CP9. A massive battle ensues between the two sides when Luffy declares war against the World Government.

+
+
+

Post-Enies Lobby Arc

+

The Post-Enies Lobby Arc, also referred to as the Second Water 7 Arc and Return to Water 7 Arc, is the seventeenth story arc of the manga and anime One Piece, and both the fourth and last story arc of the Water 7 Saga.

+

As the Straw Hat Pirates rest at Water 7 after successfully escaping from Enies Lobby, they are visited by a group of Marines that includes familiar faces to Luffy while Franky promises to build the crew a new ship. In the meantime, Shanks and Whitebeard discuss the actions of Ace and Blackbeard, whose fateful duel on Banaro Island will inevitably serve as the trigger for a world-shaking war.

+
+
+
+

Thriller Bark Saga

+

The Thriller Bark Saga (スリラーバーク編, Surirā Bāku Hen?), also referred to as the Florian Triangle Saga, is the fifth saga of the manga and anime One Piece.

+

The Straw Hat Pirates travel to the ghost island of Thriller Bark, where their shadows are stolen by Gecko Moria. Now, they must race to recover them before sunrise.

+
+

Thriller Bark Arc

+

The Thriller Bark Arc, also referred to as the Florian Triangle Arc, is the eighteenth story arc of the manga and anime One Piece, and both the first and only story arc of the Thriller Bark Saga.

+

During their journey through the Florian Triangle, the Straw Hats arrive on a seemingly haunted island called Thriller Bark, where they encounter the Warlord Gecko Moria. Using his Devil Fruit abilities, Moria steals the Straw Hats' shadows. With the help of a mysterious talking skeleton named Brook, the crew must regain their shadows before sunrise in order to survive.

+
+
+
+

Summit War Saga

+

The Summit War Saga (“頂上戦争”編, "Chōjō Sensō" Hen?) is the sixth saga of the manga and anime One Piece, and the last saga of the first half of the series.

+

The Straw Hat Pirates reach Sabaody Archipelago, but during a battle they are separated and sent to different parts of the world. Luffy lands on Amazon Lily. There, he learns what happened to Ace. He first travels to Impel Down and then to Marineford, where a massive war breaks out, starting big changes. After he was rescued and did recover, Luffy agrees he and his crew still aren't ready for the New World.

+
+

Sabaody Archipelago Arc

+

The Sabaody Archipelago Arc, also referred to as the Sabaody Arc, is the nineteenth story arc of the manga and anime One Piece, and the first story arc of the Summit War Saga.

+

The Straw Hat Pirates arrive at the final island of the Grand Line's first half, Sabaody Archipelago. While searching for a means to pass under the Red Line into the New World, they come into conflict with a deadly slave trading ring that sells to the World Nobles. Luffy and Zoro are labelled as two of the Eleven Supernovas, rookies of significant bounties who have simultaneously arrived at the archipelago. A chain reaction of events engulfs the archipelago in chaos, and the Straw Hats are faced with their greatest challenge yet.

+
+
+

Amazon Lily Arc

+

The Amazon Lily Arc, also referred to as the Island of Women Arc, is the twentieth story arc of the manga and anime One Piece, and the second story arc of the Summit War Saga.

+

After his defeat at the hands of Kuma at the Sabaody Archipelago, Luffy is sent flying and crash lands on Amazon Lily, an island exclusive to women that executes males on sight. As he tries to find a way off the island and back to his crew, Luffy makes unexpected friends and foes, while also learning of his brother's imminent peril.

+
+
+

Impel Down Arc

+

The Impel Down Arc, also referred to as the Great Prison Arc and Underwater Prison Arc, is the twenty-first story arc of the manga and anime One Piece, and the third story arc of the Summit War Saga.

+

Luffy puts finding his crew on hold in favor of rescuing his brother Ace from the underwater prison Impel Down. With Boa Hancock's help, he manages to infiltrate the facility. However, fulfilling his objective and escaping the hellish prison might be easier said than done

+
+
+

Marineford Arc

+

The Marineford Arc, also referred to as the Marine Headquarters Arc, is the twenty-second story arc of the manga and anime One Piece, and the fourth story arc of the Summit War Saga.

+

Having failed to reach Ace before he was transferred, Luffy and his companions escape from Impel Down and travel to Marineford, the base of Marine Headquarters. With the odds stacked high against him, the imminent threat of Whitebeard, and the ulterior motives of pirates that wish to overthrow the Emperor, Luffy struggles to hold his own in this titanic clash of powers

+
+
+

Post-War Arc

+

The Post-War Arc, also referred to as the Post-Marineford Arc, is the twenty-third story arc of the manga and anime One Piece, both the fifth and last story arc of the Summit War Saga, and the last story arc of the first half of the series.

+

Following the Summit War of Marineford, its effects ripple across the world for both Pirates and Marines. As Luffy mourns Ace's death, he remembers the childhood he spent with Ace and another brother, Sabo. After coming to terms with Ace's death, Luffy, who agrees that he and his crew still aren't ready, and Rayleigh must formulate a plan for the Straw Hat Pirates to survive in the New World.

+
+
+
+

Fish-Man Island Saga

+

The Fish-Man Island Saga (魚人島編, Gyojin-tō Hen?) is the seventh saga of the manga and anime One Piece, and the first saga of the second half of the series.

+

Two years have passed since the Straw Hat Pirates were separated. They're reuniting with each other at Sabaody Archipelago to prepare to set sail for the New World, but in order to enter there, they must first go through Fish-Man Island. There, the New Fish-Man Pirates and Flying Pirates are planning to conquer the island.

+
+

Return To Sabaody Arc

+

The Return to Sabaody Arc, also referred to as the Return to Sabaody Archipelago Arc, Second Sabaody Archipelago Arc and Second Sabaody Arc, is the twenty-fourth story arc of the manga and anime One Piece, the first story arc of the Fish-Man Island Saga, and the first story arc of the second half of the series.

+

Two years after their separation, the Straw Hat Pirates reunite on Sabaody Archipelago. There, they have to deal with the Fake Straw Hat Crew and Pacifista.

+
+
+

Fish-Man Island Arc

+

The Fish-Man Island Arc is the twenty-fifth story arc of the manga and anime One Piece, both the second and last story arc of the Fish-Man Island Saga, and the second story arc of the second half of the series.

+

The Straw Hat Pirates finally arrive at Fish-Man Island. There, the crew learn the history of Fisher Tiger and the ongoing discrimination between humans and Fish-Men, while the New Fish-Man Pirates plot to overtake Ryugu Kingdom and make Fish-Men be recognized as the supreme race.

+
+
+
+

Dressrosa Saga

+

The Dressrosa Saga (ドレスローザ編, Doresurōza Hen?) is the eighth saga of the manga and anime One Piece, and the second saga of the second half of the series.

+

The Straw Hat Pirates finally enter the New World, but soon receive a distress call from Punk Hazard, where they become entangled in the illegal experiments of Caesar Clown. And on Dressrosa, they face their first major challenge in the New World against the Warlord Donquixote Doflamingo, and uncover a decade-long conspiracy in the island kingdom.

+
+

Punk Hazard Arc

+

The Punk Hazard Arc is the twenty-sixth story arc of the manga and anime One Piece, the first story arc of the Dressrosa Saga, and the third story arc of the second half of the series.

+

Upon finally entering the New World, the Straw Hat Pirates immediately receive a distress call from residents of Punk Hazard, who state that a samurai is attacking them. Without hesitation, Luffy sets out to the blazing island, with Vice Admiral Smoker hot on his tail. On the supposedly death-ridden and empty island, the Straw Hats soon must contend with both the G-5 Marines, led by Vice Admiral Smoker, and the mad scientist Caesar Clown, whose deadly experiments must be stopped.

+
+
+

Dressrosa Arc

+

The Dressrosa Arc is the twenty-seventh story arc of the manga and anime One Piece, both the second and last story arc of the Dressrosa Saga, and the fourth story arc of the second half of the series.

+

The Straw Hat Pirates and Trafalgar Law, together with Kin'emon, Momonosuke and the captured Caesar Clown, travel to Dressrosa with the goal of taking down the nation's king, Warlord of the Sea Donquixote Doflamingo. However, they soon set into motion a series of world-changing events, as their actions interact unexpectedly with those of larger forces at play.

+
+
+
+

Whole Cake Island Saga

+

The Whole Cake Island Saga (ホールケーキアイランド編, Hōru Kēki Airando Hen?), also referred to as the Totto Land Saga, is the ninth saga of the manga and anime One Piece, and the third saga of the second half of the series.

+

The Straw Hats reunite on Zou and make preparations for battle against Kaidou after learning of their samurai companions' connection to the Emperor. However, they become sidetracked due to Sanji falling into the clutches of another of the Four Emperors, Big Mom, forcing Luffy to lead a team into her territory to rescue the cook from her plans. In the meantime, the Levely is about to begin.

+
+

Zou Arc

+

The Zou Arc, also referred to as the Zunesha Arc, is the twenty-eighth story arc of the manga and anime One Piece, the first story arc of the Whole Cake Island Saga, and the fifth story arc of the second half of the series.

+

After defeating Doflamingo, the Straw Hats, Trafalgar Law, Kin'emon, and Kanjuro arrive on Zou, in order to reunite with Sanji and the others. However, they discover that Sanji has been swept up in a set of personal and political entanglements and that Zou has been subjected to a siege by Jack of the Beasts Pirates.

+
+
+

Whole Cake Island Arc

+

The Whole Cake Island Arc (ホールケーキアイランド編, Hōru Kēki Airando Hen?), also referred to as the Totto Land Arc, is the twenty-ninth story arc of the manga and anime One Piece, the second story arc of the Whole Cake Island Saga, and the sixth story arc of the second half of the series.

+

Luffy, Nami, Chopper, Brook, and the minks Pekoms, Pedro, and Carrot head to Whole Cake Island, where Big Mom of the Four Emperors resides. Nicknamed the Sanji Retrieval Team, the group seeks to rescue their crewmate Sanji from his arranged marriage with Charlotte Pudding, set up to finalize a political alliance between the Charlotte Family and the Vinsmoke Family. However, during their operation, they become involved in a plot to assassinate Big Mom herself.

+
+
+

Levely Arc

+

The Levely Arc, also referred to as the Post-Whole Cake Island Arc, is the thirtieth story arc of the manga and anime One Piece, both the third and last story arc of the Whole Cake Island Saga, and the seventh story arc of the second half of the series.

+

The Straw Hat Pirates' actions against the Big Mom Pirates are revealed to the world. Luffy's group is on its way to Wano Country while the Revolutionary Army prepares for their next move. Meanwhile, royalty across the globe gathers for the Levely, without knowing that a shadow-like figure is pulling the strings of the World.

+
+
+
+

Wano Country Saga

+

The Wano Country Saga (ワノ国編, Wano Kuni Hen?) is the tenth saga of the manga and anime One Piece, and the fourth saga of the second half of the series.

+

The Ninja-Pirate-Mink-Samurai Alliance gather in Wano Country and prepare for the battle against the Beasts Pirates. After some disturbances, the Alliance assaults Onigashima to take down the allied forces of Kaidou and Big Mom.

+
+

Wano Country Arc

+

The Wano Country Arc (ワノ国編, Wano Kuni Hen?) is the thirty-first story arc of the manga and anime One Piece, both the first and only story arc of the Wano Country Saga, and the eighth story arc of the second half of the series.

+

The Ninja-Pirate-Mink-Samurai Alliance gather in Wano Country and prepare for the battle against the Beasts Pirates. The history of Kozuki Oden and his ties to Wano Country, Whitebeard and Gol D. Roger are revealed, and the Alliance assaults Onigashima to take down the allied forces of Kaidou and Big Mom. The resulting battle, as well as the events during the recent Levely, cause the world to go through dramatic changes.

+
+
+
+

Final Saga

+

The Final Saga is the eleventh saga of the manga and anime One Piece, and the fifth saga of the second half of the series.

+

In the aftermath of the Levely, the Raid on Onigashima, and the destruction of Lulusia Kingdom, chaos erupts across the world while a long-awaited global war begins to escalate. Meanwhile, the Straw Hat Pirates arrive at Egghead, where a plot is afoot to assassinate Dr. Vegapunk.

+
+

Egghead Arc

+

The Egghead Arc (エッグヘッド編, Egguheddo-hen?),[1] also referred to as the Future Island Arc (未来島編, Mirai-jima-hen?), is the thirty-second story arc of the manga and anime One Piece, the first story arc of the Final Saga, and the ninth story arc of the second half of the series.

+

The aftermaths of both the Levely and the Raid on Onigashima, as well as the erasure of the Lulusia Kingdom, cause major shifts across the world that could lead to global war. The Straw Hat Pirates, following their Log Pose, arrive at the mysterious, futuristic island Egghead where the super genius Dr. Vegapunk resides. However, after being tipped off about Vegapunk's research into the Void Century, the World Government decides to dispatch a CP0 team to assassinate Vegapunk. Betrayal and intrigue on all sides leads to a Marine siege on the island that will escalate into an incident that will shock the world.

+
+
+
-
- \ No newline at end of file +
+ + + + + \ No newline at end of file diff --git a/trivia.html b/trivia.html deleted file mode 100644 index 2073c3f..0000000 --- a/trivia.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - Trivia - - -
-
- ANIME -
- -
- - -
-
- \ No newline at end of file