lheor/Sykorax.eu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made it so I can add descriptions to my portfolio later on

Browse source
This commit is contained in:
Lheor 2024-10-06 16:58:55 +02:00
parent 4536ebf80f
commit 9e30a5c38e
2 changed files with 42 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
index.html
View file

@ -12,6 +12,9 @@
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
@ -135,43 +138,52 @@
<h2 class="mb-5">Portfolio</h2>
<!-- Photo grid -->
<h3 class="mb-5">Graphics Class</h3>
<div class="w3-row">
<div class="w3-third">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="My first graphics class project. We used Canva AI to generate a moodboard.">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="What a beautiful scenery this sunset">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="The Beach. Me. Alone. Beautiful">
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="img/Projekt1.png" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="Quiet day at the beach. Cold, but beautiful">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="Waiting for the bus in the desert">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="Nature again.. At its finest!">
<div class="w3-third w3-container w3-margin-bottom">
<img src="img/Projekt1.png" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="Canoeing again">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="What a beautiful day!">
<div class="w3-third w3-container">
<img src="img/Projekt1.png" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<br>
<h3 class="mb-5">Game Development</h3>
<div class="w3-row">
<div class="w3-third">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="My first graphics class project. We used Canva AI to generate a moodboard.">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="What a beautiful scenery this sunset">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="The Beach. Me. Alone. Beautiful">
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="img/Projekt1.png" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="Quiet day at the beach. Cold, but beautiful">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="Waiting for the bus in the desert">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="Nature again.. At its finest!">
<div class="w3-third w3-container w3-margin-bottom">
<img src="img/Projekt1.png" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="Canoeing again">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="A girl, and a train passing">
<img src="img/Projekt1.png" style="width:33%" onclick="onClick(this)" alt="What a beautiful day!">
<div class="w3-third w3-container">
<img src="img/Projekt1.png" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>

10
js/scripts.js
View file

@ -31,12 +31,4 @@ window.addEventListener('DOMContentLoaded', event => {
});
});
});
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
});