From 318cc9221b2d1cdd6798512ee7e278e8f6a2eeda Mon Sep 17 00:00:00 2001
From: Rotzbua <Rotzbua@users.noreply.github.com>
Date: Tue, 7 May 2024 22:04:46 +0200
Subject: [PATCH] fix: remove trailing slash from html5 void elements

---
 v1-basic-template/index.html                  | 56 +++++++++---------
 v1-bootstrap-grid/index.html                  | 10 ++--
 v1-classless/index.html                       | 54 ++++++++---------
 v1-company/index.html                         | 24 ++++----
 v1-preview-rtl/index.html                     | 54 ++++++++---------
 v1-preview/index.html                         | 54 ++++++++---------
 v1-sign-in/index.html                         | 18 +++---
 .../src/app/app.component.ts                  |  4 +-
 v2-angular-classless-login/src/index.html     | 12 ++--
 .../src/index.html                            | 12 ++--
 v2-conditional-styling/index.html             | 18 +++---
 v2-html-classless/index.html                  | 58 +++++++++----------
 v2-html/index.html                            | 58 +++++++++----------
 v2-react-classless-login/public/index.html    |  8 +--
 .../public/index.html                         |  8 +--
 v2-sass-customized-design-system/index.html   | 16 ++---
 16 files changed, 232 insertions(+), 232 deletions(-)
diff --git a/v1-basic-template/index.html b/v1-basic-template/index.html
index 47d7dbf..9770d38 100644
--- a/v1-basic-template/index.html
+++ b/v1-basic-template/index.html
@@ -1,20 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Basic template • Pico CSS</title>
     <meta
       name="description"
       content="A basic custom template for Pico using only CSS custom properties (variables). Built with Pico CSS."
-    />
-    <link rel="shortcut icon" href="https://picocss.com/favicon.ico" />
+    >
+    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
 
     <!-- Pico.css -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
 
     <!-- Custom template-->
-    <link rel="stylesheet" href="css/custom.css" />
+    <link rel="stylesheet" href="css/custom.css">
   </head>
 
   <body>
@@ -58,19 +58,19 @@ <h2>Preview</h2>
               placeholder="First name"
               aria-label="First name"
               required
-            />
+            >
             <input
               type="email"
               name="email"
               placeholder="Email address"
               aria-label="Email address"
               required
-            />
+            >
             <button type="submit">Subscribe</button>
           </div>
           <fieldset>
             <label for="terms">
-              <input type="checkbox" role="switch" id="terms" name="terms" />
+              <input type="checkbox" role="switch" id="terms" name="terms">
               I agree to the <a href="#" onclick="event.preventDefault()">Privacy Policy</a>
             </label>
           </fieldset>
@@ -165,7 +165,7 @@ <h6>Heading 6</h6>
           <img
             src="img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
             alt="Minimal landscape"
-          />
+          >
           <figcaption>
             Image from
             <a href="https://unsplash.com/photos/a562ZEFKW8I" target="_blank">unsplash.com</a>
@@ -197,11 +197,11 @@ <h2>Form elements</h2>
 
           <!-- Search -->
           <label for="search">Search</label>
-          <input type="search" id="search" name="search" placeholder="Search" />
+          <input type="search" id="search" name="search" placeholder="Search">
 
           <!-- Text -->
           <label for="text">Text</label>
-          <input type="text" id="text" name="text" placeholder="Text" />
+          <input type="text" id="text" name="text" placeholder="Text">
           <small>Curabitur consequat lacus at lacus porta finibus.</small>
 
           <!-- Select -->
@@ -214,20 +214,20 @@ <h2>Form elements</h2>
           <!-- File browser -->
           <label for="file"
             >File browser
-            <input type="file" id="file" name="file" />
+            <input type="file" id="file" name="file">
           </label>
 
           <!-- Range slider control -->
           <label for="range"
             >Range slider
-            <input type="range" min="0" max="100" value="50" id="range" name="range" />
+            <input type="range" min="0" max="100" value="50" id="range" name="range">
           </label>
 
           <!-- States -->
           <div class="grid">
             <label for="valid">
               Valid
-              <input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false" />
+              <input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false">
             </label>
             <label for="invalid">
               Invalid
@@ -237,11 +237,11 @@ <h2>Form elements</h2>
                 name="invalid"
                 placeholder="Invalid"
                 aria-invalid="true"
-              />
+              >
             </label>
             <label for="disabled">
               Disabled
-              <input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled />
+              <input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled>
             </label>
           </div>
 
@@ -249,19 +249,19 @@ <h2>Form elements</h2>
             <!-- Date-->
             <label for="date"
               >Date
-              <input type="date" id="date" name="date" />
+              <input type="date" id="date" name="date">
             </label>
 
             <!-- Time-->
             <label for="time"
               >Time
-              <input type="time" id="time" name="time" />
+              <input type="time" id="time" name="time">
             </label>
 
             <!-- Color-->
             <label for="color"
               >Color
-              <input type="color" id="color" name="color" value="#0eaaaa" />
+              <input type="color" id="color" name="color" value="#0eaaaa">
             </label>
           </div>
 
@@ -270,11 +270,11 @@ <h2>Form elements</h2>
             <fieldset>
               <legend><strong>Checkboxes</strong></legend>
               <label for="checkbox-1">
-                <input type="checkbox" id="checkbox-1" name="checkbox-1" checked />
+                <input type="checkbox" id="checkbox-1" name="checkbox-1" checked>
                 Checkbox
               </label>
               <label for="checkbox-2">
-                <input type="checkbox" id="checkbox-2" name="checkbox-2" />
+                <input type="checkbox" id="checkbox-2" name="checkbox-2">
                 Checkbox
               </label>
             </fieldset>
@@ -283,11 +283,11 @@ <h2>Form elements</h2>
             <fieldset>
               <legend><strong>Radio buttons</strong></legend>
               <label for="radio-1">
