criacao dos arquivos iniciais

eduardavieira-dev · Sep 24, 2024 · ff389e6 · ff389e6
1 parent d69c8be
commit ff389e6
Show file tree

Hide file tree

Showing 25 changed files with 523 additions and 0 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -0,0 +1,69 @@
+@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
+/* font-family: "Karla", sans-serif; */
+
+#infos{
+ display: flex;   
+ padding: 10px;
+ gap: 20px;
+ justify-content: space-between;
+ /* flex-wrap: wrap; */
+}
+
+.info{
+    width: 48%;
+}
+
+.autoria{
+    display: flex;
+    gap: 20px;
+}
+
+.autoria img{
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+
+
+.t-autor{
+    padding-bottom:5px ;
+    border-bottom: 1px solid black;
+}
+
+
+.btn{
+    background-color: rgb(187, 0, 255);
+    border: none;
+    color: #fff;
+}
+
+.btn:hover{
+    background-color: rgb(149, 0, 203);
+    border: none;
+
+}
+
+.btn-outline-success{  
+    background-color: rgb(229, 156, 255);
+    color: #fff;
+}
+
+.card{
+    padding: 10px;
+    filter: drop-shadow(5px 5px 10px rgba(174, 174, 174, 0.226));
+    background-color: rgb(247, 226, 255);
+}
+
+.t-conteudo{
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgb(75, 5, 100);
+}
+
+footer{
+    margin-top: 20px;
+    text-align: center;
+    background-color: rgb(229, 156, 255);
+    color: #fff;
+    padding: 10px;
+}
+
+
diff --git a/assets/images/disney/cinderela.jpg b/assets/images/disney/cinderela.jpg
diff --git a/assets/images/disney/disney.jpg b/assets/images/disney/disney.jpg
diff --git a/assets/images/disney/enrolados.jpg b/assets/images/disney/enrolados.jpg
diff --git a/assets/images/disney/fada.jpg b/assets/images/disney/fada.jpg
diff --git a/assets/images/disney/peter.jpg b/assets/images/disney/peter.jpg
diff --git a/assets/images/disney/po.jpg b/assets/images/disney/po.jpg
diff --git a/assets/images/disney/sleep.jpg b/assets/images/disney/sleep.jpg
diff --git a/assets/images/eduarda.png b/assets/images/eduarda.png
diff --git a/assets/images/icon/github.svg b/assets/images/icon/github.svg
diff --git a/assets/images/icon/insta.svg b/assets/images/icon/insta.svg
diff --git a/assets/images/icon/linkedin.svg b/assets/images/icon/linkedin.svg
diff --git a/assets/images/icon/sabrina.jpg b/assets/images/icon/sabrina.jpg
diff --git a/assets/images/logo.png b/assets/images/logo.png
diff --git a/assets/images/series/De_Volta_aos_15.jpg b/assets/images/series/De_Volta_aos_15.jpg
diff --git a/assets/images/series/Diarios-de-um-Vampiro.jpg b/assets/images/series/Diarios-de-um-Vampiro.jpg
diff --git a/assets/images/series/Diarios-de-um-Vampiro.webp b/assets/images/series/Diarios-de-um-Vampiro.webp
diff --git a/assets/images/series/beleza.jpg b/assets/images/series/beleza.jpg
diff --git a/assets/images/series/chosen.webp b/assets/images/series/chosen.webp
diff --git a/assets/images/series/gg.webp b/assets/images/series/gg.webp
diff --git a/assets/images/series/monte_carlo_a_l.webp b/assets/images/series/monte_carlo_a_l.webp
diff --git a/assets/images/series/sorriso.webp b/assets/images/series/sorriso.webp
diff --git a/explorer.html b/explorer.html
@@ -0,0 +1,161 @@
+<!-- Tela de exploração das series (explorer.html)
+Página com possibilidade de pesquisa e filtro de informações sobre as séries disponíveis via API do The Movie DB, apresentadas na estrutura de cards. A tela deve conter:
+(1) campo para pesquisa textual das séries
+(2) barra de filtros com LAYOUT PERSONALIZADO INDIVIDUALMENTE em que cada pessoa deve definir pelo menos 3 opções de filtro a serem aplicados na funcionalidade de exploração. -->
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8">
+    <meta name="description" content="Um site de filmes com algumas funcionalidades básicas">
+    <meta name="keywords" content="HTML, CSS, JavaScript, Bootstrap">
+    <meta name="author" content="Eduarda Vieira">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Duda Flix</title>
+    <!-- Boostrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <link rel="stylesheet" href="/assets/css/index.css">
+  </head>
+  <body>
+    <!-- nav -->
+    <nav class="navbar navbar-expand-lg bg-body-tertiary px-4">
+        <div class="container-fluid">
+            <a href="index.html" class="px-3">
+                <img width="80px" src="./assets/images/logo.png" alt="Duda Flix"></a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="index.html">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="explorer.html">Filmes</a>
+              </li>
+
+
+            </ul>
+            <!-- <form class="d-flex" role="search">
+              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+              <button class="btn btn-outline-success" type="submit">Search</button>
+            </form> -->
+          </div>
+        </div>
+      </nav>
+    <!-- nav -->
+
+
+    <div class="container text-center mt-3 ">
+        <div class="row">
+          <div class="col-sm-12 col-md-3 col-lg-3 mb-4">
+            <form class="d-flex" role="search">
+                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                <button class="btn btn-outline-success" type="submit">Search</button>
+              </form>
+
+
+
+          </div>
+          <div class="col-md-9 col-lg-9 ">
+
+
+            <div class="content">
+                <h2 class="t-conteudo">Explorar séries</h2>
+                <div class="row text-center">
+                    <div class="col-sm-6 col-md-4 col-lg-3">
+                      <div class="card mb-4">
+                        <img src="/assets/images/series/Diarios-de-um-Vampiro.jpg" class="card-img-top" alt="...">
+                        <div class="card-body">
+                          <h5 class="card-title">Diario de um Vampiro</h5>
+                          <p class="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+                          <a href="#" class="btn btn-primary">Ver mais</a>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-6 col-md-4 col-lg-3">
+                      <div class="card mb-4">
+                        <img src="/assets/images/series/chosen.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                          <h5 class="card-title">The Chosen</h5>
+                          <p class="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+                          <a href="#" class="btn btn-primary">Ver mais</a>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-6 col-md-4 col-lg-3">
+                      <div class="card mb-4">
+                        <img src="/assets/images/series/gg.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                          <h5 class="card-title">Gossip Girl</h5>
+                          <p class="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+                          <a href="#" class="btn btn-primary">Ver mais</a>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-6 col-md-4 col-lg-3">
+                      <div class="card mb-4">
+                        <img src="/assets/images/series/gg.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                          <h5 class="card-title">Gossip Girl</h5>
+                          <p class="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+                          <a href="#" class="btn btn-primary">Ver mais</a>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-6 col-md-4 col-lg-3">
+                      <div class="card mb-4">
+                        <img src="/assets/images/series/gg.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                          <h5 class="card-title">Gossip Girl</h5>
+                          <p class="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+                          <a href="#" class="btn btn-primary">Ver mais</a>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-6 col-md-4 col-lg-3">
+                      <div class="card mb-4">
+                        <img src="/assets/images/series/gg.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                          <h5 class="card-title">Gossip Girl</h5>
+                          <p class="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+                          <a href="#" class="btn btn-primary">Ver mais</a>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-6 col-md-4 col-lg-3">
+                      <div class="card mb-4">
+                        <img src="/assets/images/series/gg.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                          <h5 class="card-title">Gossip Girl</h5>
+                          <p class="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+                          <a href="#" class="btn btn-primary">Ver mais</a>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-sm-6 col-md-4 col-lg-3">
+                      <div class="card mb-4">
+                        <img src="/assets/images/series/gg.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                          <h5 class="card-title">Gossip Girl</h5>
+                          <p class="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.</p>
+                          <a href="#" class="btn btn-primary">Ver mais</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+
+              </div>
+
+
+          </div>
+        </div>
+      </div>
+
+    <footer>
+        <p>Eduarda Vieira | 2024</p>
+      </footer>
+          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+      </body>
+      </html>