pravki
This commit is contained in:
parent
fc7cabf7a3
commit
1117c0cc5b
6 changed files with 22 additions and 21 deletions
BIN
models/previews/bird.jpg
Normal file
BIN
models/previews/bird.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
models/previews/bowman.jpg
Normal file
BIN
models/previews/bowman.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
models/previews/fish.jpg
Normal file
BIN
models/previews/fish.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
|
|
@ -50,12 +50,13 @@
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
.item model-viewer {
|
.item img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: auto;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #111;
|
background: #111;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
.item p {
|
.item p {
|
||||||
margin: 0.5em 0 0;
|
margin: 0.5em 0 0;
|
||||||
|
|
@ -104,16 +105,16 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="gallery">
|
<div class="gallery">
|
||||||
<div class="item" onclick="openModel('bird_01')">
|
<div class="item" onclick="openModel('bird')">
|
||||||
<model-viewer src="models/bird_01.glb" camera-controls disable-zoom></model-viewer>
|
<img src="models/previews/bird.jpg" alt="Bird">
|
||||||
<p>Bird 01 – Symbolic Avian Form</p>
|
<p>Bird 01 – Symbolic Avian Form</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" onclick="openModel('bowman')">
|
<div class="item" onclick="openModel('bowman')">
|
||||||
<model-viewer src="models/bowman.glb" camera-controls disable-zoom></model-viewer>
|
<img src="models/previews/bowman.jpg" alt="Bowman">
|
||||||
<p>Bowman – Archer Character Concept</p>
|
<p>Bowman – Archer Character Concept</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" onclick="openModel('fish_01')">
|
<div class="item" onclick="openModel('fish')">
|
||||||
<model-viewer src="models/fish_01.glb" camera-controls disable-zoom></model-viewer>
|
<img src="models/previews/fish.jpg" alt="Fish">
|
||||||
<p>Fish 01 – Abstract Aquatic Creature</p>
|
<p>Fish 01 – Abstract Aquatic Creature</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -130,7 +131,7 @@
|
||||||
exposure="1"
|
exposure="1"
|
||||||
environment-image="neutral">
|
environment-image="neutral">
|
||||||
</model-viewer>
|
</model-viewer>
|
||||||
<button class="back" onclick="closeModel()">← Back to gallery</button>
|
<button class="back" onclick="closeModel()">← backy</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
@ -150,7 +151,7 @@
|
||||||
document.querySelector('.gallery').style.display = 'grid';
|
document.querySelector('.gallery').style.display = 'grid';
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
const h1 = document.querySelector("header h1");
|
const h1 = document.querySelector("header h1");
|
||||||
h1.addEventListener("mouseenter", () => {
|
h1.addEventListener("mouseenter", () => {
|
||||||
const maxSpacing = 12.0;
|
const maxSpacing = 12.0;
|
||||||
|
|
@ -162,6 +163,6 @@
|
||||||
h1.style.letterSpacing = "";
|
h1.style.letterSpacing = "";
|
||||||
h1.style.transition = "letter-spacing 1s ease";
|
h1.style.transition = "letter-spacing 1s ease";
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue