new html design

This commit is contained in:
samantha42
2026-05-19 22:11:44 +02:00
parent 4569f35d11
commit 393f6de5b6
8 changed files with 100 additions and 89 deletions
+47 -44
View File
@@ -6,7 +6,7 @@
<title>Samantha Vero Friis</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="styles2.css" />
<link rel="stylesheet" href="/static/styles2.css" />
</head>
<body>
@@ -149,56 +149,59 @@
<div class="section-head"><h2>Movie/Show Top list</h2></div>
<div class="toplist-group">
<button class="toplist-toggle" onclick="this.closest('.toplist-group').classList.toggle('collapsed')">
Top 5 Movies <span class="toplist-toggle-icon"></span>
</button>
<h3>Top 5 Movies</h3>
<div class="toplist-body">
<ol class="toplist-ranked">
<li>
Blade Runner 2049
<img src="/static/posters/bladerunner2049.jpg">
</li>
<li>A Cure of Wellness
<img src="/static/posters/AcureForWellness.jpg">
</li>
<li>Fight Club
<img src="/static/posters/Fightclub.jpg">
</li>
<li>Dracula: A Love Tale
<img src="/static/posters/Dracula.webp">
</li>
<li>Girl with a Dragon Tattoo
<img src="/static/posters/TheGirlwiththeDragonTattoo.webp">
</li>
</ol>
<div class="poster-grid">
<div class="poster-item">
<img src="/static/posters/bladerunner2049.jpg" alt="Blade Runner 2049">
<p>Blade Runner 2049</p>
</div>
<div class="poster-item">
<img src="/static/posters/AcureForWellness.jpg" alt="A Cure of Wellness">
<p>A Cure of Wellness</p>
</div>
<div class="poster-item">
<img src="/static/posters/Fightclub.jpg" alt="Fight Club">
<p>Fight Club</p>
</div>
<div class="poster-item">
<img src="/static/posters/Dracula.webp" alt="Dracula: A Love Tale">
<p>Dracula: A Love Tale</p>
</div>
<div class="poster-item">
<img src="/static/posters/TheGirlwiththeDragonTattoo.webp" alt="Girl with a Dragon Tattoos">
<p>Girl with a Dragon Tattoo</p>
</div>
</div>
</div>
<div class="toplist-group">
<button class="toplist-toggle" onclick="this.closest('.toplist-group').classList.toggle('collapsed')">
Top 5 Shows <span class="toplist-toggle-icon"></span>
</button>
<div class="toplist-body">
<ol class="toplist-ranked">
<li>Chernobyl
<img src="/static/posters/Chernobyl.webp">
</li>
<li>Succession
<img src="/static/posters/Succession.webp">
</li>
<li>Breaking Bad
<img src="/static/posters/Breaking Bad.webp">
</li>
<li>Avatar: The Last Airbender
<img src="/static/posters/Avatar.webp">
</li>
<li>Adolescence
<img src="/static/posters/Adolescence.webp">
</li>
</ol>
<h3>Top 5 Shows</h3>
<div class="toplist-body">
<div class="poster-grid">
<div class="poster-item">
<img src="/static/posters/Chernobyl.webp" alt="Chernobyl">
<p>Chernobyl</p>
</div>
<div class="poster-item">
<img src="/static/posters/Succession.webp" alt="Succession">
<p>Succession</p>
</div>
<div class="poster-item">
<img src="/static/posters/Breaking Bad.webp" alt="Breaking Bad">
<p>Breaking Bad</p>
</div>
<div class="poster-item">
<img src="/static/posters/Avatar.webp" alt="Avatar: The Last Airbender">
<p>Avatar: The Last Airbender</p>
</div>
<div class="poster-item">
<img src="/static/posters/Adolescence.webp" alt="Adolescence">
<p>Adolescence</p>
</div>
</div>
</div>
</div>
</section>
</main>
</div>