index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Java Community</title>

  <!--
    - favicon
  -->
  <link rel="shortcut icon" href="fam1.png" type="image/x-icon">

  <!--
    - custom css link
  -->
  <link rel="stylesheet" href="style.css">

  <!--
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>

<body>

  <!--
    - #MAIN
  -->

  <main>

    <!--
      - #SIDEBAR
    -->

    <aside class="sidebar" data-sidebar>

      <div class="sidebar-info">

        <figure class="avatar-box">
          <img src="fam1.png" alt="Richard hanrick" width="80">
        </figure>

        <div class="info-content">
          <h1 class="name" title="Richard hanrick">The Java Family</h1>

          <p class="title">Creator : Alhadi Adriano</p>
        </div>

        <button class="info_more-btn" data-sidebar-btn>
          <span>Show Contacts</span>

          <ion-icon name="chevron-down"></ion-icon>
        </button>

      </div>

      <div class="sidebar-info_more">

        <div class="separator"></div>

        <ul class="contacts-list">

          <li class="contact-item">

            <div class="icon-box">
              <ion-icon name="logo-discord"></ion-icon>
            </div>
            <div class="contact-info">
              <p class="contact-title">Discord</p>

              <a href=" " class="contact-link">Soon</a>
            </div>

          </li>

          <li class="contact-item">

            <div class="icon-box">
              <ion-icon name="logo-whatsapp"></ion-icon>
            </div>

            <div class="contact-info">
              <p class="contact-title">WhatsApp</p>

              <a href="tel:+21007025929" class="contact-link">Group WhatsApp</a>
            </div>

          </li>

          <li class="contact-item">

            <div class="icon-box">
              <ion-icon name="calendar-outline"></ion-icon>
            </div>

            <div class="contact-info">
              <p class="contact-title">Science</p>

              <time datetime="Oktober 2023">Oktober 20 2023. </time>
            </div>

          </li>

        </ul>

        <div class="separator"></div>

        <ul class="social-list">

          <li class="social-item">
            <a href="https://www.facebook.com/mossssama" class="social-link">
              <ion-icon name="logo-facebook"></ion-icon>
            </a>
          </li>

          <li class="social-item">
            <a href="https://www.twitter.com/mossssama" class="social-link">
              <ion-icon name="logo-twitter"></ion-icon>
            </a>
          </li>

          <li class="social-item">
            <a href="https://www.github.com/mossssama" class="social-link">
              <ion-icon name="logo-github"></ion-icon>
            </a>
          </li>
          
          <li class="social-item">
            <a href="https://www.youtube.com/@mossssama" class="social-link">
              <ion-icon name="logo-youtube"></ion-icon>
            </a>
          </li>

        </ul>

      </div>

    </aside>


    <!--
      - #main-content
    -->

    <div class="main-content">

      <!--
        - #NAVBAR
      -->

      <nav class="navbar">

        <ul class="navbar-list">

          <li class="navbar-item">
            <button class="navbar-link  active" data-nav-link>About</button>
          </li>

          <li class="navbar-item">
            <button class="navbar-link" data-nav-link>Information</button>
          </li>

         <!-- <li class="navbar-item">
            <button class="navbar-link" data-nav-link>Portfolio</button>
          </li> -->

          <li class="navbar-item">
            <button class="navbar-link" data-nav-link>Contact</button>
          </li>

        </ul>

      </nav>


      <!--
        - #ABOUT
      -->

      <article class="about  active" data-page="about">

        <header>
          <h2 class="h2 article-title">About Family</h2>
        </header>

        <section class="about-text">
          <p>
            Hallo 🖖🏻, Selamat datang di Keluarga Jawa!, dengan senang hati Saya akan membantu Anda menjelajahi keanggotaan kami dan menjadi bagian dari komunitas dan keluarga Kami.
          </p>

          <p>
            Sebelumnya Perkenalkan Saya Alhadi Adriano, Saya hanya bertugas menjaga keluarga Jawa.
          </p>

          <p>
            Jika anda ingin bergabung dengan keluarga Jawa, Anda bisa contact Saya
          </p>

          <p>
