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

Project Business site #363

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Project Business site #363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added 3633003-hd_1906_1080_30fps.mp4
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

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

Overall a beautiful page with an amazing hero video and color scheme. It works perfectly both the form and adapting to different sizes.

It is clean and elegant. The code is clean and well structured. The style.css could use some more comments.
Great work Helene!

Binary file not shown.
13 changes: 8 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
# 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.
A project consisting of building a business site with a form and a hero section with a video or image.

## 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 from forms that I like and tried to imitate them as much as possible.

I ran into problems like different types of inputs had different styles by default which made me have to work more with my css and classify to be able to get different inputs as similar as possible.

If I had more time I would have added a footer and worked more on the responsive design for smaller screens

## 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://lustrous-crisp-6b8347.netlify.app

79 changes: 79 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Gleaming Gemstones</title>

</head>

<body>
<!--hero section-->
<div class="hero-video">
<video autoplay muted loop>
<source src="3633003-hd_1906_1080_30fps.mp4" type="video/mp4">
Din webbläsare stödjer inte HTML5 video.
Copy link

Choose a reason for hiding this comment

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

code is in general clear and well structured, but could be good to be consistent in english

</video>

<!--text in hero video-->
<div class="hero-content">
<h1>Gleaming <br>Gemstones</h1>
</div>

<!--navigation menu-->
<div class="navbar">
<ul>
<a href="#e-shop">E-shop</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</ul>
</div>

<!--text section-->
</div>
<h2>Welcome to the World of Gleaming Gemstones</h2>
<p>Discover a universe of brilliance and elegance. Subscribe to our newsletter and be the first to explore our
dazzling new collections, enjoy exclusive offers, and get expert tips on how to make your gems shine even
brighter. Plus, as a thank you, we’ll gift you a 10% discount on your first purchase when you sign up!
</p>

<!--form-->
<form action="https://httpbin.org/anything" method="post">
<h3>Sign me up!</h3>

<!--first name-->
<label>
<input type="text" id="first name" name="first name" placeholder="First name" required><br><br>
</label>

<!--last name-->
<label>
<input type="text" id="last name" name=" last name" placeholder="Last name" required><br><br>
</label>

<!-- email -->
<label>
<input type="email" id="email" name="email" placeholder="E-mail" required><br><br>
</label>

<!-- date of birth -->
Copy link

Choose a reason for hiding this comment

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

smart with date of birth! could be good also to have a required on date of birth as well

<label class="date-label">
<span>Date of birth</span>
<input type="date" id="dob" name="dob" placeholder="Date of birth">
</label><br><br>

<!-- checkbox for terms and conditions -->
<label class="checkbox">
<input type="checkbox" id="terms" name="terms" required>
I agree to the terms and conditions</a>
</label> <br> <br>


<!--submit button-->
<button type="submit">SUBMIT</button>
</form>
</body>

</html>
290 changes: 290 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,290 @@
body {
background-color: whitesmoke;
box-sizing: border-box;
}

/*hero section */
h1 {
font-family: Lato, Arial, sans-serif;
text-transform: uppercase;
font-size: 1.5rem;
margin-left: 20px;
}

.hero-video {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
margin-bottom: 30px;
}

.hero-video video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
transform: translate(-50%, -50%);
object-fit: cover;
}

/*navigation menu */

.navbar {
Copy link

Choose a reason for hiding this comment

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

Very clean and stylish navbar! Want to use something similar in my next :)

display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-family: Lato, Arial, sans-serif;
word-spacing: 10px;
padding: 10px 0;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: auto;
}

/*links */

a {
color: black;
text-decoration: none;
}


/*text section */

h2 {
font-family: Lato, Arial, sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 1.25rem;
margin: 10px 0;
}

p {
font-family: Baskerville, Times, serif;
font-size: 1.1 rem;
text-align: center;
margin: 80px;
margin-top: 20px;
margin-bottom: 40px;
}

/*heading inside form */

h3 {
font-family: Lato, Arial, sans-serif;
text-transform: uppercase;
font-size: 1rem;
margin: 10px 0;
}

/*form */

form {
font-family: Baskerville, Times, serif;
border: 1px solid grey;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 10px;
margin: 10px auto;
margin-bottom: 0px;
max-width: 90%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

/* placeholders in inputs */

::placeholder {
text-align: left;
font-family: Baskerville, Times, serif;
color: black;
}

/*input fields in form */

input {
width: 100%;
max-width: 280px;
font-size: 0.875rem;
padding: 8px;
border: none;
border-bottom: 1px solid black;
background-color: whitesmoke;
margin: 5px 0;
}

/*date of birth input */

.date-label {
width: 100%;
max-width: 200px;
font-family: Baskerville, Times, serif;
margin: 5px 0;
}

.date-label input[type="date"] {
width: 100%;
font-size: 0.875rem;
border: none;
border-bottom: 1px solid black;
background-color: whitesmoke;
margin-top: 5px;
}

/*terms and conditions */

.checkbox {
display: inline-flex;
align-items: center;
font-family: Baskerville, Times, serif;
white-space: nowrap;
margin: 5px 0;
}

/*sibmit button */

button {
background-color: black;
color: white;
border: 1px solid white;
width: 100%;
max-width: 150px;
font-size: 0.875rem;
font-weight: bold;
padding: 8px;
margin: 10px 0;
cursor: pointer;
}

button:hover {
background-color: white;
color: black;
border: 1px solid black;
}



/* Responsive design */
Copy link

Choose a reason for hiding this comment

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

everything looks great and responsive except for the box containing Sign up. Could look great if it stays as a smaller rectangle on wider screen. It looks great on a phone though


@media (max-width: 1024px) {
h1 {
font-size: 1.75rem;
}

.navbar {
padding: 10px 15px;
word-spacing: 5px;
}

input,
.date-label input[type="date"],
button {
width: 80%;
}
}

/* Responsive design for tablets */


@media (max-width: 768px) {
h1 {
font-size: 1.5rem;
}

.navbar {
padding: 10px 10px;
word-spacing: 2px;
}

input,
.date-label input[type="date"],
button {
width: 70%;
}

form {
padding: 15px;
margin: 15px auto;
}
}

/* Responsive design for smartphones 667px */


@media (max-width: 667px) {
h1 {
font-size: 1rem;
margin: 5px 0;
text-align: center;
}

.navbar {
display: flex;
flex-direction: column;
position: relative;
text-align: center;
}

p {
display: flex;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}

input,
.date-label input[type="date"],
button {
width: 90%;
}

form {
padding: 10px;
margin: 10px auto;
}
}

/* Responsive design for smartphones 320px */

@media (max-width: 320px) {
h1 {
font-size: 1rem;
margin: 5px 0;
text-align: center;
}

.navbar {
display: flex;
flex-direction: column;
position: relative;
text-align: center;
}


p {
display: flex;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}

input,
.date-label input[type="date"],
button {
width: 95%;
}

form {
padding: 8px;
margin: 5px auto;
}
}