From d7018ca0924fac2374af1cf04cdd93771a362eb1 Mon Sep 17 00:00:00 2001 From: Rafael-Arruda Date: Thu, 12 May 2022 11:17:40 -0300 Subject: [PATCH] projeto finalizado --- .vscode/settings.json | 3 + assets/icons8-facebook-50.png | Bin 0 -> 526 bytes assets/icons8-instagram-48.png | Bin 0 -> 1052 bytes assets/icons8-twitter-48.png | Bin 0 -> 1033 bytes assets/sinal-certo.png | Bin 0 -> 474 bytes index.html | 136 +++++++++--- style.css | 380 +++++++++++++++++++++++++++++++++ 7 files changed, 491 insertions(+), 28 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 assets/icons8-facebook-50.png create mode 100644 assets/icons8-instagram-48.png create mode 100644 assets/icons8-twitter-48.png create mode 100644 assets/sinal-certo.png create mode 100644 style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assets/icons8-facebook-50.png b/assets/icons8-facebook-50.png new file mode 100644 index 0000000000000000000000000000000000000000..876ba5d33dafe269c99fb9ec89175946fb32dfa8 GIT binary patch literal 526 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 Q>Hq)$07*qoM6N<$g8t;rGynhq literal 0 HcmV?d00001 diff --git a/index.html b/index.html index b867db8..b33e759 100644 --- a/index.html +++ b/index.html @@ -1,28 +1,108 @@ -Codar. -Início Serviços Contato Login -Alavanque seu negócio com um -Website incrível -Solicitar orçamento -Domínio personalizado -Hospedagem -Site responsivo -Redes sociais -Chat online -Blog integrado -Nossa equipe está à disposição! -Celular Ligamos pra você -Já tive experiências com outras 4 empresas da área e a Codar é sem sombra de dúvidas superior em todos os aspectos. -Pedro Ferreira Construtora Minari -Processos bem simples e criação de um site exatamente como a minha escola queria! -Maria Rita -Escola Criança Feliz -Codar. -Criamos websites incríveis -Sobre -Amamos criar soluções -e entregar sites incríveis -Contato -123 Av. Manjar - Nárnia -+55 96 2321-3131 -contato@codar.com -Redes sociais \ No newline at end of file + + + + + + + + Codar + + +
+ +
+ +
+
+
+
+
+ imagem video call +
+
+

Alavanque seu negócio com um

+

Website incrível

+ +
+
+
+
+
    +
  • Domínio personalizado
    • +
  • Hospedagem
    • +
  • Site responsivo
    • +
  • Redes sociais
    • +
  • Chat online
    • +
  • Blog integrado
    • +
+
+ imagem coding +
+
+
+

Nossa equipe está a disposição!

+
+ + +
+
+
+
+
+
+
+

Já tive experiências com outras 4 empresas + da área e a Codar é sem sombra de dúvidas + superior em todos os aspectos. +

+

Pedro Ferreira

+
Construtora Minari
+
+
+
+
+
+

Processos bem simples e criação de um site + examente como a minha escola queria! +

+

Maria Rita

