dubey/spectra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
Tanishq Dubey 2024-10-16 13:15:17 -04:00
commit d569e2e21a
7 changed files with 147 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/1.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 MiB

BIN
images/2.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 MiB

BIN
images/3.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 MiB

BIN
images/4.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 MiB

69
index.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tanishq Dubey Photography</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet">
<link href="styles/styles.css" rel="stylesheet" />
</head>
<body>
<div class="sidebar">
<h1>Tanishq Dubey Photography</h1>
</div>
<div class="photocollage">
<div class="photo">
<div class="photocontent">
<div class="photoimage">
<img class="photoimagesrc" src="images/1.JPG" alt="A Picture">
</div>
<div class="photodetails noto-sans-mono-font">
<p>2024-10-07</p>
<p>f/1.4 | 24MM | 1/100S | ISO100</p>
</div>
</div>
</div>
<div class="photo">
<div class="photocontent">
<div class = "photoimage">
<img class="photoimagesrc" src="images/2.JPG" alt="A Picture">
</div>
<div class="photodetails noto-sans-mono-font">
<p>2024-10-07</p>
<p>f/1.4 | 24MM | 1/100S | ISO100</p>
</div>
</div>
</div>
<div class="photo">
<div class="photocontent">
<div class = "photoimage">
<img class="photoimagesrc" src="images/3.JPG" alt="A Picture">
</div>
<div class="photodetails noto-sans-mono-font">
<p>2024-10-07</p>
<p>f/1.4 | 24MM | 1/100S | ISO100</p>
</div>
</div>
</div>
<div class="photo">
<div class="photocontent">
<div class = "photoimage">
<img class="photoimagesrc" src="images/4.JPG" alt="A Picture">
</div>
<div class="photodetails noto-sans-mono-font">
<p>2024-10-07</p>
<p>f/1.4 | 24MM | 1/100S | ISO100</p>
</div>
</div>
</div>
</div>
<script src="scripts/script.js"></script>
</body>
</html>

0
scripts/script.js Normal file
View File

78
styles/styles.css Normal file
View File

@ -0,0 +1,78 @@
html {
margin: 0;
height: 100vh;
}
body {
min-height: 100vh;
margin: 0;
}
.photocollage {
display: flex;
justify-content: flex-start;
align-items: flex-start;
/* flex-flow: row wrap; */
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
height: 100%;
padding: 15px;
gap: 5px;
}
.noto-sans-mono-font {
font-family: "Noto Sans Mono", monospace;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
.photo {
background-color: #eeeeee;
filter: drop-shadow(0px 3px 3px #888888);
display: inline-block;
padding: 1vh;
margin: 1vh;
}
.photocontent {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: normal;
align-content: normal;
}
.photoimage {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: center;
order: 0;
}
.photoimagesrc {
max-width:40vw;
max-height:40vw;
width: auto;
height: auto;
}
.photodetails {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: flex-end;
order: 0;
text-align: right;
line-height: 70%;
font-size: 0.75rem;
}