Added attentions

Author: alddesign

README.md

@@ -1,3 +1,6 @@
+# !Feedback!
+If this framework is missing anything you would like to have, please, let me know. Open up an issue or create a pull request.
+
 # cyberpunk-css
 A pure CSS library providing Cyberpunk 2077 themed elements for your webpage.
 

cyberpunk.css

@@ -131,6 +131,28 @@ body
     bottom: -.25em;
     left: -.15em;
 }
+
+.cyber-att
+{
+    color: var(--red);
+    font-size: 1.2rem;
+    font-weight: bold;
+    border: 3px solid var(--red);
+    text-shadow: 0 0 4px var(--red);
+    padding: 6px;
+}
+
+.cyber-att-2
+{
+    background-color: var(--red);
+    color: var(--yellow);
+    text-shadow: 0 0 6px var(--yellow);
+    font-size: 1.2rem;
+    font-weight: bold;
+    border: 3px solid var(--red);
+    padding: 6px;
+}
+
 /*#endregion*/
 
 /*#region colors*/

demo/index.html

@@ -241,6 +241,17 @@ <h3 class="cyber-h">Cyberpunk</h3>
                     <i>Hint: </i>
                     This font doesnt look good with small font sizes. To recreate the logo you have to do an a few tweaks in CSS. Take a look at the very top of this page for an example
                     <div class="cyberpunk-font" style="font-size: 42px;">Cyberpunk</div> 42px
+
+                    <h3 class="cyber-h">Attention!</h3>
+                    <p>
+                        Use the <code>.cyber-att</code> and <code>.cyber-att-2</code> classes to get some attention!
+                    </p>
+                    <p>
+                        <span class="cyber-att">Attention! Danger up ahead .cyber-att</span>
+                    </p>
+                    <p>
+                        <span class="cyber-att-2">Attention! Danger up ahead .cyber-att-2</span>
+                    </p>
                     <!-- #endregion -->
 
                     <!-- #region Headings -->