-
Notifications
You must be signed in to change notification settings - Fork 62
My business website #51
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.
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
base: main
Are you sure you want to change the base?
Changes from 34 commits
c4cea29
5064a94
a8953c3
d1c0132
26e115d
4e89692
994ce58
f9b7023
1e85033
77f378c
57d68ac
5af1621
84e7483
0c314fa
3617707
e75bac5
15cbc32
4369fad
894408f
e6a339f
af3455a
d2d2db9
35a1538
d6f2e01
8291326
df8ebe1
c597887
044fd30
9d3261a
fce9aef
add54d7
bcc3a5b
acfb332
4281c09
ea71b0e
863d49f
9561297
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,3 @@ | ||
| # js-project-business-site | ||
| # js-project-business-site | ||
|
|
||
| https://ai-compass-business-site.netlify.app/ |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:[email protected]&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="./style.css" /> | ||
| <link rel="icon" type="image/png" href="/js-project-business-site/images/user-robot.png"> | ||
| <title>Form | AI Compass</title> | ||
| </head> | ||
| <body> | ||
| <div class="signup-form"> | ||
| <form | ||
| action="http://httpbin.org/anything" | ||
| method="POST"> | ||
| <h2>Sign Up</h2> | ||
| <fieldset> | ||
| <div class="name"> | ||
| <h4>Name</h4> | ||
| <label> | ||
| <input | ||
| class="your-name" | ||
| type="text" | ||
| name="name" | ||
| placeholder="your name" | ||
| required /> | ||
| </label> | ||
| </div> | ||
|
|
||
| <div class="email"> | ||
| <h4>Email</h4> | ||
| <label> | ||
| <input | ||
| class="input-email" | ||
| type="email" | ||
| name="email" | ||
| placeholder="[email protected]" | ||
| required /> | ||
| </label> | ||
| </div> | ||
|
|
||
| <div class="age-box"> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe this is what you wanted it to be like but i was able to check multiple checkboxes at once so just alerting you on that thats possible:)
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, I wanted to be able to check multiple boxes for the users with multiple children:) |
||
| <h4>Age Group</h4> | ||
| <div class="age-checkbox"> | ||
| <label class="checkbox-label"> | ||
| <input | ||
| type="checkbox" | ||
| name="ageGroup" | ||
| value="lowerElementary"> | ||
| <span class="custom-checkbox"></span> | ||
| <span>Lower Elementary</span> | ||
| </label> | ||
| <label class="checkbox-label"> | ||
| <input | ||
| type="checkbox" | ||
| name="ageGroup" | ||
| value="upperElementary"> | ||
| <span class="custom-checkbox"></span> | ||
| <span>Upper Elementary</span> | ||
| </label> | ||
| <label class="checkbox-label"> | ||
| <input | ||
| type="checkbox" | ||
| name="ageGroup" | ||
| value="middleSchool"> | ||
| <span class="custom-checkbox"></span> | ||
| <span>Middle School</span> | ||
| </label> | ||
| <label class="checkbox-label"> | ||
| <input | ||
| type="checkbox" | ||
| name="ageGroup" | ||
| value="highSchool"> | ||
| <span class="custom-checkbox"></span> | ||
| <span>High School</span> | ||
| </label> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="who-are-you"> | ||
| <h4>Who are you?</h4> | ||
| <div class="who-radio"> | ||
| <label class="radio-label"> | ||
| <input | ||
| type="radio" | ||
| name="whoAreYou" | ||
| value="parent" | ||
| id="parent" | ||
| checked required> | ||
| <span class="custom-radio"></span> | ||
| <span>Parent</span> | ||
| </label> | ||
| <label class="radio-label"> | ||
| <input | ||
| type="radio" | ||
| name="whoAreYou" | ||
| value="teacher" | ||
| id="teacher" | ||
| required> | ||
| <span class="custom-radio"></span> | ||
| <span>Teacher</span> | ||
| </label> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="line"></div> | ||
|
|
||
| <div class="interested-in"> | ||
| <p>Interested in (*optional)</p> | ||
| <label> | ||
| <select | ||
| name="interestedIn" | ||
| id="interestedIn"> | ||
| <option | ||
| class="select-answer" | ||
| value="selectAnswer" disabled selected>--Select Answer--</option> | ||
| <option value="creativeProjects">Creative Projects</option> | ||
| <option value="aiBasics">AI Basics</option> | ||
| <option value="careerPreparation">Career Preparation</option> | ||
| </select> | ||
| </label> | ||
| </div> | ||
|
|
||
| <button type="submit">Get Started</button> | ||
| </fieldset> | ||
| </form> | ||
| <div class="robot-image"> | ||
| <img | ||
| src="./robot.png" | ||
| alt="AI Compass Image" | ||
| width="200" | ||
| height="200"/> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> | ||
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.
Make sure you're using the https method, otherwise most browsers will block this action
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.
Thank you for the feedback! I changed here to http method, and I think/hope I fixed the design problem as well. Now the site looks ok in 690px ( I fixed the width of the price section).