diff --git a/README.md b/README.md index d59a798a..5d8a89fa 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ # Business Site -Replace this readme with your own information about your project. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +The task was to create a business website with the primary goal of building a signup form that includes at least three different input types. I used a submit button, text fields (for name and email), and a checkbox input. Additionally, we were required to have a hero section. I decided to focus on the signup form and aimed to give the website a slightly fashionable look and feel. ## 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 encountered an issue where the backdrop filter blur worked in the browser's developer tools but not on an actual mobile device. I resolved this by adding -webkit-backdrop-filter: blur(10px); to ensure it works properly across all browsers. ## 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://jonas-busines-site.netlify.app/ diff --git a/code/elizeu.jpg b/code/elizeu.jpg new file mode 100644 index 00000000..0ee84823 Binary files /dev/null and b/code/elizeu.jpg differ diff --git a/code/index.html b/code/index.html index 85fe8e53..262ee90a 100644 --- a/code/index.html +++ b/code/index.html @@ -1,17 +1,69 @@ - - - - Business Site - - - -

Business name 🌻

- + + + + Sign up page + + + + + - + - - +
+
+ +
+ +
+ +
+

Sign up

+
+ +
+ + +
+ +
+ + +
+ +
Optional: Preferred fashion
+
+ + + + + + + + +
+
+ By subscribing to our newsletter you agree on our terms and condtions. Read more here. +
+ + +
+
+ + + + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 529ed755..82438696 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,162 @@ -/* 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: ubuntu; +} + +/* navigation style start here*/ + +header { + + text-align: center; + position: fixed; + z-index: 999; + width: 100%; + top: 0; + left: 0; + padding: 10px 0; + box-shadow: 5 2px 5px rgba(0, 0, 0, 0.1); +} + +nav { + display: flex; + justify-content: center; + align-items: center; + background: transparent; +} + +nav ul { + display: flex; + flex-direction: row; + justify-content: center; + margin: 0; + padding: 0; + list-style: none; +} + +nav li { + margin: 0 1em; +} + +nav a { + color: white; + + font-size: 15px; + text-transform: uppercase; +} + +nav a:hover { + color: rgb(16, 13, 13); + background-color: rgb(255, 255, 255); + padding: 5px 10px; + border-radius: 5px; +} + + +/* form "card" style start here */ + body { - background: blue; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: url("elizeu.jpg") no-repeat; + background-size: cover; + background-position: center; +} + +main { + width: 420px; + background: transparent; + border: 2px solid rgba(255, 255, 255, .2); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(10px); + box-shadow: 0 0 10px rgba(0, 0, 0, .2); + color: #fff; + border-radius: 10px; + padding: 25px 40px; +} + +main h1 { + font-size: 30px; + text-align: center; +} + +main .form { + width: 100%; + height: 50px; + + margin: 30px 0; +} + +main button { + width: 100%; + height: 45px; + background: white; + border: none; + outline: none; + border-radius: 40px; + box-shadow: 0 0 10px rgba (0, 0, 0, .1); + cursor: pointer; + font-size: 16px; + color: #333; + font-weight: 500; + margin-top: 50px; +} + +.terms { + font-size: 12px; + text-align: center; +} + +.terms a { + color: white; +} + +.form input { + width: 100%; + height: 100%; + background: transparent; + border: none; + outline: none; + border: 2px solid rgba(255, 255, 255, .2); + border-radius: 40px; + font-size: 16px; + color: white; + padding: 20px 45px 20px 20px; + +} + +.checkbox-group { + display: flex; + justify-content: center; + gap: 10px; + margin-bottom: 20px; + +} + +.optional { + display: flex; + justify-content: center; + font-size: 12px; + padding-bottom: 15px; + +} + +/* Media query for screens between 320px and 552px */ +@media (min-width: 320px) and (max-width: 522px) { + main { + width: 90%; + margin-top: 40px; + + } +} + +/* Media query for screens between 522px and 668px */ +@media (min-width: 522px) and (max-width: 668px) { + main { + margin-top: 40px; + + } } \ No newline at end of file