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

London9 - Andriana Saffo -HTML/CSS -Form controls and zoo-css challenges- Week 3 #182

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

London9 - Andriana Saffo -HTML/CSS -Form controls and zoo-css challenges- Week 3 #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f6e16c3
Commented out information
AndrianaOS Oct 29, 2022
bd7ecad
Included form information
AndrianaOS Oct 29, 2022
4757800
form information input
AndrianaOS Nov 2, 2022
3491ea2
Updated HTML and CSS
AndrianaOS Nov 3, 2022
2e56409
HTML and CSS for zoo-css-challenge
AndrianaOS Nov 4, 2022
1f451d3
Changed CSS styles
AndrianaOS Nov 4, 2022
6842265
HTML and CSS updated
AndrianaOS Nov 4, 2022
01e18e2
HTML class added and CSS added
AndrianaOS Nov 6, 2022
a1dfc25
Update date
AndrianaOS Nov 6, 2022
d516916
2 truths 1 lie
AndrianaOS Nov 6, 2022
67172ea
Articles to group info and CSS to style
AndrianaOS Nov 6, 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 .DS_Store
View file
Open in desktop
Binary file not shown.
127 changes: 101 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,103 @@
<!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>
<h1>Product Pick</h1>
</header>
<main>
<form class="shirtform">
<!-- write your html here-->
<!-- try writing out the requirements first-->
<!--We are selling t-shirts. Write a form to collect the following data:

Our customers already have accounts, so we know their addresses and charging details already. We don't need to collect that data. We want to confirm they are the right person, then get them to choose a colour and then pick a delivery date.

Writing that out as a series of questions to ask yourself:

What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.
What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?
What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL
When do they want the t-shirt to be delivered? I must collect a date and make sure that date is in the next four weeks. How will I do this? How will I make sure there are no mistakes about the date?-->

<label for="first">Please enter your first name*</label>
<input
type="text"
name="first-name"
id="first"
placeholder="Enter your first name"
minlength="2"
maxlength="20"
required
/>

<label for="last">Please enter your last name*</label>
<input
type="text"
name="last-name"
id="last"
placeholder="Enter your last name"
minlength="2"
maxlength="20"
required
/>

<label for="email">Please enter your email*</label>
<input type="email" id="email" placeholder="Email address" required />

<fieldset class="colour">
<legend>Choose a shirt colour*</legend>

<label for="black">Black</label>
<input
type="radio"
id="black"
value="black"
name="shirt colour"
checked
/>

<label for="white">White</label>
<input type="radio" id="white" value="white" name="shirt colour" />

<label for="grey">Grey</label>
<input type="radio" id="grey" value="grey" name="shirt colour" />
</fieldset>

<label for="shirt-size">Choose a shirt size*</label>
<select id="shirt-size" name="shirt size" required>
<option value="xs" selected>X-Small</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
<option value="xl">X-Large</option>
<option value="xxl">XX-Large</option>
</select>

<label for="date">Choose a delivery date*</label>
<input
id="date"
type="date"
name="delivery date"
min="2022-11-03"
max="2022-12-01"
required
/>

<button>Submit</button>
</form>
</main>
<footer>
<p>Andriana Saffo</p>
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>
</html>
69 changes: 69 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,69 @@
body {
margin-top: 50px;
background-image: linear-gradient(pink, white);
display: flex;
flex-direction: column;
align-items: center;
}

h1 {
text-transform: uppercase;
}

.shirtform {
display: flex;
flex-direction: column;
width: 500px;
font-size: 25px;
}

.shirtform button {
align-self: center;
}

label,
fieldset {
margin-top: 10px;
accent-color: green;
}

input,
select {
margin-top: 2px;
padding: 5px;
}

button {
margin-top: 20px;
font-size: 20px;
width: fit-content;
padding: 10px;
border-radius: 10px;
background-color: blue;
color: white;
}

button:hover,
button:focus {
color: aqua;
background-color: green;
font-size: 20px;
font-weight: bold;
}

input:hover,
input:focus,
select:hover,
select:focus {
border: 7px solid green;
border-radius: 10px;
padding: 10px;
}

fieldset {
display: flex;
justify-content: space-evenly;
border: none;
padding: 0;
margin-left: 0;
}
74 changes: 52 additions & 22 deletions Two-Truths-One-Lie/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Our Grid Project</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Two Truths, One Lie</h1>
</header>
<main>
<!-- how will you mark up your media objects -->
</main>
<footer>
<h3>By YOUR NAMES HERE</h3>
</footer>
</body>
</html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Our Grid Project</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header>
<h1 class="title">Two Truths, One Lie</h1>
<h2 class="title2">Can you guess which statement is a lie</h2>
</header>
<main>
<!-- how will you mark up your media objects -->
<article class="img-text">
<div class="img-name">
<div class="image"></div>
<p class="name">Andriana Saffo</p>
</div>
<div class="truth-lie">
<ol>
<li>Im sassy</li>
<li>Im classy</li>
<li>Im bougie</li>
</ol>
</div>
</article>
<article class="img-text">
<div class="img-name">
<div class="image"></div>
<p class="name">Andriana Saffo</p>
</div>
<div class="truth-lie">
<ol>
<li>Im sassy</li>
<li>Im classy</li>
<li>Im bougie</li>
</ol>
</div>
</article>
</main>
<footer>
<h3>By YOUR NAMES HERE</h3>
</footer>
</body>
</html>
40 changes: 40 additions & 0 deletions Two-Truths-One-Lie/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,44 @@

body {
font: 100% "Poppins", sans-serif;
max-width: 360px;
}

/* STYLING FOR HEADER */

.title {
text-align: center;
}

.title2 {
text-align: center;
font-size: 12px;
}

/* STYLING FOR ARTICLES */

.img-text {
border: 2px pink solid;
padding: 5px;
margin-bottom: 20px;
}

.img-name {
display: flex;
justify-content: center;
}

.image {
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
}

.name {
margin: 20px;
}

.truth-lie {
border: 1px solid blue;
}
Loading