Galeria/index.html at main · bugelseif/Galeria · 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
<!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>Filmes</title>
  <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=Kumbh+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h2>Filmes Populares</h2>
    <div class="input-container">
      <input type="text" name="movie-name" id="movie-name" placeholder="Digite algum filme para pesquisar...">
      <img src="images/search-icon.svg" alt="Ícone de pesquisa" class="searchIcon">
    </div>
    <div class="showOnlyFavorites">
      <input type="checkbox" name="onlyFavorites" id="onlyFavorites">
      <label for="onlyFavorites">Mostrar apenas meus filmes favoritos</label>
    </div>
    <div class="movies">
      <div class="movie">
        <div class="movie-informations">
          <div class="movie-image">
            <img src="https://img.elo7.com.br/product/original/3FBA809/big-poster-filme-batman-2022-90x60-cm-lo002-poster-batman.jpg" alt="Batman (2022)"/>
          </div>
          <div class="movie-text">
            <h4>Batman (2022)</h4>
            <div class="rating-favorites">
              <div class="rating">
                <img src="images/star.png" alt="Star Icon"/>
                <span>9.2</span>
              </div>
              <div class="favorite">
                <img src="images/heart.svg" alt="Star Icon"/>
                <span>Favoritar</span>
              </div>
            </div>
          </div>
        </div>
        <div class="movie-description">
          <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
        </div>
      </div>

      <div class="movie">
        <div class="movie-informations">
          <div class="movie-image">
            <img src="https://img.elo7.com.br/product/original/3FBA809/big-poster-filme-batman-2022-90x60-cm-lo002-poster-batman.jpg" alt="Batman (2022)"/>
          </div>
          <div class="movie-text">
            <h4>Batman (2022)</h4>
            <div class="rating-favorites">
              <div class="rating">
                <img src="images/star.png" alt="Star Icon"/>
                <span>9.2</span>
              </div>
              <div class="favorite">
                <img src="images/heart.svg" alt="Star Icon"/>
                <span>Favoritar</span>
              </div>
            </div>
          </div>
        </div>
        <div class="movie-description">
          <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
        </div>
      </div>

      <div class="movie">
        <div class="movie-informations">
          <div class="movie-image">
            <img src="https://img.elo7.com.br/product/original/3FBA809/big-poster-filme-batman-2022-90x60-cm-lo002-poster-batman.jpg" alt="Batman (2022)"/>
          </div>
          <div class="movie-text">
            <h4>Batman (2022)</h4>
            <div class="rating-favorites">
              <div class="rating">
                <img src="images/star.png" alt="Star Icon"/>
                <span>9.2</span>
              </div>
              <div class="favorite">
                <img src="images/heart.svg" alt="Star Icon"/>
                <span>Favoritar</span>
              </div>
            </div>
          </div>
        </div>
        <div class="movie-description">
          <span>Lorem Ipsum is simply Lar dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
        </div>
      </div>
    </div>
  </main>
</body>
</html>