diff --git a/fundo1.png b/fundo1.png
new file mode 100644
index 0000000..f3f5d10
Binary files /dev/null and b/fundo1.png differ
diff --git a/site.html b/site.html
new file mode 100644
index 0000000..c72ca0b
--- /dev/null
+++ b/site.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>TCC de cria</title>
+
+</head>
+
+<body>
+
+    <!--Barrinha que fica no topo-->
+    <div id="topo">
+        <h1 id="textotop">Focus Agenda</h1>
+    </div>
+    <!--cabo bar-->
+
+    <!--Login e outras coisas-->
+    <div id="log">
+        <h1 class="mens">Bem Vindo!</h1>
+
+        <h3 class="mens">Faça seu login</h3>
+
+
+        <form method="POST" action="login.php">
+            <div class="campo">
+                <label for="emailid">Email</label>
+                <input type="email" placeholder="Digite seu email" name="email" id="emailid" required>
+            </div>
+
+            <div class="campo">
+                <label for="senhaid">Senha</label>
+                <input type="password" placeholder="Digite sua senha" name="senha" id="senhaid" required>
+            </div>
+            <button type="submit" id="logbtn">Logar</button>
+        </form>
+        <p class="mens">Cadastrar-se</p>
+    </div>
+    <!--cabo log-->
+
+
+
+
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index a2e6aea..8b0e6fc 100644
--- a/style.css
+++ b/style.css
@@ -1,24 +1,129 @@
-  body{
-   background-color: pink; 
-   margin: 0;
+  * {
+      padding: 0;
+      margin: 0;
   }
 
-  .topo{
-    width: 100%;
-    height: 60px;
-    background-color: #111;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: linear-gradient(to right,#C0392B 47%,#7A4951 73%,#114455 87% );
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding-left: 20px;
+  p,
+  h1,
+  h2,
+  h3 {
+      margin: 0;
+      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
+  }
 
+label{
+    display: block;
 }
-#textotop{
-    font-size: 48px;
-    margin: 0;
-}
-        
\ No newline at end of file
+
+ body {
+    background-image: url(imagens/fundo1.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+
+    height: 100vh;
+    display: flex;
+    justify-content: flex-start; 
+    align-items: center;        
+    padding-left: 300px;  
+ }
+
+ @media (max-width: 768px) {
+    body {
+      padding-left: 20px;
+      padding-right: 20px;
+      justify-content: center;
+    }
+ }
+
+ @media (max-width: 480px) {
+    #log {
+      width: 100% !important;
+      max-width: 320px;
+    }
+ }     
+  #topo {
+      width: 100%;
+      height: 70px;
+      background-color: #111;
+      position: fixed;
+      top: 0;
+      left: 0;
+      background: linear-gradient(to right, #C0392B 47%, #7A4951 73%, #114455 87%);
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding-left: 20px;
+
+  }
+
+  #textotop {
+      font-size: 48px;
+      margin: 0;
+      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+  }
+
+  #log {
+      margin-top: 70px;
+      width: 350px;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      color: white;
+      margin: 0;
+  }
+  #campo {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      align-self: center;
+  }
+  #menslog{
+    font-size: 20px;
+  }
+
+   #emailid, #senhaid {
+    height: 50px;
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: white;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    width: 100%;
+  }
+
+  #logbtn {
+    align-self: center;
+    width: 50%;
+    padding: 12px;
+    font-size: 18px;
+    font-weight: bold;
+    background-color: #C0392B;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  #logbtn:hover {
+    background-color: #A03224;
+  }
+  .mens {
+    align-self: center;
+  }
\ No newline at end of file
