🌺💾 Checkpoint

./styles/main.css:69682263/1356
./index.html:69682263/350
This commit is contained in:
Glitch (glitch-hello-website)
2024-12-11 23:53:48 +00:00
parent a20dd7c01b
commit 728a8bcbfd
3 changed files with 23 additions and 35 deletions

19
TODO.md
View File

@ -1,19 +0,0 @@
# TODO 🚧
Your new site is all yours so it doesn't matter if you break it! Try editing the codeadd a button element that moves when the user clicks it.
In `index.html`, add this code on the line after the comment with `ADD BUTTON HERE` in it (you can copy and paste the button element HTML):
```html
<button>
Click me!
</button>
```
Look at the page to see the button. Click it!
Open `script.js` to see the script that makes the button move.
## Keep going! 🚀
Try adding more properties to the CSS `dipped` style for the button to see how the changes appear on click.

View File

@ -17,21 +17,27 @@
<body>
<div class="wrapper">
<div class="content" role="main">
<div class="wip">
<p>
This site is a <b>work in progress!</b> If you experience issues,
please try waiting a minute and re-loading before reaching out with
questions.
</p>
</div>
<h1 class="title">FediZineFest 2025</h1>
<h2>
What:
What
</h2>
<p>
A zine sharing and distribution project for the fediverse.
</p>
<h2>
Who:
Who
</h2>
<p>
Two groups: artists and backers.
</p>
<h3>
Artists (cap of 20)
@ -48,7 +54,7 @@
</p>
<h2>
When:
When
</h2>
<p>
Early-mid 2025. Exact dates proposed below.

View File

@ -3,7 +3,7 @@
--color-bg: #f0f0f0;
--color-text-main: #640054;
--color-text-header: #185370;
--color-primary: #FFFF00;
--color-warn: #FBCC0A;
--wrapper-height: 87vh;
--image-max-width: 300px;
--image-margin: 3rem;
@ -32,14 +32,6 @@
format("opentype");
}
/* Links */
a:link,
a:visited {
color: var(--color-text-header);
font-size: 1.1rem;
text-decoration: underline solid 3px var(--color-text-main);
}
/* Navigation grid */
.footer {
display: flex;
@ -64,6 +56,15 @@ body {
color: var(--color-text-main);
}
/* Links */
a:link,
a:visited {
color: var(--color-text-header);
font-size: 1.1rem;
font-weight: bold;
border-radius: 1rem;
}
/* Page structure */
.wrapper {
min-height: var(--wrapper-height);