London | 25-ITP-May | GISLAINE DELLA BELLA | Sprint 2 | FORM STRUCTURE #835
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
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,115 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <title>My form exercise</title> | ||
| <meta name="description" content="" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <h1>Product </h1> | ||
| </header> | ||
| <main> | ||
| <!-- Write a valid form / Test with Devtools/Refactor using Devtools --> | ||
|
|
||
| <form> | ||
| <!-- customer's name/ require--> | ||
| <fieldset> | ||
| <legend> | ||
| <h2> Pick Your T-shirt</h2> | ||
| </legend> | ||
| <p> | ||
| Required fields are followed by | ||
| <strong><span aria-label="required">*</span></strong> | ||
| </p> | ||
|
|
||
| <p> | ||
| <label for="name"><strong>Name *</strong></label> | ||
| </p> | ||
| <input type="text" id="name" name="user_name" required minlength="2" /> | ||
|
|
||
| <!-- customer's e-amil/ require--> | ||
|
|
||
| <p><label for="e-mail"><span><strong>E-mail *</strong></span></label> | ||
| </p> | ||
| <input type="email" id="e-mail" name="user_email" required /> | ||
|
|
||
| <!-- 3 options colour/ pick only 1/ require --> | ||
|
|
||
| <label for="colour-YELLOW"> | ||
| <p><strong>Colour:</strong></p> | ||
| <input type="radio" style="transform: scale(2)" id="colour-YELLOW" value="YELLOW" name="colour" required /> | ||
| <span>Yellow </span> </span> | ||
|
||
| </label> | ||
|
|
||
| <label for="colour-RED"> | ||
| <input type="radio" style="transform: scale(2)" id="colour-RED" value="RED" name="colour" required /> | ||
| <span>Red </span> | ||
| </label> | ||
|
|
||
| <label for="colour-BLUE"> | ||
| <input type="radio" style="transform: scale(2)" id="colour-BLUE" value="BLUE" name="colour" required /> | ||
| <span>Blue </span> | ||
| </label> | ||
|
|
||
|
Contributor
There was a problem hiding this comment. Can you review all of the radio button values? They have |
||
| <!--6 options: XS, S, M, L, XL, XXL/ pick only 1 / require--> | ||
| <p><strong>Size:</strong></p> | ||
| <ul> | ||
|
|
||
| <li> | ||
| <label for="size-XS"> | ||
|
||
| <input type="radio" style="transform: scale(1.5); margin-bottom: 20px"; id="colour-XS" name="size" | ||
|
||
| value="colour-XS" required><span> XS </span> | ||
| </label> | ||
| </li> | ||
|
|
||
| <li> | ||
| <label for="size-S"> | ||
| <input type="radio" style="transform: scale(1.5) ; margin-bottom: 20px"; id="size-S" name="size" value="colour-S" | ||
| required><span> S </span> | ||
| </label> | ||
| </li> | ||
|
|
||
| <li> | ||
| <label for="size-M"> | ||
| <input type="radio" style="transform: scale(1.5); margin-bottom: 20px"; id="size-M" name="size" value="colour-M" | ||
| required><span> M </span> | ||
| </label> | ||
| </li> | ||
|
|
||
| <li> | ||
| <label for="size-L"> | ||
| <input type="radio" style="transform: scale(1.5); margin-bottom: 20px"; id="size-L" name="size" value="colour-L" | ||
| required><span> L </span> | ||
| </label> | ||
| </li> | ||
|
|
||
| <li> | ||
| <label for="size-XL"> | ||
| <input type="radio" style="transform: scale(1.5); margin-bottom: 20px"; id="size-XL" name="size" value="colour-XL" | ||
| required><span> XL </span> | ||
| </label> | ||
| </li> | ||
|
|
||
| <li> | ||
| <label for="-XXL"> | ||
|
||
| <input type="radio" style="transform: scale(1.5); margin-bottom: 20px"; id="size-XXL" name="size" value="colour-XXL" | ||
| required><span> XXL</span> | ||
| </label> | ||
| </li> | ||
| </ul> | ||
| <button type="submit">Add To Cart </button> | ||
| </fieldset> | ||
| </form> | ||
| </main> | ||
| <footer> | ||
| <!-- change to your name--> | ||
| <h3>By Gisline Della Bella</h3> | ||
| </footer> | ||
| </body> | ||
|
|
||
| </html> | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,33 +1,109 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> | ||
| <title>Wireframe</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!--Header--> | ||
| <header> | ||
| <nav> | ||
| <a href="#readme">ReadMe</a> | | ||
| <a href="#wireframe">Wireframe</a> | | ||
| <a href="#branch">Branch</a> | ||
| </nav> | ||
|
|
||
| <h1>Wireframe</h1> | ||
| <p class="subtext"> | ||
| The fundamental structure and content hierarchy of a digital product | ||
| </p> | ||
|
|
||
| </header> | ||
|
|
||
| <!--End Header--> | ||
|
|
||
| <!--Main --> | ||
| <main> | ||
| <main class="card-container"> | ||
|
|
||
| <article class="card"> | ||
| <h2 id="readme">README File </h2> | ||
| <p> | ||
| A README file is a text file that describes and launches a project. It comprises information that is | ||
| frequently needed | ||
| to grasp the scope of the project. In this blog, we will talk about what a README file is, why is it necessary | ||
| and how | ||
| you can write a good README file. | ||
| </p> | ||
| <a class="card-link" href="https://www.mygreatlearning.com/blog/readme-file/" target="_blank">Read more</a> | ||
| <img class="img-card" src="img/read.jpg" alt="documento folder on a table" /> | ||
| </article> | ||
|
|
||
| <article class="card"> | ||
| <h2 id="wireframe">What is the purpose of a wireframe?</h2> | ||
| <p> | ||
| The primary purpose of a wireframe is to serve as a blueprint or skeletal outline for a digital product, like | ||
| a website | ||
| or app, focusing on the structure, layout, and placement of content and features rather than visual aesthetics | ||
| </p> | ||
| <a class="card-link" href="https://balsamiq.com/blog/what-are-wireframes/#:~:text=A%20wireframe%20is%20the%20skeleton,teammates%2C%20stakeholders%2C%20or%20clients." | ||
| target="_blank">Read more</a> | ||
| <img class="img-card" src="img/wireframe.jpg" alt="" /> | ||
| </article> | ||
|
|
||
| <article class="card"> | ||
| <h2 id="branch">What is a branch in Git?</h2> | ||
| <p> | ||
| A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in | ||
| Git is | ||
| master . As you start making commits, you're given a master branch that points to the last commit you made. | ||
| Every time | ||
| you commit, the master branch pointer moves forward automatically. | ||
| </p> | ||
| <a class="card-link" href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell#:~:text=A%20branch%20in%20Git%20is,branch%20pointer%20moves%20forward%20automatically." | ||
| target="_blank" >Read more</a> | ||
| <img class="img-card" src="img/branch.jpg" alt="a womman looking at a tech screen" /> | ||
| </article> | ||
|
|
||
| </main> | ||
| <!--End Main --> | ||
|
|
||
| <!--Footer --> | ||
| <footer class="footer-container"> | ||
|
|
||
|
|
||
| <div class="info"> | ||
| <p class="email"><a href="mailto:enquires@worldtech.com">enquires@worldtech.com</a></p> | ||
| <p> +44 (0) 321 654 0789</p> | ||
| <p> www.worldtechnews.com</p> | ||
| </div> | ||
|
|
||
| <div class="adress"> | ||
|
|
||
| <p> 56 World Road</p> | ||
| <p>NLondon</p> | ||
| <p> NT5 4PG</p> | ||
| <p> United Kingdom</p> | ||
| </div> | ||
|
|
||
| <div class="social"> | ||
|
|
||
|
|
||
| <a href="https://www.instagram.com/" class="social-icon" target="_blank"> | ||
| <img src="img/icon-instagram.png" alt="Instagram"> | ||
| </a> | ||
| <a href="https://uk.linkedin.com/" class="social-icon" target="_blank"> | ||
| <img src="img/icon-linkedin.png" alt="Instagram"> | ||
| </a> | ||
|
|
||
|
|
||
| </footer> | ||
| <!--End Footer --> | ||
| </body> | ||
|
|
||
| </html> |
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.
Uh oh!
There was an error while loading. Please reload this page.
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.
Normally when defining html attributes, we use lowercase characters.
Can you review your "for" and "id" attribute names and ensure they are in lowercase?