Skip to content

Vic viburplp #198

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ViburPLP wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Vic viburplp #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46161fb
Update index.html
ViburPLP Mar 23, 2024
6531db0
Update style.css
ViburPLP Mar 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 62 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 9 additions & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}