Annas business site #381
+305
−19
There are no files selected for viewing
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 |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "liveServer.settings.port": 5502 | ||
| } |
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,16 @@ | ||
| # Business Site | ||
|
|
||
| My business site with a sign up form for an upcoming event. | ||
|
|
||
| The aim of the third project in the Web Dev bootcamp was to create a responsive business site with a hero image or video in the header and a sign up form with at least 3 different input types. | ||
|
|
||
| ## The problem | ||
|
|
||
| I started out by sketching out on paper how I wanted it to look like. I took inspiration from a landing page/event site that was created with the company confetti´s tool for the company I work at. | ||
|
|
||
| I used Flexbox and fieldset as techniques to setup the hero video and sign up form. | ||
|
|
||
| If I hade more time I would learn more about the forms and try to style them better. I tried to make round check-boxes but it did not work out well and I also tried to remove the default setting of the forms to change the links but it didn´t work. | ||
|
|
||
| ## View it live | ||
| https://tradewavefintechforum.netlify.app/ |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,17 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>TradeWave</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <main> | ||
| <header> | ||
| <div class="hero"> | ||
| <video class="hero-video" autoplay playsinline muted loop> | ||
| <source src="assets/business.mp4" type="video/mp4"> <!--video credit Mixkit --> | ||
| </video> | ||
| <div class="hero-text"> | ||
| <h1>TradeWave</h1> | ||
| <h2>Annual Fintech Forum</h2> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!-- Sign up form --> | ||
|
|
||
| <section class="signup"> | ||
| <form action="https://httpbin.org/anything" method="POST"> | ||
| <form> | ||
| <h3>Sign up for more information</h3> | ||
| <fieldset> | ||
| <label for="name"></label> | ||
| <input type="name" id="name" name="name" placeholder="Name" required /> | ||
| <label for="company"></label> | ||
| <input type="company" id="company" name="company" placeholder="Company" required /> | ||
|
There was a problem hiding this comment. The type attribute values for the inputs should be updated to text for better accuracy. There was a problem hiding this comment. Thank you! Very good and correct point indeeed! Updated now. |
||
| <label for="email"></label> | ||
| <input type="email" id="email" name="email" placeholder="E-mail" required /> | ||
| <label for="agree"> | ||
| <input type="checkbox" id="agree" name="agree" required /><a href="https://confetti.events/sv/terms-general"> | ||
| I agree to the Terms and Conditions</a> | ||
| </label> | ||
| <button type="submit">Submit</button> | ||
| </fieldset> | ||
| </form> | ||
| </section> | ||
| </main> | ||
| </body> | ||
|
|
||
| <footer> | ||
| <div class="footer-logo"><a href="https://www.google.com"> | ||
| <img src="assets/TRADEWAVE.png" alt="Company Logo"></a> | ||
| </div> | ||
| <p> © 2024 TradeWave Inc. All rights reserved</p> | ||
| </footer> | ||
|
|
||
| </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,253 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| font-family: "Source sans 3", sans-serif; | ||
| } | ||
|
|
||
| body { | ||
| background-color: rgb(63, 77, 102); | ||
| color: white; | ||
| display: flex; | ||
| flex-direction: column; | ||
| min-height: 100vh; | ||
| } | ||
|
|
||
| main { | ||
| flex-grow: 1; /*makes the main section takes up most space and keeps the footer at the bottom */ | ||
| } | ||
|
|
||
| header { | ||
| overflow-x: hidden; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
|
|
||
| .hero { | ||
| display: flex; | ||
| align-items: flex-start; | ||
| position: relative; | ||
| max-height: 100vh; | ||
| width: 100vw; | ||
| text-align: center; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| /* Video styling */ | ||
| .hero-video { | ||
| position: relative; | ||
| height: auto; | ||
| width: 100vw; | ||
| max-height: 100vh; | ||
| filter: brightness(65%); | ||
|
There was a problem hiding this comment. Embedding the filter: brightness attribute directly within the hero-video. A really clever move!! |
||
| object-fit: cover; | ||
| z-index: -1; | ||
| } | ||
|
|
||
|
|
||
| .hero-text { | ||
|
There was a problem hiding this comment. Nice placement of the hero text!! Looks really good! |
||
| box-sizing: border-box; | ||
| display: block; | ||
| position: absolute; | ||
| top: 70%; | ||
| left: 60%; | ||
| transform: translate(-50%, -50%); | ||
| color: white; | ||
| text-align: center; | ||
| padding: 0 15px; | ||
| } | ||
|
|
||
| header div h1 { | ||
| font-size: 50px; | ||
| } | ||
|
|
||
| header div h2 { | ||
| font-size: 30px; | ||
| } | ||
|
|
||
| /* Form section */ | ||
|
|
||
| h3 { | ||
| text-align: center; | ||
| margin-bottom: 20px; | ||
| font-size: 25px | ||
| } | ||
|
|
||
| .signup { | ||
| padding: 20px; | ||
| text-align: center; | ||
| background-color: rgb(63, 77, 102); | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .signup form { | ||
| max-width: 300px; | ||
| margin: auto; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| width: 100%; | ||
| padding-top: 10px; | ||
| } | ||
|
|
||
| .signup label { | ||
| display: flex; | ||
| align-items: center; | ||
| text-align: left; | ||
| width: 100%; | ||
| margin: 10px 0; | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| fieldset { | ||
| color: white; | ||
| margin: 0; | ||
| padding: 10px 30px; | ||
| border: none; | ||
| box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); | ||
| border-radius: 5px; | ||
| background-color: rgb(91, 107, 135); | ||
| } | ||
|
|
||
| .signup input[type="name"], | ||
| .signup input[type="company"], | ||
| .signup input[type="email"] { | ||
|
|
||
| padding: 12px; | ||
| margin-left: 5px; | ||
| border: 1px solid rgb(160, 176, 203); | ||
| width: 100%; | ||
| } | ||
|
|
||
| .signup input[type="checkbox"] { | ||
| accent-color: rgb(160, 176, 203); | ||
| border-radius: 5px; | ||
| width: 20px; | ||
| height: 20px; | ||
| padding: 12px; | ||
| margin: 5px; | ||
| font-size: 0.8rem; | ||
| color: white; | ||
|
|
||
| } | ||
|
|
||
| .signup button { | ||
| padding: 12px 24px; | ||
| background-color: #333; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 5px; | ||
| font-size: 1rem; | ||
| width: 100%; | ||
| height: auto; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .signup button:hover { | ||
| animation: bubble 0.4s ease-out; | ||
| } | ||
|
|
||
| @keyframes bubble { | ||
| 0% { | ||
| transform: scale(1); | ||
| } | ||
| 50% { | ||
| transform: scale(1.2); | ||
| } | ||
| 100% { | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| input { | ||
| width: 100%; | ||
| font-size: 15px; | ||
| padding-top: 10px; | ||
| padding-bottom: 10px; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
|
|
||
| button { | ||
|
There was a problem hiding this comment. this styled button might be redundant since you have a .signup button above. If unnecessary I would consider removing it. There was a problem hiding this comment. Thank you @Fannyhenriques for noticing! I didn´t notice this before that I had forgotten to remove the previous styling of the button. Now It is removed. |
||
| width: 100%; | ||
| padding: 10px; | ||
| font-size: 1rem; | ||
| color: white; | ||
| background-color: #333; | ||
| appearance: none; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .footer { | ||
| /* display: block; */ | ||
| background-color: rgb(63, 77, 102); | ||
| text-align: center; | ||
| position: absolute; | ||
| width: 100%; | ||
| margin-left: 10px; | ||
| bottom: 0; | ||
| } | ||
|
|
||
| .footer-logo img { | ||
| display: block; | ||
| max-width: 100%; | ||
| width: 150px; | ||
| height: auto; | ||
| } | ||
|
|
||
|
|
||
| /* Media Queries */ | ||
| /* Header font-size for different screen sizes */ | ||
|
|
||
| @media (min-width: 1024px) { | ||
|
|
||
| header div h1 { | ||
| font-size: 4.5rem; | ||
| } | ||
|
|
||
| header div h2 { | ||
| font-size: 2.5rem; | ||
|
|
||
| } | ||
|
|
||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| header div h1 { | ||
| font-size: 3.5rem; | ||
| } | ||
| header div h2 { | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| @media (max-width: 500px) { | ||
| header div h1 { | ||
| font-size: 2.5rem; | ||
| } | ||
|
|
||
| header div h2 { | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| @media (max-width: 480px) { | ||
| header div h1 { | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| header div h2 { | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 1rem; | ||
| } | ||
| } | ||
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.
Here is an extra
tag nested within the existing element in the signup section. You can remove this extra tag to avoid redundancy.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.
Thanks! Received the same input from Matilda as well, thanks for noticing! It is removed.