diff --git a/assets/images/HayuNukui/hayu_main.jpg b/assets/images/HayuNukui/hayu_main.jpg new file mode 100644 index 0000000..80811d6 Binary files /dev/null and b/assets/images/HayuNukui/hayu_main.jpg differ diff --git a/assets/images/HayuNukui/hayu_second.jpg b/assets/images/HayuNukui/hayu_second.jpg new file mode 100644 index 0000000..e1b0bec Binary files /dev/null and b/assets/images/HayuNukui/hayu_second.jpg differ diff --git a/assets/images/HemoMidori/hemo_main.jpg b/assets/images/HemoMidori/hemo_main.jpg new file mode 100644 index 0000000..902c119 Binary files /dev/null and b/assets/images/HemoMidori/hemo_main.jpg differ diff --git a/assets/images/HohoKajino/hoho_main.jpg b/assets/images/HohoKajino/hoho_main.jpg new file mode 100644 index 0000000..a741929 Binary files /dev/null and b/assets/images/HohoKajino/hoho_main.jpg differ diff --git a/assets/images/InoSakura/ino_main.png b/assets/images/InoSakura/ino_main.png new file mode 100644 index 0000000..61bb951 Binary files /dev/null and b/assets/images/InoSakura/ino_main.png differ diff --git a/assets/images/NinaMaehara/nina_main.jpg b/assets/images/NinaMaehara/nina_main.jpg new file mode 100644 index 0000000..fbad378 Binary files /dev/null and b/assets/images/NinaMaehara/nina_main.jpg differ diff --git a/assets/images/RokoSekino/roko_main.jpg b/assets/images/RokoSekino/roko_main.jpg new file mode 100644 index 0000000..1b7ff89 Binary files /dev/null and b/assets/images/RokoSekino/roko_main.jpg differ diff --git a/assets/images/RokoSekino/roko_second.jpg b/assets/images/RokoSekino/roko_second.jpg new file mode 100644 index 0000000..11f7079 Binary files /dev/null and b/assets/images/RokoSekino/roko_second.jpg differ diff --git a/assets/images/general/general_image.png b/assets/images/general/general_image.png new file mode 100644 index 0000000..bd1372d Binary files /dev/null and b/assets/images/general/general_image.png differ diff --git a/assets/images/general/logo.png b/assets/images/general/logo.png new file mode 100644 index 0000000..e08c3d9 Binary files /dev/null and b/assets/images/general/logo.png differ diff --git a/backend.js b/backend.js new file mode 100644 index 0000000..49d6ea4 --- /dev/null +++ b/backend.js @@ -0,0 +1,112 @@ +let main_desc = "Purpose of this webpage is to gather info about characters in anime Dropout Idol Fruit Trart.

You might ask : But why?
Answer : Yes

On the top of the page you have link to pages on all the main characters. Clicking on logo sends you back here.
Hope you'll enjoy."; +let ino_main_desc = "Ino is very cheerful girl. Shes also liked by others for her personality.

- Gender: Female
- Height: 155cm
- Weight: 47kg
- Hair_color: pink
- Eye_color: blue"; +let hemo_main_desc = "Hemo likes Ino, maybe way too much.

- Gender: Female
- Height: 145cm
- Weight: 37kg
- Hair_color: chestnut brown
- Eye_color: amber"; +let hoho_main_desc = "Shes manager of the other girls, can be pushy and weird. (also shes single)

- Gender: Female
- Height: 165cm
- Weight: 51kg
- Hair_color: dark brown
- Eye_color: dark brown"; +let hayu_main_desc = "Likes music and has a ton of canned food.

- Gender: Female
- Height: 150cm
- Weight: 40kg
- Hair_color: blonde
- Eye_color: blue"; +let roko_main_desc = "She's cuddly with Nina and its really awesome.

- Gender: Female
- Height: 140cm
- Weight: 35kg
- Hair_color: violet
- Eye_color: violet"; +let nina_main_desc = "Shes like big sister to roko. Shes also a lil bit shy.

