Hotfixes

index.html

@@ -63,19 +63,26 @@ <h1>FrontSpot<br>HACKATHON</h1>
         <div class="paragraph">
             <h2>У НАС ВСЕГО 3 ПРАВИЛА</h2>
             <ul>
-                <li> - Реализовать свою идею любым способом</li>
+                <li>- Реализовать свою идею любым способом</li>
                 <li>- Использовать JavaScript для этого</li>
                 <li>- Максимальный размер команды 4 человека</li>
             </ul>
         </div>
-        <p>Каждого победителя будут ждать билеты на крупнейшие frontend конференций СНГ и возможность прокачать свои
-            скилы на онлайн тренингах!</p>
-        <div class="paragraph">
-            <ul>
-                <li>1 место - билеты на HolyJS конференцию в Санкт-Петербурге</li>
-                <li>2 место - билеты на YGLF конференцию в Киеве</li>
-                <li>3 место - сертификаты на онлайн тренинги на ваш выбор</li>
-            </ul>
+        <div class="expand">
+            <div class="button">УВИДЕТЬ БОЛЬШЕ</div>
+            <div class="toggle">
+                <div class="content">
+                    <p>Каждого победителя будут ждать билеты на крупнейшие frontend конференций СНГ и возможность прокачать свои
+                        скилы на онлайн тренингах!</p>
+                    <div class="paragraph">
+                        <ul>
+                            <li>1 место - билеты на HolyJS конференцию в Санкт-Петербурге</li>
+                            <li>2 место - билеты на YGLF конференцию в Киеве</li>
+                            <li>3 место - сертификаты на онлайн тренинги на ваш выбор</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -98,7 +105,7 @@ <h2>У НАС ВСЕГО 3 ПРАВИЛА</h2>
     <div class="ttable-text section-text">
         <h2>31 марта</h2>
         <ul>
-            <li>10.00-11.00 - Регистрация</li>
+            <li>10.00-11.00 - регистрация</li>
             <li>11.00-11.30 - приветствие и презентация идей</li>
             <li>11.30-13.00 - нетворкинг, поиск команды</li>
             <li>13:00…</li>
@@ -170,14 +177,14 @@ <h2 class="ttable-text-next">01 апреля</h2>
             <div class="reg-ta">
                 <label>
                     <span>Твоя команда и роль в ней (по желанию)</span>
-                    <textarea name="comment" placeholder="Я дизайнер и хочу попробовать работать в команде"></textarea>
+                    <textarea name="comment"></textarea>
                 </label>
             </div>
             <button class="register-button strange-figure _2" id="register">
                 <span>Зарегистрироваться</span>
             </button>
         </div>
-        <div class="succsessful-reg" id="succsessfulReg">
+        <div class="successful-reg" id="successfulReg">
             <p>Поздравляем!<br> Ты успешно прошёл регистрацию.</p>
             <p>Всю информацию ты получишь по E-mail,<br> после рассмотрения всех заявок.</p>
         </div>

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,11 +1065,34 @@ label.error input {
         min-height: auto;
     }
 
-    .succsessful-reg {
+    .successful-reg {
         font-size: 16px;
     }
 
     .error-text {
         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;
+}

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');
+});