Skip to content
This repository was archived by the owner on Oct 2, 2024. It is now read-only.

London 9 Turing-FarnooshMoayeri-HTML/CSS-WEEK3 #211

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

London 9 Turing-FarnooshMoayeri-HTML/CSS-WEEK3 #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2205e27
update header
Farnooshmo Nov 11, 2022
a692fb5
complete HTML/CSS
Farnooshmo Nov 12, 2022
c54cae1
update lighthouse accessibility
Farnooshmo Nov 12, 2022
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 Form-Controls/img/T-shirt1.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.
129 changes: 103 additions & 26 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,105 @@
<!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>

</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>

</html>
<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 class="header">
<div class="avatar"></div>
<h1>Product Pick</h1>
</header>

<section class="main">
<h2 class="form_text">
To order your T-shirt, please fill out the form!
</h2>
<form class="order_form">
<div class="fname">
<label for="fname"><div>First Name *</div></label>
<input id="fname" type="text" name="fname" minlength="2" required />
</div>
<div class="lname">
<label for="lname"><div>Last Name *</div></label>
<input id="lname" type="text" name="lname" minlength="3" required />
</div>
<div class="email">
<label for="email"><div>Email *</div></label>
<input id="input" type="email" pattern=".+@globex\.com" required />
</div>

<fieldset class="shirt_color">
<legend>Choose a color for your T-Shirt:*</legend>

<input
class="black"
id="black"
type="radio"
name="color"
value="black"
/>
<label for="black">Black</label>

<input
class="white"
id="white"
type="radio"
name="color"
value="white"
/>
<label for="white">White</label>

<input
class="yellow"
id="yellow"
type="radio"
name="color"
value="yellow"
/>
<label for="yellow">Yellow</label>
</fieldset>

<div class="shirt_size">
<label for="size"> Choose T-shirt size:*</label>
<select id="size" name="size">
<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 class="wrapper">
<div class="delivery_date">
<label for="delivery"><div>Delivery date:</div></label>
<input
type="date"
id="delivery"
name="delivery-date"
value="2022-12-11"
min="2022-11-11"
max="2023-12-11"
required
/>
</div>

<button class="btn_order">Order</button>
</div>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>
</section>
<!-- <span></span> -->
<footer class="footer">
<!-- change to your name-->
<h2>By Farnoosh Moayeri</h2>
</footer>
</body>
</html>
116 changes: 116 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,116 @@
body {
margin-top: 20px;
margin-left: 40px;
margin-right: 40px;
border: 3px solid silver;
}

/* header */
h1 {
margin-top: 1em;
margin-left: -1em;
padding-left: 1em;
}
.header {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 120px 80px;
margin: 10px;
}

.avatar {
grid-column: 1/-1;
background-image: url(img/T-shirt1.png);
background-repeat: repeat-x;
border-bottom: 4px solid #1d556f;
}

/* main */

.main {
width: 50%;
margin-left: -0.1em;
margin-bottom: 3.5em;
padding-left: 0.5em;
border: 5px solid rgb(158, 153, 153);
box-shadow: 10px 5px 5px silver;
background-color: #aedadd;
}

.main:hover {
cursor: pointer;
}

/* form */

input:focus {
background-color: #ffc60b;
}

.form_text {
font-size: medium;
padding-left: 0em;
line-height: 2em;
}

.order_form {
line-height: 1.5em;
margin-left: 0em;
}

.email {
padding-bottom: 1em;
}

.shirt_color {
border: none;
padding: 0;
margin: 0;
margin-bottom: 1em;
line-height: 2em;
}

.shirt_size {
margin-bottom: 1em;
}

.delivery_date {
margin-bottom: 1em;
}

.btn_order {
padding: 1.1em 4em;
margin-right: 14em;
margin-top: 0.1em;
margin-bottom: 1em;
font-weight: 700;
background-color: #1d556f;
border-radius: 3px;
border-color: silver;
border-bottom: 2px solid black;
color: whitesmoke;
}

.btn_order:hover {
background-color: whitesmoke;
color: #1d556f;
border: 2px solid black;
}

.wrapper {
display: flex;
justify-content: space-between;
margin-bottom: 2em;
}
/* footer */
/* span {
display: block;
width: 100%;
height: 1em;
background-color: rgb(134, 132, 136);
} */
.footer {
text-align: center;
font-size: 6px;
font-weight: light;
}