Skip to content
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.

Sign up for GitHub

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

Jonas business site #367

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Jonas business site #367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3fad56e
Started the project. Added Hero, headlines, sign-up- forms and paragr…
Jonash189 Aug 27, 2024
a05d63f
Form done. Starting on nav
Jonash189 Aug 28, 2024
91e6a87
Added media query for mobile
Jonash189 Aug 29, 2024
dc34745
Cleaning the code
Jonash189 Sep 1, 2024
9f0fc0f
The backdrop filter blur works well when you test it across differen…
Jonash189 Sep 1, 2024
98cd335
Added info to read me file
Jonash189 Sep 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⭐


## 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/
Binary file added code/elizeu.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 64 additions & 12 deletions code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Business Site</title>
<!-- dont forget to add a css file and link it here! -->
</head>
<body>
<h1>Business name 🌻</h1>

<!-- video or image as a header is cool :) -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign up page</title>
<link rel="stylesheet" href="style.css">
<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=DM+Serif+Text:ital@0;1&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
</head>

<!-- Signup form -->
<body>

</body>
</html>
<header>
<div class="container">
<nav>
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">Women</a></li>
<li> <a href="#">Men</a></li>
<li> <a href="#">Kids</a></li>
</li>
</ul>
</nav>
</div>

</header>

<main>
<h1>Sign up</h1>
<form action="https://httpbin.org/anything" method="POST">

<div class="form">
<label for="name">Name</label>
<input required id="name" type="text" name="name" />
</div>

<div class="form">
<label for="email">Email</label>
<input required id="email" type="text" name="email" />
</div>

<div class="optional">Optional: Preferred fashion</div>
<div class="checkbox-group">
<input type="checkbox" id="women" name="women" value="women">
<label for="women">Womens</label>

<input type="checkbox" id="men" name="men" value="men">
<label for="men">Mens</label>

<input type="checkbox" id="kid" name="kid" value="kid">
<label for="kid">Kids</label>
</div>
<div class="terms">
By subscribing to our newsletter you agree on our terms and condtions. Read more <a
href="http://google.com">here</a>.
</div>

<button type="submit" class="button">Sign up</button>
</form>
</main>
</body>


</html>
163 changes: 160 additions & 3 deletions code/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The first value here (for the horizontal shadow) doesn't have a unit. Should it say 5px?

}

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;

}
}