Quem somos?
+
A 4Safe é uma empresa focada na digitalização dos produtos de seguridade. Sua proposta é oferecer seguros de vida, de carro e outros para clientes jovens que não gostam da burocracia das seguradoras tradicionais
+
+
+ Preencha o formulario
+
+ 4Safe
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/produtos.css b/produtos.css
new file mode 100644
index 0000000..3081b42
--- /dev/null
+++ b/produtos.css
@@ -0,0 +1,58 @@
+* {
+ margin: 0;
+ padding: 0;
+ font-family: 'Arial', sans-serif;
+}
+
+/*configura o corpo da página produto*/
+#produtos-container .div-seguros {
+ display: flex;
+ flex-direction: column;
+ padding: 1em;
+ align-items: center;
+}
+
+/*mexe no título das fotos*/
+#produtos-container .div-seguros p:first-of-type {
+ font-weight: bold;
+ font-size: 16pt;
+ padding: 10px 0;
+}
+
+/*mexe no texto das fotos*/
+#produtos-container .div-seguros p:last-child {
+ padding-top: 10px;
+}
+
+/*foto2*/
+.foto-familia {
+ width: 25%;
+ height: 25%;
+ border-radius: 10pt;
+}
+
+/*foto 1*/
+.foto-seg-carro {
+ width: 25%;
+ height: 25%;
+ border-radius: 10pt;
+}
+
+footer{
+ background-color: #3b4f66;
+ height: 60px; /*Pode Varia conforme o resto da sua Pagina*/
+}
+#secondSectionFooter {
+ display: flex;
+ justify-content: space-between;
+ padding: 10px;
+#iconFooter {
+ margin-right: 10px;
+@media (max-width: 450px) {
+ footer{
+ height:90px;
+ }
+ #firstSectionFooter{
+ padding-left: 10px;
+ }
+}
\ No newline at end of file
diff --git a/produtos.html b/produtos.html
new file mode 100644
index 0000000..82dea24
--- /dev/null
+++ b/produtos.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/4safe.png b/img/4safe.png
similarity index 100%
rename from 4safe.png
rename to img/4safe.png
diff --git a/img/chat (1).svg b/img/chat (1).svg
new file mode 100644
index 0000000..99fd1c9
--- /dev/null
+++ b/img/chat (1).svg
@@ -0,0 +1,46 @@
+
+
+
+
diff --git a/img/facebook.png b/img/facebook.png
new file mode 100644
index 0000000..c20bfef
Binary files /dev/null and b/img/facebook.png differ
diff --git a/img/instagram.png b/img/instagram.png
new file mode 100644
index 0000000..25001ac
Binary files /dev/null and b/img/instagram.png differ
diff --git a/img/logocabecario.png b/img/logocabecario.png
new file mode 100644
index 0000000..8207538
Binary files /dev/null and b/img/logocabecario.png differ
diff --git a/img/sobre.png b/img/sobre.png
new file mode 100644
index 0000000..3611601
Binary files /dev/null and b/img/sobre.png differ
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..0542bb2
--- /dev/null
+++ b/index.css
@@ -0,0 +1,215 @@
+ * {
+ margin: 0px;
+ padding: 0px;
+ list-style: none;
+ font-family: 'Arial', sans-serif;
+ font-size: 16pt;
+ }
+
+ a {
+ text-decoration: none;
+ color: white;
+ }
+
+ a:houver {
+ cursor: pointer;
+ }
+ /* Costomização header */
+
+ #logo4safe {
+ max-height: 110px;
+ }
+
+ .header {
+ background-color: #3b4f66;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+ padding: 10px;
+ }
+
+ .menu {
+ display: flex;
+ }
+
+ .menu li {
+ margin-left: 25px;
+ font-size: 18px;
+ }
+
+ .linha {
+ height: 10px;
+ background-color: #9bd46d;
+ }
+
+ @media (max-width: 450px) {
+ .menu {
+ padding-top: 10px;
+ }
+ #firstSectionFooter {
+ display: flex;
+ flex-direction: column;
+ }
+ #imgFooter {
+ display: flex;
+ width: auto;
+ }
+ #formDiv {
+ margin: 15px;
+ }
+ footer {
+ height: auto;
+ }
+ #message {
+ width: 183px;
+ height: 50px;
+ }
+ #subtitleFooter h3 {
+ font-size: 12pt;
+ }
+ #secondSectionFooter p {
+ font-size: 10pt
+ }
+ }
+ /*FIM-HEADER*/
+ /*SEÇÃO*/
+#main-container {
+ margin: 30px 0;
+ text-align: center;
+ }
+
+ /*PRIMERO-CONTAINER*/
+ #main-container p:first-of-type {
+ font-weight: bold;
+ font-size: 1em;
+ }
+
+ #main-container .produtos {
+ justify-self: center;
+ background: #3b4f66;
+ color: white;
+ padding: 3em;
+ }
+
+ #main-container p:first-child {
+ font-weight: bold;
+ font-size: 2em;
+ }
+
+ #main-container .produtos p:first-child {
+ font-weight: bold;
+ font-size: 16pt;
+ }
+
+ /*CONTAINER-DA-GRID-PRODUTOS*/
+ #grid-container {
+ display: grid;
+ grid-template-columns: 50% 50%;
+ text-align: center;
+ margin-bottom:50px;
+ margin-top:10px;
+ }
+
+ #grid-container .seguros {
+ align-self: center;
+ border: 2px solid #9dd96d;
+
+ padding-top: 25px;
+ max-width: 80%;
+ margin: 0 10%;
+ justify-items: center;
+ }
+
+ #grid-container .seguros p:first-of-type {
+ font-weight: bold;
+ font-size: 16pt;
+ }
+
+ /*BOTÕES*/
+ button {
+ margin: 2em;
+ padding: 10px;
+ background: #6ca73e;
+ color: white;
+ border: none;
+ border-radius: 15px;
+ }
+
+ /*MOUSE ACIMA BOTÃO*/
+ button:hover {
+ background: #3d6c17;
+ }
+
+ /*FOOTER*/
+
+footer{
+ background-color: #3b4f66;
+ height: 164px;
+}
+#firstSectionFooter{
+ height: 130px;
+}
+
+#imgFooter{
+ display: flex;
+ width: 50%;
+ justify-content: center;
+
+}
+#formButton{
+ box-shadow: -4px 5px 8px 0px #313738;
+ background: linear-gradient(to bottom, #385f71 5%, #3b4f66 100%);
+ background-color: #59a2bd;
+ border-radius: 7px;
+ border: 1px solid #36607b;
+ cursor: pointer;
+ color: #ffffff;
+ font-size: 12px;
+ font-weight: bold;
+ padding: 6px 15px;
+ text-decoration: none;
+ text-shadow: 0px 1px 0px #3d768a;
+}
+#firstSectionFooter form div{
+ color: white;
+}
+#firstSectionFooter h3{
+ color: white;
+ margin:10px;
+ margin-bottom:0px;
+
+}
+#secondSectionFooter{
+ display: flex;
+ justify-content: space-between;
+
+}
+#secondSectionFooter p{
+ margin-left: 10px;
+ font-weight: bold;
+ font-size: 13pt
+}
+#iconFooter{
+ margin-right: 10px;
+}
+#message{
+ width: 280px;
+ height: 90px;
+}
+#formFooter{
+ margin-left:25px;
+}
+#subtitleFooter{
+ display: flex;
+ justify-content: center;
+
+}
+#linkFooter{
+ display: flex;
+ justify-content: center;
+ margin: 20px;
+}
+#secondSectionFooter p{
+ font-size: 13pt
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ab3a2de
--- /dev/null
+++ b/index.html
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
+ A 4safe agradece o seu interesse em entrar em contato conosco, responderemos o mais breve possível. +
+
+
+
+ +
+
+
+
+
+ Nossos produtos
+
Conheça os seguros que a 4Safe oferece e escolha o ideal para você.
+
+
+
+ 
+
+ Seguros de Vida
+
+ Diversos tipos de seguro de vida
+
+ 
+
+
+ Seguros de Carros
+
+ Diferentes seguros de carros.
+
+
+
+ 4Safe
+ +
+
+
+ A 4Safe Seguros é uma empresa brasileira, localizada na região central da + cidade de São Paulo.
Fundada em 1945, é reconhecida como uma das maiores seguradoras do País, por sua atuação nos segmentos de Seguro Auto e Residência. +