diff --git a/about.css b/about.css
new file mode 100644
index 0000000..09cd4d2
--- /dev/null
+++ b/about.css
@@ -0,0 +1,91 @@
+
+.about-section {
+ background-color: #FFC5D3;
+ padding: 60px 20px;
+ color: #252525;
+}
+
+.content-wrapper {
+ width: 80%;
+ margin: 0 auto;
+ text-align: center;
+ padding-bottom: 60px;
+}
+
+.content-wrapper h3 {
+ font-size: 36px;
+ font-weight: 700;
+ color: #d00664;
+ margin-bottom: 20px;
+}
+
+.content-wrapper h4 {
+ color: #d10e3b;
+}
+
+.content-wrapper p {
+ color: #6a0a20;
+}
+
+.back-button-container {
+ text-align: center;
+}
+
+.back-button {
+ display: inline-block;
+ background-color: #df4c91;
+ color: white;
+ text-decoration: none;
+ font-size: 18px;
+ padding: 12px 20px;
+ border-radius: 8px;
+ transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.back-button:hover {
+ background-color: #b00555;
+ transform: scale(1.1);
+}
+
+body {
+ opacity: 1;
+ transition: opacity 0.5s ease-in-out;
+}
+
+body.fade-out {
+ opacity: 0;
+}
+
+.animated-bg {
+ transition: opacity 0.5s ease-in-out;
+}
+
+body {
+ opacity: 0;
+ animation: fadeIn 0.5s forwards;
+ transition: opacity 0.5s ease-in-out;
+
+}
+
+@keyframes fadeIn {
+ to {
+ opacity: 1;
+ }
+}
+
+body.fade-out {
+ opacity: 0;
+}
+
+
+.animated-bg {
+ transition: opacity 0.5s ease-in-out;
+}
+
+
+
+
+
+
+
+
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..6ed6039
--- /dev/null
+++ b/about.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Rólunk</title>
+ <link rel="stylesheet" href="about.css">
+ <script src="backg.js"></script>
+</head>
+<body>
+ <section class="about-section">
+ <div class="content-wrapper">
+ <h3>Üdvözöljük Iskolai Projektünkben</h3>
+ <p>Projektünk egy szenvedélyes projekt, amelyet két diák hozott létre, egy közös céllal: felfedezni a számrendszerek és alkalmazásaik lenyűgöző világát. Hiszünk abban, hogy a tanulás egyszerre lehet szórakoztató és informatív, ezért egy olyan platformot akartunk létrehozni, ahol bárki vizuális és interaktív módon tanulhat a bináris, oktális, decimális és hexadecimális számrendszerekről.</p>
+
+ <h4>Amit csinálunk</h4>
+ <p>Ezen a weboldalon keresztül a négy számrendszer egyszerű, mégis átfogó feltárását mutatjuk be. Minden rész gyakorlati példákat, interaktív eszközöket és könnyen követhető magyarázatokat tartalmaz, hogy a kezdők és a rajongók számára is világos megértést biztosítsanak.</p>
+
+ <h4>Küldetésünk</h4>
+ <p>Küldetésünk, hogy az összetett témákat mindenki számára elérhetővé tegyük. Legyen szó matematikai fogalmakkal küszködő diákról, vagy egyszerűen csak kíváncsiság a számítógépek működéséről, mi törekszünk az összetett témák egyszerűsítésére, megközelíthetővé és szórakoztatóvá tevésére!</p>
+
+ <h4>Csapatunk</h4>
+ <p>A projekt különböző tudományágakból származó, rendkívül motivált hallgatók csoportjának együttműködése. Csapatunk a matematika-rajongóktól a technológia szerelmeseiig sokféle készséget és ötletet kínál az asztalra. Elkötelezettek vagyunk egy olyan weboldal létrehozása mellett, amely nem csak információkat nyújt, hanem felkelti a kíváncsiságot és ösztönzi a további tanulást.</p>
+
+ <h4>Vegyen részt benne!</h4>
+ <p>Szeretjük a visszajelzéseket! Ha bármilyen új tartalommal vagy fejlesztéssel kapcsolatos javaslata van, ne habozzon kapcsolatba lépni. Hiszünk az együttműködés erejében, és mindig nyitottak vagyunk arra, hogy új módszereket tanuljunk meg felhasználóink élményének javítására.</p>
+
+ <p>Köszönjük, hogy meglátogatta oldalunkat. Reméljük, élvezni fogja a számrendszerek világát!</p>
+ </div>
+ <div class="back-button-container">
+ <a href="fooldal.html" class="back-button">⬅ Vissza a Főoldalra</a>
+ </div>
+ </section>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/backg.css b/backg.css
new file mode 100644
index 0000000..cddc0cb
--- /dev/null
+++ b/backg.css
@@ -0,0 +1,161 @@
+* {
+ font-family: montserrat;
+ padding: 0;
+ margin: 0;
+}
+
+.wrapper {
+ background-image: url(somet2.jpg);
+ background-position: center center;
+ background-size: cover;
+}
+
+header {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height: 60px;
+ position: fixed;
+ margin: auto;
+ width: 100%;
+}
+
+.logo {
+ max-width: 250px;
+ color: #ff0077;
+ font-size: 30px;
+ margin: 20px;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+
+nav {
+ margin-bottom: 20px;
+}
+
+.nav-items {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.nav-items li {
+ display: inline-block;
+ margin-right: 20px;
+ position: relative;
+}
+
+.nav-items a {
+ text-decoration: none;
+ color: rgb(255, 0, 119);
+ font-weight: bold;
+ text-transform: uppercase;
+ padding: 5px 15px;
+ transition: all 0.3s ease-in-out;
+}
+
+.nav-items a:hover {
+ background: #ffb7c6;
+ color: #ff02d5;
+ transform: scale(1.1);
+}
+
+.dropdown-menu {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ background: #ffb7c6;
+ padding: 10px;
+ list-style: none;
+ border-radius: 5px;
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+
+}
+
+.dropdown:hover .dropdown-menu {
+ display: block;
+}
+
+.banner-text {
+ display: flex;
+ justify-content: center;
+ height: 100vh;
+ align-items: center;
+ color: #a33267;
+ text-align: center;
+}
+
+.single-banner h2 {
+ font-size: 70px;
+ text-transform: uppercase;
+ animation: animate 3s infinite alternate;
+ font-family: impact;
+}
+
+@keyframes animate {
+ 0%, 100% {
+ transform: translateY(-6px);
+ }
+ 50% {
+ transform: translateY(0);
+ }
+}
+
+@keyframes floatingBackground {
+ 0% {
+ transform: scale(1) translate(0, 0);
+ }
+ 50% {
+ transform: scale(1.02) translate(-5px, 5px);
+ }
+ 100% {
+ transform: scale(1) translate(0, 0);
+ }
+}
+
+.animated-bg {
+ position: fixed;
+ width: 100vw;
+ height: 100vh;
+ background: url('somet2.jpg') no-repeat center center/cover;
+ background-size: contain;
+ image-rendering: high-quality;
+ animation: floatingBackground 5s ease-in-out infinite alternate;
+}
+
+body {
+ opacity: 1;
+ transition: opacity 0.5s ease-in-out;
+}
+
+body.fade-out {
+ opacity: 0;
+}
+
+.animated-bg {
+ transition: opacity 0.5s ease-in-out;
+}
+
+body {
+ opacity: 0;
+ animation: fadeIn 0.5s forwards;
+ transition: opacity 0.5s ease-in-out;
+
+}
+
+@keyframes fadeIn {
+ to {
+ opacity: 1;
+ }
+}
+
+body.fade-out {
+ opacity: 0;
+}
+
+
+.animated-bg {
+ transition: opacity 0.5s ease-in-out;
+}
\ No newline at end of file
diff --git a/backg.js b/backg.js
new file mode 100644
index 0000000..7cfba41
--- /dev/null
+++ b/backg.js
@@ -0,0 +1,23 @@
+function addFadeOut() {
+ document.body.classList.add('fade-out');
+}
+
+
+function removeFadeOut() {
+ document.body.classList.remove('fade-out');
+}
+
+
+window.addEventListener('beforeunload', addFadeOut);
+
+
+window.addEventListener('load', removeFadeOut);
+
+
+window.addEventListener('popstate', () => {
+
+ addFadeOut();
+ setTimeout(() => {
+ removeFadeOut();
+ }, 500);
+});
\ No newline at end of file
diff --git a/fooldal.html b/fooldal.html
new file mode 100644
index 0000000..f7e3e87
--- /dev/null
+++ b/fooldal.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Főoldal</title>
+ <link rel="stylesheet" href="backg.css">
+ <script src="backg.js"></script>
+</head>
+<body>
+ <div class="animated-bg">
+ <div class="wrapper">
+ <header>
+ <div class="logo">simply bold</div>
+ <nav>
+ <ul class="nav-items">
+ <li class="dropdown">
+ <a href="#">Honlap</a>
+ <ul class="dropdown-menu">
+ <li><a href="kettes.html">Kettes számrendszer</a></li>
+ <li><a href="nyolcas.html">Nyolcas számrendszer</a></li>
+ <li><a href="tizes.html">Tízes számrendszer</a></li>
+ <li><a href="tizenhatos.html">Tizenhatos számrendszer</a></li>
+ </ul>
+ </li>
+ <li><a href="about.html">Rólunk</a></li>
+ <li><a href="blog.html">Blog</a></li>
+ <li><a href="contact.html">Kapcsolat</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <div class="banner-text">
+ <div class="single-banner">
+ <h2>Bold Ideas, Big Dreams</h2>
+ <p>Tanulj. Teremts. Hódíts.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file