first commit

DayMendes · Jun 24, 2021 · 25f7032 · 25f7032
1 parent 9c76153
commit 25f7032
Show file tree

Hide file tree

Showing 16 changed files with 573 additions and 0 deletions.
diff --git a/README.md b/README.md
diff --git a/contato.html b/contato.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Contato - Barbiaria Alura</title>
+  <link rel="stylesheet" href="css/reset.css">
+  <link rel="stylesheet" href="css/style.css">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <header>
+    <div class="caixa">
+      <h1> <img src="img/logo.png" alt="Logo da barbearia alura"></h1>
+      <nav>
+        <ul>
+          <li><a href="index.html">home</a></li>
+          <li><a href="produtos.html">produtos</a></li>
+          <li><a href="contato.html">contato</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  <main>
+    <form>
+      <label for="nomesobrenome">Nome e sobrenome</label>
+      <input type="text" id="nomesobrenome" class="input-padrao" required>
+
+      <label for="email">Email</label>
+      <input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com">
+
+      <label for="telefone">Telefone</label>
+      <input type="tel" id="telefone" class="input-padrao" required placeholder="(xx) xxxxx-xxxx">
+
+      <label for="mensagem">Mensagem</label>
+      <textarea cols="70" rows="10" id="mensagem" class="input-padrao" required></textarea>
+
+      <fieldset>
+        <legend> Como prefere o nosso contato?</legend>
+        <label for="radio-email"> <input type="radio" name="contato" value="email" id="radio-email"> Email</label>
+
+        <label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone"> Telefone</label>
+
+        <label for="radio-whatsapp"><input type="radio" name="contato" value="whatsapp" id="radio-whatsapp" checked> Whatsapp</label>
+
+      </fieldset>
+      <fieldset>
+        <legend> Qual horário prefere ser atendido?</legend>
+        <select>
+          <option>Manhã</option>
+          <option>Tarde</option>
+          <option>Noite</option>
+        </select>
+      </fieldset>
+      <label><input type="checkbox" class="checkbox" checked> Gostaria de receber nossas novidades por email?</label>
+
+      <input type="submit" value="Enviar formulário" class="enviar">
+    </form>
+    <table>
+      <thead>
+        <tr>
+          <th>Dia</th>
+          <th>Horário</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Segunda</td>
+          <td>8h ~ 20h</td>
+        </tr>
+        <tr>
+          <td>Quarta</td>
+          <td>8h ~ 20h</td>
+        </tr>
+        <tr>
+          <td>Sexta</td>
+          <td>8h ~ 20h</td>
+        </tr>
+      </tbody>
+      <tr>
+
+    </table>
+  </main>
+  <footer>
+    <img src="img/logo-branco.png" alt="Logo da barbearia alura">
+    <p class="copyright"> &copy; Copyright Barbiaria Alura - 2021</p>
+  </footer>
+  </div>
+</body>
+
+</html>
diff --git a/css/reset.css b/css/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/css/style-home.css b/css/style-home.css
@@ -0,0 +1,56 @@
+body {
+}
+
+#banner {
+  width: 100%;
+}
+
+.principal {
+  background: rgba(22, 30, 49, 0.918);
+  padding: 30px;
+}
+
+.titulo-principal {
+  padding-left: 20px;
+  text-align: center;
+  color: rgb(8, 42, 116);
+  font-family: Georgia, "Times New Roman", Times, serif;
+  margin: 40px;
+}
+
+p {
+  text-align: center;
+  color: silver;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+#missao {
+  font-size: 20px;
+}
+em strong {
+  color: rgb(235, 68, 27);
+}
+
+.titulo-centralizado {
+  font-family: Georgia, "Times New Roman", Times, serif;
+  text-align: center;
+}
+
+.itens {
+  font-style: italic;
+  font-family: Georgia, "Times New Roman", Times, serif;
+}
+
+.beneficios {
+  padding: 20px;
+}
+
+ul {
+  display: inline-block;
+  vertical-align: top;
+  width: 20%;
+  margin-left: 15%;
+}
+
+.imagembeneficios {
+  width: 50%;
+}