HTML Boilerplate

              
<!DOCTYPE html>
<!-- 
TODO: language
https://www.w3schools.com/tags/ref_language_codes.asp 
-->
<html lang="en">
  <head>
    <!-- TODO: Google Analytics: replace GA_TRACKING_ID to be your site's ID. -->
    <!--
    <script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'GA_TRACKING_ID');
    </script>
    -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- TODO: Page title (max: 70 characters) -->
    <title>
      Plasttic | HTML Boilerplate, Atomic Design CSS Framework and Best
      Practices Template
    </title>

    <!-- TODO: No Crawling on 404, Temporary pages and others -->
    <!--
    <meta name="robots" content="nofollow">
    <meta name="googlebot" content="noindex">
    -->
    <meta
      name="robots"
      content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"
    />

    <!-- TODO: Website description  -->
    <meta
      name="description"
      content="Plasttic is a HTML Boilerplate, Atomic Design CSS Framework and Best Practices Template."
    />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- TODO: Page URL -->
    <link rel="canonical" href="https://plasttic.dev/" />

    <!-- TODO: Open Graph -->
    <!--   
    Personalize by Page
    https://ogp.me 
    https://developers.facebook.com/tools/debug/ 
    -->
    <meta property="og:title" content="Plasttic: Web Boilerplate" />
    <meta
      property="og:description"
      content="Plasttic is a HTML Boilerplate, Atomic Design CSS Framework and Best Practices Template."
    />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:site_name" content="Plasttic" />
    <meta property="og:url" content="https://plasttic.dev/" />
    <meta
      name="og:image"
      content="https://plasttic.dev/assets/img/social/default-banner-1200_630.png"
    />
    <meta name="og:image:alt" content="Plasttic logo banner" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:type" content="image/png" />

    <!-- TODO: Twitter Cards -->
    <!-- 
    https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#opengraph
    Most information is provided by the Open Graph meta tags
    -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@tojeiro_me" />

    <!-- TODO: About the author of the website -->
    <link rel="author" href="/humans.txt" />

    <!-- TODO: Icons -->
    <!-- 
    https://realfavicongenerator.net/
    -->
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <meta name="msapplication-TileColor" content="#2d89ef" />

    <!-- TODO: Web App Manifest -->
    <!-- 
    https://developer.mozilla.org/en-US/docs/Web/Manifest
    -->
    <link rel="manifest" href="/manifest.json" />

    <!-- TODO: Theme-color -->
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color -->
    <meta name="theme-color" content="#ffffff" />

    <!-- TODO: Fonts -->
    <!-- 1. Local hosted (preload for @font-face) -->
    <link
      rel="preload"
      href="/assets/fonts/roboto-latin-300-normal.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/assets/fonts/roboto-latin-400-normal.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/assets/fonts/roboto-latin-500-normal.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />

    <!-- 2. Google Fonts -->
    <!--
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://fonts.gstatic.com/">
    <link rel="preload" as="style"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
    -->

    <!-- TODO: Preconnect to CDNs: JS, CSS, Media, ... -->
    <!--
    <link rel="preconnect" href="https://unpkg.com/" crossorigin />
    <link rel="dns-prefetch" href="https://unpkg.com/" />
    -->

    <link rel="stylesheet" href="/assets/css/styles.css" />

    <!-- TODO: Print rules (optional) -->
    <link rel="stylesheet" href="/assets/css/print.css" media="print" />

    <!-- TODO: JS async/defer -->
    <!--
    All the javascript files will be concatenated and minified into scripts.min.js.
    The files inside the "vendor" folder remain untouched. 
    -->
    <script src="/assets/js/scripts.min.js" defer></script>
  </head>

  <body>
    <!------------ WEBSITE CONTENT------------->
  </body>
</html>

              
            

Copy