diff --git a/checklist.html b/checklist.html new file mode 100644 index 0000000..7e78617 --- /dev/null +++ b/checklist.html @@ -0,0 +1,141 @@ + + + + + + + + + Checklist + + +
+ +
+
+
Home page checklist
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ПроверкаОжидаемый результатOтчет
URLВсе переходы должны реагировать на наведение мышью +
+ +
+
Input LoginЛогин должен иметь тип email +
+ +
+
Input LoginМинимальное количество символов 11 +
+ +
+
Input LoginМаксимальное количество символов 30 +
+ +
+
Input PasswordМинимальное количество символов 6 +
+ +
+
Input PasswordМаксимальное количество символов 21 +
+ +
+
Подвал сайта + Страница должна содержать подвал, в котором прописан copyright автор + и год + +
+ +
+
+
+ +
+
+ + diff --git a/form.html b/form.html index 2b6dbeb..b975ead 100644 --- a/form.html +++ b/form.html @@ -1,20 +1,22 @@ + - Flex form + Registration form +/> +
-
+
@@ -32,7 +34,7 @@ type="email" name="email" placeholder="email" - minlength="9"/> + minlength="11"/>
diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..410b468 Binary files /dev/null and b/img/logo.png differ diff --git a/index.html b/index.html index 2c36eb3..2a2f905 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,5 @@ + @@ -10,12 +11,18 @@ rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins" /> + +
@@ -28,7 +35,8 @@ type="email" name="login" placeholder="your e-mail" - minlength="6" + minlength="11" + maxlength="30" /> diff --git a/style.css b/style.css index 74de90e..d48f370 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,5 @@ * { + margin: 0; padding: 0; box-sizing: border-box; @@ -41,6 +42,10 @@ header { justify-content: center; height: 180px; } +img { + object-fit: cover; + width: 90px; +} .logo-block { width: 90px; height: 90px; @@ -130,7 +135,79 @@ select:focus { .flex-btn button { width: 49%; } +a { + color: inherit; + text-decoration: none; +} +.link-checklist { + font-family: "Poppins", sans-serif; + width: 300px; + padding: 6px; + margin: 15px; + background-color: #a3b6c7; + font-size: 15px; + text-align: center; + color: rgb(255, 255, 255); + border-radius: 6px; + transition: 0.6s; + position: fixed; +} +.link-checklist:hover { + /*background-color: var(--alt-text-color); +*/ + background-color: #8ba1b3; +} +.logo-check { + padding: 15px; +} +.checklist { + display: flex; + justify-content: center; + flex-direction: column; + padding: 15px; +} +.checklist td { + padding: 15px; + border-bottom: 2px rgb(0, 103, 134) solid; +} +.checklist table { + padding: 15px; +} +.check-td, +.result-td, +.ok-td { + background-color: #84b6ff; +} +.check-home { + font-size: 21px; +} +.check-ok { + color: rgb(0, 156, 0); +} +.check-ok { + width: 15px; + height: 15px; + accent-color: rgb(0, 156, 0); + transform: scale(2); + box-shadow: inset -2px 1px 9px #84b6ff, 1px 0px 9px #84b6ff; +} +.btn-report button { + border-radius: var(--radius-padding); + height: var(--button-block-height); + background-color: var(--alt-background-color); + color: rgb(255, 255, 255); + transition: 0.15s; + margin-bottom: 15px; + width: 100%; + font-size: 21px; + height: 50px; +} + +.btn-report button:hover { + background-color: var(--alt-background-color-hover); + cursor: pointer; +} @media only screen and (min-width: 540px) { .flex-form-content input, .flex-select { @@ -176,4 +253,16 @@ select:focus { .flex-form-content button { height: 30px; } + .link-checklist { + font-family: "Poppins", sans-serif; + width: 500px; + padding: 15px; + margin: 15px; + font-size: 21px; + text-align: center; + color: white; + border-radius: 9px; + transition: 0.6s; + right: 0; + } }