Terima kasih telah menjadi bagian dari komunitas kami, dan saya berharap dapat bertemu dan berkolaborasi dengan Anda segera!
          </p>
        </section>


        <!--
          - service
        -->

        <section class="service">

          <h3 class="h3 service-title">Aturan</h3>

          <ul class="service-list">


            <li class="service-item">

              <div class="service-icon-box">
                <img src="icon-app.svg" alt="mobile app icon" width="40">
              </div>

              <div class="service-content-box">
                <h4 class="h4 service-item-title">Seluler</h4>

                <p class="service-item-text">
                  Memiliki Kontak atau sosmed yang aktif
                </p>
              </div>

            </li>

            <li class="service-item">

              <div class="service-icon-box">
                <img src="icon-design.svg" alt="design icon" width="40">
              </div>

              <div class="service-content-box">
                <h4 class="h4 service-item-title">Perilaku</h4>

                <p class="service-item-text">
                  Sopan santun, saling tolong menolong, menghargai pendapat orang, berbahasa yang baik.
                </p>
              </div>

            </li>

            <li class="service-item">

              <div class="service-icon-box">
                <img src="icon-photo.svg" alt="Web development icon" width="40">
              </div>

              <div class="service-content-box">
                <h4 class="h4 service-item-title">Profile</h4>

                <p class="service-item-text">
                  Setelah masuk keluarga bisa memberikan profil anda, seperti foto, Nama lengkap, panggilan, umur, alamat, hobi, agar kami bisa memasukan anda ke list keluarga di website ini, tidak di wajibkan.
                </p>
              </div>

            </li>


            <li class="service-item">

              <div class="service-icon-box">
                <img src="icon-dev.svg" alt="camera icon" width="40">
              </div>

              <div class="service-content-box">
                <h4 class="h4 service-item-title">INFORMASI</h4>

                <p class="service-item-text">
                  Tetaplah menjadi orang yang baik.
                </p>
              </div>

            </li>

          </ul>

        </section>

        
        <!--
          - testimonials
        -->

        
 <section class="testimonials">

          <h3 class="h3 testimonials-title">Creator</h3>

          <ul class="testimonials-list has-scrollbar">

            <li class="testimonials-item">
              <div class="content-card" data-testimonials-item>

                  <figure class="testimonials-avatar-box">
                <img src="alog.png" alt="Daniel lewis" width="60" data-testimonials-avatar>
                </figure>

                <h4 class="h4 testimonials-item-title" data-testimonials-title>Hadi</h4>

                <div class="testimonials-text" data-testimonials-text>
                  <p>
                    Nama : Alhadi Adriano 
                  </p>
                  <p>
                    Umur : 17 Tahun
                  </p>
                  <p>
                    Alamat : Kepulauan Riau, Kota Batam
                  </p>
                  <p>
                    Hobi : Coding
                  </p>
                  <p>
                    Pendidikan : SMA
                  </p>
                </div>

              </div>
            </li>

            <li class="testimonials-item">
              <div class="content-card" data-testimonials-item>

                <figure class="testimonials-avatar-box">
                  <img src="alog2.png" alt="Jessica miller" width="60" data-testimonials-avatar>
                </figure>

                <h4 class="h4 testimonials-item-title" data-testimonials-title>Alfiah</h4>

                <div class="testimonials-text" data-testimonials-text>
                  <p>
                    Nama : Alfiah nova aulia 
                  </p>
                  <p>
                    Umur : 17 Tahun
                  </p>
                  <p>
                    Alamat : Jawa Timur, Malang
                  </p>
                  <p>
                    Hobi : -
                  </p>
                  <p>
                    Pendidikan : -
                  </p>
                </div>

              </div>
            </li>

            <li class="testimonials-item">
              <div class="content-card" data-testimonials-item>

                <figure class="testimonials-avatar-box">
                  <img src="hadii.png" alt="Jessica miller" width="60" data-testimonials-avatar>
                </figure>

                <h4 class="h4 testimonials-item-title" data-testimonials-title>Indah </h4>

                <div class="testimonials-text" data-testimonials-text>
                  <p>
                    Nama : Indah < mama >
                  </p>
                  <p>
                    Umur : 16 Tahun
                  </p>
                  <p>
                    Alamat : Jawa Timur
                  </p>
                  <p>
                    Hobi : -
                  </p>
                  <p>
                    Pendidikan : -
                  </p>
                </div>

              </div>
            </li>
          </ul>

      
 </section>

        <!--
          - clients
        -->
        
      <!--  <section class="clients">

          <h3 class="h3 clients-title">Platforms</h3>

          <ul class="clients-list has-scrollbar">

            <li class="clients-item">
              <a href="https://www.udemy.com/user/mohammad-osama-saleh-ahmad/">
                <img src="./assets/images/logo_1_color.png" alt="client logo">
              </a>
            </li>

            <li class="clients-item">
              <a href="https://www.youtube.com/@mOssssama">
                <img src="./assets/images/logo_2_color.png" alt="client logo">
              </a>
            </li>

            <li class="clients-item">
              <a href="https://play.google.com/store/apps/developer?id=mOssssama">
                <img src="./assets/images/logo_3_color.png" alt="client logo">
              </a>
            </li>

            <li class="clients-item">
              <a href="https://www.linkedin.com/in/mossssama/">
                <img src="./assets/images/logo_4_color.png" alt="client logo">
              </a>
            </li>

          </ul>

        </section> -->

      </article>
        

      <!--
        - #RESUME
      -->

      <article class="resume" data-page="information">

        <header>
          <h2 class="h2 article-title">Member Information</h2>
        </header>

        <section class="timeline">

          <div class="title-wrapper">
            <div class="icon-box">
              <ion-icon name="ribbon-outline"></ion-icon>
            </div>

            <h3 class="h3">Website Developer</h3>
          </div>

          <ol class="timeline-list">
            <li class="timeline-item">

                <h4 class="h4 timeline-item-title">Alhadi Adriano</h4>

                <span>2024 - End</span>

                <p class="timeline-text">
                  Hallo, i'am Website Developer
                </p>

                 <p>  < The Java Family >
                  </p>

              </li>
            </ol>
            </section>
            
            
        <section class="timeline">

          <div class="title-wrapper">
            <div class="icon-box">
              <ion-icon name="ribbon-outline"></ion-icon>
            </div>

            <h3 class="h3">Creator</h3>
          </div>

          <ol class="timeline-list">


            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Alfiah nova aulia</h4>

              <span>2023 — End</span>


                <p>  < The Java Family >
                </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Indah</h4>

             <span>2023 — End</span>

               <p>  < The Java Family >
              </p>

            </li>
          </ol>
          </section>
            <section class="timeline">

          <div class="title-wrapper">
            <div class="icon-box">
              <ion-icon name="man-outline"></ion-icon>
            </div>

            <h3 class="h3">Laki - Laki </h3>
          </div>

          <ol class="timeline-list">

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Dito</h4>

              <span>2023 — End</span>

              <p> < The Java Family > </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Rehan</h4>

              <span>2023 — End</span>

              <p> < The Java Family > </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Farel</h4>

              <span>2023 — End</span>

              <p> < The Java Family > </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Rama</h4>

              <span>2023 — End</span>

              <p> < The Java Family > </p>

            </li>
            
          </ol>

        </section>

        <section class="timeline">

          <div class="title-wrapper">
            <div class="icon-box">
              <ion-icon name="woman-outline"></ion-icon>
            </div>

            <h3 class="h3">Perempuan</h3>
          </div>

          <ol class="timeline-list">

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Indah</h4>

              <span>2023 — End</span>

               <p>  < The Java Family >
                </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Diva</h4>

              <span>2023 — End</span>

               <p>  < The Java Family >
                </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Rara</h4>

              <span>2023 — End</span>

              <p>  < The Java Family >
                </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Mocex</h4>

              <span>2023 — End</span>

              <p>  < The Java Family >
                </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Rani</h4>

              <span>2023 — End</span>

              <p> < The Java Family > </p>

            </li>
            
          </ol>

        </section>


        <!-- <section class="skill">

          <h3 class="h3 skills-title">My skills</h3>

          <ul class="skills-list content-card">

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Mobile Development</h5>
                <data value="80">80%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 80%;"></div>
              </div>

            </li>

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Graphic design</h5>
                <data value="10">10%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 10%;"></div>
              </div>

            </li>

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Tutoring</h5>
                <data value="99">99%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 99%;"></div>
              </div>

            </li>

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Video Editing</h5>
                <data value="50">50%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 50%;"></div>
              </div>

            </li>

          </ul>

        </section> -->

      </article>


      <!--
        - #PORTFOLIO
      -->

      <article class="portfolio" data-page="portfolio">

       <header>
          <h2 class="h2 article-title">Portfolio</h2>
        </header>

        <section class="projects">

          <ul class="filter-list">

            <li class="filter-item">
              <button class="active" data-filter-btn>All</button>
            </li>

            <li class="filter-item">
              <button data-filter-btn>Applications</button>
            </li>

            <li class="filter-item">
              <button data-filter-btn>Tutoring</button>
            </li>

            <li class="filter-item">
              <button data-filter-btn>Certifications</button>
            </li>

          </ul>

          <div class="filter-select-box">

            <button class="filter-select" data-select>

              <div class="select-value" data-selecct-value>Select category</div>

              <div class="select-icon">
                <ion-icon name="chevron-down"></ion-icon>
              </div>

            </button>

            <ul class="select-list">

              <li class="select-item">
                <button data-select-item>All</button>
              </li>

              <li class="select-item">
                <button data-select-item>Tutoring</button>
              </li>

              <li class="select-item">
                <button data-select-item>Applications</button>
              </li>

              <li class="select-item">
                <button data-select-item>Certifications</button>
              </li>

            </ul>

          </div>

          <ul class="project-list">

            <li class="project-item  active" data-filter-item data-category="certifications">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project_10.jpg" alt="frontEndWeb" loading="lazy">
                </figure>

                <h3 class="project-title">Front End Web</h3>

                <p class="project-category">Certifications</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="tutoring">
              <a href="https://www.udemy.com/course/learning-programming-by-c-language-m-ossama/learn/">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project_1.jpg" alt="finance" loading="lazy">
                </figure>

                <h3 class="project-title">C Crash Course</h3>

                <p class="project-category">Tutoring</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="certifications">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project_2.jpg" alt="embeddedSystems" loading="lazy">
                </figure>

                <h3 class="project-title">Embedded Systems</h3>

                <p class="project-category">Certifications</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="certifications">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project_11.jpg" alt="graphics" loading="lazy">
                </figure>

                <h3 class="project-title">Graphics</h3>

                <p class="project-category">Certifications</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="tutoring">
              <a href="https://www.youtube.com/playlist?list=PLI6BBuYJW8gveylT4DdLJHPnr5RtAKRJd">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project_3.jpg" alt="fundo" loading="lazy">
                </figure>

                <h3 class="project-title">Java Crash Course</h3>

                <p class="project-category">Tutoring</p>

              </a>
            </li>

            <ul class="project-list">

              <li class="project-item  active" data-filter-item data-category="certifications">
                <a href="#">
  
                  <figure class="project-img">
                    <div class="project-item-icon-box">
                      <ion-icon name="eye-outline"></ion-icon>
                    </div>
  
                    <img src="./assets/images/project_12.jpg" alt="embeddedSystems" loading="lazy">
                  </figure>
  
                  <h3 class="project-title">Embedded Systems</h3>
  
                  <p class="project-category">Certifications</p>
  
                </a>
              </li>

            <li class="project-item active" data-filter-item data-category="applications">
              <a href="https://play.google.com/store/apps/details?id=com.mOssssama.notesapp&hl=en&gl=US">
            
                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>
                  <img src="./assets/images/project_4.png" alt="notella" loading="lazy">
                </figure>
            
                <h3 class="project-title">Notella</h3>
            
                <p class="project-category">Applications</p>
            
              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="certifications">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project_6.jpg" alt="robotics" loading="lazy">
                </figure>

                <h3 class="project-title">Robotics</h3>

                <p class="project-category">Certifications</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="tutoring">
              <a href="https://www.youtube.com/playlist?list=PLI6BBuYJW8gsEngoAubCoBwJhD-oNUQzp">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project_5.jpg" alt="dsm." loading="lazy">
                </figure>

                <h3 class="project-title">Kotlin Crash Course</h3>

                <p class="project-category">Tutoring</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="certifications">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project_9.jpg" alt="android" loading="lazy">
                </figure>

                <h3 class="project-title">Android</h3>

                <p class="project-category">Certifications</p>

              </a>
            </li>


            <li class="project-item active" data-filter-item data-category="applications">
              <a href="#" onclick="displaySoonText(event)">
            
                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>
                  <img src="./assets/images/project_8.png" alt="taswila" loading="lazy">
                </figure>
            
                <h3 class="project-title">Taswila</h3>
            
                <p class="project-category">Applications</p>
            
              </a>
            </li>
            

            <li class="project-item  active" data-filter-item data-category="certifications">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project_7.jpg" alt="android" loading="lazy">
                </figure>

                <h3 class="project-title">Android</h3>

                <p class="project-category">Certifications</p>

              </a>
            </li>

          </ul>

        </section>

      </article>


      <!--
        - #BLOG
      -->

      <article class="documentations" data-page="contact">

        <header>
          <h2 class="h2 article-title">Contact</h2>
        </header>

        <section class="blog-posts">

          <ul class="blog-posts-list">

            <li class="blog-post-item">
              <a href="wa.me/6282174996219">

                <div class="blog-content">

                  <div class="blog-meta">
                    <p class="blog-category"><div class="icon-box">
              <ion-icon name="logo-whatsapp"></ion-icon> 
                    </div></p>

                    <span class="dot"></span>

                    <time datetime="2022-11-20">WhatsApp</time>
                  </div>

                  <h3 class="h3 blog-item-title">Message</h3>

                  <p class="blog-text">
                    Ini WhatsApp Saya jika butuh bantuan atau lain sebagainya tinggal tekan saja.
                  </p>

                </div>

              </a>
            </li>

            <li class="blog-post-item">
              <a href="https://discord.com/invite/TzTgRR46nk">

                <div class="blog-content">

                  <div class="blog-meta">
                    <p class="blog-category"><div class="icon-box">
                    <ion-icon name="logo-discord"></ion-icon> 
                    </div></p>

                    <span class="dot"></span>

                    <time datetime="2022-11-05">Discord</time>
                  </div>

                  <h3 class="h3 blog-item-title">Message</h3>

                  <p class="blog-text">
                    Ini discord saya jika kamu ada masalah atau butuh bantuan tinggal tekan saja.
                  </p>

                </div>

              </a>
            </li>

          </ul>

        </section>

      </article>

    </div>

  </main>


  <!--
    - custom js link
  -->
  <script src="script.js"></script>

  <!--
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>