npm - @jaisocx/css-clean-start-2 - Versions diffs - 1.2.1 → 1.2.4 - Mend

@jaisocx/css-clean-start-2 1.2.1 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/MediaAndStyles/CssCleanStart_2_main_resolved.css CHANGED Viewed

@@ -32,7 +32,7 @@
-  --jsx--css-clean-start-2--body-tag--background: #eee;
+  --jsx--css-clean-start-2--body-tag--background: #fafff5;
   --jsx--css-clean-start-2--site--background: #fff;

package/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css CHANGED Viewed

@@ -31,7 +31,7 @@
-  --jsx--css-clean-start-2--body-tag--background: #eee;
+  --jsx--css-clean-start-2--body-tag--background: #fafff5;
   --jsx--css-clean-start-2--site--background: #fff;

package/MediaAndStyles/themes/theme_base/CssCleanStart_2_theme_base_main.css CHANGED Viewed

@@ -8,7 +8,7 @@
   /** -------------------------------
     background styles of the html elem <body>, and, the direct anchester html elem <main>
   */
-  --jsx--css-clean-start-2--body-tag--background: #eee;
+  --jsx--css-clean-start-2--body-tag--background: #fafff5;
   --jsx--css-clean-start-2--site--background: #fff;

package/README.md CHANGED Viewed

@@ -52,7 +52,7 @@ several .css files will be loaded with size of very few KB.
 ## Github
-[https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/www/sites_tools/css_tools/CssCleanStart_2](https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/www/sites_tools/css_tools/CssCleanStart_2)
+[https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/Jaisocx_SitesTools/sites_tools/css_tools/CssCleanStart_2](https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/Jaisocx_SitesTools/sites_tools/css_tools/CssCleanStart_2)

package/{index.example.html → index.preview.html} RENAMED Viewed

@@ -25,34 +25,7 @@
       type="image/x-icon"
       href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
       href-fallback="favicon/Icon_Sandbox_Brightday.ico"
-      onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
-    />
-    <!--# FONTS PRELOAD WITHOUT JAVASCRIPT CALL -->
-    <link
-      fetchpriority="high"
-      rel="preload"
-      as="font"
-      type="font/ttf"
-      href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf"
-    />
-    <link
-      fetchpriority="high"
-      rel="preload"
-      as="font"
-      type="font/ttf"
-      href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf"
-    />
-    <!--# CSS FOR FONTS -->
-    <link
-      rel="stylesheet"
-      type="text/css"
-      charset="utf-8"
-      href="https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
+      onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
     />
@@ -103,7 +76,7 @@
-  <head>
+  </head>
   <body>
@@ -111,7 +84,7 @@
     <h1>Css Clean Start 2</h1>
     <h2>@jaisocx/css-clean-start-2</h2>
