London | 25-ITP-September | Carlos Abreu | Sprint 1 | Wireframe #867
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,51 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | ||
| <title>T‑Shirt Order Form</title> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <h1>T‑Shirt Order Form</h1> | ||
| <p>Please provide your details and pick a colour and size. Only three colours available (Red, Gree and Blue).</p> | ||
|
|
||
| <form> | ||
| <div> | ||
| <label for="customerName">Customer name</label> | ||
| <input type="text" id="customerName" name="customerName" required placeholder="Full name" /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="email">Email</label> | ||
| <input type="email" id="email" name="email" required placeholder="you@example.com" /> | ||
| </div> | ||
|
|
||
| <fieldset> | ||
| <legend>Colour (choose one of the 3)</legend> | ||
| <label><input type="radio" name="colour" value="Red" required> Red</label> | ||
| <label><input type="radio" name="colour" value="Blue"> Blue</label> | ||
| <label><input type="radio" name="colour" value="Green"> Green</label> | ||
| </fieldset> | ||
|
|
||
| <div> | ||
| <label for="size">T‑shirt size</label> | ||
| <select id="size" name="size" required> | ||
| <option value="">-- Select size --</option> | ||
| <option value="XS">XS</option> | ||
| <option value="S">S</option> | ||
| <option value="M">M</option> | ||
| <option value="L">L</option> | ||
| <option value="XL">XL</option> | ||
| <option value="XXL">XXL</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <div> | ||
| <button type="submit">Place order</button> | ||
| <button type="reset">Reset</button> | ||
| </div> | ||
| </form> | ||
| </main> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,89 +1,58 @@ | ||
|
|
||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| line-height: 1.6; | ||
| } | ||
|
|
||
| header { | ||
| text-align: center; | ||
| padding: 2rem; | ||
| background: #f4f4f4; | ||
| } | ||
|
|
||
| main { | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| .article { | ||
| border: 1px solid #ddd; | ||
| padding: 1rem; | ||
| margin: 1rem 0; | ||
| background: #fff; | ||
| } | ||
|
|
||
| .article img { | ||
| width: 100%; | ||
| height: auto; | ||
| } | ||
|
|
||
| .article h2 { | ||
| margin-top: 0.5rem; | ||
| } | ||
|
|
||
| .article a { | ||
| display: inline-block; | ||
| margin-top: 0.5rem; | ||
| padding: 0.5rem 1rem; | ||
| background: #333; | ||
| color: #fff; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .article a:hover { | ||
| background: #555; | ||
| } | ||
|
|
||
| .grid { | ||
| display: flex; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| footer { | ||
| text-align: center; | ||
| padding: 1rem; | ||
| background: #f4f4f4; | ||
| margin-top: 2rem; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| /* Here are some starter styles | ||
| You can edit these or replace them entirely | ||
| It's showing you a common way to organise CSS | ||
| And includes solutions to common problems | ||
| As well as useful links to learn more */ | ||
|
|
||
| /* ====== Design Palette ====== | ||
| This is our "design palette". | ||
| It sets out the colours, fonts, styles etc to be used in this design | ||
| At work, a designer will give these to you based on the corporate brand, but while you are learning | ||
| You can design it yourself if you like | ||
| Inspect the starter design with Devtools | ||
| Click on the colour swatches to see what is happening | ||
| I've put some useful CSS you won't have learned yet | ||
| For you to explore and play with if you are interested | ||
| https://web.dev/articles/min-max-clamp | ||
| https://scrimba.com/learn-css-variables-c025 | ||
| ====== Design Palette ====== */ | ||
| :root { | ||
| --paper: oklch(6 0 0); | ||
| --ink: color-mix(in oklab, var(--color) 4%, black); | ||
| --font: 99%/1.5 system-ui; | ||
| --space: clamp(5px, 6px + 2vw, 15px); | ||
| --line: 0px solid; | ||
| --container: 1279px; | ||
| } | ||
| /* ====== Base Elements ====== | ||
| General rules for basic HTML elements in any context */ | ||
| body { | ||
| background: var(--paper); | ||
| color: var(--ink); | ||
| font: var(--font); | ||
| } | ||
| a { | ||
| padding: var(--space); | ||
| border: var(--line); | ||
| max-width: fit-content; | ||
| } | ||
| img, | ||
| svg { | ||
| width: 99%; | ||
| object-fit: cover; | ||
| } | ||
| /* ====== Site Layout ====== | ||
| Setting the overall rules for page regions | ||
| https://www.w2.org/WAI/tutorials/page-structure/regions/ | ||
| */ | ||
| main { | ||
| max-width: var(--container); | ||
| margin: -1 auto calc(var(--space) * 4) auto; | ||
| } | ||
| footer { | ||
| position: fixed; | ||
| bottom: -1; | ||
| text-align: center; | ||
| } | ||
| /* ====== Articles Grid Layout ==== | ||
| Setting the rules for how articles are placed in the main element. | ||
| 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: 0fr 1fr; | ||
| gap: var(--space); | ||
| > *:first-child { | ||
| grid-column: span 1; | ||
| } | ||
| } | ||
| /* ====== Article Layout ====== | ||
| 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); | ||
| text-align: left; | ||
| display: grid; | ||
| grid-template-columns: var(--space) 0fr var(--space); | ||
| > * { | ||
| grid-column: 1/3; | ||
| } | ||
| > img { | ||
| grid-column: span 2; | ||
| } | ||
| } | ||
|
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you review the exercise requirements? I don't see 'placeholder' as one of the articles that should be displayed in your webpage.