-                <input type="radio" id="radio-1" name="radio" value="radio-1" checked />
+                <input type="radio" id="radio-1" name="radio" value="radio-1" checked>
                 Radio button
               </label>
               <label for="radio-2">
-                <input type="radio" id="radio-2" name="radio" value="radio-2" />
+                <input type="radio" id="radio-2" name="radio" value="radio-2">
                 Radio button
               </label>
             </fieldset>
@@ -296,19 +296,19 @@ <h2>Form elements</h2>
             <fieldset>
               <legend><strong>Switches</strong></legend>
               <label for="switch-1">
-                <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked />
+                <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked>
                 Switch
               </label>
               <label for="switch-2">
-                <input type="checkbox" id="switch-2" name="switch-2" role="switch" />
+                <input type="checkbox" id="switch-2" name="switch-2" role="switch">
                 Switch
               </label>
             </fieldset>
           </div>
 
           <!-- Buttons -->
-          <input type="reset" value="Reset" onclick="event.preventDefault()" />
-          <input type="submit" value="Submit" onclick="event.preventDefault()" />
+          <input type="reset" value="Reset" onclick="event.preventDefault()">
+          <input type="submit" value="Submit" onclick="event.preventDefault()">
         </form>
       </section>
       <!-- ./ Form elements-->
diff --git a/v1-bootstrap-grid/index.html b/v1-bootstrap-grid/index.html
index 0a27e79..2b62e5b 100644
--- a/v1-bootstrap-grid/index.html
+++ b/v1-bootstrap-grid/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Bootstrap grid system example • Pico CSS</title>
     <meta
       name="description"
       content="Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico."
-    />
-    <link rel="shortcut icon" href="https://picocss.com/favicon.ico" />
+    >
+    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
 
     <!-- Pico.css custom build with Bootstrap grid -->
-    <link rel="stylesheet" href="css/pico-bootstrap-grid.min.css" />
+    <link rel="stylesheet" href="css/pico-bootstrap-grid.min.css">
 
     <!-- Custom Styles for this example -->
     <style>
diff --git a/v1-classless/index.html b/v1-classless/index.html
index b25ec32..de9a2cc 100644
--- a/v1-classless/index.html
+++ b/v1-classless/index.html
@@ -1,20 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Classless example • Pico CSS</title>
     <meta
       name="description"
       content="Just a pure semantic HTML markup, without .classes.  Built with Pico CSS."
-    />
-    <link rel="shortcut icon" href="https://picocss.com/favicon.ico" />
+    >
+    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
 
     <!-- Pico.css (Classless version) -->
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css"
-    />
+    >
   </head>
 
   <body>
@@ -57,17 +57,17 @@ <h2>Preview</h2>
             placeholder="First name"
             aria-label="First name"
             required
-          />
+          >
           <input
             type="email"
             name="email"
             placeholder="Email address"
             aria-label="Email address"
             required
-          />
+          >
           <fieldset>
             <label for="terms">
-              <input type="checkbox" role="switch" id="terms" name="terms" />
+              <input type="checkbox" role="switch" id="terms" name="terms">
               I agree to the <a href="#" onclick="event.preventDefault()">Privacy Policy</a>
             </label>
           </fieldset>
@@ -169,7 +169,7 @@ <h6>Heading 6</h6>
           <img
             src="img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
             alt="Minimal landscape"
-          />
+          >
           <figcaption>
             Image from
             <a href="https://unsplash.com/photos/a562ZEFKW8I" target="_blank">unsplash.com</a>
@@ -192,11 +192,11 @@ <h2>Form elements</h2>
 
           <!-- Search -->
           <label for="search">Search</label>
-          <input type="search" id="search" name="search" placeholder="Search" />
+          <input type="search" id="search" name="search" placeholder="Search">
 
           <!-- Text -->
           <label for="text">Text</label>
-          <input type="text" id="text" name="text" placeholder="Text" />
+          <input type="text" id="text" name="text" placeholder="Text">
           <small>Curabitur consequat lacus at lacus porta finibus.</small>
 
           <!-- Select -->
@@ -209,19 +209,19 @@ <h2>Form elements</h2>
           <!-- File browser -->
           <label for="file"
             >File browser
-            <input type="file" id="file" name="file" />
+            <input type="file" id="file" name="file">
           </label>
 
           <!-- Range slider control -->
           <label for="range"
             >Range slider
-            <input type="range" min="0" max="100" value="50" id="range" name="range" />
+            <input type="range" min="0" max="100" value="50" id="range" name="range">
           </label>
 
           <!-- Valid -->
           <label for="valid">
             Valid
-            <input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false" />
+            <input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false">
           </label>
 
           <!-- Invalid -->
@@ -233,42 +233,42 @@ <h2>Form elements</h2>
               name="invalid"
               placeholder="Invalid"
               aria-invalid="true"
-            />
+            >
           </label>
 
           <!-- Disabled -->
           <label for="disabled">
             Disabled
-            <input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled />
+            <input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled>
           </label>
 
           <!-- Date-->
           <label for="date"
             >Date
-            <input type="date" id="date" name="date" />
+            <input type="date" id="date" name="date">
           </label>
 
           <!-- Time-->
           <label for="time"
             >Time
-            <input type="time" id="time" name="time" />
+            <input type="time" id="time" name="time">
           </label>
 
           <!-- Color-->
           <label for="color"
             >Color
-            <input type="color" id="color" name="color" value="#0eaaaa" />
+            <input type="color" id="color" name="color" value="#0eaaaa">
           </label>
 
           <!-- Checkboxes -->
           <fieldset>
             <legend><strong>Checkboxes</strong></legend>
             <label for="checkbox-1">
-              <input type="checkbox" id="checkbox-1" name="checkbox-1" checked />
+              <input type="checkbox" id="checkbox-1" name="checkbox-1" checked>
               Checkbox
             </label>
             <label for="checkbox-2">
