inherentlee/fedizinefest
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Exporting to glitchdotcom/glitch-hello-website

Browse Source 
./style.css:31317407/252
./script.js:31317407/2018
./index.html:31317407/6092
./README.md:31317407/4962
This commit is contained in:
Glitch (glitch-hello-website)
2023-02-28 11:01:23 +00:00
parent 7435f96a27
commit 96abb0b89d
4 changed files with 67 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@ -2,7 +2,7 @@
This is a basic HTML starter project you can build on however you like. No need to save. While you develop your site, your changes will happen ✨ immediately in the preview window. On the left you'll see the files that make up your site, including HTML, JavaScript, and CSS. You can upload assets like images or audio in `assets`. The rest is up to you and your imagination. 🦄
_Last updated: 23 Feb 2023_
_Last updated: 28 Feb 2023_
## What's in this project?
@ -22,6 +22,22 @@ Take a look in `TODO.md` for next steps you can try out in your new site!
___Want a minimal version of this project to build your own website? Check out [Blank Website](https://glitch.com/edit/#!/remix/glitch-blank-website)!___
## Ready to share your site?
Add these meta tags for SEO and social sharing between your page `<head></head>` tags, changing the values for your site:
```
<link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
<meta name="description" content="A simple website, built with Glitch. Remix it to get your own."/>
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Hello World!" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://glitch-hello-website.glitch.me/" />
<meta property="og:description" content="A simple website, built with Glitch. Remix it to get your own."/>
<meta property="og:image" content="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-website-social.png?v=1616712748147"/>
<meta name="twitter:card" content="summary" />
```
![Glitch](https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576)
## You built this with Glitch!

63
index.html
View File

@ -2,9 +2,8 @@
<html lang="en">
<head>
<!--
This is the page head - it contains info the browser uses to display the page
You won't see what's in the head in the page
Scroll down to the body element for the page content
This is an HTML comment
You can write text in a comment and the content won't be visible in the page
-->
<meta charset="utf-8" />
@ -12,77 +11,49 @@
<link rel="icon" href="https://glitch.com/favicon.ico" />
<!--
This is an HTML comment
You can write text in a comment and the content won't be visible in the page
This is the page head - it contains info the browser uses
Like the title, which appears on the browser tab but not inside the page
Further down you'll see the content that displays in the page
-->
<title>Hello World!</title>
<!-- Meta tags for SEO and social sharing -->
<link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
<meta
name="description"
content="A simple website, built with Glitch. Remix it to get your own."
/>
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Hello World!" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://glitch-hello-website.glitch.me/" />
<meta
property="og:description"
content="A simple website, built with Glitch. Remix it to get your own."
/>
<meta
property="og:image"
content="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-website-social.png?v=1616712748147"
/>
<meta name="twitter:card" content="summary" />
<!-- Import the webpage's stylesheet -->
<!-- The website stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- Import the webpage's javascript file -->
<!-- The website JavaScript file -->
<script src="/script.js" defer></script>
</head>
<body>
<!--
This is the body of the page
Look at the elements and see how they appear in the rendered page on the right
Each element is defined using tags, with < and > indicating where each one opens and closes
There are elements for sections of the page, images, text, and more
The elements include attributes referenced in the CSS for the page style
The body includes the content you see in the page
Each element is defined using tags, like this <div></div>
The attributes like class="wrapper" let us style elements in the CSS
-->
<!-- The wrapper and content divs set margins and positioning -->
<div class="wrapper">
<div class="content" role="main">
<!-- This is the start of content for our page -->
<h1 class="title">Hello World!</h1>
<img
src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fillustration.svg?v=1618177344016"
class="illustration"
alt="Editor illustration"
title="Click the image!"
/>
<!-- Instructions on using this project -->
<div class="instructions">
<h2>
Using this project
</h2>
<h2>Using this project</h2>
<p>
This is the Glitch <strong>Hello Website</strong> project. You can
use it to build your own site. Check out README.md in the editor for
more info and next steps you can take!
use it to build your own site. Check out the code in the editor and open
the <span class="fileopener" data-file="TODO.md" data-line="0"
>TODO</span> for next steps!
</p>
<!-- ADD BUTTON HERE -->
<!-- 🚧 TODO: ADD BUTTON HERE -->
<!-- Once you've added the button from the TODO, click it in the page -->
<!-- Once you've added the button from TODO.md, click it in the page -->
<!-- Check out the function in script.js to see how it works -->
</div>
</div>
</div>
<!-- The footer holds our remix button — you can use it for structure or cut it out ✂ -->
<!-- The footer holds our remix button — you can keep or delete it ✂ -->
<footer class="footer">
<div class="links"></div>
<a

29
script.js
View File

@ -1,6 +1,5 @@
/*
This is your site JavaScript code - you can add interactivity and carry out processing
- Initially the JS writes a message to the console, and moves a button you can add from the TODO
This is your site JavaScript code - you can add interactivity!
*/
// Print a message in the browser's dev tools console each time the page loads
@ -9,19 +8,27 @@ console.log("Hello 🌎");
/*
Make the "Click me!" button move when the visitor clicks it:
- First add the button to the page by following steps in the TODO
- First add the button to the page by following the steps in the TODO 🚧
*/
const btn = document.querySelector("button"); // Get the button from the page
// Detect clicks on the button
if (btn) {
if (btn) { // Detect clicks on the button
btn.onclick = function () {
// The JS works in conjunction with the 'dipped' code in style.css
// The 'dipped' class in style.css changes the appearance on click
btn.classList.toggle("dipped");
};
}
// This is a single line JS comment
/*
This is a comment that can span multiple lines
- use comments to make your own notes!
*/
// ----- GLITCH STARTER PROJECT HELPER CODE -----
// Open file when the link in the preview is clicked
let goto = (file, line) => {
window.parent.postMessage(
{ type: "glitch/go-to-line", payload: { filePath: file, line: line } }, "*"
);
};
// Get the file opening button from its class name
const filer = document.querySelectorAll(".fileopener");
filer.forEach((f) => {
f.onclick = () => { goto(f.dataset.file, f.dataset.line); };
});

11
style.css
View File

@ -182,3 +182,14 @@ h2 {
.dipped {
transform: translateY(5px);
}
/* Links that open files in the editor */
.fileopener {
cursor:pointer;
font-weight:bold;
border-bottom:3px solid var(--color-primary);
color: var(--color-secondary);
}
.fileopener:hover {
border-bottom:3px solid var(--color-secondary);
}