feat: breaking change section layout

It is possible to optionally inform if the commit makes a significant change or breaks the compatibility

Author: JadsonLucena

assets/style/index.css

@@ -116,6 +116,11 @@ main {
                     main > section > form > div > label > a.help:hover {
                         background-color: #96999c80;
                     }
+                    main > section > form > div > label > em {
+                        display: block;
+                        width: 100%;
+                        text-align: center;
+                    }
                     main > section > form > div > label input[type="text"] {
                         margin: 5px 0;
                         padding: 7px 14px;

index.html

@@ -228,7 +228,35 @@
             </form>
 
         </section>
-        <section id="breakingChange"></section>
+        <section id="significantChange">
+
+            <details>
+                <summary>Significant Change</summary>
+                <ul>
+                    <li>It is possible to inform if the commit makes a significant change or breaks the compatibility, this inserts the identifier "!" after type/scope</li>
+                </ul>
+            </details>
+
+            <form>
+
+                <div>
+
+                    <label for="significantChangeInput">
+                        <em>
+                            <input type="checkbox" name="significantChange" id="significantChangeInput"> Is a significant change or does it break compatibility?
+                        </em>
+                    </label>
+
+                </div>
+
+                <nav>
+                    <button type="reset" class="previous"><< Previous</button>
+                    <button type="submit" class="next">Next >></button>
+                </nav>
+
+            </form>
+
+        </section>
         <section id="result"></section>
     </main>