-    <h3>index.example.html</h3>
+    <h3> index.preview.html </h3>
     <description>
       Css sites resetting default styles with main.css of few hundereds css code lines,
       and the very nice infrastructure for responsive sites bugfixing and fine-tuning

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jaisocx/css-clean-start-2",
-  "version": "1.2.1",
+  "version": "1.2.4",
   "description": "Css sites resetting default styles with main.css of few hundereds css code lines, and the very nice infrastructure for responsive sites bugfixing and fine-tuning",
   "author": "Jaisocx Company",
   "keywords": [
@@ -10,9 +10,10 @@
   "files": [
     "favicon",
-    "index.example.html",
-    "css_clean_start_2.example.html",
+    "index.preview.html",
     "responsive_sizes.html",
+    "with_preloaded_fonts_cdn__preview.html",
+    "with_preloaded_fonts_node_modules__preview.html",
     "MediaAndStyles/*.css",
     "MediaAndStyles/themes",
@@ -25,7 +26,8 @@
     "README.md"
   ],
   "optionalDependencies": {
-    "@jaisocx/responsive-sizes": "~1.3.2"
+    "@jaisocx/media_tools_fonts_base": "~1.0.5",
+    "@jaisocx/responsive-sizes": "~1.3.3"
   },
   "private": false,
   "publishConfig": {

package/responsive_sizes.html CHANGED Viewed

@@ -1,158 +1,202 @@
 <!DOCTYPE html>
-<html lang="en" class="jsx">
-  <head>
-    <title>Responsive Sizes</title>
+<html lang="en" class="jsx example_responsive_sizes">
+<head>
-    <meta charset="utf-8">
-    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+  <title> Responsive Sizes </title>
+  <base href="./">
-    <base href="./" >
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-  <!--
-    IN THE DEV CONSOLE YOU SEE
-    39 CSS FILES,
-      css-clean-start and the responsive css files set
-    easier to review one css file, for example with one media query.
-    Best in development mode.
-  -->
-  <link rel="stylesheet" href="MediaAndStyles/CssCleanStart_2_main_relative.css">
+  <!--# FAVICON -->
+  <!-- <link
+    rel="icon"
+    type="image/x-icon"
+    href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Jaisocx.ico"
+    href-fallback="favicon/Icon_Jaisocx.ico"
+    onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
+  /> -->
+  <link
+      rel="icon"
+      type="image/x-icon"
+      href="favicon/Icon_Sandbox_Brightday.ico"
+  />
-  <script src="node_modules/@jaisocx/responsive-sizes/transpiled/Simple/ResponsiveSizesConstants.js"></script>
-  <script src="node_modules/@jaisocx/responsive-sizes/transpiled/Simple/ResponsiveSizes.js"></script>
-</head>
-<body>
+  <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
-  <main>
+  <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB  -->
+  <link
+    rel="stylesheet"
+    type="text/css"
+    charset="utf-8"
+    href="MediaAndStyles/CssCleanStart_2_main_relative.css"
+  />
+  <!--# PROD MODE -->
+  <!--#
+    ALTERNATIVELY,
+    ONE .CSS FILE ( ca. 6_000 lines of size ca. 76 KB),
+      PACKED WITH CSS IMPORTER CSS FILES OF THE RESPONSIVE CSS FILES SET,
+      SAME TRAFFIC, HOWEVER IN THE DEV CONSOLE JUST ONE CSS FILE IS SEEN.
+  -->
+  <!--# THE SAME importing @jaisocx/css-clean-start-2 IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL -->
+<!--  <link-->
+<!--      rel="stylesheet"-->
+<!--      type="text/css"-->
+<!--      charset="utf-8"-->
+<!--      href="MediaAndStyles/CssCleanStart_2_main_resolved.css"-->
+<!--  />-->
-    <h1>Responsive Sizes</h1>
-    <h2 id="responsive_sizes">Tests</h2>
+  <style>
-    <pre id="info" style="display: block; height: auto; overflow-y: visible; overflow-x: scroll; padding: 2rem; background-color: darkturquoise; color: white;"></pre>
+    .jsx.example_responsive_sizes {
-  </main>
+      --jsx--css-clean-start-2--body-tag--background: white;
+      --jsx--css-clean-start-2--site--background: #eafee5;
-  <script>
-    let responsiveSizesConstants = new Object();
-    let responsiveSizesInstance = new Object();
+      --jsx--css-clean-start-2--h--font-weight: 600;
+      --jsx--css-clean-start-2--h--color:       #524232;
+      --jsx--css-clean-start-2--h--margin:      0 0 0 0;
+      --jsx--css-clean-start-2--h--padding:     0 0 0 0;
-    function addOnSite( html ) {
-      let info = document.getElementById('info');
+      --jsx--css-clean-start-2--h1--font-size: 2.0rem;
+      --jsx--css-clean-start-2--h1--line-height: 2.95rem;
-      let locHtml = html + "\n\n";
+      --jsx--css-clean-start-2--h2--font-size: 1.4rem;
+      --jsx--css-clean-start-2--h2--line-height: 2.7rem;
-      info.insertAdjacentHTML( 'beforeEnd', locHtml );
     }
-    function setOnSite( html ) {
-      let info = document.getElementById('info');
+    #info {
+      display: block;
+      height: auto;
+      padding: 2rem;
+      font-size: 1.2rem;
+      line-height: 1.9rem;
+      font-family: var(--css-clean-start-2--sans--font-family);
+      letter-spacing: 1px;
+      color: #f5f5f5;
-      info.innerHTML = html;
+      background: #0F2027;  /* fallback for old browsers */
+      background: -webkit-linear-gradient(to left, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
+      background: linear-gradient(to left, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+      overflow-y: visible;
+      overflow-x: scroll;
     }
-    function applySizesInfo( force ) {
+  </style>
+</head>
+<body>
-      let foreceUpdateSizesInfo_false = false;
-      let html_size1 = responsiveSizesInstance.mobile( force ) ? "mobile" : "";
-      let html_size2 = responsiveSizesInstance.tablet( foreceUpdateSizesInfo_false ) ? "tablet" : "";
-      let html_size3 = responsiveSizesInstance.desktop( foreceUpdateSizesInfo_false ) ? "desktop" : "";
+<main>
-      let size = responsiveSizesInstance.getCssVariableArray()[4];
+  <h1> Responsive Sizes </h1>
+  <h2> @jaisocx/responsive-sizes </h2>
-      let html_orientation1 = responsiveSizesInstance.orientationPortrait( foreceUpdateSizesInfo_false ) ? "portrait" : "";
-      let html_orientation2 = responsiveSizesInstance.orientationLandscape( foreceUpdateSizesInfo_false ) ? "landscape" : "";
+  <description>
+    You get know the .css file where the @media query is set,
+    relevant to the currently opened browser's tab with the site being tested.
+  </description>
-      let html_array = [
-        html_size1,
-        html_size2,
-        html_size3,
-        " ",
-        size,
-        " ",
-        html_orientation1,
-        html_orientation2,
-      ];
+  <h2 id="size_name">Tests</h2>
-      let html = html_array.join( "" );
+  <pre id="info"></pre>
-      let info = document.getElementById('responsive_sizes');
+</main>
-      info.innerHTML = html;
-    }
+</body>
-    function responsiveSizesTest( force ) {
-      // responsiveSizesInstance = new ResponsiveSizes();
-      let responsiveSizeName = responsiveSizesInstance.getResponsiveSizeName( force );
+<script src="node_modules/@jaisocx/responsive-sizes/transpiled/Simple/ResponsiveSizesConstants.js"></script>
+<script src="node_modules/@jaisocx/responsive-sizes/transpiled/Simple/ResponsiveSizes.js"></script>
-      let foreceUpdateSizesInfo_false = false;
-      let mobile = responsiveSizesInstance.mobile( foreceUpdateSizesInfo_false );
-      let tablet = responsiveSizesInstance.tablet( foreceUpdateSizesInfo_false );
-      let desktop = responsiveSizesInstance.desktop( foreceUpdateSizesInfo_false );
-      let orientationPortrait = responsiveSizesInstance.orientationPortrait( foreceUpdateSizesInfo_false );
-      let orientationLandscape = responsiveSizesInstance.orientationLandscape( foreceUpdateSizesInfo_false );
+<script src="../responsive-sizes/transpiled/Simple/ResponsiveSizesConstants.js"></script>
+<script src="../responsive-sizes/transpiled/Simple/ResponsiveSizes.js"></script>
-      let lines = {
-        "responsiveSizeName": responsiveSizeName,
-        "mobile": mobile,
-        "tablet": tablet,
-        "desktop": desktop,
-        "orientationPortrait": orientationPortrait,
-        "orientationLandscape": orientationLandscape
-      };
-      let locHtml = JSON.stringify(lines, null, 2);
-      addOnSite( responsiveSizeName );
-      addOnSite( locHtml );
-    }
+<script>
-    function responsiveSizeNameTestJson() {
-      // responsiveSizesInstance = new ResponsiveSizes();
-      let responsiveSizeJsonText = responsiveSizesInstance.toString();
-      setOnSite( responsiveSizeJsonText );
-    }
+  let globResponsiveSizesConstants = new Object();
+  let globResponsiveSizesInstance  = new Object();
-    function addResizeEventHandler() {
-      window.addEventListener('resize', () => {
-        applySizesInfo( true );
-        responsiveSizeNameTestJson( false );
-      });
-    }
-    function assignEventsHandlers() {
-      addResizeEventHandler();
-    }
-    // Call the function to load remote data when the DOM is fully loaded
-    // This ensures that the function is called after the HTML content is loaded
-    // and the DOM is ready for manipulation
-    document.addEventListener('DOMContentLoaded', () => {
-      responsiveSizesConstants = new ResponsiveSizesConstants();
-      responsiveSizesInstance = new ResponsiveSizes();
-      responsiveSizesInstance
-        .setResponsiveSizeConstantName("--responsive_size")
-        .setResponsiveSizeSelector("html.jsx");
+  function setOnSite( id, html ) {
+    let info = document.getElementById( id );
+    info.innerHTML = html;
+  }
+  function responsiveSizeNameTestJson( recalcMediaQueriesVariables ) {
+    // globResponsiveSizesInstance = new ResponsiveSizes();
+    let getInfoShortAsArray_true = true;
+    let notToUpdate = false;
+    let sizeName = globResponsiveSizesInstance.getInfoShort (
+      getInfoShortAsArray_true,
+      recalcMediaQueriesVariables
+    ).join( " " );
+    let responsiveSizeJsonText = globResponsiveSizesInstance.toString (
+      notToUpdate
+    );
+    setOnSite( "size_name", sizeName );
+    setOnSite( "info", responsiveSizeJsonText );
+  }
+  function addResizeEventHandler() {
+    window.addEventListener (
+      "resize",
+      () => {
+        let recalcMediaQueriesVariables_true = true;
+        responsiveSizeNameTestJson ( recalcMediaQueriesVariables_true );
+      }
+    );
+  }
+  function assignEventsHandlers() {
+    addResizeEventHandler();
+  }
+  // Call the function to load remote data when the DOM is fully loaded
+  // This ensures that the function is called after the HTML content is loaded
+  // and the DOM is ready for manipulation
+  document.addEventListener (
+    "DOMContentLoaded",
+    () => {
+      globResponsiveSizesConstants = new ResponsiveSizesConstants();
+      globResponsiveSizesInstance = new ResponsiveSizes();
+      globResponsiveSizesInstance
+        .setResponsiveSizeConstantName( "--responsive_size" )
+        .setResponsiveSizeSelector( "html.jsx" );
       assignEventsHandlers();
-      applySizesInfo( true );
-      responsiveSizeNameTestJson( false );
-      // responsiveSizesTest( false );
-    });
-  </script>
+      let recalcMediaQueriesVariables_true = true;
+      responsiveSizeNameTestJson ( recalcMediaQueriesVariables_true );
-</body>
+    }
+  );
+</script>
 </html>

package/{css_clean_start_2.example.html → with_preloaded_fonts_cdn__preview.html} RENAMED Viewed

@@ -17,7 +17,7 @@
       type="image/x-icon"
       href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Jaisocx.ico"
       href-fallback="favicon/Icon_Jaisocx.ico"
-      onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
+      onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
     /> -->
     <link
@@ -25,7 +25,7 @@
       type="image/x-icon"
       href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
       href-fallback="favicon/Icon_Sandbox_Brightday.ico"
-      onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
+      onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
     />
@@ -103,15 +103,14 @@
-  <head>
+  </head>
   <body>
     <main>
     <h1>Css Clean Start 2</h1>
     <h2>@jaisocx/css-clean-start-2</h2>
-    <h3>css_clean_start_2.example</h3>
+    <h3> with_preloaded_fonts_cdn__preview.html </h3>
     <description>
       Css sites resetting default styles with main.css of few hundereds css code lines,
       and the very nice infrastructure for responsive sites bugfixing and fine-tuning

package/with_preloaded_fonts_node_modules__preview.html ADDED Viewed

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en" class="jsx example">
+<head>
+  <title>CssCleanStart 2</title>
+  <base href="./">
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <!--# FAVICON -->
+  <!-- <link
+    rel="icon"
+    type="image/x-icon"
+    href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Jaisocx.ico"
+    href-fallback="favicon/Icon_Jaisocx.ico"
+    onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
+  /> -->
+  <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
+      href-fallback="favicon/Icon_Sandbox_Brightday.ico"
+      onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
+  />
+  <!--# FONTS PRELOAD WITHOUT JAVASCRIPT CALL -->
+  <!-- The fonts are loaded just one time -->
+  <link
+    fetchpriority="high"
+    rel="preload"
+    as="font"
+    type="font/ttf"
+    crossorigin=""
+    href="node_modules/@jaisocx/media_tools_fonts_base/MediaAndStyles/fonts/Libre_Franklin/static/LibreFranklin-Regular.ttf"
+    href-fallback="../media_tools_fonts_base/MediaAndStyles/fonts/Libre_Franklin/static/LibreFranklin-Regular.ttf"
+    onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
+  />
+  <link
+      fetchpriority="high"
+      rel="preload"
+      as="font"
+      type="font/ttf"
+      crossorigin=""
+      href="node_modules/@jaisocx/media_tools_fonts_base/MediaAndStyles/fonts/Libre_Franklin/static/LibreFranklin-SemiBold.ttf"
+      href-fallback="../media_tools_fonts_base/MediaAndStyles/fonts/Libre_Franklin/static/LibreFranklin-SemiBold.ttf"
+      onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
+  />
+  <!-- .css LOADING FONTS-->
+  <link
+      rel="stylesheet"
+      type="text/css"
+      href="node_modules/@jaisocx/media_tools_fonts_base/MediaAndStyles/JscFonts_main_resolved.css"
+      href-fallback="../media_tools_fonts_base/MediaAndStyles/JscFonts_main_resolved.css"
+      onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
+  />
+  <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
+  <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB  -->
+  <link
+    rel="stylesheet"
+    type="text/css"
+    charset="utf-8"
+    href="MediaAndStyles/CssCleanStart_2_main_relative.css"
+  />
+  <!--# THE SAME importing @jaisocx/css-clean-start-2 IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL  -->
+<!--  <link-->
+<!--    rel="stylesheet"-->
+<!--    type="text/css"-->
+<!--    charset="utf-8"-->
+<!--    href="MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"-->
+<!--  />-->
+  <style>
+    .jsx.example {
+      --jsx--css-clean-start-2--site--margin: 0 auto 0 auto;
+      --jsx--css-clean-start-2--site--padding: 2rem;
+      --jsx--css-clean-start-2--h--margin: 1.4rem 0 0.2rem 0;
+      --jsx--css-clean-start-2--all-tags--font-family: LibreFranklin;
+      --jsx--css-clean-start-2--h1--color: #6c6c6c;
+      --jsx--css-clean-start-2--h2--color: #5c7c5c;
+      --jsx--css-clean-start-2--h3--color: #5e9e5e;
+      --jsx--css-clean-start-2--h1--font-size: 1.75rem;
+      --jsx--css-clean-start-2--h1--line-height: 1.99rem;
+      --jsx--css-clean-start-2--h2--font-size: 1.3rem;
+      --jsx--css-clean-start-2--h2--line-height: 1.49rem;
+      --jsx--css-clean-start-2--h3--font-size: 1rem;
+      --jsx--css-clean-start-2--h3--line-height: 1.4rem;
+    }
+    @supports selector(::-webkit-scrollbar) {
+      .jsx.example::-webkit-scrollbar {
+        width: 0.4rem;
+        height: 0.4rem;
+      }
+      .jsx.example::-webkit-scrollbar-thumb {
+        background-color: #5e9e5e;
+      }
+      .jsx.example::-webkit-scrollbar-track {
+        background-color:  #fafffa;
+      }
+    }
+    @supports (scrollbar-color: auto) {
+      .jsx.example {
+        scrollbar-color: #5e9e5e #fafffa;
+        scrollbar-width: thin;
+      }
+    }
+  </style>
+</head>
+<body>
+    <main>
+    <h1>Css Clean Start 2</h1>
+    <h2>@jaisocx/css-clean-start-2</h2>
+    <h3> with_preloaded_fonts_node_modules__preview.html </h3>
+    <description>
+      Css sites resetting default styles with main.css of few hundereds css code lines,
+      and the very nice infrastructure for responsive sites bugfixing and fine-tuning
+    </description>
+    <h2>1. in a custom html tag, 2 span tags</h2>
+    <h3>1.1. raw html preview</h3>
+    <pre>
+&lt;text&gt;
+  &lt;span&gt;Hello&lt;/span&gt;
+  &lt;span&gt;How are You&lt;/span&gt;
+&lt;/text&gt;</pre>
+    <h3>1.2. rendered html view</h3>
+    <text>
+      <span>Hello</span>
+      <span>How are You</span>
+    </text>
+    <h2>2. &lt;p&gt; text blocks</h2>
+    <text>
+      <p>sentence line 1. sentence line 1. sentence line 1. sentence line 1. sentence line 1.</p>
+      <p>sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2.</p>
+      <p>sentence line 3. sentence line 3. sentence line 3. sentence line 3. sentence line 3. sentence line 3.</p>
+    </text>
+    <h2>3. &lt;ul&gt;</h2>
+    <h3>3.1. &lt;ul&gt;</h3>
+    <ul>
+      <li>
+        <a href="javascript: void(0);">link example 1</a>
+      </li>
+      <li>
+        <a href="javascript: void(0);">link example 2</a>
+      </li>
+      <li>
+        <a href="javascript: void(0);">link example 3</a>
+      </li>
+    </ul>
+    <h3>3.2. &lt;ul class="ul-reset"&gt;</h3>
+    <nav class="ul-reset">
+      <ul>
+        <li>
+          <a href="javascript: void(0);">link example 1</a>
+        </li>
+        <li>
+          <a href="javascript: void(0);">link example 2</a>
+        </li>
+        <li>
+          <a href="javascript: void(0);">link example 3</a>
+        </li>
+      </ul>
+    </nav>
+    <h2>4. &lt;table&gt;</h2>
+    <table>
+      <!-- Table Caption -->
+      <caption>Table Caption</caption>
+      <!-- Define column styles -->
+      <colgroup>
+          <col style="width: 8rem;">
+          <col style="width: 8rem;">
+          <col style="width: 8rem;">
+          <col style="width: 8rem;">
+      </colgroup>
+      <!-- Table Header -->
+      <thead>
+          <tr>
+              <th>Product</th>
+              <th>Price</th>
+              <th>Quantity</th>
+              <th>Total</th>
+          </tr>
+      </thead>
+      <!-- Table Body -->
+      <tbody>
+          <tr>
+              <td>Apple</td>
+              <td>$1.00</td>
+              <td>5</td>
+              <td>$5.00</td>
+          </tr>
+          <tr>
+              <td>Banana</td>
+              <td>$0.50</td>
+              <td>10</td>
+              <td>$5.00</td>
+          </tr>
+          <tr>
+              <td>Orange</td>
+              <td>$0.80</td>
+              <td>7</td>
+              <td>$5.60</td>
+          </tr>
+      </tbody>
+      <!-- Table Footer -->
+      <tfoot>
+          <tr>
+              <td colspan="3">Sum</td>
+              <td>$15.60</td>
+          </tr>
+      </tfoot>
+    </table>
+    <h2>5. &lt;pre&gt;</h2>
+    <pre>
+Shopping List:
+- Apples
+- Bananas
+- Milk
+- Bread
+    </pre>
+  </main>
+  <script>
+  // document.addEventListener('DOMContentLoaded', () => {
+  //   //
+  // });
+  </script>
+</body>
+</html>