Add files via upload

KeylaneCardoso · Mar 22, 2023 · 001ad3e · 001ad3e
1 parent ccafc14
commit 001ad3e
Show file tree

Hide file tree

Showing 6 changed files with 199 additions and 0 deletions.
diff --git a/formulario/css/style.css b/formulario/css/style.css
@@ -0,0 +1,105 @@
+@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Signika&display=swap');
+
+*{
+    margin: 0;
+    padding: 0; 
+}
+
+body{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: rgb(42, 36, 25);
+    padding: 4%;
+}
+
+.cabecalho {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    font-family: 'Signika', sans-serif;
+    color:rgb(239, 183, 104)
+}
+
+#logo {
+    display: flex;
+    flex-direction: row;
+    font-family: 'Righteous', cursive;
+    color: rgb(248, 237, 205);
+}
+
+#sub-titulo{
+   font-size: 30px;
+}
+
+#descricao{
+    padding: 5px;
+    text-align: left;
+    font-size: 20px;
+ }
+
+.formulario{
+    background-color: rgb(239, 183, 104);
+    padding: 20px;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    align-items: left;
+    font-family: 'Signika', sans-serif;
+}
+
+fieldset{
+    border: 0;
+}
+
+fieldset.grupo .campo{
+    padding: 5px 0 5px 0;
+}
+
+#check{
+    display: inline-block;
+}
+
+.campo label {
+    margin-bottom: 100px;
+    color: #641900;
+}
+
+.campo input[type="text"], .campo input[type="email"], .campo select, .campo textarea {
+    padding: 0.2em;
+    border: 1px solid #bc7e69;
+    border-radius:5px;
+    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+    display: block;
+    width: 100%;
+}
+
+#check{
+    margin: 5px 0 5px 0;
+    display: inline-block;
+    color: #641900;
+}
+
+.botao{
+    font-size: 1.2em;
+    background: rgb(232, 135, 0);
+    border: 0;
+    margin-bottom: 5px;
+    color: #ffffff;
+    padding: 0.2em 0.6em;
+    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+    margin-top: 1em;
+}
+
+.botao:hover {
+    background: rgb(169, 99, 2);
+    box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
+    text-shadow: none;
+}
+
+.botao, select{
+    cursor: pointer;
+}
diff --git a/formulario/image/bola-de-la.png b/formulario/image/bola-de-la.png
diff --git a/formulario/image/leitura.png b/formulario/image/leitura.png
diff --git a/formulario/image/lendo-um-livro.png b/formulario/image/lendo-um-livro.png
diff --git a/formulario/image/pilha-de-livros.png b/formulario/image/pilha-de-livros.png
diff --git a/formulario/index.html b/formulario/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<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">
+    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
+    <title>Cadastro de Livros</title>
+</head>
+
+<body>
+
+    <div class="cabecalho">
+        <h2 id="sub-titulo">Bem-vindo a</h2>
+        <div id="logo">
+            <img src="image/bola-de-la.png" style="width: 100px;">
+            <h1 id="titulo" style="font-size: 80px;">BiblioCat</h1> <br>
+        </div>
+        <p id="descricao">Cadastre aqui seus livros favoritos!<br>Somos uma biblioteca online comunitaria,<br>compartilhe conosco seus livros favoritos!</p>
+        <img src="image/leitura.png" style="margin-top: 5%; width:60%">
+    </div>
+
+    <form class="formulario">
+
+        <h1>Insira os dados do Livro</h1>
+        <fieldset class="grupo">
+            <div class="campo">
+                <label for="title"><strong>Titulo</strong></label><br>
+                <input type="text" name="title" required>
+            </div>
+            <div class="campo">
+                <label for="autor"><strong>Autor</strong></label><br>
+                <input type="text" name="autor" required>
+            </div>
+        </fieldset>        
+
+        <div class="campo">
+            <label for="genero"><strong>Gênero</strong></label>
+            <select id="genero" required>
+                <option selected disabled value="">Selecione</option>
+                <option>Fantasia</option>
+                <option>Ficção</option>
+                <option>Distopia</option>
+                <option>Ação e aventura</option>
+                <option>Romance</option>
+                <option>Conto</option>
+                <option>Autoajuda</option>
+                <option>Religião e Espiritualidade</option>
+                <option>Humor</option>
+                <option>Infantil</option>
+            </select>
+        </div>
+
+        <fieldset class="grupo">
+            <div id="check">
+                <label><strong>Idiomas Disponíveis</strong></label><br>
+                <input type="checkbox" id="idioma1" name="idioma1" value="Portugues">
+                <label for="idioma1">Portugues</label>
+                <input type="checkbox" id="idioma2" name="idioma2" value="Ingles">
+                <label for="idioma2">Ingles</label>
+                <input type="checkbox" id="idioma3" name="idioma3" value="Espanhol">
+                <label for="idioma3">Espanhol</label><br>
+                <input type="checkbox" id="idioma4" name="idioma4" value="Frances">
+                <label for="idioma4">Frances</label> 
+                <input type="checkbox" id="idioma5" name="idioma5" value="Japones">
+                <label for="idioma5">Japones</label>
+                <input type="checkbox" id="idioma6" name="idioma6" value="Alemao">
+                <label for="idioma6">Alemao</label>
+            </div>
+        </fieldset>
+
+        <div class="campo">
+            <label for="descricao"><strong>Descrição da Obra</strong></label><br>
+            <textarea rows="6" style="width: 26em" id="experiencia" name="experiencia"></textarea>
+        </div>
+
+        <div class="campo">
+            <label for="capa"><strong>Capa da Obra</strong></label><br>
+            <input type="file" name="capa">
+        </div>
+
+        <div class="campo">
+            <label for="pdf"><strong>Pdf da Obra</strong></label><br>
+            <input type="file" name="pdf">
+        </div>
+
+        <div>
+            <button class="botao" type="submit" onsubmit="">Enviar</button>
+        </div>
+
+    </form>
+
+</body>
+</html>