You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
4.1 KiB
158 lines
4.1 KiB
3 weeks ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Libbie's Shrine</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--main-bg-color: #255d3b;
|
||
|
|
--accent-color: #6aba7c;
|
||
|
|
--text-color: #f0fff4;
|
||
|
|
--box-bg-color: #1c4b30;
|
||
|
|
--sidebar-bg-color: #184d3b;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Poppins', sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
background-color: var(--main-bg-color);
|
||
|
|
color: var(--text-color);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
background-color: var(--accent-color);
|
||
|
|
text-align: center;
|
||
|
|
padding: 15px 0;
|
||
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
header h1 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
flex: 1;
|
||
|
|
padding: 20px;
|
||
|
|
background: url('/shrines/libbie/bg.jpg') no-repeat center center fixed;
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar {
|
||
|
|
width: 25%;
|
||
|
|
background-color: var(--sidebar-bg-color);
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar img {
|
||
|
|
max-width: 100%;
|
||
|
|
border-radius: 10px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar h2 {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-content {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 20px;
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
background-color: var(--box-bg-color);
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
transition: transform 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.did-you-know {
|
||
|
|
border: 2px solid var(--accent-color);
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
background-color: var(--accent-color);
|
||
|
|
text-align: center;
|
||
|
|
padding: 10px;
|
||
|
|
margin-top: auto;
|
||
|
|
box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.container {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar {
|
||
|
|
width: 100%;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-content {
|
||
|
|
padding-left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>Welcome to Libbie's Shrine! ✨</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="sidebar">
|
||
|
|
<img src="/shrines/libbie/libbie.png" alt="Libbie the Cyber Oryx">
|
||
|
|
<h2>Libbie the Cyber Oryx</h2>
|
||
|
|
<ul>
|
||
|
|
<li>Fact 1: She is part of the public domain</li>
|
||
|
|
<li>Fact 2: Loves open-source software</li>
|
||
|
|
<li>Fact 3: Advocates for digital freedom</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="main-content">
|
||
|
|
<div class="box">
|
||
|
|
<h3>About Libbie</h3>
|
||
|
|
<p>Libbie is an enthusiastic and friendly mascot, initially meant for Libre office now can be used by anyone.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box">
|
||
|
|
<h3>Hobbies</h3>
|
||
|
|
<p>Libbie enjoys coding, contributing to open-source projects, and supporting the KDE community.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box">
|
||
|
|
<h3>Did You Know?</h3>
|
||
|
|
<p class="did-you-know">We will never forget what you did.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>Built with love and open-source principles. 🌿</p>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|