Concert House #364
There are no files selected for viewing
Binary file not shown.
This file contains 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,12 +1,12 @@ | ||
| # Business Site | ||
|
|
||
| This Business Site has been developed as a bootcamp project and served to practice forms in HTML and to style them with CSS. The requirements included a header with a hero part, different kinds of input types, and the page should be fully responsive. | ||
|
|
||
| ## The problem | ||
|
|
||
| I have been using figma for my first scatch and got inspired by forms I could find online. | ||
| In a next step it would be important to make the form fully accessible. | ||
|
|
||
| ## View it live | ||
| https://concert-house.netlify.app/ | ||
|
|
Binary file not shown.
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 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,17 +1,112 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Business Site</title> | ||
| <link rel="stylesheet" type="text/css" href="style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <div class="hero"> | ||
| <a class="logo-container" aria-label="website"> | ||
| <img src="./assets/logo-note.png" alt="the logo is a note"> | ||
| </a> | ||
| <div class="header-text"> | ||
| <h1>Concert House</h1> | ||
| <h2>Become a member and enjoy special offers!</h2> | ||
| </div> | ||
|
|
||
| <button aria-expanded="false" aria-controls="navigation-menu" aria-label="Open Main Menu"> | ||
| <div class="hamburger-layer"></div> | ||
| <div class="hamburger-layer"></div> | ||
| <div class="hamburger-layer"></div> | ||
| </button> | ||
|
|
||
| <nav id="navigation-menu" hidden> | ||
| <a href="http://google.com" aria-label="Go to Google">Google</a> | ||
| <a href="http://example.com" aria-label="Go to Example">Example</a> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
|
|
||
| <main> | ||
|
|
||
| <h3>New Member Registration</h3> | ||
| <!-- Sign-up form for mobile phones--> | ||
| <div class="form-container"> | ||
| <form action="http://httpbin.org/anything" method="post"> | ||
|
|
||
| <!-- personal information: first name, last name, address, country, phone, email --> | ||
| <label for="first-name">First Name</label> | ||
| <input type="text" id="first-name" name="first-name" placeholder="first name" required> | ||
|
|
||
| <label for="last-name">Last Name</label> | ||
| <input type="text" id="last-name" name="last-name" placeholder="last name" required> | ||
|
|
||
| <label for="address">Address</label> | ||
| <input type="text" id="address" name="address" placeholder="address" required> | ||
|
|
||
| <label for="country">Country</label> | ||
| <select class="drop-down" name="country" required id="country" reuqired tabindex="0"> | ||
| <option value="select" disabled selected>select</option> | ||
| <option value="sweden">Sweden</option> | ||
| <option value="germany">Germany</option> | ||
| <option value="france">France</option> | ||
| <option value="switzerland">Switzerland</option> | ||
| </select> | ||
|
|
||
| <label for="phone">Phone</label> | ||
| <input type="tel" id="phone" name="phone" placeholder="phone" required> | ||
|
|
||
| <label for="email">Email</label> | ||
| <input type="email" name="email" placeholder="email" required> | ||
|
|
||
|
|
||
| <!-- membership & Terms & Conditions --> | ||
| <label for="membership">Choose your Membership</label> | ||
| <select aria-label="open drop-down to choose membership type" class="drop-down" name="membership" | ||
| id="membership" required> | ||
| <option aria-label="close drop-down to choose membership type" value="choose">Choose membership</option> | ||
| <option value="monthly membership">One month membership</option> | ||
| <option value="six month membership">Six month membership</option> | ||
| <option value="one year membership">One year membership</option> | ||
| </select> | ||
|
|
||
| <div class="terms-and-conditions"> | ||
| <input id="checkbox" type="checkbox" required aria-describedby="terms-description" /> | ||
| <label for="checkbox">I agree to these <a href="https://google.com">Terms and Conditions</a></label> | ||
| <p id="terms-description" class="sr-only">You must agree to the Terms and Conditions to continue</p> | ||
| </div> | ||
|
|
||
| <!-- submit button --> | ||
| <div id="submit-button-container"> | ||
| <button id="submit-button" type="submit">Submit</button> | ||
| </div> | ||
|
|
||
| </form> | ||
| </div> | ||
|
|
||
| </main> | ||
|
|
||
| <!-- footer for mobile phones --> | ||
| <footer> | ||
| <div> | ||
| <p class="footer-text">Contact: Gitte Beckmann</p> | ||
| </div> | ||
|
|
||
| <!-- linkedin --> | ||
| <a href="https://www.linkedin.com/in/gittebeckmann" aria-label="linkedin page of webpage-developer"> | ||
| <svg id="linkedin" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" | ||
| class="bi bi-linkedin" viewBox="0 0 16 16"> | ||
| <path | ||
| d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" /> | ||
| </svg> | ||
| </a> | ||
|
|
||
| </footer> | ||
| </body> | ||
|
|
||
| </html> | ||
This file contains 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,5 +1,223 @@ | ||
| body { | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| margin: 0; | ||
| } | ||
|
|
||
| /* header style for mobile phones */ | ||
| .hero { | ||
| display: flex; | ||
| align-items: flex-start; | ||
| justify-content: space-between; | ||
|
|
||
| background: url(./assets/opera.jpg); | ||
| min-height: 100vh; | ||
| background-size: cover; | ||
| background-position: center; | ||
| } | ||
|
|
||
| .logo-container { | ||
| width: 40px; | ||
| margin-left: 10px; | ||
| margin-top: 3px; | ||
| } | ||
|
|
||
| img { | ||
| width: 100%; | ||
| background-color: white; | ||
| } | ||
|
|
||
| /* navigation with hamburger-layer for mobile phone*/ | ||
|
|
||
| .navigation { | ||
| margin: 10px; | ||
| } | ||
|
|
||
| .hamburger-layer { | ||
| width: 20px; | ||
| height: 5px; | ||
| background-color: black; | ||
| margin-bottom: 2px; | ||
| margin-right: 10px; | ||
| margin-top: 3px; | ||
| } | ||
|
|
||
|
|
||
| .header-text { | ||
| padding-top: 25%; | ||
| text-align: center; | ||
| } | ||
|
|
||
|
|
||
| /* texts of the header for mobile phones */ | ||
| h1 { | ||
| color: #FFDF00; | ||
| font-size: 40px; | ||
| } | ||
|
|
||
| h2 { | ||
| color: #FFDF00; | ||
| margin-top: 15%; | ||
| } | ||
|
|
||
| /* header for Desktop */ | ||
| @media (min-width: 1024px) { | ||
| .header-text { | ||
| padding-top: 10%; | ||
| text-align: center; | ||
| max-width: 600px; | ||
| } | ||
|
|
||
| h1 { | ||
| color: #FFDF00; | ||
| font-size: 60px; | ||
| } | ||
|
|
||
| h2 { | ||
| color: #FFDF00; | ||
| font-size: 40px; | ||
| margin-top: 15%; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| /* Title of form for mobile phones */ | ||
|
|
||
| h3 { | ||
| color: rgb(81, 81, 132); | ||
| font-weight: 200; | ||
| padding-left: 5%; | ||
| } | ||
|
|
||
| /* Title of form for Desktop */ | ||
| @media (min-width: 1024px) { | ||
| h3 { | ||
| font-weight: 500; | ||
| text-align: left; | ||
| font-size: xx-large; | ||
| } | ||
| } | ||
|
|
||
| /* sign-up form for mobile phones */ | ||
| .form-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| background-color: rgb(236, 233, 233); | ||
| padding: 5%; | ||
| border-radius: 5px; | ||
| margin: auto; | ||
| max-width: 500px; | ||
| } | ||
|
|
||
| form { | ||
| display: flex; | ||
| width: 80%; | ||
| display: block; | ||
| justify-content: center; | ||
| } | ||
|
|
||
|
|
||
| /* personal information */ | ||
|
|
||
| label { | ||
| display: block; | ||
| text-align: left; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| input { | ||
| width: 100%; | ||
| justify-content: center; | ||
| border: 2px solid rgb(200, 200, 200); | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| /* Inputs for Tablets, iPads, desktop */ | ||
| @media (min-width: 667px) { | ||
| input { | ||
| width: 300px; | ||
| } | ||
| } | ||
|
|
||
| /* Input for Desktop */ | ||
| @media (min-width:1024px) { | ||
| input:hover { | ||
| background-color: rgb(219, 218, 218); | ||
| } | ||
| } | ||
|
|
||
| /* country: drop-down menu */ | ||
| .drop-down { | ||
| border: 2px solid rgb(200, 200, 200); | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| /* terms and conditions: checkbox-style */ | ||
| .terms-and-conditions { | ||
| display: flex; | ||
| } | ||
|
|
||
| #checkbox { | ||
| width: 20px; | ||
| } | ||
|
|
||
| .sr-only { | ||
| position: absolute; | ||
| width: 1px; | ||
| height: 1px; | ||
| padding: 0; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| clip: rect(0, 0, 0, 0); | ||
| border: 0; | ||
| } | ||
|
|
||
| /* submit-button */ | ||
|
|
||
| #submit-button-container { | ||
| display: flex; | ||
| width: 80%; | ||
| margin-left: 10%; | ||
| margin-top: 5px; | ||
| justify-content: center; | ||
| background-color: rgb(166, 166, 188); | ||
| border-radius: 5px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| #submit-button { | ||
| background-color: rgb(166, 166, 188); | ||
| border: none; | ||
| width: 100%; | ||
| } | ||
|
|
||
| #submit-button:active { | ||
| background-color: #673dda; | ||
| } | ||
|
|
||
| /* Input for Desktop */ | ||
| @media (min-width:1024px) { | ||
| #submit-button:hover { | ||
| background-color: rgb(83, 53, 171); | ||
| color: white; | ||
| } | ||
|
|
||
|
|
||
| } | ||
|
|
||
| /* footer for mobile phone */ | ||
| footer { | ||
| display: flex; | ||
| display: row; | ||
|
There was a problem hiding this comment. display: row; isn't a valid value. Correct way to set row layout (default for flex): flex-direction: row; |
||
| justify-content: space-around; | ||
| margin: 2%; | ||
| } | ||
|
|
||
| .footer-text { | ||
| margin: 0; | ||
| font-size: small; | ||
| } | ||
|
|
||
| #linkedin { | ||
| color: blue; | ||
| width: 20px; | ||
| } | ||
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.
There are duplicated head and body tags, which can cause rendering issues.