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

Gabriella Iofe: Project Business Site #378

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

Gabriella Iofe: Project Business Site #378

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
6f1f958
added a css file
gabster94 Aug 27, 2024
54a74a5
created the form and changed some class names and cleaned up the code…
gabster94 Aug 29, 2024
2fdc1f1
changed pictures, added a background img for the main, added blur and…
gabster94 Aug 30, 2024
cbb5ad3
added a footer
gabster94 Aug 30, 2024
1996eaf
wrote about the project and how I tackled it in the read.me file. Inc…
gabster94 Sep 1, 2024
3c29635
added a missing closing tag for the header
gabster94 Sep 4, 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
14 changes: 7 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Business Site
The assignment was to create a responsive business one-pager that included a form with a fieldset.
The code was asked to be written clean and with a clear semantic structure.

Replace this readme with your own information about your project.
I started by drawing out an example for my wished end result. Not knnowing exactly what I wanted, I created a simple draft with which I played around with until I found the looks I was happy with.

Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
Like in a previous project, I gave all "boxes" their borders and colors, so I could nore easily understand and see what was happening each time I did changes in my code. My browser was always open to that I could try out different thing, and follow each step.

## 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?
With more time I would have a video in my hero section, a menu and a footer that includes more information. I would also spend more time on creating a better looking hero section with a well designed logo (which I haven't figured out how to do yet).

## 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://flow-movement.netlify.app/
Binary file added code/assets/bouquet.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.
Binary file added code/assets/color-smoke.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.
Binary file added code/assets/dancer-bw.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.
Binary file added code/assets/flow-movement-logo.png
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.
Binary file added code/assets/modern-dancer-bw.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.
Binary file added code/assets/pink-smoke.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.
213 changes: 208 additions & 5 deletions code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,218 @@
<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! -->
<title>Flow Movement</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=Petit+Formal+Script&display=swap" rel="stylesheet">

<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=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<h1>Business name 🌻</h1>
<header>
Copy link
Contributor

Choose a reason for hiding this comment

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

Where is the closing tag? 👀

Copy link
Author

Choose a reason for hiding this comment

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

Oups! Fixed it!

<div class="hero">
<div class="hero-overlay">
<h1>Flow Movement</h1>
<h2> - with Gabriella</h2>
</div>
</div>
</header>

<main>

<!-- Headline for the form -->

<div class="form-header">
<h3>Create an account.</h3>
<h4>Let's get started with your 14 day free trial.</h4>
</div>


<!-- Signup form -->
Copy link

Choose a reason for hiding this comment

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

I noticed that you've used section comments like in your code, and I just wanted to say how awesome that is! These comments make the code so much easier to read.



<form action="http://httpbin.org/anything" method="post">
<fieldset class="form-fieldset">

<label class="fname">
<span>First name</span>
Copy link

Choose a reason for hiding this comment

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

Great job using <span> in instead of <div> on the inline elements.

<input
class="fill-out-form"
required type="text"
name="fname"
placeholder="First name">
</label>

<label class="lname">
<span>Last name</span>
<input
class="fill-out-form"
required type="text"
name="lname"
placeholder="Last name">
</label>

<label class="email">
Copy link

Choose a reason for hiding this comment

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

Work like a charm!

<span>Email adress</span>
<input
class="fill-out-form"
required type="email"
name="email-adress"
placeholder="Email address">
</label>

<label class="phone">
Copy link

Choose a reason for hiding this comment

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

I found the following to force the end-user to add digits in a field, and I believe it would work great in your code:

pattern="\d*" 
title="Please enter a valid phone number"

<span>Phone</span>
            <input 
            class="fill-out-form" 
            required
            type="tel" 
            name="phone" 
            placeholder="Phone">
            pattern="\d*" /*Digit Restriction: */
            title="Please enter a valid phone number" /*Validation Message*/
          </label>

<span>Phone</span>
<input
class="fill-out-form"
required
type="tel"
name="phone"
placeholder="Phone">
</label>

<label class="password">
<span>Password</span>
<input
class="fill-out-form"
required type="password"
name="password"
minlength="8"
placeholder="Password">
</label>

<label class="confirm-password">
<span>Confirm Password</span>
<input
class="fill-out-form"
required type="password"
name="confirm-password"
minlength="8"
placeholder="Confirm password">
</label>

<label class="country">
<span>Country</span>
<select type="text" name="country">
<option value="SE">Sweden</option>
<option value="SE">Norway</option>
<option value="SE">Finland</option>
<option value="SE">Denmark</option>
<option value="SE">Iceland</option>
</select>
</label>

</fieldset>



<!-- RADIOBOXES RADIOBOXES RADIOBOXES RADIOBOXES -->



<fieldset class="contact-method">
<div class="contact-method-container">
<legend>Please select your preferred contact method:</legend>

<div class="radio-button-container">

<div class="radio-button-box">
<input
type="radio"
id="contact-choice-1"
name="contact"
value="email"
checked />
<label for="contactChoice1">Email</label>
</div>

<div class="radio-button-box">
<input
type="radio"
id="contact-choice-2"
name="contact"
value="phone" />
<label for="contactChoice2">Phone</label>
</div>

<div class="radio-button-box">
<input
type="radio"
id="contact-choice-3"
name="contact"
value="mail" />
<label for="contactChoice3">Mail</label>
</div>

</div>
</div>
</fieldset>


<!-- RADIOBOXES END RADIOBOXES END -->








<!-- CHECKBOXES START CHECKBOXES START CHECKBOXES START -->


<fieldset class="agreement">

<div class="agreement-box">
<input
type="checkbox" id="terms"
name="terms" />
<label for="terms">I agree to the <a href="#">Terms</a> and <a href="#"> Privacy Policy.</a></label>
</div>

<div class="agreement-box">
<input
type="checkbox"
id="communication"
name="communication" />
<label for="communication">I agree to recieve communications.</label>
</div>

</fieldset>



<!-- CHECKBOXES END CHECKBOXES END CHECKBOXES END CHECKBOXES END CHECKBOXES END CHECKBOXES END -->


<button type="submit">Create account!</button>

</form>

<div class="existing-account">
<h4>Already have an account?<a href="#">Sign in now</a></h4>
</div>

</main>

<!-- video or image as a header is cool :) -->
<footer>
<div class="personal-info">

<img src="./assets/flow-movement-logo.png" alt="flow-movement-logo">
<div class="personal-info-links">
<i style="font-size:24px" class="fa">&#xf09b;</i>
<i style="font-size:24px" class="fa">&#xf08c;</i>
<i class="fa fa-copyright">Gabriella Iofe</i>
</div>

<!-- Signup form -->
</div>
</footer>

</body>
</html>
Loading