future4code · paula-aribeiro · Nov 14, 2019 · Nov 14, 2019 · Nov 14, 2019 · Nov 14, 2019
diff --git a/contact.css b/contact.css
@@ -0,0 +1,191 @@
+* {
+    margin: 0px;
+    padding: 0px;
+    list-style: none;
+    font-family: 'Arial', sans-serif;
+}
+
+#mainContainer{
+    background-color: #ffffff;
+    height:445px;
+    width: 1320px;
+}
+
+#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;
+}
+
+label {
+    color:black;
+}
+
+#formMain {
+    justify-content: center;
+    display: flex;
+}
+
+#paragrafoDiv {
+    margin: 10px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#name {
+    width: 231px;
+}
+
+#mail {
+    width: 231px;
+}
+
+#message {
+    width: 340px;
+    height: 129px;
+}
+
+#mainTitle {
+    padding: 20px;
+    width: 100%;
+    text-align: center;
+}
+
+#formButton {
+    margin-top: 5px
+}
+
+#formContainer {
+    padding-left: 210px;
+}
+@media (max-width: 924px){
+   #formContainer{
+       padding-left: 14px;
+   }
+   #mainContainer{
+    width: 110%;
+   }
+   #mainTitle{
+       text-align: center;
+   }
+   #formDiv p{
+       text-align: start;
+   }
+   #formMain{
+       display: flex;
+       flex-direction: column;
+   }
+
+}
+
+/*----*/
+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;
+}
+#secondSectionFooter{
+    display: flex;
+    justify-content: space-between;
+    padding: 15px;
+    padding-right: 40px;    
+}
+
+#secondSectionFooter p{
+    margin-left: 10px;
+    font-weight: bold;
+    font-size: 13pt;
+
+}
+#iconFooter{
+    margin-right: 10px;
+}
+footer{
+    background-color: #3b4f66;
+    height: 60px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+
+}
+
+@media (max-width: 450px) {
+    .menu {
+        padding-top: 10px;
+    }
+    #firstSectionFooter{
+        padding-left: 10px;
+
+    }
+    #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
+    }
+    #mainContainer{
+        width:auto;
+        padding-left: 10px;
+    }
+    footer{
+        height:90px;
+   }
+   .header{
+       height: 165px;
+   }
+}
diff --git a/contact.html b/contact.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="contact.css">
+    <title>4Safe</title>
+</head>
+
+<body>
+    <header class="header">
+                <img id="logo4safe" src="./img/logocabecario.png">
+
+                <nav>
+                    <ul class="menu">
+                        <li><a target="_blank" href="sobre.html">Sobre</a></li>
+                        <li><a target="_blank" href="produtos.html">Produtos</a></li>
+                        <li><a target="_blank" href="contact.html">Contato</a></li>
+                    </ul>
+                </nav>
+    </header>
+
+<div class="linha"></div>
+<main id="mainContainer">
+    <div id="mainTitle">
+            <h3>Preencha o formulario</h3>
+        </div>
+        <div id="formMain">
+            <div id="formDiv">
+                <p>A 4safe agradece o seu interesse em entrar em contato conosco, responderemos o mais breve possível.
+                    <p>
+                        <form id="formContainer">
+                            <div>
+                                <label for="name">Seu Nome?</label>
+                                <br>
+                                <input type="text" id="name" />
+                            </div>
+                            <div>
+                                <label for="e-mail">Seu E-mail:</label>
+                                <br>
+                                <input type="email" id="mail" />
+                            </div>
+                            <div>
+                                <label for="message">Sua Mensagem:</label>
+                                <br>
+                                <textarea id="message"></textarea>
+                            </div>
+                            <div class="button">
+                                <button id="formButton" type="submit">Enviar</button>
+                        </form>
+
+                        </div>
+            </div>
+</main>
+<footer>
+        <div class="linha"></div>
+        <section id="secondSectionFooter">
+
+                <div>
+                    <p>4Safe ®</p>
+                </div>
+                <div id="iconFooter">
+                        <img src="img/facebook.png" width="30px" height="30px">
+                        <img src="img/instagram.png" width="30px" height="30px"> 
+                </div>
+
+            </section>
+
+    </footer>
+
+</body>
+
+</html>
diff --git a/4safe.png → img/4safe.png b/4safe.png → img/4safe.png
diff --git a/img/chat (1).svg b/img/chat (1).svg
diff --git a/img/facebook.png b/img/facebook.png
diff --git a/img/instagram.png b/img/instagram.png
diff --git a/img/logocabecario.png b/img/logocabecario.png
diff --git a/img/sobre.png b/img/sobre.png