sadorowo/personal-website
1
0
Fork 0
Code Pull Requests Projects Releases Activity

improvement: projects page

Browse Source
This commit is contained in:
sadorowo 2023-11-24 12:14:14 +00:00
parent 2d1d7416f4
commit 5b91424b33
3 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,6 +10,7 @@
<script defer src="script.js"></script>
<title>sador.me</title>
</head>
<body>
<div id="box">
<p>Kliknij mnie!</p>
@ -38,6 +40,8 @@
<h4>O mnie</h4>
<p>hej, mam <span id="age">???</span> lat i kocham hardrock/metalcore. mieszkam w okolicach Myślenic.</p>
<p>slipknot, my chemical romance, lil peep ♡</p>
</div>
</body>
</html>

24
projects.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,35 +10,40 @@
<script defer src="script.js"></script>
<title>sador.me - projekty</title>
</head>
<body>
<div id="content">
<h1>Sador</h1>
<button onclick="toggleTheme()">Zmień motyw</button>
<button><a href="/">Powrót</a></button>
<h4>Moje projekty</h4>
<p>Opuszczone projekty mają czarno-białe zdjęcie tła!</p>
<div id="projects">
<div class="project-card">
<img src="thumbnails/zine.png" alt="Zine thumbnail"/>
<img src="thumbnails/zine.png" alt="Zine thumbnail" data-abandoned />
<div class="description">
<h3>Zine</h3>
<p>Mój własny bot na platformy Guilded&Discord napisany w języku Rust. (Projekt porzucony)</p>
<p>Mój własny bot na platformy Guilded&Discord napisany w języku Rust.</p>
</div>
</div>
<div class="project-card">
<img src="thumbnails/website.png" alt="Website thumbnail"/>
<img src="thumbnails/website.png" alt="Website thumbnail" />
<div class="description">
<h3>Personalna strona</h3>
<p>Moja własna strona internetowa, ta, którą teraz przeglądasz.</p>
</div>
</div>
<div class="project-card">
<img src="thumbnails/witch_website.png" alt="Witch website thumbnail"/>
<div class="description">
<h3>Strona o...</h3>
<p>Jeden z wielu szkolnych projektów, hostowany na GitHub Pages.</p>
<a href="https://witch.sador.me/">
<div class="project-card">
<img src="thumbnails/witch_website.png" alt="Witch website thumbnail" />
<div class="description">
<h3>Strona o...</h3>
<p>Jeden z wielu szkolnych projektów, hostowany na GitHub Pages.</p>
</div>
</div>
</div>
</a>
</div>
</div>
</body>
</html>

5
style.css
View File

@ -155,11 +155,14 @@ button a {
.project-card img {
border-radius: 10px;
width: 200px;
height: 200px;
margin: 0;
}
.project-card img[data-abandoned] {
filter: grayscale();
}
.project-card .description {
position: absolute;
top: 0;