Skip to content

Hackathon Mmesoma #172

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

Hackathon Mmesoma #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4e505c6
doc.html hackathon
meemee775 Mar 19, 2024
547e279
style.css
meemee775 Mar 19, 2024
fae8a41
index.html
meemee775 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
75 changes: 75 additions & 0 deletions doc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<title>HTML STRUCTURE</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<!--html paragraph-->
<header>
<h1 class="blue heading"> Blue Heading</h1>

<p class="red paragraph mmesoma"> Red Paragraph with font size 15px</p>
</header>
<!--html link and images-->
<a href="https://www.intel.com" target ="_blank">Go to the link</a>
<section class="image-section">
<img src="images/technology.avif" alt="image" class="green-border">
</section>
<br>
<!--html forms-->
<section>
<h2>Registration Form</h2>
<form id="registration form" action="submit_registration.php method=post">
<br>
<label for="name">Name:</label>
<input type="text" name="name"id="name">
<br>
<br>
<label for="email_address">Email_address:</label>
<input type="email" name="email_address"id="email_address">
<br>
<br>
<label for="telephone">Telephone:</label>
<input type="telephone" name="telephone"id="telephone">
<br>
<br>
<label for="age">Age:</label>
<input type="number" name="age"id="age">
<br>
<br>
<fieldset> <legend>Gender:</legend>
<input type="radio" id="Male" name="gender" value="Male">
<label for="Male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</fieldset>
<br>
<label for="other">Other</label>
<fieldset></fieldset>
<br>
<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>
<br>
<label for="password">Password:</label>
<input type="passsword" id="password" name="password">
<br>
<br>
<input type="hidden" id="sessionId" name="sessionId" value="your_session_id_here">
<button type="button" onclick="clearform()">Cancel</button>
<input type="submit" value="Register">
</form>
</section>
</body>

</html>
97 changes: 74 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,75 @@
<!-- 1. create the basic html structure. your structure should include a blue heading and a red paragragh with font size 15px -->
<!DOCTYPE html>
<html>
<head>
<title>HTML STRUCTURE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--html paragraph-->
<header>
<h1 class="blue heading"> Blue Heading</h1>

<p class="red paragraph"> Red Paragraph with font size 15px</p>
</header>
<!--html link and images-->
<a href="https://www.intel.com" target ="_blank">Go to the link</a>
<section class="image-section">
<img src="images/technology.avif" alt="image" class="green-border">
</section>
<br>
<!--html forms-->
<section>
<h2>Registration Form</h2>
<form id="registration form" action="submit_registration.php method=post">
<br>
<label for="name">Name:</label>
<input type="text" name="name"id="name">
<br>
<br>
<label for="email_address">Email_address:</label>
<input type="email" name="email_address"id="email_address">
<br>
<br>
<label for="telephone">Telephone:</label>
<input type="telephone" name="telephone"id="telephone">
<br>
<br>
<label for="age">Age:</label>
<input type="number" name="age"id="age">
<br>
<br>
<fieldset> <legend>Gender:</legend>
<input type="radio" id="Male" name="gender" value="Male">
<label for="Male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</fieldset>
<br>
<label for="other">Other</label>
<fieldset></fieldset>
<br>
<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>
<br>
<label for="password">Password:</label>
<input type="passsword" id="password" name="password">
<br>
<br>
<input type="hidden" id="sessionId" name="sessionId" value="your_session_id_here">
<button type="button" onclick="clearform()">Cancel</button>
<input type="submit" value="Register">
</form>
</section>
</body>


<!-- 2. in your html file, add a link that opens a new tab to an external resource -->


<!-- 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 -->


<!-- 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
-->

<!-- 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 -->
</html>
13 changes: 13 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.heading{

color:blue;
}
.paragraph{
color:red;
font-size:15px;
}
.green-border{
border: 2px solid green;
width: 500px;
height: 500px;
}