Skip to content

ZA | MAY-2025 | OBERT TILIMANDZI | FEATURE WIREFRAME #631

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

Closed
wants to merge 5 commits into from
Closed

ZA | MAY-2025 | OBERT TILIMANDZI | FEATURE WIREFRAME #631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
de54179
Short desctription of a README File
obstie Jan 9, 2025
f748dbb
canged the header section content
obstie Jan 13, 2025
9af6d73
removed the reset button
obstie May 26, 2025
861d048
Deleted CSS
obstie May 28, 2025
7c6ff95
form looks ok
obstie May 28, 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
83 changes: 78 additions & 5 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,89 @@
<h1>Product Pick</h1>
</header>
<main>

<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
<section class="form-container">
<fieldset class="fieldset-one">
<div class="input-container">
<label for="name">First Name</label>
<input type="text" id="name" name="FirstName" minlength="2" maxlength="15" placeholder="Enter First Name" required>
</div>
<div class="input-container">
<label for="surname">Surname</label>
<input type="text" id="surname" name="Surname" minlength="2" maxlength="15" placeholder="Enter Surname" required>
</div>
<div class="input-container">
<label for="email">Email</label>
<input type="email" id="email" name="Email" placeholder="Enter Your Email" required>
</div>
</fieldset>

<fieldset class="fieldset-two">
<legend>Please select color</legend>
<select class="selector" name="color" id="color" aria-label="Color selection" required>
<option value="" disabled selected>Click to select color</option>
<option class="red" value="red">Red</option>
<option class="green" value="green">Green</option>
<option class="blue" value="blue">Blue</option>
</select>
</fieldset>

<fieldset class="fieldset-three">
<legend>Pick Size</legend>
<div class="size-container">
<div>
<input type="radio" id="xs" name="size" value="xs" required>
<label for="xs">XS</label>
</div>
<div>
<input type="radio" name="size" id="s" value="s" required>
<label for="s">S</label>
</div>
<div>
<input type="radio" name="size" id="m" value="m" required>
<label for="m">M</label>
</div>
<div>
<input type="radio" name="size" id="l" value="l" required>
<label for="l">L</label>
</div>
<div>
<input type="radio" name="size" id="xl" value="xl" required>
<label for="xl">XL</label>
</div>
<div>
<input type="radio" name="size" id="xxl" value="xxl" required>
<label for="xxl">XXL</label>
</div>
</div>
</fieldset>
<fieldset>
<div class="amount-container">
<label for="amount">Amount</label>
<input type="number" id="amount" name="amount" min="1" max="10" required>
</div>

<div class="input-container">
<label for="date">Delivery date</label>
<input type="date" id="date" name="date" min="2025-01-03" max="2025-02-01" required>
</div>

<button type="submit">Order</button>
<button type="reset">Reset</button>
</fieldset>
</section>

</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>By Obert Tilimandzi</h2>
</footer>
</body>
</html>





24 changes: 24 additions & 0 deletions Wireframe/articles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<article>
<h2>What is the purpose of a README file?</h2>
<p>A README file is a vital plain text document that serves as an introduction to a
project, software, or dataset, outlining its purpose, usage instructions, contribution guidelines, license, and contact information. </p>
</article>

<article>

</article>

<article></article>
</section>

</body>
</html>
11 changes: 6 additions & 5 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</header>
<nav>
<img class="logo" src="./images/logo.png" alt="git-logo-white-background">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The imgs that you are referencing here aren't in the directory.

<h3>Discover the importance of Git, the most popular version control system.</h3>
</nav>

</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add better alts

Expand Down
11 changes: 6 additions & 5 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ As well as useful links to learn more */
For you to explore and play with if you are interested
https://web.dev/articles/min-max-clamp
https://scrimba.com/learn-css-variables-c026
====== Design Palette ====== */
====== Design Palette ====== //
:root {
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
Expand All @@ -25,7 +25,7 @@ As well as useful links to learn more */
--container: 1280px;
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
General rules for basic HTML elements in any context //
body {
background: var(--paper);
color: var(--ink);
Expand All @@ -44,7 +44,7 @@ svg {
/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
//
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
Expand All @@ -60,7 +60,7 @@ Inspect this in Devtools and click the "grid" button in the Elements view
Play with the options that come up.
https://developer.chrome.com/docs/devtools/css/grid
https://gridbyexample.com/learn/
*/
//
main {
display: grid;
grid-template-columns: 1fr 1fr;
Expand All @@ -73,7 +73,7 @@ main {
Setting the rules for how elements are placed in the article.
Now laying out just the INSIDE of the repeated card/article design.
Keeping things orderly and separate is the key to good, simple CSS.
*/
//
article {
border: var(--line);
padding-bottom: var(--space);
Expand All @@ -87,3 +87,4 @@ article {
grid-column: span 3;
}
}
*/