-              <input type="checkbox" id="checkbox-2" name="checkbox-2" />
+              <input type="checkbox" id="checkbox-2" name="checkbox-2">
               Checkbox
             </label>
           </fieldset>
@@ -277,11 +277,11 @@ <h2>Form elements</h2>
           <fieldset>
             <legend><strong>Radio buttons</strong></legend>
             <label for="radio-1">
-              <input type="radio" id="radio-1" name="radio" value="radio-1" checked />
+              <input type="radio" id="radio-1" name="radio" value="radio-1" checked>
               Radio button
             </label>
             <label for="radio-2">
-              <input type="radio" id="radio-2" name="radio" value="radio-2" />
+              <input type="radio" id="radio-2" name="radio" value="radio-2">
               Radio button
             </label>
           </fieldset>
@@ -290,18 +290,18 @@ <h2>Form elements</h2>
           <fieldset>
             <legend><strong>Switches</strong></legend>
             <label for="switch-1">
-              <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked />
+              <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked>
               Switch
             </label>
             <label for="switch-2">
-              <input type="checkbox" id="switch-2" name="switch-2" role="switch" />
+              <input type="checkbox" id="switch-2" name="switch-2" role="switch">
               Switch
             </label>
           </fieldset>
 
           <!-- Buttons -->
-          <input type="reset" value="Reset" onclick="event.preventDefault()" />
-          <input type="submit" value="Submit" onclick="event.preventDefault()" />
+          <input type="reset" value="Reset" onclick="event.preventDefault()">
+          <input type="submit" value="Submit" onclick="event.preventDefault()">
         </form>
       </section>
       <!-- ./ Form elements-->
diff --git a/v1-company/index.html b/v1-company/index.html
index 58c6565..d95d693 100644
--- a/v1-company/index.html
+++ b/v1-company/index.html
@@ -1,20 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Company example • Pico CSS</title>
     <meta
       name="description"
       content="A classic company or blog layout with a sidebar. Built with Pico CSS."
-    />
-    <link rel="shortcut icon" href="https://picocss.com/favicon.ico" />
+    >
+    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
 
     <!-- Pico.css -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
 
     <!-- Custom styles for this example -->
-    <link rel="stylesheet" href="custom.css" />
+    <link rel="stylesheet" href="custom.css">
   </head>
 
   <body>
@@ -68,7 +68,7 @@ <h2>Ut sit amet sem ut velit</h2>
             mauris.
           </p>
           <figure>
-            <img src="img/ashim-d-silva-3Ijt7UkSBYE-unsplash-1500x750.jpg" alt="Architecture" />
+            <img src="img/ashim-d-silva-3Ijt7UkSBYE-unsplash-1500x750.jpg" alt="Architecture">
             <figcaption>
               Image from
               <a href="https://unsplash.com/photos/3Ijt7UkSBYE" target="_blank">unsplash.com</a>
@@ -99,21 +99,21 @@ <h3>Sed purus sapien, porta a cursus sed, maximus et metus.</h3>
         <aside>
           <a href="#" aria-label="Example" onclick="event.preventDefault()"
             ><img src="img/maarten-deckers-T5nXYXCf50I-unsplash-1500x750.jpg" alt="Architecture"
-          /></a>
+          ></a>
           <p>
             <a href="#" onclick="event.preventDefault()">Donec sit amet</a><br />
             <small>Class aptent taciti sociosqu ad litora torquent per conubia nostra</small>
           </p>
           <a href="#" aria-label="Example" onclick="event.preventDefault()"
             ><img src="img/daniel-von-appen-tb4heMa-ZRo-unsplash-1500-750.jpg" alt="Architecture"
-          /></a>
+          ></a>
           <p>
             <a href="#" onclick="event.preventDefault()">Suspendisse potenti</a><br />
             <small>Proin non condimentum tortor. Donec in feugiat sapien.</small>
           </p>
           <a href="#" aria-label="Example" onclick="event.preventDefault()"
             ><img src="img/matthew-hamilton-Ru3Ap8TNcsk-unsplash-1500-750.jpg" alt="Architecture"
-          /></a>
+          ></a>
           <p>
             <a href="#" onclick="event.preventDefault()">Nullam lobortis placerat aliquam</a><br />
             <small
@@ -142,7 +142,7 @@ <h2>Subscribe</h2>
               placeholder="First name"
               aria-label="First name"
               required
-            />
+            >
             <input
               type="email"
               id="email"
@@ -150,7 +150,7 @@ <h2>Subscribe</h2>
               placeholder="Email address"
               aria-label="Email address"
               required
-            />
+            >
             <button type="submit" onclick="event.preventDefault()">Subscribe</button>
           </form>
         </article>
diff --git a/v1-preview-rtl/index.html b/v1-preview-rtl/index.html
index c1e1b13..f4948a8 100644
--- a/v1-preview-rtl/index.html
+++ b/v1-preview-rtl/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html lang="ar" dir="rtl">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Right-to-left preview • Pico CSS</title>
     <meta
       name="description"
       content="A starter example in Arabic with all the elements and components used in Pico"
-    />
-    <link rel="shortcut icon" href="https://picocss.com/favicon.ico" />
+    >
+    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
 
     <!-- Pico.css -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
   </head>
 
   <body>
@@ -49,19 +49,19 @@ <h2>مُعاينة</h2>
               placeholder="الاسم الأول"
               aria-label="First name"
               required
-            />
+            >
             <input
               type="email"
               name="email"
               placeholder="عنوان البريد الإلكتروني"
               aria-label="Email address"
               required
-            />
+            >
             <button type="submit">إشتراك</button>
           </div>
           <fieldset>
             <label for="terms">
-              <input type="checkbox" role="switch" id="terms" name="terms" />
+              <input type="checkbox" role="switch" id="terms" name="terms">
               أنا أوفق على <a href="#" onclick="event.preventDefault()">سياسة الخُصوصية</a>
             </label>
           </fieldset>
