diff --git a/README.md b/README.md index 62cb834..855d626 100644 Binary files a/README.md and b/README.md differ diff --git a/contato.html b/contato.html new file mode 100644 index 0000000..329946f --- /dev/null +++ b/contato.html @@ -0,0 +1,93 @@ + + + + + + + Contato - Barbiaria Alura + + + + + + +
+
+

Logo da barbearia alura

+ +
+
+
+
+ + + + + + + + + + + + +
+ Como prefere o nosso contato? + + + + + + +
+
+ Qual horário prefere ser atendido? + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
DiaHorário
Segunda8h ~ 20h
Quarta8h ~ 20h
Sexta8h ~ 20h
+
+ + + + + \ No newline at end of file diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..af94440 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/css/style-home.css b/css/style-home.css new file mode 100644 index 0000000..ac650dd --- /dev/null +++ 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%; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..dbe5955 --- /dev/null +++ b/css/style.css @@ -0,0 +1,248 @@ +body { + font-family: "Montserrat", sans-serif; +} +header { + background: silver; + padding: 20px 0; +} +.caixa { + position: relative; + width: 940px; + margin: 0 auto; +} +nav { + position: absolute; + top: 110px; + right: 0px; +} +nav li { + display: inline; + margin: 0 0 0 15px; +} +nav a { + text-transform: uppercase; + color: black; + font-weight: bold; + font-size: 22px; + text-decoration: none; +} +nav a:hover { + color: orange; + text-decoration: underline; +} +.produtos { + width: 940px; + margin: 0 auto; + padding: 50px 0; +} +.produtos li { + display: inline-block; + text-align: center; + width: 30%; + vertical-align: top; + margin: 0 1.5px; + padding: 30px 20px; + box-sizing: border-box; + border: 2px solid rgba(22, 30, 49, 0.918); + border-radius: 10px; +} + +.produtos li:hover { + border-color: orange; +} +.produtos li:active { + border-color: seagreen; +} + +.produtos li:hover h2 { + font-size: 34px; +} + +.produtos h2 { + font-size: 30px; + font-weight: bold; + font-family: Georgia, "Times New Roman", Times, serif; + color: rgb(3, 20, 58); +} +.produto-descricao { + font-size: 18px; +} +.produtos-preco { + font-size: 22px; + font-weight: bold; + margin-top: 10px; +} +footer { + text-align: center; + background: url("../img/bg.jpg"); + padding: 40px 0; +} + +.copyright { + color: aliceblue; + font-size: 13px; + margin-top: 20px; +} + +form { + margin: 50px 50px 0; +} + +form label, +form legend { + display: block; + font-size: 20px; + margin: 0 0 10px; + text-align: justify; +} + +.input-padrao { + display: block; + margin: 0 0 20px; + padding: 10px 25px; + width: 50%; + content: center; +} + +.checkbox { + margin: 20px 0; +} + +.enviar { + width: 40%; + padding: 15px 0; + background: orange; + color: white; + font-weight: bold; + font-size: 18px; + border: none; + border-radius: 5px; + transition: 2s all; + cursor: pointer; +} + +.enviar:hover { + background: darkorange; + transform: scale(1.2); +} + +table { + margin: 20px 50px 40px; +} + +thead { + background: darkslategray; + color: white; + font-weight: bold; +} +td, +th { + border: 1px, solid black; + padding: 8px 15px; +} +/* css da pag inicial*/ +.banner { + width: 100%; +} + +.titulo-principal { + text-align: center; + font-size: 2em; + margin: 0 0 1em; + clear: left; + text-shadow: 2px 2px orange; +} + +.principal { + padding: 3em 0; + background: #fefefe; + width: 940px; + margin: 0 auto; +} +.principal p { + margin: 0 0 1em; +} + +.principal strong { + font-weight: bold; +} + +.principal em { + font-style: italic; +} +.utensilios { + width: 120px; + float: left; + margin: 0 20px 20px 0; +} +.mapa { + padding: 3em 0; + background: linear-gradient(#fefefe, #888888); +} +.mapa-conteudo { + width: 940px; + margin: 0 auto; +} + +.mapa p { + margin: 0 0 2em; + text-align: center; +} +.conteudo-beneficios { + width: 640px; + margin: 0 auto; +} + +.lista-beneficios { + width: 40%; + display: inline-block; + vertical-align: top; +} +.itens { + line-height: 1.5; +} +.itens:first-child { + font-weight: bold; +} +.itens:before { + content: "☆"; +} +.imagem-beneficios { + width: 60%; + opacity: 1; + transition: 400ms; + box-shadow: 10px 10px 10px #000000; +} + +.imagem-beneficios:hover { + opacity: 0.3; +} +.beneficios { + padding: 3em 0; + background: #888888; +} + +.video { + width: 560px; + margin: 2em auto; +} + +@media screen and (max-width: 480px) { + .caixa, + .principal, + .conteudo-beneficios, + .mapa-conteudo, + .video { + width: auto; + } + h1 { + text-align: center; + } + nav { + position: static; + } + .lista-beneficios, + .imagem-beneficios { + width: 100%; + } +} diff --git a/img/banner.jpg b/img/banner.jpg new file mode 100644 index 0000000..a5198bc Binary files /dev/null and b/img/banner.jpg differ diff --git a/img/barba.jpg b/img/barba.jpg new file mode 100644 index 0000000..3151d86 Binary files /dev/null and b/img/barba.jpg differ diff --git a/img/beneficios.jpg b/img/beneficios.jpg new file mode 100644 index 0000000..5b15eec Binary files /dev/null and b/img/beneficios.jpg differ diff --git a/img/bg.jpg b/img/bg.jpg new file mode 100644 index 0000000..164742f Binary files /dev/null and b/img/bg.jpg differ diff --git a/img/cabelo+barba.jpg b/img/cabelo+barba.jpg new file mode 100644 index 0000000..1757568 Binary files /dev/null and b/img/cabelo+barba.jpg differ diff --git a/img/cabelo.jpg b/img/cabelo.jpg new file mode 100644 index 0000000..53a8538 Binary files /dev/null and b/img/cabelo.jpg differ diff --git a/img/logo-branco.png b/img/logo-branco.png new file mode 100644 index 0000000..74fe323 Binary files /dev/null and b/img/logo-branco.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..91705c1 Binary files /dev/null and b/img/logo.png differ diff --git a/img/utensilios.jpg b/img/utensilios.jpg new file mode 100644 index 0000000..c77a3f0 Binary files /dev/null and b/img/utensilios.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..13d1ff8 --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + + Barbiaria Alura + + + + + + + +
+
+

Logo da barbearia alura

+ +
+
+ +
+
+

Sobre a Barbearia Alura

+ utensilios de um barbeiro + +

Localizada no coração da cidade a Barbearia Alura traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.

+ +

Nossa missão é: "Proporcionar auto-estima e qualidade de vida aos clientes".

+ +

Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.

+
+
+

Nosso estabelecimento

+

Nosso estabelecimento está localizado no coração da cidade

+
+ +
+
+
+

Benefícios

+
+
    +
  • Atendimento aos clientes
    • +
  • Espaço diferenciado
    • +
  • Localização
    • +
  • Profissionais Qualificados
    • +
  • Pontualidade
    • +
  • Limpeza
    • +
+
+
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/produtos.html b/produtos.html new file mode 100644 index 0000000..4df1913 --- /dev/null +++ b/produtos.html @@ -0,0 +1,57 @@ + + + + + + + + Produtos - Barbiaria Alura + + + + + + +
+
+

Logo da barbearia alura

+ +
+
+ +
+ +
+ + + + + \ No newline at end of file