diff --git a/images/tech.jpeg b/images/tech.jpeg
new file mode 100644
index 0000000..ff8c557
Binary files /dev/null and b/images/tech.jpeg differ
diff --git a/index.html b/index.html
index 69d1e1d..17230af 100644
--- a/index.html
+++ b/index.html
@@ -1,24 +1,62 @@
-<!-- 1. create the basic html structure. your structure should include a blue heading and a red paragragh with font size 15px -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Html hackathon 1</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="intro-area">
+      <h1>Welcome to our system</h1>
+      <p>Please register to use it</p>
+      <a href="https://www.example.com" target="_blank">Open Example.com</a>
+    </div>
+    <div class="main-flex">
+      <section class="image-section">
+        <img src="images/tech.jpeg" alt="login image" />
+      </section>
+      <section>
+        <form>
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name" required /><br />
 
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" required /><br />
 
-<!-- 2. in your html file, add a link that opens a new tab to an external resource  -->
+          <label for="phone">Phone:</label>
+          <input type="tel" id="phone" name="phone" required /><br />
 
+          <label for="age">Age:</label>
+          <input type="number" id="age" name="age" required /><br />
 
-<!-- 3. create a section and add an image, using css; place a green border on the image, the image should be 500px wide and 500px high -->
+          <fieldset>
+            <legend>Gender:</legend>
+            <input type="radio" id="male" name="gender" value="male" />
+            <label for="male">Male</label><br />
+            <input type="radio" id="female" name="gender" value="female" />
+            <label for="female">Female</label><br />
+          </fieldset>
 
+          <label for="subjects">Subjects:</label>
+          <select id="subjects" name="subjects" multiple>
+            <option value="english">English</option>
+            <option value="math">Math</option>
+            <option value="science">Science</option>
+            <option value="artcraft">Art and Craft</option>
+            <option value="agriculture">Agriculture</option>
+            <option value="geohistory">Geography and History</option></select
+          ><br />
 
-<!-- 4. create another section add a form that takes in the following input:
-  a. name
-  b. email address
-  c. phone number
-  d. age
-  e. radio checkbox for gender (use fieldset to group the gender input)
-  f. dropdown for multi-selection of subjects: English, Math, Science, Art and Craft, Agriculture, Geography and History
-  g. password
-  h. a hidden field to capture sessionId
-  i. cancel button that clears form inputs
-  j. submit button with text register
-  make sure to incorporate relevant labels in your form elements using the necessary and relevant input types and element attributes
--->
+          <label for="password">Password:</label>
+          <input type="password" id="password" name="password" required /><br />
 
-<!-- 5. all styling should be placed in the style.css, make sure to correctly embed the external css file on the index.html file using the relevant tag  -->
+          <input type="hidden" id="sessionId" name="sessionId" value="12345" />
+
+          <button type="reset">Cancel</button>
+          <button type="submit">Register</button>
+        </form>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/style.css b/style.css
index 8b13789..8c9efa0 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,94 @@
+.main-flex {
+  display: flex;
+  justify-content: center;
+}
+h1 {
+  color: blue;
+}
+p {
+  color: red;
+  font-size: 15px;
+}
+.image-section img {
+  width: 500px;
+  height: 500px;
+  border: 5px solid green;
+}
+.intro-area {
+  text-align: center;
+  margin-bottom: 10px;
+}
+/* General Form Styles */
+form {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
 
+/* Input Fields */
+input[type="text"],
+input[type="email"],
+input[type="tel"],
+input[type="number"],
+input[type="password"],
+select {
+  width: 100%;
+  padding: 10px;
+  margin: 5px 0 15px 0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+/* Radio Buttons */
+input[type="radio"] {
+  margin: 0 10px 0 0;
+}
+
+/* Labels */
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+/* Buttons */
+button[type="reset"],
+button[type="submit"] {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button[type="reset"] {
+  background-color: #f44336;
+  color: white;
+}
+
+button[type="submit"] {
+  background-color: #4caf50;
+  color: white;
+}
+
+/* Hover Effects */
+button[type="reset"]:hover,
+button[type="submit"]:hover {
+  opacity: 0.8;
+}
+
+/* Focus Effects */
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="tel"]:focus,
+input[type="number"]:focus,
+input[type="password"]:focus,
+select:focus {
+  border-color: #4caf50;
+  outline: none;
+}