@@ -146,7 +146,7 @@ <h6>عنوان 6</h6>
           <img
             src="img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
             alt="Minimal landscape"
-          />
+          >
           <figcaption>
             الصورة مأخوذة من
             <a href="https://unsplash.com/photos/a562ZEFKW8I" target="_blank">unsplash.com</a>
@@ -178,11 +178,11 @@ <h2>عناصر النموذج</h2>
 
           <!-- Search -->
           <label for="search">شريط البحث</label>
-          <input type="search" id="search" name="search" placeholder="البحث" />
+          <input type="search" id="search" name="search" placeholder="البحث">
 
           <!-- Text -->
           <label for="text">نص</label>
-          <input type="text" id="text" name="text" placeholder="أكتب نصًا" />
+          <input type="text" id="text" name="text" placeholder="أكتب نصًا">
           <small>أكتب ما لا يزيد عن مئة حرف.</small>
 
           <!-- Select -->
@@ -195,13 +195,13 @@ <h2>عناصر النموذج</h2>
           <!-- File browser -->
           <label for="file"
             >أرفع ملف
-            <input type="file" id="file" name="file" />
+            <input type="file" id="file" name="file">
           </label>
 
           <!-- Range slider control -->
           <label for="range"
             >شريط الحد
-            <input type="range" min="0" max="100" value="50" id="range" name="range" />
+            <input type="range" min="0" max="100" value="50" id="range" name="range">
           </label>
 
           <!-- States -->
@@ -214,7 +214,7 @@ <h2>عناصر النموذج</h2>
                 name="valid"
                 placeholder="قيمة مقبولة"
                 aria-invalid="false"
-              />
+              >
             </label>
             <label for="invalid">
               غير مقبول
@@ -224,11 +224,11 @@ <h2>عناصر النموذج</h2>
                 name="invalid"
                 placeholder="قيمة مرفوضة"
                 aria-invalid="true"
-              />
+              >
             </label>
             <label for="disabled">
               مُعطل
-              <input type="text" id="disabled" name="disabled" placeholder="معطل" disabled />
+              <input type="text" id="disabled" name="disabled" placeholder="معطل" disabled>
             </label>
           </div>
 
@@ -236,19 +236,19 @@ <h2>عناصر النموذج</h2>
             <!-- Date-->
             <label for="date"
               >التاريخ
-              <input type="date" id="date" name="date" />
+              <input type="date" id="date" name="date">
             </label>
 
             <!-- Time-->
             <label for="time"
               >الوقت
-              <input type="time" id="time" name="time" />
+              <input type="time" id="time" name="time">
             </label>
 
             <!-- Color-->
             <label for="color"
               >الألوان
-              <input type="color" id="color" name="color" value="#0eaaaa" />
+              <input type="color" id="color" name="color" value="#0eaaaa">
             </label>
           </div>
 
@@ -257,11 +257,11 @@ <h2>عناصر النموذج</h2>
             <fieldset>
               <legend><strong>مربع اختيارات مُتعددة</strong></legend>
               <label for="checkbox-1">
-                <input type="checkbox" id="checkbox-1" name="checkbox-1" checked />
+                <input type="checkbox" id="checkbox-1" name="checkbox-1" checked>
                 اختيار
               </label>
               <label for="checkbox-2">
-                <input type="checkbox" id="checkbox-2" name="checkbox-2" />
+                <input type="checkbox" id="checkbox-2" name="checkbox-2">
                 اختيار
               </label>
             </fieldset>
@@ -270,11 +270,11 @@ <h2>عناصر النموذج</h2>
             <fieldset>
               <legend><strong>زر اختيار واحد</strong></legend>
               <label for="radio-1">
-                <input type="radio" id="radio-1" name="radio" value="radio-1" checked />
+                <input type="radio" id="radio-1" name="radio" value="radio-1" checked>
                 اختيار
               </label>
               <label for="radio-2">
-                <input type="radio" id="radio-2" name="radio" value="radio-2" />
+                <input type="radio" id="radio-2" name="radio" value="radio-2">
                 اختيار
               </label>
             </fieldset>
@@ -283,19 +283,19 @@ <h2>عناصر النموذج</h2>
             <fieldset>
               <legend><strong>زر التبديل (Switches)</strong></legend>
               <label for="switch-1">
-                <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked />
+                <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked>
                 بدل
               </label>
               <label for="switch-2">
-                <input type="checkbox" id="switch-2" name="switch-2" role="switch" />
+                <input type="checkbox" id="switch-2" name="switch-2" role="switch">
                 بدل
               </label>
             </fieldset>
           </div>
 
           <!-- Buttons -->
-          <input type="reset" value="إعادة تعين" onclick="event.preventDefault()" />
-          <input type="submit" value="إرسال" onclick="event.preventDefault()" />
+          <input type="reset" value="إعادة تعين" onclick="event.preventDefault()">
+          <input type="submit" value="إرسال" onclick="event.preventDefault()">
         </form>
       </section>
       <!-- ./ Form elements-->
diff --git a/v1-preview/index.html b/v1-preview/index.html
index 5ae6f23..5106e87 100644
--- a/v1-preview/index.html
+++ b/v1-preview/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Preview • Pico.css</title>
     <meta
       name="description"
       content="A starter example with all elements and components used in Pico design system. Built with Pico CSS."
-    />
-    <link rel="shortcut icon" href="https://picocss.com/favicon.ico" />
+    >
+    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
 
     <!-- Pico.css -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
   </head>
 
   <body>
@@ -55,19 +55,19 @@ <h2>Preview</h2>
               placeholder="First name"
               aria-label="First name"
               required
-            />
+            >
             <input
               type="email"
               name="email"
               placeholder="Email address"
               aria-label="Email address"
               required
-            />
+            >
             <button type="submit">Subscribe</button>
           </div>
           <fieldset>
             <label for="terms">
