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

💁🍁 Checkpoint

Browse Source 
./index.html:617503/7586
./style.css:617503/1840
./.glitch-assets:617503/1439
This commit is contained in:
Glitch (hello-webpage)
2020-10-15 17:23:03 +00:00
parent 8ad0f910d7
commit 47fbecb010
3 changed files with 40 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.glitch-assets
View File

@ -5,3 +5,7 @@
{"uuid":"adSBq97hhhpFNUnb","deleted":true} {"uuid":"adSBq97hhhpFNUnb","deleted":true}
{"uuid":"adSBq97hhhpFNUnc","deleted":true} {"uuid":"adSBq97hhhpFNUnc","deleted":true}
{"name":"Logo_Color.svg","date":"2020-10-15T17:02:08.576Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","type":"image/svg+xml","size":25537,"imageWidth":19,"imageHeight":14,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","thumbnailWidth":19,"thumbnailHeight":14,"uuid":"XPQ2UUJettC9yQ6L"} {"name":"Logo_Color.svg","date":"2020-10-15T17:02:08.576Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","type":"image/svg+xml","size":25537,"imageWidth":19,"imageHeight":14,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","thumbnailWidth":19,"thumbnailHeight":14,"uuid":"XPQ2UUJettC9yQ6L"}
{"name":"HKGrotesk-Medium.otf","date":"2020-10-15T17:19:39.944Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Medium.otf","type":"","size":69888,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Medium.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"mSnvx5eJut7fimxB"}
{"name":"HKGrotesk-Regular.otf","date":"2020-10-15T17:19:40.076Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf","type":"","size":67768,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Regular.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"VY2dLeOvcf8ffuEw"}
{"name":"HKGrotesk-SemiBold.otf","date":"2020-10-15T17:20:42.442Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-SemiBold.otf","type":"","size":69948,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-SemiBold.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"yEDZsSX7I7P2NlF1"}
{"name":"HKGrotesk-Bold.otf","date":"2020-10-15T17:21:24.249Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf","type":"","size":68144,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Bold.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"aHiG7zYivg7tnSDH"}

20
index.html
View File

@ -16,16 +16,20 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<div class="content"> <div class="content">
<h1>Hello world!</h1> <span class="title">Hello world!</span>
<img src="/illustration.svg" class="illustration" />
</div>
</div>
<div class="remix">
<div>
<button class="btn--remix">
<img
src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576"
/>
Remix on Glitch
</button>
</div> </div>
<img src="/illustration.svg" class="illustration" />
</div> </div>
<button class="btn--remix">
<img
src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576"
/>
Remix on Glitch
</button>
<!-- include the Glitch button to show what the webpage is about and <!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix --> to make it easier for folks to view source and remix -->

29
style.css
View File

@ -4,14 +4,29 @@
--main-text-color: #373fff; --main-text-color: #373fff;
} }
@font-face {
font-family: HK Grotesk;
src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf?v=1602782380076") format("opentype");
}
@font-face {
font-family: HK Grotesk;
font-weight: bold;
src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf?v=1602782484249") format("opentype");
}
body { body {
font-family: helvetica, arial, sans-serif; font-family: HK Grotesk;
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
} }
.title { .title {
color: var(--main-text-color); color: var(--main-text-color);
font-size: 164pt; font-family: HK Grotesk;
font-style: normal;
font-weight: bold;
font-size: 164px;
line-height: 105%;
} }
.wrapper { .wrapper {
@ -21,12 +36,17 @@ body {
} }
.content { .content {
width: clamp(23ch, 50%, 46ch);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1rem; padding: 1rem;
} }
/* Our remix on glitch button + grid for other actions */
.remix {
display: grid;
place-items: end;
}
.btn--remix { .btn--remix {
padding-left: .75rem; padding-left: .75rem;
padding-right: .75rem; padding-right: .75rem;
@ -49,6 +69,5 @@ body {
} }
.illustration { .illustration {
position: relative;
bottom: 10em;
} }