cc

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.<br/><br/>You might ask : But why?<br/>Answer : Yes<br/><br/>On the top of the page you have link to pages on all the main characters. Clicking on logo sends you back here.<br/>Hope you'll enjoy.";
+let ino_main_desc = "Ino is very cheerful girl. Shes also liked by others for her personality.<br/><br/>- Gender: Female <br/>- Height: 155cm <br/>- Weight: 47kg <br/>- Hair_color: pink <br/>- Eye_color: blue";
+let hemo_main_desc = "Hemo likes Ino, maybe way too much.<br/><br/>- Gender: Female<br/>- Height: 145cm<br/>- Weight: 37kg<br/>- Hair_color: chestnut brown<br/>- Eye_color: amber";
+let hoho_main_desc = "Shes manager of the other girls, can be pushy and weird. (also shes single)<br/><br/>- Gender: Female<br/>- Height: 165cm<br/>- Weight: 51kg<br/>- Hair_color: dark brown<br/>- Eye_color: dark brown";
+let hayu_main_desc = "Likes music and has a ton of canned food.<br/><br/>- Gender: Female<br/>- Height: 150cm<br/>- Weight: 40kg<br/>- Hair_color: blonde<br/>- Eye_color: blue";
+let roko_main_desc = "She's cuddly with Nina and its really awesome.<br/><br/>- Gender: Female <br/>- Height: 140cm <br/>- Weight: 35kg <br/>- Hair_color: violet <br/>- Eye_color: violet";
+let nina_main_desc = "Shes like big sister to roko. Shes also a lil bit shy.<br/><br/>- Gender: Female <br/>- Height: 170cm <br/>- Weight: 55kg <br/>- Hair_color: light brown <br/>- 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);

index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Fruit tart</title>
+        <link rel="stylesheet" type="text/css" href="style.css"/>
+    </head>
+    <body>
+        <header>
+            <img src="assets/images/general/logo.png" id="logo" alt="logo"/>
+
+            <nav id="navbar">
+                <ul id="navbar_items">
+                    <li class="menu_item"><a href="#" class="menu_item_link" id="Ino">Ino Sakura</a></li>
+                    <li class="menu_item"><a href="#" class="menu_item_link" id="Roko">Roko Sekino</a></li>
+                    <li class="menu_item"><a href="#" class="menu_item_link" id="Hayu">Hayu Nukui</a></li>
+                    <li class="menu_item"><a href="#" class="menu_item_link" id="Nina">Nina Maehara</a></li>
+                    <li class="menu_item"><a href="#" class="menu_item_link" id="Hemo">Hemo Midori</a></li>
+                    <li class="menu_item"><a href="#" class="menu_item_link" id="Hoho">Hoho Kajino</a></li>
+                </ul>
+            </nav>
+
+        </header>
+
+        <!--  Main program  -->
+
+        <section id="main">
+
+            <div id="title">
+                <p id="title_text"> Introduction </p>
+            </div>
+
+            <div id="description">
+                <p id="description_text"></p>
+            </div>,
+            
+            <ul id="main_images">
+                <li><img id="image_main" src="#"/></li>
+                <li><img id="image_main0" src="#"/></li>
+            </ul>
+
+        </section>
+
+        <!--  end of main program  -->
+
+        <footer>
+            <!-- add link to ur website when done -->
+            <p class="footer">Author: Tucan444</p>
+        </footer>
+
+        <script src="backend.js"></script>
+    </body>
+</html>

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;
+}