HTML and CSS Tasks - 01 #1
There are no files selected for viewing
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 |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| html { | ||
| font-size: 16px; | ||
| } | ||
| body { | ||
| color: rgb(33,37,41); | ||
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| text-align: left; | ||
| } | ||
| .task-one_form-structure{ | ||
| align-items: center; | ||
| display: flex; | ||
| height: auto; | ||
| justify-content: center; | ||
| } | ||
| .task-one_form-layout { | ||
| border: 1px solid #d3d3d3; | ||
| border-radius: 5px; | ||
| box-shadow: 0 2px 5px rgba(0,0,0,.10), 0 2px 10px rgba(0,0,0,.10); | ||
|
|
||
| height: auto; | ||
| margin: 0.25rem 0rem 0rem 0rem; | ||
| padding: 1rem; | ||
| width: 35rem; | ||
| } | ||
| .task-one_form-grid-container { | ||
| align-content: space-evenly; | ||
| display: flex; | ||
| } | ||
| .task-one_form-input-row-spacing { | ||
| margin: 0rem 0rem 0.1rem 0rem; | ||
| padding: 0.25rem 0rem; | ||
| } | ||
| .task-one_form-input-element-spacing { | ||
| width: 50%; | ||
| } | ||
| .task-one_form-input-element-spacing:first-child { | ||
| padding: 0rem 1rem 0rem 0rem; | ||
| } | ||
| .task-one_form-input-style { | ||
| border: 1.2px solid rgb(219,219,219); | ||
| border-radius: 5px; | ||
| box-sizing: border-box; | ||
| display: block; | ||
| font-size: 0.8rem; | ||
| height: 2.5rem; | ||
| margin: 0.5rem 0rem 0rem 0rem; | ||
| padding: 0.5rem; | ||
| width: 100%; | ||
| } | ||
| .task-one_form-input-style:focus { | ||
| border: 1.5px solid rgb(77,171,247); | ||
| outline: none; | ||
| } | ||
| .task-one_form-input-style::placeholder { | ||
| color: rgb(189,189,189); | ||
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | ||
| } | ||
| .task-one_form-input-asterisk { | ||
| height: 0.3rem; | ||
| transform: translateY(-0.8rem); | ||
| } | ||
| .task-one_form-input-address{ | ||
| height: 5rem; | ||
| } | ||
| ol { | ||
| margin: 0rem 0rem 0.7rem 0rem; | ||
| } | ||
| .task-one_form-tc { | ||
| margin: 0rem 0rem 0.7rem 0rem; | ||
| } | ||
| .task-one_form-button-position { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| } | ||
| .task-one_form-button { | ||
| border: none; | ||
| border-radius: 4px; | ||
| height: 2.5rem; | ||
| margin: 0rem 1rem 0rem 0rem; | ||
| outline: none; | ||
| width: 5rem; | ||
| } | ||
| .task-one_form-button:first-child { | ||
| background-color: rgb(237,237,237); | ||
| } | ||
| .task-one_form-button:nth-child(2) { | ||
| background-color: rgb(0,123,255); | ||
| color: rgb(255,255,255); | ||
| } | ||
| .task-one_form-input-name:invalid { | ||
| border: 1px solid rgb(255,0,0); | ||
| } | ||
| .task-one_form-input-email:invalid { | ||
| border: 1px solid rgb(255,0,0); | ||
| } | ||
| .task-one_form-input-password:invalid { | ||
| border: 1px solid rgb(255,0,0); | ||
| } | ||
| .task-one_form-input-phone:invalid { | ||
| border: 1px solid rgb(255,0,0); | ||
| } | ||
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,60 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>Task - 1</title> | ||
| <!--Local CSS--> | ||
| <link rel="stylesheet" href="./css/main.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="task-one_form-structure"> | ||
| <div class="task-one_form-layout"> | ||
| <div class="task-one_form-grid-container task-one_form-input-row-spacing"> | ||
| <div class="task-one_form-input-element-spacing"> | ||
| <label for="firstName">First Name <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></label> | ||
| <input type="text" class="form-control task-one_form-input-style task-one_form-input-name" id="user_name" name="firstName" placeholder="enter your first name" pattern="[a-zA-Z ][a-zA-Z ]+"> | ||
| </div> | ||
| <div class="task-one_form-input-element-spacing"> | ||
| <label for="lastName">Last Name <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></label> | ||
| <input type="text" class="form-control task-one_form-input-style task-one_form-input-name" id="user_name" name="lastName" placeholder="enter your last name" pattern="[a-zA-Z ][a-zA-Z ]+"> | ||
| </div> | ||
| </div> | ||
| <div class="task-one_form-input-row-spacing"> | ||
| <label for="gender">Gender <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></label> | ||
| <input type="text" class="form-control task-one_form-input-style" name="gender" placeholder="enter your gender"> | ||
| </div> | ||
| <div class="task-one_form-input-row-spacing"> | ||
| <label for="email">Email <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></label> | ||
| <input type="email" class="form-control task-one_form-input-style task-one_form-input-email" id="user_email" name="email" placeholder="someone@example.com"> | ||
| </div> | ||
| <div class="task-one_form-input-row-spacing"> | ||
| <label for="password">Password <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></label> | ||
| <input type="password" class="form-control task-one_form-input-style task-one_form-input-password" name="passwowrd" id="user_password" placeholder="use minimum 8 characters" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"> | ||
| </div> | ||
| <div class="task-one_form-input-row-spacing"> | ||
| <label for="phone">Phone Number</label> | ||
| <input type="tel" class="form-control task-one_form-input-style task-one_form-input task-one_form-input-phone" name="phone" placeholder="12345 6789" pattern="[0-9]"> | ||
| </div> | ||
| <div class="task-one_form-input-row-spacing"> | ||
| <label for="address">Address</label> | ||
| <textarea name="Address" id="address" cols="30" rows="3" class="form-control task-one_form-input-style task-one_form-input-address" name="address" placeholder="Enter your address"></textarea> | ||
| </div> | ||
| <div> | ||
| <p class="task-one_form-tc">Terms and Conditions <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></p> | ||
| <ol> | ||
| <li>Lorem Ipsum dolor sit amet</li> | ||
| <li>Lorem Ipsum dolor sit amet</li> | ||
| </ol> | ||
| </div> | ||
| <div class="task-one_form-button-position"> | ||
| <button class="task-one_form-button">Cancel</button> | ||
| <button class="task-one_form-button">Submit</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
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,60 @@ | ||
| <!DOCTYPE html> | ||
|
Owner
There was a problem hiding this comment. Why different files? Why not have two different commits to make it easier?
Author
There was a problem hiding this comment. Made two separate commits the second |
||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>Task - 1</title> | ||
| <!--Local CSS--> | ||
| <link rel="stylesheet" href="./css/main.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="task-one_form-structure"> | ||
| <div class="task-one_form-layout"> | ||
| <div class="task-one_form-grid-container task-one_form-input-row-spacing"> | ||
| <div class="task-one_form-input-element-spacing"> | ||
| <label for="firstName">First Name <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></label> | ||
| <input type="text" class="form-control task-one_form-input-style task-one_form-input-name" id="user_name" name="firstName" placeholder="enter your first name" pattern="[a-zA-Z ][a-zA-Z ]+"> | ||
| </div> | ||
| <div class="task-one_form-input-element-spacing"> | ||
| <label for="lastName">Last Name <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></label> | ||
| <input type="text" class="form-control task-one_form-input-style task-one_form-input-name" id="user_name" name="lastName" placeholder="enter your last name" pattern="[a-zA-Z ][a-zA-Z ]+"> | ||
| </div> | ||
| </div> | ||
| <div class="task-one_form-input-row-spacing"> | ||
| <label for="gender">Gender <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></label> | ||
| <input type="text" class="form-control task-one_form-input-style" name="gender" placeholder="enter your gender"> | ||
| </div> | ||
| <div class="task-one_form-input-row-spacing"> | ||
| <label for="email">Email <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></label> | ||
| <input type="email" class="form-control task-one_form-input-style task-one_form-input-email" id="user_email" name="email" placeholder="someone@example.com"> | ||
| </div> | ||
| <div class="task-one_form-input-row-spacing"> | ||
| <label for="password">Password <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></label> | ||
| <input type="password" class="form-control task-one_form-input-style task-one_form-input-password" name="passwowrd" id="user_password" placeholder="use minimum 8 characters" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"> | ||
| </div> | ||
| <div class="task-one_form-input-row-spacing"> | ||
| <label for="phone">Phone Number</label> | ||
| <input type="tel" class="form-control task-one_form-input-style task-one_form-input task-one_form-input-phone" name="phone" placeholder="12345 6789" pattern="[0-9]"> | ||
| </div> | ||
| <div class="task-one_form-input-row-spacing"> | ||
| <label for="address">Address</label> | ||
| <textarea name="Address" id="address" cols="30" rows="3" class="form-control task-one_form-input-style task-one_form-input-address" name="address" placeholder="Enter your address"></textarea> | ||
| </div> | ||
| <div> | ||
| <p class="task-one_form-tc">Terms and Conditions <span><img src="./css/Assets/asterisk.svg" alt="Required Field" class="task-one_form-input-asterisk"></span></p> | ||
| <ol> | ||
| <li>Lorem Ipsum dolor sit amet</li> | ||
| <li>Lorem Ipsum dolor sit amet</li> | ||
| </ol> | ||
| </div> | ||
| <div class="task-one_form-button-position"> | ||
| <button class="task-one_form-button">Cancel</button> | ||
| <button class="task-one_form-button">Submit</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> | ||
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.
What is the significance of the naming convention you are using?
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.
It is called Block Element Modifier (BEM), usually start off with the app name, then after the underscore it's the block followed by the element and the modifier that is usually targeted.
A coding standard followed