+
Escola Criança Feliz
+
+
+
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..cd06ce9 --- /dev/null +++ b/style.css @@ -0,0 +1,380 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400;1,500&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} + +/*Inicio da estilização da header*/ + +header { + width: 100%; + padding: 20px 30px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo h1{ + color: #D6000D; + font-style: italic; +} +.logo span { + color: black; +} + +.navigation { + width: 40%; +} + +.nav-list { + display: flex; + list-style: none; + justify-content: space-between; + align-items: center; +} +.nav-list a { + text-decoration: none; + font-size: 1.1rem; + color: black; +} +.nav-list a:hover { + opacity: 0.7; +} + +.btn-login { + background: #D6000D; + color: white; + font-size: 0.9rem; + font-weight: 500; + padding: 10px 50px; + border-radius: 10px; + border: none; +} +.btn-login:hover { + cursor: pointer; +} + +/*Início da estilização da main*/ + +main { + width: 100%; +} + +main img { + width: 250px; +} + +.init-main { + width: 50%; + margin: 80px auto 0px auto; + display: flex; + align-items: center; + justify-content: space-between; +} + +.request p{ + font-weight: 600; +} +.request h2 { + font-size: 2.5rem; + margin-bottom: 30px; + color: #D6000D; +} +.request button { + background-color: #D6000D; + color: white; + font-weight: 500; + border: none; + border-radius: 10px; + padding: 10px 40px; +} +.request button:hover { + cursor: pointer; +} + +.benefits { + width: 50%; + margin: 80px auto 0px auto; + display: flex; + align-items: center; + justify-content: space-between; +} +.benefits ul { + list-style-image: url("./assets/sinal-certo.png"); +} + +.call { + width: 50%; + margin: 0px auto 80px auto; +} +.call p { + font-weight: 600; + margin-bottom: 10px; +} +.call input { + background-color: lightgray; + padding: 10px 0px 10px 20px; + border-radius: 10px; + border: none; + font-size: 1rem; + outline: none; +} +.call button { + background-color: #D6000D; + color: white; + font-weight: 500; + font-size: 1rem; + border: none; + border-radius: 10px; + padding: 10px 40px; +} +.call button:hover { + cursor: pointer; +} + +.people { + width: 100%; + display: flex; + justify-content: space-evenly; + margin: 200px 0px 100px 0px; +} + +.person-one { + display: flex; + justify-content: space-evenly; + background-color: lightgray; + border-radius: 10px; + padding: 20px; + width: 40%; +} +.person-one figure { + width: 80px; + height: 80px; + background-color: #D6000D; + border-radius: 50px; +} +.about-person-one p { + width: 25vw; +} +.about-person-one h2 { + margin-top: 10px; +} + +.person-two { + display: flex; + justify-content: space-evenly; + background-color: lightgray; + border-radius: 10px; + padding: 20px; + width: 40%; +} +.person-two figure { + width: 80px; + height: 80px; + background-color: #D6000D; + border-radius: 50px; +} +.about-person-two p{ + width: 25vw; +} +.about-person-two h2 { + margin-top: 10px; +} + +/*Estilização da footer*/ +footer { + background-color: black; + color: white; + display: flex; + justify-content: space-evenly; + padding: 50px 0px; +} + +.codar h2 { + font-style: italic; + font-weight: 500; + font-size: 1.8rem; +} +.codar p{ + font-size: 0.9rem; + margin-top: 10px; +} + +.about h3 { + font-weight: 600; +} +.about p { + width: 160px; + font-size: 0.9rem; + margin-top: 10px; +} + +.contact h3{ + font-weight: 600; +} +.contact p { + margin-top: 10px; + font-size: 0.9rem; +} + +.social-networks h3 { + font-weight: 600; +} +.social-networks-list { + margin-top: 10px; + display: flex; + list-style: none; + justify-content: space-between; +} +.social-networks-list img{ + width: 30px; +} + +@media(max-width: 1200px){ + .init-main { + width: 65%; + } + .benefits { + width: 65%; + } + .call { + width: 65%; + } +} +@media(max-width: 900px){ + .navigation { + width: 50%; + } + .init-main { + width: 80%; + } + .benefits { + width: 80%; + } + .call { + width: 80%; + } + .person-one { + width: 45%; + } + .person-two { + width: 45%; + } +} +@media(max-width: 750px) { + /*header*/ + header { + flex-direction: column; + padding-top: 50px; + } + .logo h1 { + font-size: 3rem; + margin-bottom: 20px; + } + .li-button { + display: none; + } + /*main*/ + .init-main { + flex-direction: column; + text-align: center; + margin-top: 50px; + } + .request { + margin-top: 40px; + } + .request button { + padding: 10px 60px; + } + + .benefits { + flex-direction: column-reverse; + margin-top: 150px; + } + .benefits ul { + height: 200px; + margin-top: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + } + .call { + margin-top: 40px; + text-align: center; + } + .call form { + display: flex; + flex-direction: column; + align-items: center; + } + .call input { + padding: 15px 0px 15px 25px; + } + .call button { + margin-top: 10px; + padding: 15px 40px; + } + .people { + flex-direction: column; + align-items: center; + margin: 100px 0px 50px 0px; + } + .person-one { + width: 50%; + } + .person-two { + width: 50%; + margin-top: 30px; + } + /*footer*/ + footer { + flex-direction: column; + padding: 30px; + } + .codar { + text-align: center; + } + .codar h2 { + font-size: 2.5rem; + } + .about { + margin-top: 20px; + } + .contact { + margin-top: 20px; + } + .social-networks { + margin-top: 20px; + } + .social-networks-list { + width: 30%; + } +} + +@media(max-width: 550px) { + .navigation { + width: 80%; + } + .person-one { + width: 70%; + } + .person-two { + width: 70%; + } +} + +@media(max-width: 400px) { + .navigation { + width: 90%; + } + .person-one { + width: 90%; + } + .person-two { + width: 90%; + } +} \ No newline at end of file