Skip to content

ITP-MAY 2025 | KALYANI G |GIT-WIREFRAME |WEEK 1 #406

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

ITP-MAY 2025 | KALYANI G |GIT-WIREFRAME |WEEK 1 #406

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
40ddb64
file updated by kalyani
gkalyanirao May 8, 2025
ba0796b
Wireframe Changes by kalyani
gkalyanirao May 10, 2025
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
51 changes: 0 additions & 51 deletions Form-Controls/README.md
View file
Open in desktop

This file was deleted.

27 changes: 0 additions & 27 deletions Form-Controls/index.html
View file
Open in desktop

This file was deleted.

18 changes: 18 additions & 0 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,24 @@ <h2>Title</h2>
</p>
<a href="">Read more</a>
</article>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
</article>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
</article>
</main>
<footer>
<p>
Expand Down
8 changes: 7 additions & 1 deletion Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@ As well as useful links to learn more */
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
header {
position: relative;
bottom: 0;
text-align: center;

}
body {
background: var(--paper);
color: var(--ink);
Expand All @@ -50,7 +56,7 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
position: relative;
bottom: 0;
text-align: center;
}
Expand Down
152 changes: 109 additions & 43 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,112 @@
Conversation opened. 1 unread message.

Skip to content
Using Gmail with screen readers
1 of 4,648
fc.html
Inbox

Mohammad Umar
Attachments
12:37 PM (21 minutes ago)
to me

hi
One attachment
• Scanned by Gmail
<!--Task
We are selling t-shirts. Write a form to collect the following data:

Our customers already have accounts, so we know their addresses and charging details already. We don't need to collect that data. We want to confirm they are the right person, then get them to choose a colour and then pick a delivery date.

Writing that out as a series of questions to ask yourself:

1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.
2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?
4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL
5. When do they want the t-shirt to be delivered? I must collect a date and make sure that date is in the next four weeks. How will I do this? How will I make sure there are no mistakes about the date?

All fields are required. Do not write a form action for this project.-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coursework</title>
<style>
:root {
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
}
body {
background: var(--paper);
color: var(--ink);
font: var(--font);
max-width: 1280px;
margin: 0 auto;
}
</style>
</head>
<body>
<header><h1>🧐 CYF Coursework Disposable Branch Previews</h1></header>
<main>
<ol>
<li>
<h2><a href="/Wireframe">Project 1: Wireframe</a></h2>
<p>
Mentors:
<a href="Wireframe/readme.md">open the assignment in a tab</a>
</p>
</li>
<li>
<h2><a href="/Form-Controls">Project 2: Form Controls</a></h2>
<p>
Mentors:
<a href="Form-Controls/readme.md">open the assignment in a tab</a>
</p>
</li>
</ol>
</main>
<footer><a href="HOW_TO_REVIEW.md">HOW TO REVIEW MD</a></footer>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Creation of a Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
</div>
<br>
<div>
<label>Password
<input type="password" name="password" required>
</label>
</div>
<br>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email" required>
</div>
<br>
<div>
Sizes of T-Shirt
<div>
<label for="xs">Xtra-Small</label>
<input type="checkbox" name="xs" id="xs">
</div>
<div>
<label for="small">Small</label>
<input type="checkbox" name="small" id="small">
</div>
<div>
<label for="m">Medium</label>
<input type="checkbox" name="m" id="m">
</div>
<div>
<label for="l">Large</label>
<input type="checkbox" name="l" id="l">
</div>
<div>
<label for="xl">XtrLarge</label>
<input type="checkbox" name="xl" id="xl">
</div>
<div>
<label for="xxl">Double Xtra Large</label>
<input type="checkbox" name="xxl" id="xxl">
</div>
</div>
<br>

<div>
Colors of the T-shirts
<label for="colors">Colors</label>
<select name="color" id="color" multiple>
<option label="green" value="green"></option>
<option value="Red">Red </option>
<option label="blue" value="blue"></option>
<option label="purple" value="purple"></option>
<option label="yellow" value="yellow"></option>
<option label="black" value="black"></option>

</select>

</div><br><br>
<div>
<label for="date">Delivery date</label>
<input type="date" name="date" id="date">
</div><br>

<button type="submit">Submit The Form</button>

</form>
<footer>
<h2>Kalyani ITP-2025</h2>
</footer>
</body>
</html>