Skip to content

my web hackathon #183

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
plpmercy wants to merge 2 commits into
base: main
Choose a base branch
from
Open

my web hackathon #183

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
85dd30f
Update index.html
plpmercy Mar 19, 2024
2ba7f22
Update style.css
plpmercy Mar 19, 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
87 changes: 70 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,77 @@
<!-- 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 Structure</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="blue-heading">HACKATHON</h1>
<p class="red-paragraph">Do you want to hear a joke? Well, I thought the hackathon was about hacking, meaning gaining unauthorized access to data in a system or computer. Turns out, the meaning is a social coding event that brings computer programmers and other interested people together to improve upon or build a new software program.</p>
</header>

<a href="file:///C:/Users/NEEMA/Documents/hack.html" target="_blank">CLICK HERE TO VIEW MY AMAZING WEBSITE</a>

<!-- 2. in your html file, add a link that opens a new tab to an external resource -->
<section class="image-section">
<img src="C:\Users\NEEMA\Downloads\pexels-vlada-karpovich-4050405.jpg" alt="Sample Image">
</section>

<section class="form-section">
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" 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 -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required><br>

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required><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="age">Age:</label>
<input type="number" id="age" name="age" 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 -->
<fieldset>
<legend>Gender:</legend>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label>
</fieldset>

<label for="subjects">Subjects:</label>
<select id="subjects" name="subjects[]" multiple required>
<option value="English">English</option>
<option value="Math">Math</option>
<option value="Science">Science</option>
<option value="Art and Craft">Art and Craft</option>
<option value="Agriculture">Agriculture</option>
<option value="Geography">Geography</option>
<option value="History">History</option>
</select><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>

<input type="hidden" id="sessionId" name="sessionId" value="sessionID123"><br>

<button type="button" onclick="clearForm()">Cancel</button>
<button type="submit">Register</button>
</form>
</section>

<script>
function clearForm() {
document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementById("phone").value = "";
document.getElementById("age").value = "";
document.getElementById("male").checked = false;
document.getElementById("female").checked = false;
document.getElementById("subjects").selectedIndex = -1;
document.getElementById("password").value = "";
}
</script>
</body>
</html>
13 changes: 13 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,14 @@
h1 {
color: blue; /* Making headlines blue */
}

p {
color: red; /* Making paragraphs red */
font-size: 15px;
}

.image-section img {
width: 500px;
height: 500px;
border: 5px solid green;
}