- Gender: Female
- Height: 170cm
- Weight: 55kg
- Hair_color: light brown
- Eye_color: brown"; + +//loading basics +const title = document.getElementById("title_text"); +const description = document.getElementById("description_text"); +const main_image = document.getElementById("image_main"); +const main_image0 = document.getElementById("image_main0"); +const main_images = document.getElementById("main_images"); + +const logo = document.getElementById("logo"); + +// loading character buttons +const inu = document.getElementById("Ino"); +const roko = document.getElementById("Roko"); +const hayu = document.getElementById("Hayu"); +const nina = document.getElementById("Nina"); +const hemo = document.getElementById("Hemo"); +const hoho = document.getElementById("Hoho"); + + +function reset() { + main_image0.style.visibility = "hidden"; + main_images.style.paddingLeft = "0%"; + main_images.style.borderStyle = "hidden"; +} + + +function loadMainPage() { + reset(); + + title.innerHTML = "Introduction"; + description.innerHTML = main_desc; + main_image.src = "assets/images/general/general_image.png"; +} + + +function InoSakura() { + reset(); + + title.innerHTML = "Ino Sakura"; + description.innerHTML = ino_main_desc; + main_image.src = "assets/images/InoSakura/ino_main.png"; +} + + +function RokoSekino() { + reset(); + + main_images.style.paddingLeft = "10%"; + main_images.style.borderStyle = "solid"; + title.innerHTML = "Roko Sekino"; + description.innerHTML = roko_main_desc; + main_image.src = "assets/images/RokoSekino/roko_main.jpg"; + main_image0.src = "assets/images/RokoSekino/roko_second.jpg"; + main_image0.style.visibility = "visible"; +} + + +function HayuNukui() { + reset(); + + main_images.style.paddingLeft = "10%"; + main_images.style.borderStyle = "solid"; + title.innerHTML = "Hayu Nukui"; + description.innerHTML = hayu_main_desc; + main_image.src = "assets/images/HayuNukui/hayu_main.jpg"; + main_image0.src = "assets/images/HayuNukui/hayu_second.jpg"; + main_image0.style.visibility = "visible"; +} + + +function NinaMaehara() { + reset(); + + title.innerHTML = "Nina Maehara"; + description.innerHTML = nina_main_desc; + main_image.src = "assets/images/NinaMaehara/nina_main.jpg"; +} + + +function HemoMidori() { + reset(); + + title.innerHTML = "Hemo Midori"; + description.innerHTML = hemo_main_desc; + main_image.src = "assets/images/HemoMidori/hemo_main.jpg"; +} + + +function HohoKajino() { + reset(); + + title.innerHTML = "Hoho Kajino"; + description.innerHTML = hoho_main_desc; + main_image.src = "assets/images/HohoKajino/hoho_main.jpg"; +} + + +loadMainPage(); +logo.addEventListener("click", loadMainPage); +inu.addEventListener("click", InoSakura); +roko.addEventListener("click", RokoSekino); +hayu.addEventListener("click", HayuNukui); +nina.addEventListener("click", NinaMaehara); +hemo.addEventListener("click", HemoMidori); +hoho.addEventListener("click", HohoKajino); diff --git a/index.html b/index.html new file mode 100644 index 0000000..15b85d0 --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + Fruit tart + + + +
+ + + + +
+ + + +
+ +
+

Introduction

+
+ +
+

+
, + + + +
+ + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c02db18 --- /dev/null +++ b/style.css @@ -0,0 +1,146 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); + +*{ + box-sizing: border-box; + margin: 0; + padding: 0; + background-color: #fa311b; +} + +.menu_item, .menu_item_link{ + font-family: "Noto Sans JP", sans-serif; + font-weight: 400; + font-size: 30px; + color: #000000; + text-decoration: none; +} + +header{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 30px 10%; +} + +#logo{ + cursor: pointer; + border: 5px solid #f00543; + border-radius: 20px; + transition: all 0.3s ease 0s; +} + +#logo:hover{ + border-color: #a3042e; +} + +#navbar_items { + list-style: none; +} + +#navbar_items li{ + display: inline-block; + padding: 0px 20px; + border: 5px solid #f00543; + border-radius: 20px; + background-color: #ff184e; +} + +#navbar_items li a{ + background-color: #ff184e; + transition: all 0.3s ease 0s; +} + +#navbar_items li a:hover { + color:#fafafa; +} + +.footer{ + font-family: "Noto Sans JP", sans-serif; + font-weight: 400; + font-size: 15px; + color: #000000; + margin-left: 20px; +} + +/* css for main program here */ + +#title{ + margin: 1% 10% 1% 10%; + padding: 3%; + border: 5px solid #f00543; + border-radius: 20px; + background-color: #ff184e; + transition: all 0.3s ease 0s; +} + +#title:hover{ + border-color: #a3042e; +} + +#title_text{ + background-color: #ff184e; + font-family: "Noto Sans JP", sans-serif; + font-weight: 400; + font-size: 50px; + margin-left: 2%; +} + +#description{ + margin: 1% 10% 1% 10%; + padding: 3%; + border: 5px solid #f00543; + border-radius: 20px; + background-color: #ff184e; + transition: all 0.3s ease 0s; +} + +#description:hover{ + border-color: #a3042e; +} + +#description_text{ + background-color: #ff184e; + font-family: "Noto Sans JP", sans-serif; + font-weight: 400; + font-size: 20px; + margin-left: 2%; +} + +#image_main{ + margin: 1% 10% 1% 10%; + border: 6px solid #f00543; + border-radius: 20px; + transition: all 0.3s ease 0s; + max-width: 80%; +} + +#image_main:hover{ + border-color: #a3042e; +} + +#image_main0{ + border: 6px solid #f00543; + border-radius: 20px; + transition: all 0.3s ease 0s; + visibility: hidden; +} + +#image_main0:hover{ + border-color: #a3042e; +} + +#main_images { + list-style: none; + border: 6px solid #ff759a; + border-radius: 20px; + transition: all 0.3s ease 0s; + border-style: hidden; +} + +#main_images li{ + display: inline-block; +} + +#main_images:hover{ + border-color: #ffb5c9; +}