plasttic-boilerplate
Version:
Plasttic HTML Boilerplate: A complete HTML starter template
222 lines (201 loc) • 7.89 kB
HTML
<!-- Plasttic HTML Boilerplate v1.3.3 | MIT License | https://plasttic.dev/ -->
<!-- TODO: language -->
<!--
Format language-COUNTRY (country is optional)
https://www.w3schools.com/tags/ref_language_codes.asp
https://www.w3schools.com/tags/ref_country_codes.asp
-->
<html lang="en">
<head>
<!-- TODO: Google Tag Manager/Google Analytics -->
<!--? if Google Tag Manager is configures for Google Analytics you just need the first one -->
<!--? Google Tag Manager: replace GTM-TRACK-ID with your TAG MANAGER ID. -->
<!--
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TRACK-ID');
</script>
-->
<!--? Google Analytics: replace G-TRACK-ID with your ANALYTICS MEASUREMENT ID. -->
<!--
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TRACK-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-TRACK-ID');
</script>
-->
<meta charset="utf-8" />
<!-- TODO: (per page) Page title (max: 70 characters) -->
<title>
Plasttic HTML Boilerplate: A professional HTML5 starter template
</title>
<meta
name="robots"
content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"
/>
<!--? No Crawling on 404, Temporary pages and others (Optional) -->
<!-- If used, comment out or delete previous tag -->
<!--
<meta name="robots" content="nofollow">
<meta name="googlebot" content="noindex">
-->
<!-- TODO: Website description (recommended max: 155 characters) -->
<meta
name="description"
content="A professional and extensible HTML5 Boilerplate."
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- TODO: (per page) Page URL -->
<link rel="canonical" href="https://plasttic.dev/" />
<!-- TODO: (global or per page) Open Graph: Facebook, Twitter, LinkedIn, ... -->
<!--
https://ogp.me
https://www.opengraph.xyz/ (validate/preview)
-->
<!-- og:title (recommended max: 60 characters) -->
<meta property="og:title" content="Plasttic Web Workflow" />
<!-- og:description (recommended max: 200 characters) -->
<meta
property="og:description"
content="A professional and extensible HTML5 Boilerplate.."
/>
<!-- og:type: https://ogp.me/#types (website, article, ...) -->
<meta property="og:type" content="website" />
<!-- og:locale: format language_COUNTRY
https://www.w3schools.com/tags/ref_language_codes.asp
https://www.w3schools.com/tags/ref_country_codes.asp
-->
<meta property="og:locale" content="en_US" />
<!--? og:locale:alternate: list of other supported languages -->
<!--
<meta property="og:locale:alternate" content="pt_PT" />
<meta property="og:locale:alternate" content="fr_FR" />
-->
<!-- og:site_name: website title/blog post title -->
<meta property="og:site_name" content="Plasttic" />
<meta property="og:url" content="https://plasttic.dev/" />
<!-- og:image: website/article/blog post banner recommended:1200x627px -->
<meta
property="og:image"
content="https://plasttic.dev/img/social/social-banner-1200_627.png"
/>
<meta property="og:image:alt" content="Plasttic Web Workflow" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:type" content="image/png" />
<!-- TODO: og:type=article (articles/blog posts) https://ogp.me/#type_article -->
<!-- Time format: ISO 8601 (YYYY-MM-DDTHH:MM:SSUTC) -->
<!--
<meta
property="article:author"
content="https://www.facebook.com/goncalo.tojeiro"
/>
<meta property="article:section" content="article" />
<meta
property="article:published_time"
content="2023-06-18T16:41:30+00:00"
/>
<meta property="article:modified_time" content="2021-11-12T14:24:16-08:00" />
-->
<!-- TODO: Twitter Cards (extended by Open Graph information) -->
<!--
https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started
-->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@Plasttic_Dev" />
<meta name="twitter:creator" 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: Images (preload visible images on load) -->
<!--
<link
rel="preload"
href="/img/illustrations/hero.webp"
as="image"
fetchpriority="high"
/>
-->
<!-- TODO: Fonts -->
<!--? 1. Local hosted (preload for @font-face): (Recommended) -->
<link
rel="preload"
href="/fonts/roboto-latin-300-normal.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/roboto-latin-400-normal.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/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="https://unpkg.com/plasttic-reset@2.1" />
<link rel="stylesheet" href="/css/styles.css" />
<link rel="stylesheet" href="/css/print.css" media="print" />
<script src="/js/scripts.js" defer></script>
</head>
<body>
<!-- TODO: Google Tag Manager: replace GTM-TRACK-ID with your TAG MANAGER ID. -->
<!-- Google Tag Manager (noscript) -->
<!--
<noscript
><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-TRACK-ID"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe
></noscript>
-->
<!--? Focusable target for Top of Page (optional) -->
<a id="top"></a>
<!------------ START: WEBSITE CONTENT ------------->
<h1>Hello from Plasttic 🖖 <br />Insert website...</h1>
<!------------ END: WEBSITE CONTENT ------------->
</body>
</html>