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

🍇💳 Checkpoint

Browse Source 
./index.html:1062301/6176
./style.css:1062301/5109
This commit is contained in:
Glitch (glitch-hello-website)
2021-04-12 21:32:32 +00:00
parent 227775698d
commit 7ced857cdd
2 changed files with 123 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
index.html
View File

@ -3,31 +3,31 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
<link rel="icon" href="https://glitch.com/favicon.ico" /> <link rel="icon" href="https://glitch.com/favicon.ico" />
<title>Hello World!</title> <title>Hello World!</title>
<!-- meta tags for SEO and social sharing -->
<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 --> <!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" /> <link rel="stylesheet" href="/style.css" />
<!-- import the webpage's javascript file --> <!-- import the webpage's javascript file -->
<script src="/script.js" defer></script> <script src="/script.js" defer></script>
<meta name="description" content="A simple website, built with Glitch. Remix it to get your own.">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://glitch-hello-website.glitch.me/">
<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">
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<div class="content"> <div class="content">
<span class="title">Hello World!</span> <h1 class="title">Hello World!</h1>
<img <img
src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fillustration.svg?v=1618177344016" src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fillustration.svg?v=1618177344016"
class="illustration" class="illustration"
@ -35,11 +35,19 @@
/> />
</div> </div>
</div> </div>
<nav class="navigation"> <footer class="footer">
<a href="https://glitch.com/edit/#!/remix/glitch-hello-website" class="btn--remix" target="_top"> <div class="links"></div>
<img src="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FLogo_Color.svg?v=1618199565140" alt="" /> <a
class="btn--remix"
target="_top"
href="https://glitch.com/edit/#!/remix/glitch-hello-website"
>
<img
src="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FLogo_Color.svg?v=1618199565140"
alt=""
/>
Remix on Glitch Remix on Glitch
</a> </a>
</nav> </footer>
</body> </body>
</html> </html>

167
style.css
View File

@ -1,44 +1,37 @@
/* Our default values set for mobile */ /******************************************************************************
START Glitch hello-app default styles
The styles in this section do some minimal CSS resets, set default fonts and
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/* Our default values set as CSS variables */
:root { :root {
--color-bg: #69F7BE; --color-bg: #69F7BE;
--color-text-main: #2800FF; --color-text-main: #2800FF;
--color-primary: #FFFF00;
--wrapper-height: 87vh; --wrapper-height: 87vh;
--image-max-width: 300px; --image-max-width: 300px;
--image-margin: 3rem; --image-margin: 3rem;
--font-family: "HK Grotesk";
--font-family-header: "HK Grotesk";
} }
/* Tablet portrait */ /* Basic page style resets */
@media (min-width: 768px) { * {
:root { box-sizing: border-box;
--wrapper-height: 87vh; }
--image-max-width: 400px; [hidden] {
--image-margin: 5rem; display: none !important;
}
}
/* Tablet Landscape */
@media (min-width: 1024px) {
:root {
--wrapper-height: 87vh;
--image-max-width: 500px;
}
}
/* Desktop */
@media (min-width: 1280px) {
:root {
--wrapper-height: 87vh;
--image-max-width: 500px;
}
} }
/* Import fonts */
@font-face { @font-face {
font-family: HK Grotesk; font-family: HK Grotesk;
src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027") src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
format("opentype"); format("opentype");
} }
@font-face { @font-face {
font-family: HK Grotesk; font-family: HK Grotesk;
font-weight: bold; font-weight: bold;
@ -46,28 +39,79 @@
format("opentype"); format("opentype");
} }
/* Our remix on glitch button */
.btn--remix {
font-family: HK Grotesk;
padding: 0.75rem 1rem;
font-size: 1.1rem;
line-height: 1rem;
font-weight: 500;
height: 2.75rem;
align-items: center;
cursor: pointer;
background: #FFFFFF;
border: 1px solid #000000;
box-sizing: border-box;
border-radius: 4px;
text-decoration: none;
color: #000;
white-space: nowrap;
}
.btn--remix img {
margin-right: 0.5rem;
}
.btn--remix:hover {
background-color: #D0FFF1;
}
/* Navigation grid */
.footer {
display: flex;
justify-content: space-between;
margin: 1rem auto 0;
padding: 1rem 0 0.75rem 0;
width: 100%;
border-top: 4px solid #fff;
}
.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
font-family: HK Grotesk;
font-style: normal;
font-weight: normal;
font-size: 1.1rem;
color: #000;
text-decoration: none;
border-style: none;
}
.footer a:hover {
background: var(--color-primary);
}
.footer .links {
padding: 0.5rem 1rem;
}
.divider {
padding: 0 1rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/
body { body {
font-family: HK Grotesk; font-family: HK Grotesk;
background-color: var(--color-bg); background-color: var(--color-bg);
} }
.title { /* Page structure */
color: var(--color-text-main);
font-family: HK Grotesk;
font-style: normal;
font-weight: bold;
font-size: 120px;
line-height: 105%;
}
.wrapper { .wrapper {
min-height: var(--wrapper-height); min-height: var(--wrapper-height);
display: grid; display: grid;
place-items: center; place-items: center;
margin-left: 2rem; margin-left: 2rem;
margin-top: 3rem; margin-top: 0;
} }
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -75,43 +119,15 @@ body {
justify-content: center; justify-content: center;
} }
/* Navigation grid */ /* Very light scaling for our illustration */
.navigation { .title {
display: flex; color: var(--color-text-main);
justify-content: flex-end;
}
/* Our remix on glitch button + grid for other actions */
.btn--remix {
font-family: HK Grotesk; font-family: HK Grotesk;
padding-left: 1rem; font-style: normal;
padding-right: 1rem; font-weight: bold;
padding-top: 0.75rem; font-size: 120px;
padding-bottom: 0.75rem; line-height: 105%;
font-size: 1.1rem; margin: 0;
line-height: 1rem;
font-weight: 500;
align-items: center;
display: inline-flex;
cursor: pointer;
background: #FFFFFF;
border: 1px solid #000000;
box-sizing: border-box;
border-radius: 4px;
color: #000;
text-decoration: none;
}
.btn--remix:hover {
background-color: #D0FFF1;
}
.btn--remix img {
margin-right: 0.5rem;
}
.btn--remix {
margin-right: 1rem;
} }
/* Very light scaling for our illustration */ /* Very light scaling for our illustration */
@ -120,8 +136,3 @@ body {
max-height: var(--image-max-width); max-height: var(--image-max-width);
margin-top: var(--image-margin); margin-top: var(--image-margin);
} }
/*
Add hover state to the buttons!! oops
*/