-              <input type="checkbox" role="switch" id="terms" name="terms" />
+              <input type="checkbox" role="switch" id="terms" name="terms">
               I agree to the
               <a href="#" onclick="event.preventDefault()">Privacy Policy</a>
             </label>
@@ -169,7 +169,7 @@ <h6>Heading 6</h6>
           <img
             src="img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
             alt="Minimal landscape"
-          />
+          >
           <figcaption>
             Image from
             <a href="https://unsplash.com/photos/a562ZEFKW8I" target="_blank">unsplash.com</a>
@@ -201,11 +201,11 @@ <h2>Form elements</h2>
 
           <!-- Search -->
           <label for="search">Search</label>
-          <input type="search" id="search" name="search" placeholder="Search" />
+          <input type="search" id="search" name="search" placeholder="Search">
 
           <!-- Text -->
           <label for="text">Text</label>
-          <input type="text" id="text" name="text" placeholder="Text" />
+          <input type="text" id="text" name="text" placeholder="Text">
           <small>Curabitur consequat lacus at lacus porta finibus.</small>
 
           <!-- Select -->
@@ -218,20 +218,20 @@ <h2>Form elements</h2>
           <!-- File browser -->
           <label for="file"
             >File browser
-            <input type="file" id="file" name="file" />
+            <input type="file" id="file" name="file">
           </label>
 
           <!-- Range slider control -->
           <label for="range"
             >Range slider
-            <input type="range" min="0" max="100" value="50" id="range" name="range" />
+            <input type="range" min="0" max="100" value="50" id="range" name="range">
           </label>
 
           <!-- States -->
           <div class="grid">
             <label for="valid">
               Valid
-              <input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false" />
+              <input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false">
             </label>
             <label for="invalid">
               Invalid
@@ -241,11 +241,11 @@ <h2>Form elements</h2>
                 name="invalid"
                 placeholder="Invalid"
                 aria-invalid="true"
-              />
+              >
             </label>
             <label for="disabled">
               Disabled
-              <input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled />
+              <input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled>
             </label>
           </div>
 
@@ -253,19 +253,19 @@ <h2>Form elements</h2>
             <!-- Date-->
             <label for="date"
               >Date
-              <input type="date" id="date" name="date" />
+              <input type="date" id="date" name="date">
             </label>
 
             <!-- Time-->
             <label for="time"
               >Time
-              <input type="time" id="time" name="time" />
+              <input type="time" id="time" name="time">
             </label>
 
             <!-- Color-->
             <label for="color"
               >Color
-              <input type="color" id="color" name="color" value="#0eaaaa" />
+              <input type="color" id="color" name="color" value="#0eaaaa">
             </label>
           </div>
 
@@ -274,11 +274,11 @@ <h2>Form elements</h2>
             <fieldset>
               <legend><strong>Checkboxes</strong></legend>
               <label for="checkbox-1">
-                <input type="checkbox" id="checkbox-1" name="checkbox-1" checked />
+                <input type="checkbox" id="checkbox-1" name="checkbox-1" checked>
                 Checkbox
               </label>
               <label for="checkbox-2">
-                <input type="checkbox" id="checkbox-2" name="checkbox-2" />
+                <input type="checkbox" id="checkbox-2" name="checkbox-2">
                 Checkbox
               </label>
             </fieldset>
@@ -287,11 +287,11 @@ <h2>Form elements</h2>
             <fieldset>
               <legend><strong>Radio buttons</strong></legend>
               <label for="radio-1">
-                <input type="radio" id="radio-1" name="radio" value="radio-1" checked />
+                <input type="radio" id="radio-1" name="radio" value="radio-1" checked>
                 Radio button
               </label>
               <label for="radio-2">
-                <input type="radio" id="radio-2" name="radio" value="radio-2" />
+                <input type="radio" id="radio-2" name="radio" value="radio-2">
                 Radio button
               </label>
             </fieldset>
@@ -300,19 +300,19 @@ <h2>Form elements</h2>
             <fieldset>
               <legend><strong>Switches</strong></legend>
               <label for="switch-1">
-                <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked />
+                <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked>
                 Switch
               </label>
               <label for="switch-2">
-                <input type="checkbox" id="switch-2" name="switch-2" role="switch" />
+                <input type="checkbox" id="switch-2" name="switch-2" role="switch">
                 Switch
               </label>
             </fieldset>
           </div>
 
           <!-- Buttons -->
-          <input type="reset" value="Reset" onclick="event.preventDefault()" />
-          <input type="submit" value="Submit" onclick="event.preventDefault()" />
+          <input type="reset" value="Reset" onclick="event.preventDefault()">
+          <input type="submit" value="Submit" onclick="event.preventDefault()">
         </form>
       </section>
       <!-- ./ Form elements-->
diff --git a/v1-sign-in/index.html b/v1-sign-in/index.html
index aef2d84..f851b08 100644
--- a/v1-sign-in/index.html
+++ b/v1-sign-in/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Sign in example • Pico CSS</title>
-    <meta name="description" content="A minimalist layout for Login pages. Built with Pico CSS." />
-    <link rel="shortcut icon" href="https://picocss.com/favicon.ico" />
+    <meta name="description" content="A minimalist layout for Login pages. Built with Pico CSS.">
+    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
 
     <!-- Pico.css -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
 
     <!-- Custom styles for this example -->
-    <link rel="stylesheet" href="custom.css" />
+    <link rel="stylesheet" href="custom.css">
   </head>
 
   <body>
@@ -53,7 +53,7 @@ <h1>Sign in</h1>
               aria-label="Login"
               autocomplete="username"
               required
-            />
+            >
             <input
               type="password"
               name="password"
@@ -61,10 +61,10 @@ <h1>Sign in</h1>
               aria-label="Password"
               autocomplete="current-password"
               required
-            />
+            >
             <fieldset>
               <label for="remember">
-                <input type="checkbox" role="switch" id="remember" name="remember" />
+                <input type="checkbox" role="switch" id="remember" name="remember">
                 Remember me
               </label>
             </fieldset>
