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 @@ +
- + -Role | +Epithet | +Fictional Characters | +Bounty | +Voice Actors | + + +||
---|---|---|---|---|---|---|
The Captain | +Straw Hat Luffy | +Monkey D Luffy | ++ | +3,000,000,000 Belly | +Mayumi Tanaka | ++ |
Swordsman | +Pirate Hunter Zoro | +Roronoa Zoro | ++ | 1,111,000,000 Belly | +Kazuya Nakai | ++ |
Navigator | +Cat Burglar Nami | +Nami | ++ | 366,000,000 Belly | +Akemi Okamura | ++ |
Sniper | +God Usopp | +Usopp | ++ | +500,000,000 Belly | +Kappei Yamaguchi | ++ |
Cook | +Black Leg Sanji | +Vinsmoke Sanji | ++ | +1,032,000,000 Belly | +Hiroaki Hirata | ++ |
Doctor | +Cotton Candy Lover Chopper | +Tony Tony Chopper | ++ | +1000 Belly | +Ikue Otani | ++ |
Archaeologist | +Devil Child Robin | +Nico Robin | ++ | +930,000,000 Belly | +Yuriko Ymaguchi + | ++ |
Shipwright | +Cyborg Franky | +Franky | ++ | +394,000,000 Belly | +Kazuki Yao | ++ |
Musician | +Soul King Brook | +Brook | ++ | +383,000,000 Belly | +Yūichi Nagashima / Chō | ++ |
Helmsman | +Knight Of The Sea Jinbe | +Jinbe | ++ | +1,100,000,000 Belly | +Katsuhisa Hōki | ++ |
Monkey D. Luffy, also known as "Straw Hat Luffy" and commonly as "Straw Hat",[10] + is the founder and captain of the increasingly infamous and powerful Straw Hat Pirates, as well + as the most powerful of its top fighters.[26][27] He desires to find the legendary treasure left + behind by the late Gol D. Roger and thereby become the Pirate King,[28] which would help + facilitate an unknown dream of his that he has told only to Shanks, his brothers, and + crew.[29][30] He believes that being the Pirate King means having the most freedom in the + world.[31]
+ +Born in Foosha Village, Luffy is the son of Monkey D. Dragon, the leader of the + Revolutionary Army,[32] and the grandson of the Marine hero Monkey D. Garp,[33] where their + family carries the initial of D. At age 7, Luffy accidentally ate the Gomu Gomu no Mi, which + turned his body into rubber.[34] Shanks also gave Luffy the very straw hat that has become + Luffy's signature accessory, having gifted it to the boy as part of a promise for them to meet + again someday after he became a great pirate.[35] Growing up on Dawn Island under the care of + Curly Dadan,[36] Luffy befriended and became sworn brothers of the late "Fire Fist" Portgas D. + Ace[37] and Revolutionary Chief-of-Staff Sabo.[38]
+Roronoa Zoro,[20] also known as "Pirate Hunter" Zoro,[9] is a main combatant of + the Straw Hat Pirates, one of their two swordsmen, one of the Senior Officers of the Straw Hat + Grand Fleet,[4] and is publicly recognized as the right-hand man of his crew's captain Monkey D. + Luffy.[21][22] Formerly a bounty hunter,[6] he is the second member of Luffy's crew and the + first to join it, doing so in the Romance Dawn Arc.[2]
+ +Born in the East Blue, Zoro is the son of Tera and Roronoa Arashi, the grandson + of Shimotsuki Furiko and Roronoa Pinzoro, and the grandnephew of Shimotsuki Ushimaru, making him + a descendant of both the Shimotsuki Family of Wano Country and the legendary samurai, Shimotsuki + Ryuma.[3][11] As a master of Three Sword Style, a swordsmanship style which he created during + his childhood training in Shimotsuki Village, Zoro is one of the three most powerful combatants + of the Straw Hats, alongside Luffy and Sanji, who are referred to as the "Monster Trio".[23][24] + His dream is to become the greatest swordsman in the world, in order to honor a promise he made + to his deceased childhood friend Kuina.[25]
+"Cat Burglar" Nami[11] is the navigator of the Straw Hat Pirates and one of the + Senior Officers of the Straw Hat Grand Fleet.[4] She is the third member of the crew and the + second to join, doing so during the Orange Town Arc.[19] She is the adoptive sister of Nojiko + after the two were orphaned and taken in by Bell-mère.
+ +She was formerly a member of the Arlong Pirates and initially joined the Straw + Hats so that she could rob them in order to buy back her village from Arlong. However, she + legitimately joined the Straw Hats after they rebelled against and defeated Arlong. Her dream is + to make a map of the entire world.[20] + +
+"God" Usopp[9] is the sniper of the Straw Hat Pirates and one of the Senior + Officers of the Straw Hat Grand Fleet.[2] He is the fourth member of the crew and the third to + join, doing so at the end of the Syrup Village Arc. Although he left the crew during the Water 7 + Arc, he rejoined at the end of the Post-Enies Lobby Arc.[16]
+ +Usopp is the son of Yasopp and Banchina. He was born and raised in Syrup Village, + serving as "captain" of the Usopp Pirates and being Kaya's close friend. After working with the + Straw Hats to defeat Kuro and the Black Cat Pirates, he was invited to join the crew. Despite + his usual cowardice, Usopp dreams of becoming a brave warrior of the sea just like his father + and lives every day in pursuit of living up to this dream.
+"Black Leg" Sanji,[12] born as Vinsmoke Sanji,[21][22][23] is the cook of the + Straw Hat Pirates and one of the Senior Officers of the Straw Hat Grand Fleet.[5] He is the + fifth member of the crew and the fourth to join, doing so at the end of the Baratie Arc.
+ +Born as the third son and fourth child of the Vinsmoke Family[24] (thus, making + him a former prince of the Germa Kingdom), he disowned his family twice, once in his youth and + again after reuniting with them as an adult.[25] After fleeing the Vinsmokes as a child, he + eventually entered the care of Zeff as the sous chef of the Baratie, where he would remain until + he met Monkey D. Luffy, who convinced him to join his crew.
+Tony Tony Chopper, also known as "Cotton Candy Lover" Chopper,[6] is the doctor + of the Straw Hat Pirates and one of the Senior Officers of the Straw Hat Grand Fleet.[2] He is + the sixth member of the crew and the fifth to join, doing so at the end of the Drum Island Arc. + He was temporarily forced to join the Foxy Pirates during the Long Ring Long Land Arc, but was + quickly returned to Luffy's crew.
+ +Chopper is a reindeer that ate the Hito Hito no Mi, a Devil Fruit that allows its + user to transform into a human hybrid at will. He was taught medicine on Drum Island by his two + parental figures, Doctors Hiriluk and Kureha. Chopper aims to travel all across the world in the + hopes of accomplishing his dream of being able to cure any disease.
+Nico Robin,[17] also known by her epithet "Devil Child"[7] and the "Light of the + Revolution",[8] is the archaeologist of the Straw Hat Pirates and one of the Senior Officers of + the Straw Hat Grand Fleet.[3] She is the seventh member of the crew and the sixth to join, doing + so at the end of the Arabasta Arc. She temporarily left the crew during the Water 7 Arc but + rejoined during the Enies Lobby Arc.
+ +Born into a family of archaeologists, Robin is the daughter of Nico Olvia and an + unknown man. Robin ate the Hana Hana no Mi at a young age, giving her the power to reproduce her + body parts (or her entire body) on any surface at will. As the sole survivor of the destroyed + West Blue island Ohara, she is currently one of only two people in the world known to have the + ability to read and decipher Poneglyphs, a skill which is considered forbidden and threatening + to the World Government.
+"Iron Man" Franky[7] is the shipwright of the Straw Hat Pirates and one of the + Senior Officers of the Straw Hat Grand Fleet.[3] He is the crew's eighth member and the seventh + to join, doing so at the end of the Post-Enies Lobby Arc.
+ +Born "Cutty Flam",[18] he chose to go by his nickname of "Franky" until + eventually permanently discarding his true name per the request of Iceburg to hide his + identity.[19] Originally from the South Blue,[20] Franky was abandoned by his family as a + four-year-old, eventually making his way to Water 7. There, he came to be a member of Tom's + Workers, until an incident resulted in his body being heavily damaged and requiring him to + augment himself into a cyborg. Upon returning to Water 7, he became the leader of the Franky + Family, a group of ship dismantlers and bounty hunters.
+"Soul King" Brook[10] is the musician of the Straw Hat Pirates, one of their two + swordsmen, and one of the Senior Officers of the Straw Hat Grand Fleet.[3] He is the ninth + member of the crew and the eighth to join,[16] doing so at the end of the Thriller Bark Arc.
+ +Brook ate the Yomi Yomi no Mi, which allowed him to return to life after death + once.[17] Brook eventually learned to tap deeper into the powers of his Devil Fruit, giving him + significant control over his own soul and the souls of others.
+"Knight of the Sea" Jinbe[1] is the helmsman of the Straw Hat Pirates and one of + the Senior Officers of the Straw Hat Grand Fleet.[3] He is the tenth member of the crew and the + ninth to join, doing so during the Wano Country Arc.
+ +Jinbe is a whale shark fish-man and a powerful master of Fish-Man Karate. His + dream is to fulfill his former captain Fisher Tiger's dying wish of coexistence and equality + between humans and fish-men. He was a member of the Sun Pirates, eventually becoming its second + captain after the death of their original captain, Tiger.[9] He eventually became one of the + Seven Warlords of the Sea, though he resigned during the Summit War of Marineford.[5][9] + Vegapunk later cloned Jinbe as one of the Seraphim, S-Shark, to replace the Warlords.
+