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

Jump to bottom

CYF-ITP - South Africa |Azharuddin Meyer | Module-User Focused Data-Form Controls | WEEK2 | #320

Open
wants to merge 15 commits into
base: main
Choose a base branch
from
Open

CYF-ITP - South Africa |Azharuddin Meyer | Module-User Focused Data-Form Controls | WEEK2 | #320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1a2efc9
fixing html closing tag
azharuddinmeyer Oct 8, 2024
d3a6585
adding article content
azharuddinmeyer Oct 8, 2024
ff0a999
adding sections
azharuddinmeyer Oct 8, 2024
884ae3e
final changes
azharuddinmeyer Oct 8, 2024
33b6f24
adding images and restructuring layout
azharuddinmeyer Oct 9, 2024
9c05cdb
added buttons and contrast
azharuddinmeyer Oct 10, 2024
ea101ce
changing footer
azharuddinmeyer Oct 14, 2024
70c4ddb
added structure and css
azharuddinmeyer Oct 16, 2024
f57d34c
added colors and effects
azharuddinmeyer Oct 21, 2024
b417a4f
reviewed my code and fixed html and css
azharuddinmeyer Nov 8, 2024
83c5a82
removed wireframe folder
azharuddinmeyer Nov 10, 2024
9dabd3a
reviewed changes
azharuddinmeyer Nov 10, 2024
15120bc
added a pattern attribute to my form and fixed some syntax errors
azharuddinmeyer Nov 12, 2024
1c99246
used the css validator to remove css errors
azharuddinmeyer Nov 16, 2024
11729f7
changed footer
azharuddinmeyer Nov 20, 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
121 changes: 97 additions & 24 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My form exercise</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<meta
name="description"
content="Learning how to make html forms using css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.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=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
</head>

</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>
<body>
<div class="container">
Copy link

Choose a reason for hiding this comment

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

Hi Azharuddin, is there another element that can be used for semantic reasons?
We also want to think about accessibility when it comes to using elements.

Copy link
Author

Choose a reason for hiding this comment

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

Hi Ryno, I fixed my footer using an address element.

<h1>Product Pick</h1>

</html>
<main>
<form class="form">
<div class="user-input">
<div class="name">
<label for="name">Name</label>
<input
type="text"
name="name"
id="name"
minlength="3"
maxlength="30"
pattern="^[A-Za-z\s'-]{2,50}$"
placeholder="Username"
required
/>
</div>
<div>
<label for="email">Email</label>
<input
type="email"
name="email"
id="email"
placeholder="Email address..."
required
/>
</div>

<div>
<label for="color">Choose a color:</label>
<select id="color" name="color" required>
<option value="" disabled selected>Select a color</option>
<option value="orange">Orange</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>

<div>
<label for="size">Choose a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected>Select a size</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
</div>

<div>
<label for="date">Choose a delivery date</label>
<input
type="date"
min="2024-10-19"
max="2024-11-16"
name="date"
id="date"
required
/>
</div>
</div>

<div class="btn">
<button class="submit">Submit</button>
</div>
</form>
</main>
<footer>
<address>
<p>By Azharuddin Meyer</p>
<p>Email: [email protected]</p>
</address>
</footer>
</div>
</body>
</html>
135 changes: 135 additions & 0 deletions Form-Controls/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
body {
display: flex;
justify-content: center;

text-align: center;
margin: 14rem;
padding: 8rem;

font-family: "Work Sans", sans-serif;

font-style: normal;
font-size: 1rem;
background-image: url("https://images.unsplash.com/photo-1563291074-2bf8677ac0e5?q=80&w=1907&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}

html,
body {
height: 100%;
margin: 0;
}

form {
min-height: 40rem;
padding: 2rem;
text-align: left;
font-weight: 300;
margin: 2rem;
background: #ffffff;
max-width: 600px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
font-size: 18px;
}

.user-input {
margin: 1.5rem 0;
border-radius: 4px;
outline: none;
width: 100%;
max-width: 400px;

line-height: 5.5;
}

.submit {
padding: 16px;

border-radius: 5px;
color: white;
background-color: #c9184a;
border: none;
font-weight: 800;
box-shadow: #c9184a 0 2px 8px 0;

text-transform: uppercase;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

.submit:hover {
cursor: pointer;
animation-name: bounce;
-moz-animation-name: bounce;
}

.footer {
position: static;
display: block;
margin: auto;
font-size: 1rem;
padding: 10rem 1rem;
}

input:focus {
border-color: #c9184a;
box-shadow: #c9184a 0 2px 8px 0;
}
input {
padding: 6px;
border-radius: 3px;
border: 1px solid black;
margin: 2rem;
}

@media (max-width: 480px) {
header {
font-size: 1.5em;
text-align: center;
}

.btn {
text-align: center;
}
.submit {
display: block;
margin: auto;
}

footer {
padding: 8px;
font-size: 0.8em;
}
}

@keyframes bounce {
0%,
100%,
20%,
50%,
80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
}
42 changes: 0 additions & 42 deletions Wireframe/README.md
View file
Open in desktop

This file was deleted.

Empty file removed Wireframe/css/style.css
View file
Open in desktop
Empty file.
13 changes: 0 additions & 13 deletions Wireframe/index.html
View file
Open in desktop

This file was deleted.

Binary file removed Wireframe/wireframe.png
View file
Open in desktop
Binary file not shown.