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

London-10-Abubakar-Meigag-HTML-CSS-Challenges-Form #239

Open
Abubakar-Meigag wants to merge 4 commits into
base: main
Choose a base branch
from
Open

London-10-Abubakar-Meigag-HTML-CSS-Challenges-Form #239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3f222fc
form
Abubakar-Meigag Feb 19, 2023
faf2f22
edit footer
Abubakar-Meigag Feb 19, 2023
1edb61d
review edie it
Abubakar-Meigag Mar 23, 2023
d460646
review fix lighthouse
Abubakar-Meigag Mar 23, 2023
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.
60 changes: 55 additions & 5 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,69 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
<h1>Product Pick</h1>
<h2>T-shirts</h2>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>
<form>

<div class="form-box">
<label id="name-lebel">Name </label><input type="text" id="name" name="name" placeholder="Enter your Name" required>
<label id="email-lebel">Email </label><input type="email=" name="email" placeholder="Enter your Email" required>
</div>

<div class="t-shirt">
<h3>T-shirt details</h3>
<label id="regular-lebel" for="regular"><input type="radio" name="details" id="regular">Regular T-shirt</label>
<label id="long-lebel" for="long"><input type="radio" name="details" id="long-sleeve">Long sleeve T-shirt</label>
</div>

<div class="color">
<h3>T-shirt Color</h3>
<div>
<label>
<input type="radio" value="red" name="choose"> Red</label>
</div>
<div>
<label id="yellow">
<input type="radio" value="yellow" name="choose">Yellow</label>
</div>
<div>
<label id="blue">
<input type="radio" value="blue" name="choose">Blue</label>
</div>
<div>
<label id="black">
<input type="radio" value="black" name="choose">Black</label>
</div>
</div>

<div class="size">
<h3>T-shirt Size</h3>
<select name="choose-dropdown" id="dropdown">
<option value="">Select an option</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 class="hero">
<h3>Deliver Option</h3>
<label id="delivery-lebel" for="delivery"><input type="radio" name="delivery" id="delivery">Delivery</label>
<label id="collect-lebel" for="collect"><input type="radio" name="delivery" id="collect">Collected from the
store</label>
</div>
</form>

</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<em> &copy; By Abubakar-Meigag </em>
</footer>
</body>

Expand Down
113 changes: 113 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,113 @@
:root{
--dark : #293241;
--orang: #eb9681;
--sky: #e0fbfc;
--light: #98c1d9;
--gray: #143764;
--white: #fff;
--balck: #000;
}

body{
background-color: var(--gray);
}
h1{
color: var(--orang);
}
h3{
color: var(--light);
}
h2{
color: var(--white);
}

header{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
header h2{
padding-top: 3px;
}

.form-box{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: var(--sky);
}

.form-box label{
padding: 8px;
}
.t-shirt{
display: flex;
align-items: center;
justify-content: center;
padding-top: 10px;
flex-direction: column;
color: var(--sky);
}
.t-shirt > label{
padding-top: 5px;
}
.t-shirt > label > input{
padding: 8px;
}
.color > h3{
display: flex;
align-items: center;
justify-content: center;
padding-top: 5px;
}
.color {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 10px;
}

.color>div>label {
padding-top: 5px;
color: var(--sky);
}
.size{
display: flex;
align-items: center;
justify-content: center;
padding-top: 5px;
flex-direction: column;
color: var(--sky);
}
.hero{
margin: 0;
padding: 0;
}
.hero h3{
display: flex;
align-items: center;
justify-content: center;
}
.hero > label{
display: flex;
align-items: center;
justify-content: center;
padding-top: 5px;
flex-direction: row;
color: var(--sky);
}

footer{
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
margin-top: 25px;
}
footer > em{
font-size: 1.4rem;
color:var(--orang);
}