home.html

<!DOCTYPE html>
<html lang= "ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/9b342ce525.js" crossorigin="anonymous"></script> 
  <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css">
  <link rel="stylesheet" media="screen and (min-width: 1100px)" href="css/widescreen.css">
  <link rel="stylesheet" href="css/style.css">
  <title>movieQ - 독립영화 온라인 상영관</title>
</head>
<body id="home">
  <!-- Navbar -->
  <nav id="navbar">
    <h1 class="logo">
      <span class="text-primary">
      movie</span>Q
    </h1>
    <ul>
      <li><a href="#login">로그인</a></li>
    </ul>
  </nav>

  <!-- Header: Showcase -->
  <header id="showcase">
    <div class="showcase-content">
      <h1 class="l-heading">
        이젠 독립영화도 집에서 보자!
      </h1>
      <p class="lead">
        또 하나의 눈, 또 하나의 세상
        언제 어디서나 즐기는 내 손 안의 독립영화관
        movieQ에서 지금 시작해보세요.
      </p>
      <form name="email-form" method="POST" data-netlify="true">
        <div class="email-form">
            <span class="form-control-wrap">
                <input type="email" name="email" id="email" size="40" 
                class="form-control" placeholder="이메일주소">
            </span>
            <a href="login" button type="submit" class="form-control-submit">
            2주 무료 이용 <i class="fas fa-chevron-right"></i> 
            </button></a>
            <p>이메일을 입력하고 2달 무료 이용을 시작해보세요.</p>
        </div>
    </div>
  </header>

 <!-- Header: Section-a -->
  <header id="section-a">
    <div class="showcase-content">
      <h1 class="l-heading">
        이동 중에도 생생하게 즐기는 독립영화!
      </h1>
      <p class="lead">
        여러 디바이스에서 movieQ를 만나보세요.
      </p>
      <a href="#what" class="btn">더 알아보기</a>
    </div>
  </header>


 <!-- Header: Section-b -->
  <header id="section-b">
    <div class="showcase-content">
      <h1 class="l-heading">
        다양한 문화를 즐기는 건강한 사회
      </h1>
      <p class="lead">
        독립영화는 어렵다구요? movieQ와 시작하세요.
      </p>
      <a href="#what" class="btn">더 알아보기</a>
    </div>
  </header>


 <!-- Header: section-c -->
  <header id="section-c">
    <div class="showcase-content">
      <h1 class="l-heading">
        독립영화도 취향에 따라
      </h1>
      <p class="lead">
        슨 영화를 보아야 할지 모를땐, movieQ 추천 기능을 이용해보세요.
      </p>
      <a href="#what" class="btn">더 알아보기</a>
    </div>
  </header>


  <!-- Footer -->
  <footer id="main-footer" class="bg-dark text-center py-1">
    <div class="container">
      <p>Copyright &copy; 2020 | movieQ_Likelion | All Rights Reserved</p>
    </div>
  </footer>

  <!-- JQuery CDN -->
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

  <!-- Local JS File -->
  <script src="js/main.js"></script>

  <!-- Google Maps -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsehT4XIzQpaegvwOG7TsfzDhkRXarukU&callback=initMap"
  async defer></script>
</body>
</html>