Add files via upload

braiatenebras · Nov 25, 2024 · 8a4ae0a · 8a4ae0a
1 parent a775aef
commit 8a4ae0a
Show file tree

Hide file tree

Showing 2 changed files with 187 additions and 8 deletions.
diff --git a/russa/bryan.css b/russa/bryan.css
@@ -59,16 +59,164 @@ section ol li {
 }
 
 .flex-container {
-    display: flex; 
+    display: flex;
 }
 
 .text-content {
-    flex: 1; 
+    flex: 1;
 }
 
-.img1, .img2, .img3, .img4 {
-    margin-right: 20px; 
-    width: 50%; 
-    height: auto; 
-    border-radius: 50px; 
+.img1,
+.img2,
+.img3,
+.img4 {
+    margin-right: 20px;
+    width: 50%;
+    height: auto;
+    border-radius: 50px;
 }
+
+.form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-width: 350px;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 20px;
+    text-align: center;
+}
+
+.title {
+    font-size: 28px;
+    color: royalblue;
+    font-weight: 600;
+    letter-spacing: -1px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-left: 30px;
+}
+
+.title::before,
+.title::after {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    left: 0px;
+    background-color: royalblue;
+}
+
+.title::before {
+    width: 18px;
+    height: 18px;
+    background-color: royalblue;
+}
+
+.title::after {
+    width: 18px;
+    height: 18px;
+    animation: pulse 1s linear infinite;
+}
+
+.message,
+.signin {
+    color: rgba(88, 87, 87, 0.822);
+    font-size: 14px;
+}
+
+.signin {
+    text-align: center;
+}
+
+.signin a {
+    color: royalblue;
+}
+
+.signin a:hover {
+    text-decoration: underline royalblue;
+}
+
+.flex {
+    display: flex;
+    width: 100%;
+    gap: 6px;
+}
+
+.form label {
+    position: relative;
+}
+
+.form label .input {
+    width: 100%;
+    padding: 10px 10px 20px 10px;
+    outline: 0;
+    border: 1px solid rgba(105, 105, 105, 0.397);
+    border-radius: 10px;
+}
+
+.form label .input+span {
+    position: absolute;
+    left: 10px;
+    top: 15px;
+    color: grey;
+    font-size: 0.9em;
+    cursor: text;
+    transition: 0.3s ease;
+}
+
+.form label .input:placeholder-shown+span {
+    top: 15px;
+    font-size: 0.9em;
+}
+
+.form label .input:focus+span,
+.form label .input:valid+span {
+    top: 30px;
+    font-size: 0.7em;
+    font-weight: 600;
+}
+
+.form label .input:valid+span {
+    color: green;
+}
+
+.submit {
+    border: none;
+    outline: none;
+    background-color: royalblue;
+    padding: 10px;
+    border-radius: 10px;
+    color: #fff;
+    font-size: 16px;
+    transform: .3s ease;
+}
+
+.submit:hover {
+    background-color: rgb(56, 90, 194);
+}
+
+@keyframes pulse {
+    from {
+        transform: scale(0.9);
+        opacity: 1;
+    }
+
+    to {
+        transform: scale(1.8);
+        opacity: 0;
+    }
+}
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+.container {
+    display: flex;
+    flex-direction: column; 
+    align-items: center; 
+    height: 100vh; 
+}
diff --git a/russa/bryan.html b/russa/bryan.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="bryan.css">
-    <script src="bryan.js"> </script>
+    <script src="bryan.js"> </script> 
     <title>Culinária Russa</title>
 </head>
 
@@ -195,3 +195,34 @@ <h2> Modo de Preparo </h2>
             <img src="assets/strogonoff-de-camarao.webp" class="img4">
         </div>
     </section>
+
+    <div class="container">
+        <h1>Faltou Alguma receita? Nos envie!</h1>
+        <form class="form">
+            <p class="title">Registro</p>
+            <p class="message">Preencha as informações</p>
+            <div class="flex">
+                <label>
+                    <input required="" placeholder="" type="text" class="input">
+                    <span>Nome</span>
+                </label>
+                <label>
+                    <input required="" placeholder="" type="text" class="input">
+                    <span>Sobrenome</span>
+                </label>
+            </div>
+            <label>
+                <input required="" placeholder="" type="email" class="input">
+                <span>Email</span>
+            </label>
+            <label>
+                <input required="" placeholder="" type="password" class="input">
+                <span>Número</span>
+            </label>
+            <label>
+                <input required="" placeholder="" type="password" class="input">
+                <span> Sua Mensagem </span>
+            </label>
+            <button class="submit">Enviar</button>
+        </form>
+    </div>