diff --git a/index.html b/index.html
index 81a00f5..4160327 100644
--- a/index.html
+++ b/index.html
@@ -63,19 +63,26 @@
Каждого победителя будут ждать билеты на крупнейшие frontend конференций СНГ и возможность прокачать свои
- скилы на онлайн тренингах!
-
-
+
Поздравляем!
Ты успешно прошёл регистрацию.
Всю информацию ты получишь по E-mail,
после рассмотрения всех заявок.
diff --git a/src/css/styles.css b/src/css/styles.css
index b2e1f4e..2780bdd 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -1,3 +1,7 @@
+* {
+ box-sizing: border-box;
+}
+
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
@@ -664,8 +668,14 @@ section.first {
animation: placeholder 0.3s forwards;
transition: color 0.3s;
}
-.reg-form label.error .placeholder {
- color: #DC507D;
+.reg-form label .placeholder {
+ display: none;
+ position: absolute;
+ top: -18px;
+ left: 0;
+ color: #ffffff;
+ animation: placeholder 0.3s forwards;
+ transition: color 0.3s;
}
.reg-form textarea {
@@ -842,7 +852,7 @@ label.error input {
visibility: visible;
}
-.succsessful-reg {
+.successful-reg {
position: absolute;
box-sizing: border-box;
display: none;
@@ -856,12 +866,12 @@ label.error input {
transform: translateY(-50%);
}
-.succsessful-reg p {
+.successful-reg p {
margin-bottom: 30px;
line-height: 40px;
}
-.success .succsessful-reg {
+.success .successful-reg {
display: block;
}
@@ -1055,7 +1065,7 @@ label.error input {
min-height: auto;
}
- .succsessful-reg {
+ .successful-reg {
font-size: 16px;
}
@@ -1063,3 +1073,26 @@ label.error input {
font-size: 13px;
}
}
+
+
+.toggle {
+ opacity: 0;
+ height: 0;
+ overflow: hidden;
+ transition: opacity .3s, height .3s;
+ _display: none;
+}
+
+.expand {
+ opacity: 1;
+}
+
+.expand .button {
+ margin-bottom: 10px;
+ padding: 16px;
+ color: #75398F;
+ text-align: center;
+ font-size: 16px;
+ line-height: 19px;
+ box-shadow: 0 0 0 3px #75398F;
+}
\ No newline at end of file
diff --git a/src/js/index.js b/src/js/index.js
index f1af878..743d8f9 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -111,3 +111,11 @@ document.querySelector('#cta').addEventListener('click', function (e) {
}
}
});
+
+let button = document.querySelector('.button');
+button.addEventListener('click', function () {
+ button.remove();
+ let toggle = document.querySelector('.toggle');
+ toggle.style.height = document.querySelector('.content').clientHeight + 'px';
+ toggle.classList.add('expand');
+});