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

London 10 Maksim Lukianenko HTML-CSS-Challenges Week 2 #231

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

London 10 Maksim Lukianenko HTML-CSS-Challenges Week 2 #231

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
9cff528
styling done
maxbmaapc Feb 14, 2023
ba046d0
form created
maxbmaapc Feb 14, 2023
e5ce25c
performance score 100
maxbmaapc Feb 14, 2023
fb30220
form done
maxbmaapc Feb 15, 2023
421ae13
everything fixed
maxbmaapc 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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.vscode
.history
Binary file added Form-Controls/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added Form-Controls/files/cyf_brand.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.
68 changes: 54 additions & 14 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<meta name="description" content="Form for ordering T-shirts">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My form exercise</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>

</main>
<section>
<div class="section__container">
<form action="">
<div class="form__wrapper">
<label for="firstName">First Name *</label>
<input type="text" name="" id="firstName" required pattern="[A-Za-z]{2}" title="Must contain at least 2 letters">
</div>
<div class="form__wrapper">
<label for="email">Email *</label>
<input type="email" id="email" required title="Email must be valid example@mail.com">
</div>
<div class="form__wrapper">
<label for="color">Choose color</label>
<select name="color" id="color">
<option value="" disabled selected>Choose color</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="violet">Violet</option>
Comment thread
maxbmaapc marked this conversation as resolved.
</select>
</div>
<div class="form__wrapper">
<label for="size">Choose size</label>
<select name="size" id="size">
<option value="" disabled selected>Choose size</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="form__wrapper">
<label for="delivery">Choose delivery date</label>
<input type="date" id="delivery" min="2023-02-14" max="2023-03-14" required>
</div>
</fieldset>
<div class="form__btn">
<button class="contact__btn" type="submit">Send</button>
</div>
</form>
</div>
</section>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
<div class="footer" id="contact">
<p>Join us now</p>
<span>© by Maksim Lukianenko</span>
<a href="https://codeyourfuture.io/"><img class="footer__img" src="/Form-Controls/files/cyf_brand.png" alt="CYF"></a>
Comment thread
maxbmaapc marked this conversation as resolved.
</div>
</footer>
</body>

</html>
111 changes: 111 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,111 @@
:root {
Comment thread
maxbmaapc marked this conversation as resolved.
--paper:#FFF;
--ink:#000;
--grey: grey;
--color-dark-beige:#E6DACD;
--color-light-beige:#F4ECE6;
--color-blue:#0150FD;
--heading-font: 'Poppins', sans-serif;
--body-font: 'Quicksand', sans-serif;
}

body {
margin: 0;
}

header {
background: var(--paper);
text-align: center;
}

h1 {
font-family: var(--heading-font);
margin: 0;
padding: 1.2rem;
}

section {
background: var(--color-dark-beige);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.section__container {
display: flex;
justify-content: center;
margin: 4rem 0;
width: max(60%, 320px);
background: var(--paper);
box-shadow: -15px 15px 15px var(--grey);
}

form {
width: max(80%, 260px);
padding-top: 3rem;
display: flex;
flex-direction: column;
row-gap: 4rem;
}

form input {
border: transparent;
border-bottom: 2px solid;
height: 40px;
}

form select {
height: 40px;
}

form label {
font-family: var(--heading-font);
}

.form__btn {
text-align: center;
margin: 1rem 0;
}

.form__wrapper {
display: flex;
flex-direction: column;
row-gap: 1rem;
}

.contact__btn {
height: 2rem;
width: 8rem;
border-radius: 20px;
cursor: pointer;
border: none;
background: var(--color-blue);
color: var(--paper);
}

.contact__btn:hover {
background: var(--paper) ;
color: var(--ink);
border: 1px solid var(--color-blue);
transition: 0.4s ease 0s;
}

.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 3rem;
height: 150px;
border-top: #b2b2b2 solid 1px;
row-gap: 1rem;
text-align: center;
}

.footer__img {
max-width: 10%;
max-height: 320px;
object-fit: cover;

}