generator-website-starter
Version:
A website generator using semantic markup, SASS, Gulp, Imagemin and Browser-sync
107 lines (90 loc) • 3.15 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project 1</title>
<!-- Add google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;500;800&display=swap" rel="stylesheet">
<!-- CSS File -->
<link rel="stylesheet" type="text/css" href="dist/style.css?cb=1682654650041">
</head>
<body>
<nav>
<ul>
<li>logo</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 2</li>
</ul>
</nav>
<main>
<section>
<article>
<h1>This is Project 1 with Sass, BEM and Gulp</h1>
<p>Website starter using Gulp, Sass and Browser-sync</p>
</article>
</section>
</main>
<section>
<article>
<header>
<h1>Card 1</h1>
</header>
<details>
<summary>Description of card 1 with Jpeg image</summary>
<p>This is a brief description that contains 20 words or less</p>
</details>
<img src="/app/images/Frame-350x350.jpg" alt="jpg image">
</article>
<article>
<header>
<h1>Card 2</h1>
</header>
<details>
<summary>Description of card 2 with PNG image</summary>
<p>This is a brief description that contains 20 words or less</p>
</details>
<img src="/app/images/Frame-350x350.png" alt="png image">
</article>
<article>
<header>
<h1>Card 3</h1>
</header>
<details>
<summary>Description of card 3 with WebP image</summary>
<p>This is a brief description that contains 20 words or less</p>
</details>
<img src="/app/images/Frame-350x350.webp" alt="webp image">
</article>
<article>
<header>
<h1>Card 4</h1>
</header>
<details>
<summary>Description of card 4 with SVG image</summary>
<p>This is a brief description that contains 20 words or less</p>
</details>
<img src="/app/images/Frame-350x350.svg" alt="svg image">
</article>
<article>
<header>
<h1>Card 5</h1>
</header>
<details>
<summary>Description of card 5 with GIF image</summary>
<p>This is a brief description that contains 20 words or less</p>
</details>
<img src="/app/images/Cartoon-Gif-Animated1.gif" alt="gif image">
</article>
</section>
<footer>Footer text</footer>
</body>
<!-- Javascript File -->
<script src="dist/all.js?cb=1682654650041"></script>
</html>