commit hoja de contacto

SebMar10 · SebMar10 · commit d71ca5b47a51 · 2024-01-23T22:06:54.000-05:00
diff --git a/student-cvs/sebmartnz19/contact.html b/student-cvs/sebmartnz19/contact.html
@@ -1,12 +1,60 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 
     <title>Contact</title>
+    <link rel="stylesheet" href="./main.css">
 
 </head>
+
 <body>
-    
-    
+    <main class="page">
+        
+        <form>
+            <div class="form-group">
+                <h1> CONTACTO</h1>
+                <label for="name">Name</label>
+                <input id="name" type="text" placeholder="Introduce your name" required>
+            </div>
+            <div class="form-group">
+                <label for="email">Email</label>
+                <input id="email" type="email" placeholder="introduce your Email" required>
+            </div>
+            <div class="form-group">
+                <fieldset>
+                    <legend>Budget</legend>
+                    <input id="10000" name="budget" type="radio"><label for="10000">$10.000</label>
+                    <input id="5000" name="budget" type="radio"><label for="5000">$5.000</label>
+                    <input id="1000" name="budget" type="radio"><label for="1000">$1.000</label>
+                </fieldset>
+            </div>
+
+            <div class="form-group">
+                <label for="type">Project Type</label>
+                <select id="type" required>
+                    <option disbled selected>Choose one</option>
+                    <option>Website</option>
+                    <option>Webapp</option>
+                    <option>Mobile App</option>
+                    <option>Design</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="description">Description</label>
+                <textarea id="description"></textarea>
+                <div> Write a short description of the project that you need</div>
+            </div>
+            <div class="form-group">
+                <label for="terms" type="checkbox">
+                    <input id="terms" type="checkbox" required>
+                    <span>Accept terms and conditions</span>
+                </label>
+            </div>
+            <button>Send</button>
+
+        </form>
+    </main>
 </body>
+
 </html>
diff --git a/student-cvs/sebmartnz19/index.html b/student-cvs/sebmartnz19/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title> Sebastian Martinez </title>
-    <link rel="stylesheet" href="/styles.css">
+    <link rel="stylesheet" href="./styles.css">
 
 
 </head>
diff --git a/student-cvs/sebmartnz19/main.css b/student-cvs/sebmartnz19/main.css
@@ -0,0 +1,95 @@
+html{
+    box-sizing: border-box;
+}
+
+* {
+    box-sizing: inherit;
+}
+
+h1 { 
+
+    color: #333;
+    max-width: 800px;
+    margin-top: 100px;
+    margin-left: 100px;
+    padding: 0 40px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+
+    color: #333;
+    background-color: #fefefe
+
+
+}
+
+
+.page {
+    max-width: 800px;
+    font-family: Arial, Helvetica, sans-serif;
+    padding: 100px auto;
+    margin: 0 40px;
+
+   
+}
+
+.form-group {
+    
+    margin: 20px 0;
+
+}
+
+label, input {
+    vertical-align: middle;
+}
+
+label, input:not([type="radio"], [type="checkbox"]) {
+    color: #666;
+    width: 100%;
+    
+
+}
+
+label{
+    font-weight: bold;
+
+}
+
+
+
+
+legend {
+    font-weight: bold;
+    color: #666;
+
+}
+
+input[type="text"], [type="email"], textarea {
+
+    background: white;
+    display: block;
+    border: 1px solid lightgray;
+    border-radius: 4px;
+    padding: 8px 10px;
+    resize: vertical;
+    width: 100%;
+}
+
+
+textarea + div {
+    display: block;
+    font-size: 12px;
+    margin-top: 10px 0 0;
+    display: block;
+    resize: vertical;
+    height: 40px;
+    font-family: Arial, Helvetica, sans-serif;
+    color: gray;
+    height: 40px;
+}
+
+button {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
