diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..f673a71b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/README.md b/README.md index d59a798a..d6bf2041 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,16 @@ # Business Site -Replace this readme with your own information about your project. +My business site with a sign up form for an upcoming event. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +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 -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +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 -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://tradewavefintechforum.netlify.app/ \ No newline at end of file diff --git a/code/assets/TRADEWAVE.png b/code/assets/TRADEWAVE.png new file mode 100644 index 00000000..d591e859 Binary files /dev/null and b/code/assets/TRADEWAVE.png differ diff --git a/code/assets/business.mp4 b/code/assets/business.mp4 new file mode 100644 index 00000000..9966bc42 Binary files /dev/null and b/code/assets/business.mp4 differ diff --git a/code/index.html b/code/index.html index 85fe8e53..ef0e6c54 100644 --- a/code/index.html +++ b/code/index.html @@ -1,17 +1,53 @@ - - - - Business Site - - - -

Business name 🌻

- + + + + TradeWave + + - + +
+
+ +
+

TradeWave

+

Annual Fintech Forum

+
+
- - + + + +
+
+

Sign up for more information

+
+ + + + + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 529ed755..245ec4b8 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,248 @@ -/* After you've linked the CSS file in the HTML, -this should turn the background blue ;) */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Source sans 3", sans-serif; +} + body { - background: blue; + 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 */ + overflow-x: hidden; +} + + + +.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%); + object-fit: cover; + z-index: -1; +} + + +.hero-text { + box-sizing: border-box; + display: block; + position: absolute; + top: 70%; + left: 60%; + transform: translate(-50%, -50%); + color: white; + text-align: center; + padding: 0 15px; +} + +div h1 { + font-size: 50px; +} + +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(126, 141, 163); +} + +.signup input[type="text"], +.signup input[type="text"], +.signup input[type="text"] { + + 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; + cursor: pointer; +} + +.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; +} + +.footer { + /* display: block; */ + background-color: rgb(63, 77, 102); + text-align: center; + position: absolute; + width: 100%; + margin-left: 10px; + bottom: 0; + overflow-x: hidden; +} + +.footer-logo img { + display: block; + max-width: 100%; + width: 150px; + height: auto; + padding-top: 20px; +} + + p { + padding-left: 20px; + padding-bottom: 20px; + margin-right: 10px; +} + + +/* Media Queries */ +/* Header font-size for different screen sizes */ + +@media (min-width: 1024px) { + + div h1 { + font-size: 4.5rem; + } + + div h2 { + font-size: 2.5rem; + + } + +} + +@media (max-width: 768px) { + + div h1 { + font-size: 3.5rem; + } + div h2 { + font-size: 1.5rem; + } + +} + +@media (max-width: 500px) { + + div h1 { + font-size: 2.5rem; + } + + div h2 { + font-size: 1.5rem; + } + +} + +@media (max-width: 480px) { + + div h1 { + font-size: 1.5rem; + } + + div h2 { + font-size: 1rem; + } + + h3 { + font-size: 1rem; + } } \ No newline at end of file