diff --git a/v2-angular-classless-login/src/app/app.component.ts b/v2-angular-classless-login/src/app/app.component.ts
index 1cccb58..4ef7ed0 100644
--- a/v2-angular-classless-login/src/app/app.component.ts
+++ b/v2-angular-classless-login/src/app/app.component.ts
@@ -16,7 +16,7 @@ import { Component, ElementRef, HostListener, Renderer2, inject, viewChild } fro
           autocomplete="username"
           required
           ngModel
-        />
+        >
 
         <input
           type="password"
@@ -26,7 +26,7 @@ import { Component, ElementRef, HostListener, Renderer2, inject, viewChild } fro
           autocomplete="current-password"
           required
           ngModel
-        />
+        >
 
         <fieldset>
           <label for="remember">
diff --git a/v2-angular-classless-login/src/index.html b/v2-angular-classless-login/src/index.html
index 8b54f18..b384096 100644
--- a/v2-angular-classless-login/src/index.html
+++ b/v2-angular-classless-login/src/index.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="color-scheme" content="light dark" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <base href="/" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <base href="/">
     <title>Angular Class-less login • Pico CSS</title>
     <meta
       name="description"
       content="A minimal, class-less login page in Angular, with a custom primary color."
-    />
+    >
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/v2-angular-color-schemes-and-modal/src/index.html b/v2-angular-color-schemes-and-modal/src/index.html
index 956dc75..080c5fe 100644
--- a/v2-angular-color-schemes-and-modal/src/index.html
+++ b/v2-angular-color-schemes-and-modal/src/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="color-scheme" content="light dark" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <base href="/" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <base href="/">
     <title>Angular color schemes and modal • Pico CSS</title>
-    <meta name="description" content="Switch color schemes and open modals with Angular." />
+    <meta name="description" content="Switch color schemes and open modals with Angular.">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/v2-conditional-styling/index.html b/v2-conditional-styling/index.html
index 340600f..cf2747a 100644
--- a/v2-conditional-styling/index.html
+++ b/v2-conditional-styling/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="color-scheme" content="light dark" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
     <title>Conditional Styling • Pico CSS</title>
-    <meta name="description" content="A minimal example with the conditional version." />
+    <meta name="description" content="A minimal example with the conditional version.">
 
     <!-- Pico.css -->
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.6/css/pico.conditional.min.css"
-    />
+    >
   </head>
 
   <body>
@@ -45,7 +45,7 @@ <h2>Styled section</h2>
             placeholder="First name"
             aria-label="First name"
             required
-          />
+          >
           <input
             type="email"
             name="email"
@@ -53,7 +53,7 @@ <h2>Styled section</h2>
             aria-label="Email address"
             autocomplete="email"
             required
-          />
+          >
           <button type="submit">Subscribe</button>
         </form>
       </section>
@@ -69,7 +69,7 @@ <h2>Unstyled section</h2>
             placeholder="First name"
             aria-label="First name"
             required
-          />
+          >
           <input
             type="email"
             name="email"
@@ -77,7 +77,7 @@ <h2>Unstyled section</h2>
             aria-label="Email address"
             autocomplete="email"
             required
-          />
+          >
           <button type="submit">Subscribe</button>
         </form>
       </section>
diff --git a/v2-html-classless/index.html b/v2-html-classless/index.html
index f0dbd48..63749d4 100644
--- a/v2-html-classless/index.html
+++ b/v2-html-classless/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="color-scheme" content="light dark" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
     <title>Class-less preview • Pico CSS</title>
-    <meta name="description" content="A class-less example, without dependencies." />
+    <meta name="description" content="A class-less example, without dependencies.">
 
     <!-- Pico.css -->
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.6/css/pico.classless.min.css"
-    />
+    >
   </head>
 
   <body>
@@ -47,7 +47,7 @@ <h2>Preview</h2>
             placeholder="First name"
             aria-label="First name"
             required
-          />
+          >
           <input
             type="email"
             name="email"
@@ -55,11 +55,11 @@ <h2>Preview</h2>
             aria-label="Email address"
             autocomplete="email"
             required
-          />
+          >
           <button type="submit">Subscribe</button>
           <fieldset>
             <label for="terms">
-              <input type="checkbox" role="switch" id="terms" name="terms" />
+              <input type="checkbox" role="switch" id="terms" name="terms">
               I agree to the
               <a href="#" onclick="event.preventDefault()">Privacy Policy</a>
             </label>
@@ -145,7 +145,7 @@ <h6>Heading 6</h6>
           <img
             src="img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
             alt="Minimal landscape"
-          />
+          >
           <figcaption>
             Image from
             <a href="https://unsplash.com/photos/a562ZEFKW8I" target="_blank">unsplash.com</a>
@@ -161,11 +161,11 @@ <h2>Form elements</h2>
 
           <!-- Search -->
           <label for="search">Search</label>
-          <input type="search" id="search" name="search" placeholder="Search" />
+          <input type="search" id="search" name="search" placeholder="Search">
 
           <!-- Text -->
           <label for="text">Text</label>
-          <input type="text" id="text" name="text" placeholder="Text" />
+          <input type="text" id="text" name="text" placeholder="Text">
           <small>Curabitur consequat lacus at lacus porta finibus.</small>
 
           <!-- Select -->
@@ -178,20 +178,20 @@ <h2>Form elements</h2>
           <!-- File browser -->
           <label for="file"
             >File browser
-            <input type="file" id="file" name="file" />
+            <input type="file" id="file" name="file">
           </label>
 
           <!-- Range slider control -->
           <label for="range"
             >Range slider
-            <input type="range" min="0" max="100" value="50" id="range" name="range" />
+            <input type="range" min="0" max="100" value="50" id="range" name="range">
           </label>
 
           <!-- States -->
 
           <label for="valid">
             Valid
