<!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">
  <title>My Website</title>
  <!--==================== UNICONS ====================-->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
  <!--=============== REMIXICONS ===============-->
  <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
  <!--=============== FAVICON ===============-->
  <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
  <!--=============== BOXICONS ===============-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header class="header" id="header">
    <nav class="nav container">
      <a href="#" class="logo-name">Christian</a>

      <div class="nav-menu" id="nav_menu">
        <ul class="nav-list">
          <li class="nav-item">
            <a href="#home" class="nav-link active-link"><i class="ri-home-line nav-icon"></i>Home</a>
          </li>

          <li class="nav-item">
            <a href="#about" class="nav-link"><i class="ri-user-3-line nav-icon"></i>About</a>
          </li>

          <li class="nav-item">
            <a href="#skills" class="nav-link"><i class="ri-book-3-line nav-icon"></i>Skills</a>
          </li>

          <li class="nav-item">
            <a href="#contact" class="nav-link"><i class="ri-mail-send-line nav-icon"></i>Contact</a>
          </li>
        </ul>

        <div class="nav_close" id="nav-close">
          <i class='ri-close-line'></i>
        </div>
      </div>

      <div class="nav_btns">
        <!-- Theme change button -->
        <i class='ri ri-moon-clear-line change-theme' id="theme-button"></i>

        <div class="nav_toggle" id="nav-toggle">
          <i class='ri-function-line'></i>
        </div>
      </div>
    </nav>
  </header>

  <main class="main">
    <!--==================== HOME ====================-->
    <section class="home section" id="home">
      <div class="home-container container grid">
        <div class="home-content grid">
          <div></div>
          <div class="home-img">
            <img src="79205368-480c-416b-b498-f11fe004bebb.png" alt="" class="home-blob-img">
          </div>

          <div class="home-data">
            <h1 class="home-title">Hi, I'm Christian</h1>
            <h3 class="home-subtitle">Frontend Developer</h3>
            <p class="home-description">High level experience in web design and development knowledge, producing quality
              work.</p>
            <div class="home-social">
              <a href="https://www.linkedin.com/" target="_blank" class="home-social-icon">
                <i class="uil uil-linkedin-alt"></i>
              </a>

              <a href="https://dribbble.com/" target="_blank" class="home-social-icon">
                <i class="uil uil-dribbble"></i>
              </a>

              <a href="https://github.com/" target="_blank" class="home-social-icon">
                <i class="uil uil-github-alt"></i>
              </a>
            </div>
            <a href="#contact" class="button button--flex">
              Contact Me <i class="uil uil-message button-icon"></i>
            </a>
          </div>
        </div>
      </div>
    </section>

    <section class="about section" id="about">

      <h2 class="section-title">About <span>Me</span></h2>

      <div class="about-container container grid">
        <img src="79205368-480c-416b-b498-f11fe004bebb.png" alt="" class="about-img">

        <div class="about-data">
          <p class="about-description">Web developer, with extensive knowledge and years of experience, working in web
            technologies and Ui / Ux design, delivering quality work.</p>

          <div class="about-buttons">
            <a download="" href="assets/pdf/Alexa-Cv.pdf" class="button button--flex">
              Download CV<i class="uil uil-download-alt button-icon"></i>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!--==================== SKILLS ====================-->
    <section class="skills section" id="skills">

      <h2 class="section-title">Skills</h2>

      <div class="skills__container container grid">
        <div>

          <!--================Skills 1================-->
          <div class="skills__content skills__open">
            <div class="skills__header">
              <i class="ri-computer-line skills__icon"></i>

              <div>
                <h1 class="skills__title">Frontend Developer</h1>
              </div>

              <i class="uil uil-angle-down skills__arrow"></i>
            </div>

            <div class="skills__list grid">

              <div class="skills__data">

                <div class="skill-box">
                  <span class="title">HTML</span>
                  <div class="skill-bar">
                    <span class="skill-per html" data-skill-percent="90">
                      <span class="tooltip html">90%</span>
                    </span>
                  </div>
                </div>

              </div>

              <div class="skills__data">
                <div class="skill-box">
                  <span class="title">CSS</span>
                  <div class="skill-bar">
                    <span class="skill-per css" data-skill-percent="70">
                      <span class="tooltip css">70%</span>
                    </span>
                  </div>
                </div>
              </div>

              <div class="skills__data">
                <div class="skill-box">
                  <span class="title">JavaScript</span>
                  <div class="skill-bar">
                    <span class="skill-per javascript" data-skill-percent="50">
                      <span class="tooltip javascript">50%</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div>
          <!--=====Skills 2=====-->
          <div class="skills__content skills__close">
            <div class="skills__header">
              <i class="ri-color-filter-ai-line skills__icon"></i>

              <div>
                <h1 class="skills__title">Designer</h1>
              </div>

              <i class="uil uil-angle-down skills__arrow"></i>
            </div>

            <div class="skills__list grid">

              <div class="skills__data">

                <div class="skill-box">
                  <span class="title">Figma</span>
                  <div class="skill-bar">
                    <span class="skill-per figma" data-skill-percent="70">
                      <span class="tooltip figma">70%</span>
                    </span>
                  </div>
                </div>

              </div>

              <div class="skills__data">
                <div class="skill-box">
                  <span class="title">Photoshop</span>
                  <div class="skill-bar">
                    <span class="skill-per photoshop" data-skill-percent="70">
                      <span class="tooltip photoshop">70%</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="contact section" id="contact">

      <h2 class="section-title">Contact</h2>

      <div class="contact-container container grid">
        <div>
          <div class="contact-information">
            <i class="uil uil-phone contact-icon"></i>

            <div>
              <h3 class="contact-title">Contact Me</h3>
              <span class="contact-subtitle">09563442100</span>
            </div>
          </div>

          <div class="contact-information">
            <i class="uil uil-envelope contact-icon"></i>

            <div>
              <h3 class="contact-title">Email Me</h3>
              <span class="contact-subtitle">christian@gmail.com</span>
            </div>
          </div>

          <div class="contact-information">
            <i class="uil uil-map-marker contact-icon"></i>

            <div>
              <h3 class="contact-title">Address</h3>
              <span class="contact-subtitle">Philippines</span>
            </div>
          </div>
        </div>

        <form id="contact-form" class="contact-form grid">
          <div class="contact-inputs grid">
            <div class="contact-content">
              <label for="name" class="contact-label">Name</label>
              <input type="text" id="name" name="name" class="contact-input" required>
            </div>
      
            <div class="contact-content">
              <label for="email" class="contact-label">Email</label>
              <input type="email" id="email" name="email" class="contact-input" required>
            </div>
          </div>
          <div class="contact-content">
            <label for="project" class="contact-label">Project</label>
            <input type="text" id="project" name="project" class="contact-input" required>
          </div>
      
          <div class="contact-content">
            <label for="message" class="contact-label">Message</label>
            <textarea id="message" name="message" cols="30" rows="7" class="contact-input" required></textarea>
          </div>
      
          <div>
            <button type="submit" class="button button--flex">Send Message</button>
          </div>
        </form>

        <!-- Popup Modal -->
        <div id="modal" class="modal">
          <div class="modal-content">
            <div id="modal-header" class="modal-header"></div>
            <div id="modal-body" class="modal-body"></div>
            <div class="modal-footer">
              <button class="button-close" id="close-modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>


  <footer class="footer">

  </footer>

  <script src="main.js"></script>
</body>

</html>