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

London_10-Saliha-Popal/HTML-CSS-Challenges#255

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

London_10-Saliha-Popal/HTML-CSS-Challenges #255

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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5503
}

@migmowmigmowJun 9, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

In general, VS Code settings are not typically pushed to remote.

Binary file addedForm-Controls/black T-shirt.jpeg
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 addedForm-Controls/blue T-shirt.jpeg
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.
202 changes: 199 additions & 3 deletions Form-Controls/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,19 +10,215 @@
</head>
<body>
<header>
<h1>Selling T-Shirt</h1>
<br>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
<hr>
<form action="" method="Git" enctype="multipart/form-data">

<div>
Customer Full Details:
</div>
<br>
<div>
<label for="name">Full_Name*
</label>
<input type="name" name="name" id="name" placeholder="Full-Name" required="true">
<br><br>

<div>
<label for="phone-number">Phone_Number*</label>
<input type="text"
name="text" id="phone-number" placeholder="Phone Number" required>
</div>
<br>

<div>
<label for="email">Email_Address</label>
<input type="email" name="email" id="email" placeholder="example@example.com" required>
</div>
<br>
<hr>
<br>
<div>
<div>
Delivery Address:
</div>
<br>
<div>
<label for="delivery address">Street Address</label>
<input type="text" name="delivery address" id="delivery address" placeholder="Street Address" required>
</div>

<br>
<div>
<label for="delivery address2">Street Address Line2</label>
<input type="text" name="Street Address Line2" id="delivery address2" placeholder="Street Address Line2" required>
</div>
<br>

<div>
<label for="City">City</label>
<input type="text" name="City" id="City" placeholder="city" required>
</div>
<br>
<div>
<label for="State / Province">State / Province</label>
<input type="text" name="State / Province" id="State / Province" placeholder="State / Province" required>
</div>
<br>
<div>
<label for="Postal/Zip Code">Postal / Zip Code</label>
<input type="text" name="Postal / Zip Code" id="Postal/Zip Code" placeholder="Postal / Zip Code" required>
<div>

<br>
<hr>
<br>
<div>
Order Date:
</div>
<br>
<div>
<label for="Date"> Date</label>
<input type="Date" name=" Date" id="Date" placeholder="Date" required>
</div>

<br>
<hr>
<br>
<div>
Delivery Types:
</div>
<br>
<div>
<input type="Radio" name="Delivery Type1" id="H-D" value="H-D" required>
<label for="H-D">Home Delivery*</label>
</div>

<div>
<input type="Radio" name="Delivery Type2" id="Pick-up" value="pick-up" required>
<label for="Pick-up">Pick-up*</label>
</div>

<hr> <br>

<div>
Pre Order T-Shirt:
<div>
<br>
<div class="white">
<img src="./white T-shirt.jpeg" alt="white T-Shirt">
</div>
<div>
<input type="checkbox" name="White£9.99" id="White£9.99">
<label for="White£9.99">White £9.99</label>
</div>
<div>
<label for="Quantity1">Quantity </label>
<input type="Number" name="Quantity" id="Quantity1" min="1" max="100" step="1">
</div>
<div>
<label for="Size1">Size</label>
<select name="Size1" id="Size1">
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="LX">LX</option>
<option value="XXL">XXL</option>
</select>
</div>
<br>
<br>
<div class="black">
<img src="./black T-shirt.jpeg" alt="Black T-Shirt">
</div>
<div>
<input type="checkbox" name="Black £9.99" id="Black£9.99">
<label for="Black£9.99"> Black £9.99</label>
</div>
<div>
<label for="Quantity2">Quantity</label>
<input type="Number" name="Quantity" id="Quantity2" min="1" max="100" step="1">
</div>
<div>
<label for="T-Shirt">T-Shirt</label>
<select name="T-Shirt" id="T-Shirt">
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="LX">LX</option>
<option value="XXL">XXL</option>
</select>
</div>
<br>
<br>
<div class="blue">
<img src="./blue T-shirt.jpeg" alt="Blue T-Shirt">
</div>
<div>
<input type="checkbox" name="2B Blue £9.99" id="Blue£9.99">
<label for="Blue£9.99"> blue £9.99</label>
</div>
<div>
<label for="Quantity3">Quantity</label>
<input type="Number" name="Quantity" id="Quantity3" min="1" max="100" step="1">
</div>
<div>
<label for="T-Shirt2">T-Shirt</label>
<select name="T-Shirt2" id="T-Shirt2">
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="LX">LX</option>
<option value="XXL">XXL</option>
</select>
</div>
</div>
<hr><br>
<div>
Payment Method:
</div>
<div>
<input type="radio" name="Credit Card" id="Credit Card" required>
<label for="Credit Card">Credit Card</label>
</div>

<div>
<input type="radio" name="PayPal" id="PayPal" required>
<label for="PayPal">PayPal</label>
</div>

<br>
<div>
<label for="bio">Note/ Special instruction</label>
<div>
<textarea name="bio" id="bio" cols="30" rows="10">
</textarea>
</div>
</div>
<br>
<div id="button">
<button class="btn1">Submit</button>
<button class="btn2">Reset</button>
</div>
</form>

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

</html>
46 changes: 46 additions & 0 deletions Form-Controls/styles.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
html, body{
background-color: #ffeeea;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

#button{
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
justify-content: space-evenly;
margin-right: 1.5rem;

}
.btn1{

@migmowmigmowJun 9, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Choose names that accurately describe the purpose or content of the element. This makes it easier for others (and your future self) to understand the code. I don't know which btn you mean by btn1 for example.

background-color: teal;
padding: 10px 32px;
border-radius: 4px;
border-style: none;
color: white;
}
.btn2{
background-color: teal;
padding: 10px 32px;

@migmowmigmowJun 9, 2023•
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You can use relative font sizes (such as em, rem, or percentages) instead of fixed pixel values to make your CSS code responsive.

border-radius: 4px;
border-style: none;
color: white;
}

.btn1:hover{
background-color: cadetblue;
}

.btn2:hover{
background-color: cadetblue;
}


h1{
color: teal;
font-weight: lighter;
}

Binary file addedForm-Controls/white T-shirt.jpeg
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.
5 changes: 4 additions & 1 deletion Two-Truths-One-Lie/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,4 +21,7 @@ <h1>Two Truths, One Lie</h1>
<h3>By YOUR NAMES HERE</h3>
</footer>
</body>
</html>
</html>