-            <input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false" />
+            <input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false">
           </label>
           <label for="invalid">
             Invalid
@@ -201,40 +201,40 @@ <h2>Form elements</h2>
               name="invalid"
               placeholder="Invalid"
               aria-invalid="true"
-            />
+            >
           </label>
           <label for="disabled">
             Disabled
-            <input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled />
+            <input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled>
           </label>
 
           <!-- Date-->
           <label for="date"
             >Date
-            <input type="date" id="date" name="date" />
+            <input type="date" id="date" name="date">
           </label>
 
           <!-- Time-->
           <label for="time"
             >Time
-            <input type="time" id="time" name="time" />
+            <input type="time" id="time" name="time">
           </label>
 
           <!-- Color-->
           <label for="color"
             >Color
-            <input type="color" id="color" name="color" value="#0eaaaa" />
+            <input type="color" id="color" name="color" value="#0eaaaa">
           </label>
 
           <!-- Checkboxes -->
           <fieldset>
             <legend><strong>Checkboxes</strong></legend>
             <label for="checkbox-1">
-              <input type="checkbox" id="checkbox-1" name="checkbox-1" checked />
+              <input type="checkbox" id="checkbox-1" name="checkbox-1" checked>
               Checkbox
             </label>
             <label for="checkbox-2">
-              <input type="checkbox" id="checkbox-2" name="checkbox-2" />
+              <input type="checkbox" id="checkbox-2" name="checkbox-2">
               Checkbox
             </label>
           </fieldset>
@@ -243,11 +243,11 @@ <h2>Form elements</h2>
           <fieldset>
             <legend><strong>Radio buttons</strong></legend>
             <label for="radio-1">
-              <input type="radio" id="radio-1" name="radio" value="radio-1" checked />
+              <input type="radio" id="radio-1" name="radio" value="radio-1" checked>
               Radio button
             </label>
             <label for="radio-2">
-              <input type="radio" id="radio-2" name="radio" value="radio-2" />
+              <input type="radio" id="radio-2" name="radio" value="radio-2">
               Radio button
             </label>
           </fieldset>
@@ -256,18 +256,18 @@ <h2>Form elements</h2>
           <fieldset>
             <legend><strong>Switches</strong></legend>
             <label for="switch-1">
-              <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked />
+              <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked>
               Switch
             </label>
             <label for="switch-2">
-              <input type="checkbox" id="switch-2" name="switch-2" role="switch" />
+              <input type="checkbox" id="switch-2" name="switch-2" role="switch">
               Switch
             </label>
           </fieldset>
 
           <!-- Buttons -->
-          <input type="reset" value="Reset" onclick="event.preventDefault()" />
-          <input type="submit" value="Submit" onclick="event.preventDefault()" />
+          <input type="reset" value="Reset" onclick="event.preventDefault()">
+          <input type="submit" value="Submit" onclick="event.preventDefault()">
         </form>
       </section>
       <!-- ./ Form elements-->
@@ -325,8 +325,8 @@ <h2>Article</h2>
         <h2>Group</h2>
         <form>
           <fieldset role="group">
-            <input name="email" type="email" placeholder="Enter your email" autocomplete="email" />
-            <input type="submit" value="Subscribe" />
+            <input name="email" type="email" placeholder="Enter your email" autocomplete="email">
+            <input type="submit" value="Subscribe">
           </fieldset>
         </form>
       </section>
diff --git a/v2-html/index.html b/v2-html/index.html
index 29e6146..5901a8d 100644
--- a/v2-html/index.html
+++ b/v2-html/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="color-scheme" content="light dark" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
     <title>Preview • Pico CSS</title>
-    <meta name="description" content="A pure HTML example, without dependencies." />
+    <meta name="description" content="A pure HTML example, without dependencies.">
 
     <!-- Pico.css -->
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.6/css/pico.min.css"
-    />
+    >
   </head>
 
   <body>
@@ -55,7 +55,7 @@ <h2>Preview</h2>
               placeholder="First name"
               aria-label="First name"
               required
-            />
+            >
             <input
               type="email"
               name="email"
@@ -63,12 +63,12 @@ <h2>Preview</h2>
               aria-label="Email address"
               autocomplete="email"
               required
-            />
+            >
             <button type="submit">Subscribe</button>
           </div>
           <fieldset>
             <label for="terms">
-              <input type="checkbox" role="switch" id="terms" name="terms" />
+              <input type="checkbox" role="switch" id="terms" name="terms">
               I agree to the
               <a href="#" onclick="event.preventDefault()">Privacy Policy</a>
             </label>
@@ -170,7 +170,7 @@ <h6>Heading 6</h6>
           <img
             src="img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
             alt="Minimal landscape"
-          />
+          >
           <figcaption>
             Image from
             <a href="https://unsplash.com/photos/a562ZEFKW8I" target="_blank">unsplash.com</a>
@@ -202,11 +202,11 @@ <h2>Form elements</h2>
 
           <!-- Search -->
           <label for="search">Search</label>
-          <input type="search" id="search" name="search" placeholder="Search" />
+          <input type="search" id="search" name="search" placeholder="Search">
 
           <!-- Text -->
           <label for="text">Text</label>
-          <input type="text" id="text" name="text" placeholder="Text" />
+          <input type="text" id="text" name="text" placeholder="Text">
           <small>Curabitur consequat lacus at lacus porta finibus.</small>
 
           <!-- Select -->
@@ -219,20 +219,20 @@ <h2>Form elements</h2>
           <!-- File browser -->
           <label for="file"
             >File browser
-            <input type="file" id="file" name="file" />
+            <input type="file" id="file" name="file">
           </label>
 
           <!-- Range slider control -->
           <label for="range"
             >Range slider
-            <input type="range" min="0" max="100" value="50" id="range" name="range" />
+            <input type="range" min="0" max="100" value="50" id="range" name="range">
           </label>
 
           <!-- States -->
           <div class="grid">
             <label for="valid">
               Valid
