index.ejs 4.83 KB
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Health Assistant</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- Font Awesome icons (free version)-->
    <script
      src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
      crossorigin="anonymous"
    ></script>
    <!-- Simple line icons-->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css"
      rel="stylesheet"
    />
    <!-- Google fonts-->
    <link
      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic"
      rel="stylesheet"
      type="text/css"
    />
    <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=Corinthia:wght@700&family=Fuzzy+Bubbles:wght@700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/stylesheets/styles.css" />
    <style>
      .title-fontA {
        font-family: "Fuzzy Bubbles", cursive;
      }
    </style>
  </head>
  <body id="page-top">
    <nav id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li class="sidebar-brand"><a href="#page-top">Health Assistant</a></li>
        <li class="sidebar-nav-item"><a href="#page-top">Home</a></li>
        <li class="sidebar-nav-item"><a href="#about">About</a></li>
        <li class="sidebar-nav-item"><a href="#features">Services</a></li>
      </ul>
    </nav>
    <div class="navbar navbar-expand-lg navbar-light fixed-top">
      <a class="menu-toggle rounded" href="#"><i class="fas fa-bars"></i></a>
      <div class="container mx-4 my-1">
        <a class="navbar-brand title-fontA" href="#page-top"
          >Health Assistant</a
        >
      </div>
    </div>

    <!-- Header-->
    <header class="masthead d-flex align-items-center">
      <div class="container px-4 px-lg-5 text-center">
        <h1 class="mb-1">Health Assitant</h1>
        <h3 class="mb-5"><em>헬스 관리 쉽게하자!</em></h3>
        <a class="btn btn-dark btn-xl" href="/auth/kakao">카카오로 시작하기</a>
      </div>
    </header>
    <section class="content-section bg-light" id="about">
      <div class="container px-4 px-lg-5 text-center">
        <div class="row gx-4 gx-lg-5 justify-content-center">
          <div class="col-lg-4">
            <h2 class="mb-3">Programmers</h2>
            <p class="lead mb-5">2018102224 임준표</p>
          </div>
          <div class="col-lg-4">
            <h2 class="mb-3">Introduction</h2>
            <p class="lead mb-5">
              Health Assistant is a Web based program for Daily exercisers.
            </p>
          </div>
          <div class="col-lg-5 mt-1">
            <a class="btn btn-dark btn-xl" href="#features">Features</a>
          </div>
        </div>
      </div>
    </section>

    <section
      class="content-section bg-primary text-white text-center"
      id="features"
    >
      <div class="container px-4 px-lg-5">
        <div class="content-section-heading">
          <h3 class="text-secondary mb-0 title-fontA">Health Assistant</h3>
          <h2 class="mb-5">Features</h2>
        </div>
        <div class="row gx-4 gx-lg-5">
          <div class="col-lg-4 col-md-6 mb-5 mb-lg-0">
            <span class="service-icon rounded-circle mx-auto mb-3">
              <i class="fas fa-cogs"></i>
            </span>
            <h4><strong>효율성</strong></h4>
            <p class="text-faded mb-0">
              요일별 부위와 운동을 정리해 <br />효율적으로 볼 수 있습니다!
            </p>
          </div>
          <div class="col-lg-4 col-md-0 mb-0 mb-lg-0">
            <span class="service-icon rounded-circle mx-auto mb-3">
              <div>
                <i class="fas fa-clock"></i>
              </div>
            </span>
            <h4><strong>시간관리</strong></h4>
            <p class="text-faded mb-0">
              타이머를 통해 쉬는시간을 <br />확실하게 알 수 있습니다!
            </p>
          </div>
          <div class="col-lg-4 col-md-0 mb-0 mb-md-0">
            <span class="service-icon rounded-circle mx-auto mb-3">
              <i class="far fa-user-circle"></i>
            </span>
            <h4><strong>루틴추천</strong></h4>
            <p class="text-faded mb-0">
              나와 비슷한 체형인 <br />다른사람의 루틴을 볼 수 있습니다!
            </p>
          </div>
        </div>
      </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/scripts.js"></script>
  </body>
</html>