make basic changes to index, add font files and CSS for font usage
also ignore .DS_Store files cause macOS is annoying
This commit is contained in:
parent
f8bc44315d
commit
5908d01267
|
@ -1,2 +1,3 @@
|
|||
Shadowheart Club.bbprojectd/*
|
||||
Shadowheart Club.bbprojectd
|
||||
.DS_Store
|
||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -0,0 +1,57 @@
|
|||
/* Variable fonts usage:
|
||||
:root { font-family: "Inter", sans-serif; }
|
||||
@supports (font-variation-settings: normal) {
|
||||
:root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
|
||||
} */
|
||||
@font-face {
|
||||
font-family: InterVariable;
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("InterVariable.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: InterVariable;
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("InterVariable-Italic.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* static fonts */
|
||||
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("Inter-Thin.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("Inter-ThinItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("Inter-ExtraLight.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("Inter-ExtraLightItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("Inter-Light.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("Inter-LightItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("Inter-Regular.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("Inter-Italic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("Inter-Medium.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("Inter-MediumItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("Inter-SemiBold.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("Inter-SemiBoldItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("Inter-Bold.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("Inter-BoldItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("Inter-ExtraBold.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("Inter-ExtraBoldItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("Inter-Black.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("Inter-BlackItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 100; font-display: swap; src: url("InterDisplay-Thin.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 100; font-display: swap; src: url("InterDisplay-ThinItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 200; font-display: swap; src: url("InterDisplay-ExtraLight.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 200; font-display: swap; src: url("InterDisplay-ExtraLightItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 300; font-display: swap; src: url("InterDisplay-Light.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 300; font-display: swap; src: url("InterDisplay-LightItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("InterDisplay-Regular.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 400; font-display: swap; src: url("InterDisplay-Italic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 500; font-display: swap; src: url("InterDisplay-Medium.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 500; font-display: swap; src: url("InterDisplay-MediumItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 600; font-display: swap; src: url("InterDisplay-SemiBold.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 600; font-display: swap; src: url("InterDisplay-SemiBoldItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 700; font-display: swap; src: url("InterDisplay-Bold.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 700; font-display: swap; src: url("InterDisplay-BoldItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 800; font-display: swap; src: url("InterDisplay-ExtraBold.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 800; font-display: swap; src: url("InterDisplay-ExtraBoldItalic.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 900; font-display: swap; src: url("InterDisplay-Black.woff2") format("woff2"); }
|
||||
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 900; font-display: swap; src: url("InterDisplay-BlackItalic.woff2") format("woff2"); }
|
|
@ -0,0 +1,67 @@
|
|||
/*
|
||||
Font families defined by this CSS:
|
||||
- InterVariable variable font for modern web browsers
|
||||
- Inter static fonts for older web browsers (small optical size)
|
||||
- InterDisplay static fonts for older web browsers (large optical size)
|
||||
|
||||
Usage example:
|
||||
:root { font-family: Inter, sans-serif; }
|
||||
@supports (font-variation-settings: normal) {
|
||||
:root { font-family: InterVariable, sans-serif; }
|
||||
}
|
||||
|
||||
*/
|
||||
@font-face {
|
||||
font-family: InterVariable;
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url('font-files/InterVariable.woff2?v=4.0') format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: InterVariable;
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url('font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
|
||||
}
|
||||
/* legacy name "Inter var" (Oct 2023) */
|
||||
@font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable.woff2?v=4.0') format('woff2'); }
|
||||
@font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable-Italic.woff2?v=4.0') format('woff2'); }
|
||||
/* static fonts */
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:100; font-display:swap; src:url("font-files/Inter-Thin.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:100; font-display:swap; src:url("font-files/Inter-ThinItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:200; font-display:swap; src:url("font-files/Inter-ExtraLight.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:200; font-display:swap; src:url("font-files/Inter-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:300; font-display:swap; src:url("font-files/Inter-Light.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:300; font-display:swap; src:url("font-files/Inter-LightItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url("font-files/Inter-Regular.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:400; font-display:swap; src:url("font-files/Inter-Italic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:500; font-display:swap; src:url("font-files/Inter-Medium.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:500; font-display:swap; src:url("font-files/Inter-MediumItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:600; font-display:swap; src:url("font-files/Inter-SemiBold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:600; font-display:swap; src:url("font-files/Inter-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:700; font-display:swap; src:url("font-files/Inter-Bold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:700; font-display:swap; src:url("font-files/Inter-BoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:800; font-display:swap; src:url("font-files/Inter-ExtraBold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:800; font-display:swap; src:url("font-files/Inter-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:900; font-display:swap; src:url("font-files/Inter-Black.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:900; font-display:swap; src:url("font-files/Inter-BlackItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:100; font-display:swap; src:url("font-files/InterDisplay-Thin.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:100; font-display:swap; src:url("font-files/InterDisplay-ThinItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:200; font-display:swap; src:url("font-files/InterDisplay-ExtraLight.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:200; font-display:swap; src:url("font-files/InterDisplay-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:300; font-display:swap; src:url("font-files/InterDisplay-Light.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:300; font-display:swap; src:url("font-files/InterDisplay-LightItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:400; font-display:swap; src:url("font-files/InterDisplay-Regular.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:400; font-display:swap; src:url("font-files/InterDisplay-Italic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:500; font-display:swap; src:url("font-files/InterDisplay-Medium.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:500; font-display:swap; src:url("font-files/InterDisplay-MediumItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:600; font-display:swap; src:url("font-files/InterDisplay-SemiBold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:600; font-display:swap; src:url("font-files/InterDisplay-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:700; font-display:swap; src:url("font-files/InterDisplay-Bold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:700; font-display:swap; src:url("font-files/InterDisplay-BoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:800; font-display:swap; src:url("font-files/InterDisplay-ExtraBold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:800; font-display:swap; src:url("font-files/InterDisplay-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:900; font-display:swap; src:url("font-files/InterDisplay-Black.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:900; font-display:swap; src:url("font-files/InterDisplay-BlackItalic.woff2?v=4.0") format("woff2"); }
|
|
@ -0,0 +1,8 @@
|
|||
/* We are using the Inter font typeface */
|
||||
:root {
|
||||
font-family: Inter, sans-serif;
|
||||
font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
|
||||
}
|
||||
@supports (font-variation-settings: normal) {
|
||||
:root { font-family: InterVariable, sans-serif; }
|
||||
}
|
101
index.html
101
index.html
|
@ -0,0 +1,101 @@
|
|||
<!doctype html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>Home | Shadowheart Club</title>
|
||||
<link rel="stylesheet" href="css/inter.css">
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Here is our main header that is used across all the pages of our website -->
|
||||
|
||||
<header>
|
||||
<h1>Welcome to the Shadowheart Club!</h1>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Gallery</a></li>
|
||||
<li><a href="#">Quotes</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- A Search form is another common non-linear way to navigate through a website.
|
||||
|
||||
<form>
|
||||
<input type="search" name="q" placeholder="Search query" />
|
||||
<input type="submit" value="Go!" />
|
||||
</form>
|
||||
-->
|
||||
</nav>
|
||||
|
||||
<!-- Here is our page's main content -->
|
||||
<main>
|
||||
<!-- It contains an article -->
|
||||
<article>
|
||||
<h2>Article heading</h2>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
|
||||
lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
|
||||
viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
|
||||
et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
|
||||
congue enim, ut porta lorem lacinia consectetur.
|
||||
</p>
|
||||
|
||||
<h3>Subsection</h3>
|
||||
|
||||
<p>
|
||||
Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
|
||||
dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
|
||||
Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Pelientesque auctor nisi id magna consequat sagittis. Curabitur
|
||||
dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
|
||||
Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
|
||||
</p>
|
||||
|
||||
<h3>Another subsection</h3>
|
||||
|
||||
<p>
|
||||
Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
|
||||
soclis natoque penatibus et manis dis parturient montes, nascetur
|
||||
ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
|
||||
facilisis semper ac in est.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
|
||||
tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
|
||||
ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
|
||||
diam iaculis velit, is fringille sem nunc vet mi.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<!-- the aside content can also be nested within the main content -->
|
||||
<aside>
|
||||
<h2>Related</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Oh I do like to be beside the seaside</a></li>
|
||||
<li><a href="#">Oh I do like to be beside the sea</a></li>
|
||||
<li><a href="#">Although in the North of England</a></li>
|
||||
<li><a href="#">It never stops raining</a></li>
|
||||
<li><a href="#">Oh well…</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<!-- And here is our main footer that is used across all the pages of our website -->
|
||||
|
||||
<footer>
|
||||
<p>Made with love by <a href="https://sadiqsaif.com">packetcat</a>. All content falls under the <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA</a> license.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue