KINOKU/detail_lalaland.html at main · ToshikoKanna/KINOKU · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>KINOBOX</title>
  <link href='https://cdn.boxicons.com/fonts/basic/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="detail.css">
</head>

<body>
  <header class="navbar">
    <div class="navbar-container">
      <div class="logo-container">
        <h1 class="logo">KINOBOX</h1>
      </div>
      <div class="menu-container">
        <ul class="menu-list">
          <a href="homepage.html" style="text-decoration: none; color: white;"><li class="menu-list-item active">Home</li></a>
        </ul>
      </div>
      <div class="genre-dropdown">
        <button class="genre-btn">Genres ▼</button>
        <div class="genre-menu">
          <a href="#">Action</a>
          <a href="#">Anime</a>
          <a href="#">Classics</a>
          <a href="#">Comedies</a>
          <a href="#">Crime</a>
          <a href="#">Documentaries</a>
          <a href="#">Dramas</a>
          <a href="#">Fantasy</a>
          <a href="#">Halloween</a>
          <a href="#">Hollywood</a>
          <a href="#">Horror</a>
          <a href="#">Family</a>
          <a href="#">Korean</a>
          <a href="#">Musicals</a>
          <a href="#">Romance</a>
          <a href="#">Sci-Fi</a>
          <a href="#">Sports</a>
          <a href="#">Thriller</a>
        </div>
      </div>

      <div class="profile-container">
        <div class="search-box">
          <input type="text" id="searchInput" placeholder="Search..." />
          <i class="fa fa-search"></i>
        </div>
        <img class="profile-picture" src="img/wonwoo.jpeg" alt="" />
      </div>
    </div>
  </header>
  <section class="film-wrapper">
   <iframe width="95%" height="500px" src="https://www.youtube.com/embed/je0aAf2f8XQ?si=EOsPf2263zA4tifS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </iframe>
  </section>
  <section class="film-detail">
    <h2>La La Land (2016)</h2>
    <span class="film-detail-all">
      <div class="rating-detail-film">
        <i class='bxr  bx-star'></i>
        <p>Rating</p>
      </div>
      <div class="vertical-line-detail-film"></div>
      <p>Kategori Film</p>
      <div class="vertical-line-detail-film"></div>
      <p>Durasi Film</p>
    </span>
    <div class="genre-container-film">
      <div class="genre-box">Romance</div>
      <div class="genre-box">Sad</div>
      <div class="genre-box">Heartbreak</div>
      <div class="genre-box">MASTERPIECE</div>
    </div>
    <div class="film-synopsis">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores et vero ad sunt asperiores. Consequatur voluptates temporibus quibusdam. Animi omnis nesciunt, blanditiis voluptate veniam labore id! Architecto a dignissimos unde?
      Numquam eius neque unde cupiditate ducimus ratione sequi a, soluta asperiores recusandae eum, repudiandae, dolores sed voluptas tempora aliquam. Sequi fugit tempora neque illum libero perspiciatis saepe aliquam labore cumque?
      Sequi, nostrum! Vel, eveniet unde enim beatae qui voluptatibus explicabo, molestiae repellat illum exercitationem culpa dolor officia tempore laborum? Delectus temporibus reiciendis numquam nisi? Quasi nostrum recusandae libero nam et!
      Quam obcaecati temporibus voluptates excepturi odit, est fugit distinctio quisquam explicabo cumque quod iste fuga quas voluptate tenetur necessitatibus aliquid quia eius. Expedita deleniti alias assumenda aspernatur, laudantium ipsa sapiente!</p>
    </div>
  </section>
  <section class="review-film">
    <h3>Review Film</h3>
    <div class="review-user">
      <img class="profile-picture-user" src="img/budi.jpg" alt="">
      <div class="review-content-user">
        <p class="username">Budi</p>
        <p class="time">10 menit yang lalu</p>
        <p class="comment">film sakit "katanya"</p>
      </div>
    </div>
  </section>


</body>


</html>