Martin_Rattensberger_IT_Services/omg-consulting.info
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Implement dark theme with expandable consultant details and animations

Browse Source
This commit is contained in:
Martin Rattensberger
2024-10-10 15:14:17 +02:00
parent aedbaaf163
commit 796b9b6a96
2 changed files with 56 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@@ -14,6 +14,15 @@
<section class="consultant"> <section class="consultant">
<h2>Consultant 1</h2> <h2>Consultant 1</h2>
<p>Experte für maschinelles Lernen und Datenanalyse.</p> <p>Experte für maschinelles Lernen und Datenanalyse.</p>
<div class="consultant-details">
<p>Details zu Consultant 1...</p>
</div>
<div class="consultant-details">
<p>Details zu Consultant 2...</p>
</div>
<div class="consultant-details">
<p>Details zu Consultant 3...</p>
</div>
</section> </section>
<section class="consultant"> <section class="consultant">
<h2>Consultant 2</h2> <h2>Consultant 2</h2>
@@ -27,5 +36,17 @@
<footer> <footer>
<p>&copy; 2024 AI Consultants</p> <p>&copy; 2024 AI Consultants</p>
</footer> </footer>
<script>
document.querySelectorAll('.consultant').forEach(item => {
item.addEventListener('click', event => {
document.querySelectorAll('.consultant').forEach(c => {
c.classList.remove('active');
c.querySelector('.consultant-details').style.display = 'none';
});
item.classList.add('active');
item.querySelector('.consultant-details').style.display = 'block';
});
});
</script>
</body> </body>
</html> </html>

39
styles.css
View File

@@ -1,7 +1,7 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #fff; background-color: #000;
color: #000; color: #fff;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@@ -15,10 +15,41 @@ header, footer {
main { main {
padding: 2em; padding: 2em;
display: flex;
justify-content: space-around;
} }
.consultant { .consultant {
border: 1px solid #000; border: 1px solid #fff;
margin: 1em 0; margin: 1em;
padding: 1em; padding: 1em;
width: 30%;
cursor: pointer;
transition: opacity 0.3s ease;
}
.consultant:hover {
opacity: 0.7;
}
.consultant.active {
opacity: 1;
}
.consultant-details {
display: none;
background-color: #111;
padding: 1em;
margin-top: 1em;
width: 80%;
animation: expand 0.5s ease-out forwards;
}
@keyframes expand {
from {
max-height: 0;
}
to {
max-height: 500px;
}
} }