-              <input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false" />
+              <input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false">
             </label>
             <label for="invalid">
               Invalid
@@ -242,11 +242,11 @@ <h2>Form elements</h2>
                 name="invalid"
                 placeholder="Invalid"
                 aria-invalid="true"
-              />
+              >
             </label>
             <label for="disabled">
               Disabled
-              <input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled />
+              <input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled>
             </label>
           </div>
 
@@ -254,19 +254,19 @@ <h2>Form elements</h2>
             <!-- Date-->
             <label for="date"
               >Date
-              <input type="date" id="date" name="date" />
+              <input type="date" id="date" name="date">
             </label>
 
             <!-- Time-->
             <label for="time"
               >Time
-              <input type="time" id="time" name="time" />
+              <input type="time" id="time" name="time">
             </label>
 
             <!-- Color-->
             <label for="color"
               >Color
-              <input type="color" id="color" name="color" value="#0eaaaa" />
+              <input type="color" id="color" name="color" value="#0eaaaa">
             </label>
           </div>
 
@@ -275,11 +275,11 @@ <h2>Form elements</h2>
             <fieldset>
               <legend><strong>Checkboxes</strong></legend>
               <label for="checkbox-1">
-                <input type="checkbox" id="checkbox-1" name="checkbox-1" checked />
+                <input type="checkbox" id="checkbox-1" name="checkbox-1" checked>
                 Checkbox
               </label>
               <label for="checkbox-2">
-                <input type="checkbox" id="checkbox-2" name="checkbox-2" />
+                <input type="checkbox" id="checkbox-2" name="checkbox-2">
                 Checkbox
               </label>
             </fieldset>
@@ -288,11 +288,11 @@ <h2>Form elements</h2>
             <fieldset>
               <legend><strong>Radio buttons</strong></legend>
               <label for="radio-1">
-                <input type="radio" id="radio-1" name="radio" value="radio-1" checked />
+                <input type="radio" id="radio-1" name="radio" value="radio-1" checked>
                 Radio button
               </label>
               <label for="radio-2">
-                <input type="radio" id="radio-2" name="radio" value="radio-2" />
+                <input type="radio" id="radio-2" name="radio" value="radio-2">
                 Radio button
               </label>
             </fieldset>
@@ -301,19 +301,19 @@ <h2>Form elements</h2>
             <fieldset>
               <legend><strong>Switches</strong></legend>
               <label for="switch-1">
-                <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked />
+                <input type="checkbox" id="switch-1" name="switch-1" role="switch" checked>
                 Switch
               </label>
               <label for="switch-2">
-                <input type="checkbox" id="switch-2" name="switch-2" role="switch" />
+                <input type="checkbox" id="switch-2" name="switch-2" role="switch">
                 Switch
               </label>
             </fieldset>
           </div>
 
           <!-- Buttons -->
-          <input type="reset" value="Reset" onclick="event.preventDefault()" />
-          <input type="submit" value="Submit" onclick="event.preventDefault()" />
+          <input type="reset" value="Reset" onclick="event.preventDefault()">
+          <input type="submit" value="Submit" onclick="event.preventDefault()">
         </form>
       </section>
       <!-- ./ Form elements-->
@@ -427,8 +427,8 @@ <h2>Article</h2>
         <h2>Group</h2>
         <form>
           <fieldset role="group">
-            <input name="email" type="email" placeholder="Enter your email" autocomplete="email" />
-            <input type="submit" value="Subscribe" />
+            <input name="email" type="email" placeholder="Enter your email" autocomplete="email">
+            <input type="submit" value="Subscribe">
           </fieldset>
         </form>
       </section>
diff --git a/v2-react-classless-login/public/index.html b/v2-react-classless-login/public/index.html
index be5372a..70ca856 100644
--- a/v2-react-classless-login/public/index.html
+++ b/v2-react-classless-login/public/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="color-scheme" content="light dark" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
     <title>React Class-less login • Pico CSS</title>
     <meta
       name="description"
       content="A minimal, class-less login page in React, with a custom primary color."
-    />
+    >
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/v2-react-color-schemes-and-modal/public/index.html b/v2-react-color-schemes-and-modal/public/index.html
index 3032b5a..c862c1f 100644
--- a/v2-react-color-schemes-and-modal/public/index.html
+++ b/v2-react-color-schemes-and-modal/public/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="color-scheme" content="light dark" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
     <title>React color schemes and modal • Pico CSS</title>
-    <meta name="description" content="Switch color schemes and open modals with React." />
+    <meta name="description" content="Switch color schemes and open modals with React.">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/v2-sass-customized-design-system/index.html b/v2-sass-customized-design-system/index.html
index 50c47a4..c75b346 100644
--- a/v2-sass-customized-design-system/index.html
+++ b/v2-sass-customized-design-system/index.html
@@ -1,12 +1,12 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="color-scheme" content="light dark" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
     <title>Customized design system • Pico CSS</title>
-    <meta name="description" content="An example to customize Pico CSS with SASS." />
-    <link rel="stylesheet" href="css/main.css" />
+    <meta name="description" content="An example to customize Pico CSS with SASS.">
+    <link rel="stylesheet" href="css/main.css">
   </head>
 
   <body>
@@ -32,7 +32,7 @@
           step="0.001"
           placeholder="0.01"
           required
-        />
+        >
         <small data-type="amount"><span data-type="usd" id="amount-usd"></span></small>
         <label for="address">Recipient's Bitcoin Address </label>
         <input
@@ -42,7 +42,7 @@
           placeholder="Enter Bitcoin address"
           autocomplete="off"
           required
-        />
+        >
         <fieldset>
           <label for="priority">Network Priority</label>
           <input
@@ -55,7 +55,7 @@
             step="1"
             value="3"
             list="priority"
-          />
+          >
           <datalist id="priorities">
             <option value="1">Min</option>
             <option value="2">Low</option>
