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

London10_Jan_Softa_HTML_CSS_Challenges #243

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

London10_Jan_Softa_HTML_CSS_Challenges #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
20eaeee
updated version
softacoder Jan 24, 2023
e73d2ea
Second version
softacoder Feb 15, 2023
b0f00cf
Third update
softacoder Feb 15, 2023
1077478
Update input boxes
softacoder Feb 15, 2023
bd8897a
CSS update
softacoder Feb 15, 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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
Copy link
Member

@SallyMcGrath SallyMcGrath Mar 30, 2023

Choose a reason for hiding this comment

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

Hi @softacoder . I think you've added a file here that shouldn't be in this repo. Please make sure to add your files one by one and with purpose. Don't use git add . as you will add files by mistake like here.

"liveServer.settings.port": 5501
}
55 changes: 48 additions & 7 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,60 @@
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>T-shirts</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->

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

<div class="form-div">
<label id="label-radio">Choose color of T-shirt</label>
</div>
<div class="form-radio">
<label id="blue"><input type="radio" value="blue" name="choose">Blue</label>
</div>
<div class="form-radio">
<label id="green"><input type="radio" value="green" name="choose">Green</label>
</div>
<div class="form-radio">
<label id="pink"><input type="radio" value="pink" name="choose">Pink</label>
</div>
<div class="form-div">

<div class="form-div">
<label id="dropdown-label-feature">T-shirt size</label>
<select id="dropdown-feature" name="dropdown-feature">
<option value="">Select an option</option>
<option value="1">XS</option>
<option value="2">Small</option>
<option value="3">Medium</option>
<option value="4">Large</option>
<option value="5">XL</option>
<option value="6">XXL</option>
</select>
</div>
<div class="form-div">

<div class="form-div">
<label for="del-date">D.O.D.<span class="sr-only">(Date of Delivery)</span></label>
<input type="date" name="del-date" id="del-date" />
</div>
<div class="form-div">
<label>
<input id="submit" type="submit" value="submit">
</div>
</form>

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

<h2>By Jan Softa</h2>
</footer>
</body>

</html>
</html>
94 changes: 94 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,94 @@
body{
font-family: 'Poppins', sans-sherif;
background-repeat: no-repeat;
background-size: cover;
background-image: linear-gradient(
115deg,
rgba(58, 58, 158, 0.8),
rgba(136, 136, 206, 0.7)
), url("https://cdn.pixabay.com/photo/2017/09/09/11/52/t-shirts-2731768_960_720.jpg");
background-position: center;
width: 100vw;
color: white;
margin: 0;
}



.form-div{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto 1.25rem auto;
padding: 0.25rem;
}

label{
margin-bottom: 10px;
width: 90%;
font-size: 18px;
padding-top: 8px;
margin-right: auto;
}

input{
width: 25%;
height: 40px;
border-radius: 5px;
font-size: 15px;
margin-right: auto;
}

select{
width: 90%;
height: 40px;
border-radius: 5px;
font-size: 15px;
margin-right: auto;
}

textarea{
width: 90%;
font-size: 16px;
height: 100px;
}

input[type="radio"], input[type="checkbox"]{
height: 20px;
margin-left: 80px;
width: 10px;

}

.form-radio, .div-checkbox{
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 5px;
}

input[type="date"]{


width: 100%;
color: white;
background-color: #0080ff;
border: 1px solid #0080ff;
margin-bottom: 50px;
}
::-webkit-calendar-picker-indicator{
background-color: #ffffff;
padding: 5px;
cursor: pointer;
border-radius: 3px;
}


input[type="submit"]{
width: 100%;
color: white;
background-color: green;
border: 1px solid green;
margin-bottom: 50px;
}