From 46161fb0020c8d1309e2ab89bd1c842fffa98743 Mon Sep 17 00:00:00 2001
From: ViburPLP <159889417+ViburPLP@users.noreply.github.com>
Date: Sat, 23 Mar 2024 19:40:41 +0300
Subject: [PATCH 1/2] Update index.html

---
 index.html | 79 ++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 62 insertions(+), 17 deletions(-)
diff --git a/index.html b/index.html
index 69d1e1d..ff22ad9 100644
--- a/index.html
+++ b/index.html
@@ -1,24 +1,69 @@
-<!-- 1. create the basic html structure. your structure should include a blue heading and a red paragragh with font size 15px -->
+<!DOCTYPE html>
+<head>
+    <title>
+        Web Tech Hack
+    </title>
+<link rel="stylesheet" href="style.css">
+</head>
 
+<body>
+    <h1 class= 'heading' >Web Technologies Level 1 hackathon</h1>
+    <h2 class=" heading_2"> The power lean Project </h2>
+    <p class= 'paragraph_main'>
+        The Power Learn Initiative launched the #1Milliondevs4Africa program in April 2022 to 
+        make tech skills accessible and affordable to young Africans.
+     </p><br><br>
 
-<!-- 2. in your html file, add a link that opens a new tab to an external resource  -->
+    <p class=" pragraph_1"> <a href= https://plpacademy.powerlearnproject.org target="_blank"> 
+        Check this out, to study software development</a></p> <br><br>
 
+<section class=" image section"> 
+     <img class="PLP_logo" src="https://plpacademy.powerlearnproject.org/static/media/logo.879e78bc92c159fe77f0.png" 
+        alt=" plp logo">
+</section><br><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 -->
 
+<section> 
+    <form class="simple form" action="#" method="post"> 
+        <label for="name"> Name: </label>
+        <input type="text" id="name" name="name" required> <br><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="email"> Email: </label>
+        <input type="email" id="email" name="email" required> <br><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  -->
+        <label for="phone"> Phone number: </label>
+        <input type="number" id="Phone no." name="phone"> <br><br>
+
+        <label for="age"> Age: </label>
+        <input type="number" id="Age" name="age" required> <br><br>
+
+
+    <legend>Gender: </legend>
+    <label><input type="radio" name="Gender" value="Male"> Male</label>
+    <label><input type="radio" name="Gender" value="Female"> Female</label>
+    <label><input type="radio" name="Gender" value="Others"> Others</label>
+    
+
+    <legend>Select your Subject: </legend>
+    <select name="Subject" id="Subject">
+        <option value="English">English</option>
+        <option value="Math">Math</option>
+        <option value="Science"> Science</option>
+        <option value="Art & Caraft"> Art &Craft</option>
+        <option value=" Agriculture"> Agriculture</option>
+        <option value="Geography">Geography</option>
+        <option value=" History"> History</option>
+    </select><br><br>
+
+    <label for="Password"> Password: </label>
+    <input type="Password" name="Password" id="Password" required> <br><br>
+    <input type="hidden" id="Session ID" name="Session ID" value="0001"><br><br>
+    <input type="button" value="register">
+    <input type="button" value="cancel" onclick="clearForm()">
+</form> <br><br>
+</section>
+
+<script>
+    function clearForm() {document.querySelector("form").reset();}
+</script>
+</body>

From 6531db0cc8ad79b57aa92293fa282bf0d46de451 Mon Sep 17 00:00:00 2001
From: ViburPLP <159889417+ViburPLP@users.noreply.github.com>
Date: Sat, 23 Mar 2024 19:41:11 +0300
Subject: [PATCH 2/2] Update style.css

---
 style.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 8b13789..6ada1f3 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,9 @@
-
+.heading{ color:blue; font-family: "Gill Sans";}
+.heading_2{ color: brown; font-family: Verdana; }
+.paragraph_main {color: black; font-family: Tahoma;}
+.paragraph_1{color: red; font-size: 15px ;}
+.PLP_logo { 
+    border: 2px;
+    min-width: 500px;
+    min-height: 500px;
+}
