<!DOCTYPE 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">
<!--
,-------------- EDIT TAB TITLE START --------------,
| Add your website title here, it will appear in |
| the browser's tab. |
| -->
<title>My Website Title</title>
<!-- |
'--------------- EDIT TAB TITLE END ---------------'
-->
<style>
/*
,------------- THIS BIT IS SO STYLISH -------------,
| In this <style> section, the cool stuff happens! |
| Don't worry about it for now. Or have a play! |
| */
:root {
/* |
| try out a different color here - hex code, hsl() |
| rgb() or even a color name like RebeccaPurple: |
| */
--theme-color: RebeccaPurple;
--normal-text: 400;
--bold-text: 500;
color-scheme: light dark;
font-family: system-ui, sans-serif;
font-weight: var(--normal-text);
line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
:root {
--normal-text: 300;
--bold-text: 400;
}
}
body {
margin: 0;
}
body>* {
padding: 0.5rem;
}
header,
footer {
text-align: center;
padding: 1em;
background-color: color-mix(in srgb, var(--theme-color) 25%, Canvas);
}
main>* {
max-width: 80ch;
margin-inline: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: var(--bold-text);
}
#intro {
max-width: 40ch;
margin-inline: auto;
}
article {
margin-block: 2em;
}
img {
max-width: min(100%, 80ch);
display: block;
margin: 1.5em auto;
border-radius: 0.25rem;
}
/* |
'------------- THIS BIT WAS SO STYLISH ------------'
*/
</style>
</head>
<body>
<header>
<h1>
<!--
,----------- EDIT TITLE HEADING START -------------,
| Add your website title here, it will appear at |
| the top of the page |
| -->
My Website Title
<!-- |
'------------ EDIT TITLE HEADING END --------------'
-->
</h1>
<p>
<!--
,------------- EDIT SUBHEADING START --------------,
| -->
The Best Website You've Ever Seen!
<!-- |
'-------------- EDIT SUBHEADING END ---------------'
-->
</p>
</header>
<main>
<section id="intro">
<h2>
<!--
,------------ EDIT INTRO HEADING START ------------,
| Welcome your visitors to your page with an |
| introduction! First, the heading: |
| -->
Welcome!
<!-- |
'------------ EDIT INTRO HEADING END --------------'
-->
</h2>
<p>
<!--
,---------------- EDIT INTRO START ----------------,
| Now the introduction text: |
| -->
Welcome to my brand new website! I'm learning how to do this from scratch. Editing HTML code is new and interesting...
<!-- |
'----------------- EDIT INTRO END -----------------'
-->
</p>
</section>
<section>
<!--
,------------- ARTICLE TEMPLATE START -------------,
| This is an article, copy and paste the following |
| part to add more posts, or images, to your page: |
| -->
<article>
<!-- |
| ,------ EDIT ARTICLE HEADING START -------, |
| | -->
<h2>Example Article</h2>
<!-- | |
| '------- EDIT ARTICLE HEADING END --------' |
| |
| ,------- EDIT ARTICLE IMAGE START --------, |
| | To include an image, the address goes | |
| | within the "quotes" after src= | |
| | Add an image description in "quotes" | |
| | after alt= for people who can't see it. | |
| | -->
<image src="https://picsum.photos/id/82/600/400" alt="A pretty photograph of cherry blossom." />
<!-- | |
| '-------- EDIT ARTICLE IMAGE END ---------' |
| |
| ,-------- EDIT ARTICLE TEXT START --------, |
| | Add text into your article here between | |
| | <p> and </p>. To add a new paragraph, | |
| | make another <p></p> pair and put the | |
| | text in between. If you want just a new | |
| | line without a gap between paragraphs, | |
| | add a <br> instead! | |
| | -->
<h3>Here's a subheading</h3>
<p>Woohoo! My first article on my new website!</p>
<p>Here's the second paragraph of my first article on my new website :)
<br>Look, this sentence is on a new line.
</p>
<h3>This article has another heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus lectus. Suspendisse vestibulum eleifend dui, ac auctor urna gravida ut. Donec nec augue urna. Mauris vitae congue metus, non efficitur dui. Ut massa est, maximus id nibh vel, faucibus commodo enim. Ut suscipit dolor velit, ut commodo mauris interdum non. Pellentesque pellentesque, nibh pharetra maximus accumsan, justo turpis laoreet nibh, vel ornare tortor neque non nunc. Nam lectus dui, tincidunt eu maximus at, blandit sit amet mi. Morbi ac tempor purus, ut consequat turpis. Cras eget ligula finibus justo aliquam feugiat eget ac felis. Duis sagittis ante sed sem posuere, ac egestas dui tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer pharetra ultrices enim. Integer rutrum, arcu vel scelerisque sollicitudin, nisi arcu placerat tellus, quis aliquam augue tortor a urna. Sed feugiat, dui quis cursus feugiat, mauris velit pharetra nunc, nec vestibulum nulla enim vitae lorem.</p>
<p>Fusce diam neque, pretium vel interdum consectetur, tempor id quam. Etiam at faucibus sem, quis egestas augue. Maecenas id orci id ligula eleifend suscipit. Nullam a dictum nunc, et tempus odio. Aliquam id nisi ut ex ultrices dapibus quis pellentesque lorem. Nulla facilisis justo imperdiet rutrum aliquam. Curabitur molestie, nulla eu consectetur tincidunt, odio odio cursus enim, at finibus arcu nisi eu mi. Aenean sem ante, fermentum vel interdum vitae, pharetra at nibh. Proin ut nisi et turpis dictum tincidunt vel ut risus. Duis scelerisque mauris sit amet congue auctor.</p>
<!-- | |
| '--------- EDIT ARTICLE TEXT END ---------' |
| -->
</article>
<!-- |
'-------------- ARTICLE TEMPLATE END --------------'
-->
<!--
,------------- ARTICLE TEMPLATE START -------------,
| This is an article, copy and paste the following |
| part to add more posts, or images, to your page: |
| -->
<article>
<h2>
<!-- |
,------ EDIT ARTICLE HEADING START ------, |
| -->
Example Article 2
<!-- | |
'------- EDIT ARTICLE HEADING END -------' |
-->
</h2>
<!-- |
,-------- EDIT ARTICLE TEXT START --------, |
| Add text into your article here between | |
| <p> and </p>. To add a new paragraph, | |
| make another <p></p> pair and put the | |
| text in between. If you want just a new | |
| line without a gap between paragraphs, | |
| | add a <br> instead! | |
| | -->
<p>Woohoo! My second article on my new website! This one has no image, I don't always need one.</p>
<p>Here's the second paragraph of my second article on my new website :)
<br>Look, this sentence is on a new line.
</p>
<!-- | |
| '--------- EDIT ARTICLE TEXT END ---------' |
| -->
</article>
<!-- |
'-------------- ARTICLE TEMPLATE END --------------'
-->
</section>
<section>
<h2>Like this site?</h2>
<details>
<summary>Click here to see, edit, and copy or download the code.</summary>
<textarea id="htmlCode" rows="50" cols="52">
<!DOCTYPE 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">
<!--
,-------------- EDIT TAB TITLE START --------------,
| Add your website title here, it will appear in |
| the browser's tab. |
| -->
<title>My Website Title</title>
<!-- |
'--------------- EDIT TAB TITLE END ---------------'
-->
<style>
/*
,------------- THIS BIT IS SO STYLISH -------------,
| In this <style> section, the cool stuff happens! |
| Don't worry about it for now. Or have a play! |
| */
:root {
/* |
| try out a different color here - hex code, hsl() |
| rgb() or even a color name like RebeccaPurple: |
| */
--theme-color: RebeccaPurple;
--normal-text: 400;
--bold-text: 500;
color-scheme: light dark;
font-family: system-ui, sans-serif;
font-weight: var(--normal-text);
line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
:root {
--normal-text: 300;
--bold-text: 400;
}
}
body {
margin: 0;
}
body>* {
padding: 0.5rem;
}
header,
footer {
text-align: center;
padding: 1em;
background-color: color-mix(in srgb, var(--theme-color) 25%, Canvas);
}
main>* {
max-width: 80ch;
margin-inline: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: var(--bold-text);
}
#intro {
max-width: 40ch;
margin-inline: auto;
}
article {
margin-block: 2em;
}
img {
max-width: min(100%, 80ch);
display: block;
margin: 1.5em auto;
border-radius: 0.25rem;
}
/* |
'------------- THIS BIT WAS SO STYLISH ------------'
*/
</style>
</head>
<body>
<header>
<h1>
<!--
,----------- EDIT TITLE HEADING START -------------,
| Add your website title here, it will appear at |
| the top of the page |
| -->
My Website Title
<!-- |
'------------ EDIT TITLE HEADING END --------------'
-->
</h1>
<p>
<!--
,------------- EDIT SUBHEADING START --------------,
| -->
The Best Website You've Ever Seen!
<!-- |
'-------------- EDIT SUBHEADING END ---------------'
-->
</p>
</header>
<main>
<section id="intro">
<h2>
<!--
,------------ EDIT INTRO HEADING START ------------,
| Welcome your visitors to your page with an |
| introduction! First, the heading: |
| -->
Welcome!
<!-- |
'------------ EDIT INTRO HEADING END --------------'
-->
</h2>
<p>
<!--
,---------------- EDIT INTRO START ----------------,
| Now the introduction text: |
| -->
Welcome to my brand new website! I'm learning how to do this from scratch. Editing HTML code is new and interesting...
<!-- |
'----------------- EDIT INTRO END -----------------'
-->
</p>
</section>
<section>
<!--
,------------- ARTICLE TEMPLATE START -------------,
| This is an article, copy and paste the following |
| part to add more posts, or images, to your page: |
| -->
<article>
<!-- |
| ,------ EDIT ARTICLE HEADING START -------, |
| | -->
<h2>Example Article</h2>
<!-- | |
| '------- EDIT ARTICLE HEADING END --------' |
| |
| ,------- EDIT ARTICLE IMAGE START --------, |
| | To include an image, the address goes | |
| | within the "quotes" after src= | |
| | Add an image description in "quotes" | |
| | after alt= for people who can't see it. | |
| | -->
<image src="https://picsum.photos/id/82/600/400" alt="A pretty photograph of cherry blossom." />
<!-- | |
| '-------- EDIT ARTICLE IMAGE END ---------' |
| |
| ,-------- EDIT ARTICLE TEXT START --------, |
| | Add text into your article here between | |
| | <p> and </p>. To add a new paragraph, | |
| | make another <p></p> pair and put the | |
| | text in between. If you want just a new | |
| | line without a gap between paragraphs, | |
| | add a <br> instead! | |
| | -->
<h3>Here's a subheading</h3>
<p>Woohoo! My first article on my new website!</p>
<h3>This article has another heading</h3>
<p>Here's the second paragraph of my first article on my new website :)
<br>Look, this sentence is on a new line.</p>
<!-- | |
| '--------- EDIT ARTICLE TEXT END ---------' |
| -->
</article>
<!-- |
'-------------- ARTICLE TEMPLATE END --------------'
-->
<!--
,------------- ARTICLE TEMPLATE START -------------,
| This is an article, copy and paste the following |
| part to add more posts, or images, to your page: |
| -->
<article>
<h2>
<!-- |
| ,------ EDIT ARTICLE HEADING START ------, |
| | -->
Example Article 2
<!-- | |
| '------- EDIT ARTICLE HEADING END -------' |
| -->
</h2>
<!-- |
| ,-------- EDIT ARTICLE TEXT START --------, |
| | Add text into your article here between | |
| | <p> and </p>. To add a new paragraph, | |
| | make another <p></p> pair and put the | |
| | text in between. If you want just a new | |
| | line without a gap between paragraphs, | |
| | add a <br> instead! | |
| | -->
<p>Woohoo! My second article on my new website! This one has no image, I don't always need one.</p>
<p>Here's the second paragraph of my second article on my new website :)
<br>Look, this sentence is on a new line.
</p>
<!-- | |
| '--------- EDIT ARTICLE TEXT END ---------' |
| -->
</article>
<!-- |
'-------------- ARTICLE TEMPLATE END --------------'
-->
</section>
</main>
<footer>
<!--
,------------- EDIT FOOTER INFO START -------------,
| -->
My Name 2024 - find me at <a href="https://example.com">example.com</a>
<!-- |
'-------------- EDIT FOOTER INFO END --------------'
-->
</footer>
</body>
</html>
</textarea>
<br><button class="btn" onclick="copyContent()">Copy to Clipboard</button>
or <a href="#" id="download">Download as an HTML file</a>
<p>You can use free online hosts to paste in or upload this code!</p>
<ul>
<li><a href="https://neocities.org/">Neocities</a></li>
<li><a href="https://yay.boo/">Yay.Boo</a></li>
<li><a href="https://app.netlify.com/drop">Netlify Drop</a></li>
</ul>
</details>
</section>
</main>
<footer>
<!--
,------------- EDIT FOOTER INFO START -------------,
| -->
Sara Joy 2024 - find me at <a href="https://sarajoy.dev">sarajoy.dev</a>
<!-- |
'-------------- EDIT FOOTER INFO END --------------'
-->
</footer>
<script>
const text = document.getElementById('htmlCode').value;
const copyContent = async () => {
try {
await navigator.clipboard.writeText(text);
console.log('Content copied to clipboard');
} catch (err) {
console.error('Failed to copy: ', err);
}
}
const fileName = "index.html";
const fileContent = text;
const myFile = new Blob([fileContent], {
type: 'text/plain'
});
window.URL = window.URL || window.webkitURL;
const dlBtn = document.getElementById("download");
dlBtn.setAttribute("href", window.URL.createObjectURL(myFile));
dlBtn.setAttribute("download", fileName);
</script>
</body>
</html>
!
