tarion/tarion.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added sections & footer

Browse source
This commit is contained in:
Patrick Schwarzer 2025-05-10 03:13:33 +02:00
parent 87f6f6a461
commit d7093ad4f0
2 changed files with 86 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

53
index.css
View file

@ -4,6 +4,7 @@
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.3s ease; transition: all 0.3s ease;
scroll-behavior: smooth;
} }
body { body {
@ -20,7 +21,9 @@ body.light-mode {
header { header {
background-color: rgb(31, 36, 40); background-color: rgb(31, 36, 40);
padding: 0px 32px; padding: 0px 32px;
position: relative; position: fixed;
top: 0;
width: 100%;
} }
body.light-mode header { body.light-mode header {
background-color: #ffffff; background-color: #ffffff;
@ -96,6 +99,43 @@ body.light-mode .dark-mode-toggle:hover {
background-color: #e0e0e0; background-color: #e0e0e0;
} }
/*
FOOTER
*/
footer {
background-color: rgb(27, 31, 34);
padding: 48px 0px;
width: 100%;
}
footer .links {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 24px;
}
footer a {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: rgb(39, 44, 48);
color: white;
font-size: 24px;
border: none;
border-radius: 50%;
text-decoration: none;
}
footer p {
color: rgb(216, 216, 216);
text-decoration: none;
font-size: 14px;
justify-self: center;
}
/* /*
MAIN MAIN
@ -104,3 +144,14 @@ main {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
/* Home Section */
.home-container {
height: 100vh;
}
/* Showcase Section */
.showcase-container {
height: 100vh;
}

38
index.html
View file

@ -5,6 +5,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tarions Portfolio</title> <title>Tarions Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body> <body>
@ -16,16 +17,16 @@
<ul> <ul>
<li> <li>
<a href="#">Home</a> <a href="#home">Home</a>
</li> </li>
<li> <li>
<a href="#">Showcase</a> <a href="#showcase">Showcase</a>
</li> </li>
<li> <li>
<a href="#">About</a> <a href="#about">About</a>
</li> </li>
<li> <li>
<a href="#">Contact</a> <a href="#contact">Contact</a>
</li> </li>
</ul> </ul>
<button id="dark-mode-toggle" class="dark-mode-toggle">🌙</button> <button id="dark-mode-toggle" class="dark-mode-toggle">🌙</button>
@ -33,9 +34,38 @@
</header> </header>
<main> <main>
<section id="home">
<div class="home-container">
</div>
</section>
<section id="showcase">
<div class="showcase-container">
</div>
</section>
<section id="about">
<div class="about-container">
</div>
</section>
<section id="contact">
<div class="contact-container">
</div>
</section>
</main> </main>
<footer>
<div class="links">
<a href="#"><i class='fab fa-discord'></i></a>
<a href="#"><i class="fa-brands fa-github"></i></a>
<a href="#"><i class="fa-brands fa-git-alt"></i></a>
<a href="#"><i class="fa-brands fa-steam"></i></a>
</div>
<p>&copy 2025 Tarion. All rights reserved.</p>
</footer>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>