added web template

This commit is contained in:
Bit Borealis 2022-08-17 22:36:38 +00:00
parent 7fc6fdddd9
commit 2d7820295c
Signed by: theotheroracle
GPG key ID: 2D816A2DCA6E5649
9 changed files with 137 additions and 0 deletions

BIN
src/blur1.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
src/comfortaa/comfortaa-bold.woff2 (Stored with Git LFS) Normal file

Binary file not shown.

BIN
src/comfortaa/comfortaa-light.woff2 (Stored with Git LFS) Normal file

Binary file not shown.

BIN
src/comfortaa/comfortaa-medium.woff2 (Stored with Git LFS) Normal file

Binary file not shown.

BIN
src/comfortaa/comfortaa-regular.woff2 (Stored with Git LFS) Normal file

Binary file not shown.

BIN
src/comfortaa/comfortaa-semibold.woff2 (Stored with Git LFS) Normal file

Binary file not shown.

View file

@ -0,0 +1,36 @@
/* comfortaa-regular */
@font-face {
font-family: Comfortaa;
font-style: normal;
font-weight: 400;
src: local("Comfortaa Regular"), local("Comfortaa-Regular"), url(comfortaa-regular.woff2) format("woff2");
}
/* comfortaa-bold */
@font-face {
font-family: Comfortaa;
font-style: normal;
font-weight: 700;
src: local("Comfortaa Bold"), local("Comfortaa-Bold"), url(comfortaa-bold.woff2) format("woff2");
}
/* comfortaa-semibold */
@font-face {
font-family: Comfortaa;
font-style: normal;
font-weight: 400;
src: local("Comfortaa SemiBold"), local("Comfortaa-SemiBold"), url(comfortaa-semibold.woff2) format("woff2");
}
/* comfortaa-medium */
@font-face {
font-family: Comfortaa;
font-style: normal;
font-weight: 500;
src: local("Comfortaa Medium"), local("Comfortaa-Medium"), url(comfortaa-medium.woff2) format("woff2");
}
/* comfortaa-light */
@font-face {
font-family: Comfortaa;
font-style: normal;
font-weight: 300;
src: local("Comfortaa Light"), local("Comfortaa-Light"), url(comfortaa-light.woff2) format("woff2");
}

46
src/gallery.css Normal file
View file

@ -0,0 +1,46 @@
@import url("comfortaa/comfortaa.css");
body {
padding: 20px 10%;
margin: 0;
font-family: Comfortaa, sans-serif;
}
h1 {
margin: 0;
font-size: 60px;
}
p {
margin:0;
}
img {
max-width: 400px;
min-width: 300px;
flex-grow: 1;
border-radius: 40px;
}
header {
align-items: center;
padding: 20px;
display: grid;
grid-template-columns: 0fr 1fr;
gap: 40px;
margin-bottom: 20px;
}
main {
gap: 40px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.description {
margin-top: 5px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

37
src/index.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=525">
<title>Aviary</title>
<link href="gallery.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Gallery</h1>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore disputandum putant. Sed ut omittam pericula, labores, dolorem etiam, quem
optimus quisque pro patria et pro suis suscipit, ut non dicas, quid non probes. Principio,
inquam, in physicis, quibus maxime gloriatur, primum totus est alienus. Democritea dicit
perpauca mutans, sed ita, ut ea, quae dixi, sole ipso illustriora et clariora.
Bonas verbis electis graviter ornateque dictas quis non legat? nisi qui se Latina scripta dicunt
contemnere. in quibus sequitur Democritum, non fere labitur. quamquam utriusque cum multa non probo,
inquam. De cetero vellem equidem aut ipse doctrinis.
</p>
</header>
<main>
<img src="blur1.png">
<img src="blur1.png">
<img src="blur1.png">
<img src="blur1.png">
<img src="blur1.png">
<img src="blur1.png">
<img src="blur1.png">
<img src="blur1.png">
<img src="blur1.png">
<img src="blur1.png">
<img src="blur1.png">
<img src="blur1.png">
</main>
<body>