diff --git a/about.html b/about.html
new file mode 100644
index 0000000..485c855
--- /dev/null
+++ b/about.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="form.css">
+        <title>About</title>
+    </head>
+    <body>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/dom.js b/dom.js
new file mode 100644
index 0000000..058f53d
--- /dev/null
+++ b/dom.js
@@ -0,0 +1,44 @@
+function submitForm(event) {
+    event.preventDefault();
+    var formData = document.forms[0].elements;
+
+    var contactData = {
+        firstName: formData.firstName.value,
+        lastName: formData.lastName.value,
+        email: formData.email.value,
+        termsAccepted: formData.terms.value,
+        submittedDate: new Date()
+    };
+
+    console.log(contactData);
+    documentMethods();
+}
+
+function documentMethods() {
+    var firstNameInput = document.getElementById('first-name');
+    var inputTags = document.getElementsByTagName('input');
+    var inputGroups = document.getElementsByClassName('input-group');
+    
+    //attributes
+    firstNameInput.name = 'newName';
+    firstNameInput.hidden = true;
+
+    //modify styles
+    inputTags[1].style.border = "2px solid red";
+    inputTags[2].style.margin = "30px";
+}
+
+function showAbout() {
+    document.getElementById('home').hidden = true;
+    document.getElementById('about').hidden = false;
+    document.getElementsByTagName('button')[0].setAttribute('class', 'submit-btn');
+}
+
+function showHome() {
+    document.getElementById('home').hidden = false;
+    document.getElementById('about').hidden = true;
+
+    //document.createTextNode
+    document.createElement("h1").innerText = "NAVIGATED HOME";
+    document.appendChild();
+}
\ No newline at end of file
diff --git a/form.css b/form.css
new file mode 100644
index 0000000..de6cf71
--- /dev/null
+++ b/form.css
@@ -0,0 +1,18 @@
+.submit-btn {
+    padding: 10px;
+    color: white;
+    background-color: blue;
+    border-radius: 5px;
+}
+
+.submit-btn:hover {
+    opacity: 0.8;
+}
+
+.input-group {
+    margin: 10px 0 10px 0;
+}
+
+.contact-form {
+    max-width: 500px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..00c908a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="form.css">
+        <title>Document Object Model</title>
+    </head>
+    <body>
+        <div id="home">
+            <button onclick="showAbout()">About</button>
+            <h1>Forms and Capturing Data</h1>
+
+            <form class="contact-form">
+                <fieldset>
+                    <legend>Contact Us</legend>
+                    <div class="input-group">
+                        <label for="first-name">First Name</label>
+                        <input id="first-name" type="text" name="firstName">
+                    </div>
+                    <div class="input-group">
+                        <label for="last-name">Last Name</label>
+                        <input id="last-name" type="text" name="lastName">
+                    </div>
+                    <div class="input-group">
+                        <label for="email">Email Address</label>
+                        <input id="email" type="email" name="email">
+                    </div>
+                    <div class="input-group">
+                        <label for="terms">Agree to terms</label>
+                        <input id="terms" type="checkbox" name="terms">
+                    </div>
+                    <!-- <input class="submit-btn" type="submit" value="Submit" onclick="submitForm()"> -->
+                    <button class="submit-btn" onclick="submitForm(event)">Submit</button>
+                </fieldset>
+            </form>
+        </div>
+
+        <div id="about" hidden>
+            <button onclick="showHome()">Home</button>
+            <h1>About</h1>
+            <p>Welcome to our About page! Info and info and info</p>
+        </div>
+
+        <script src="dom.js"></script>
+    </body>
+</html>
\ No newline at end of file
