Skip to content

Commit

Permalink
changed header image
Browse files Browse the repository at this point in the history
  • Loading branch information
“Sophie committed Mar 25, 2024
1 parent 8653624 commit 418d006
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 25 deletions.
Binary file added src/img/shiba-hero-freigestellt-2.1.webp
View file
Binary file not shown.
60 changes: 35 additions & 25 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,17 +67,24 @@

<!-- Navigation links -->
<div id="menuItems" class="hidden lg:flex lg:flex-row lg:flex-wrap lg:items-center lg:space-x-4">
<a href="#preview-web-app" class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">App
<a href="#preview-web-app"
class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">App
Preview</a>
<a href="#list-of-benefits"
class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">Your
Benefits</a>
<a href="#how-does-it-work" class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">How
<a href="#how-does-it-work"
class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">How
It
Works</a>
<a href="#offers" class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">Offering</a>
<a href="#about" class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">About Us</a>
<a href="#contact" class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">Get in
<a href="#offers"
class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">Offering</a>
<a href="#about"
class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">About
Us</a>
<a href="#contact"
class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">Get
in
Contact</a>
</div>
</nav>
Expand Down Expand Up @@ -120,13 +127,15 @@
</div>
<div class="relative z-10 lg:mx-0 flex flex-col lg:flex-row">
<div class="hidden lg:flex justify-center items-center w-full lg:w-1/2 h-60vmin bg-cover">
<img src="./img/shiba-hero-freigestellt-2.webp" alt="Hero image" class="w-full h-full object-cover overflow-visible" style="max-width: 70%;">
<img src="./img/shiba-hero-freigestellt-2.1.webp" alt="Hero image"
class="w-full h-full object-cover overflow-visible" style="max-width: 70%;">
</div>
<div class="lg:hidden">
<img src="./img/shiba-hero.png" alt="Hero image" class="w-full h-full object-cover">
</div>
<div class="w-full px-4 my-auto lg:px-8 lg:mx-auto lg:w-1/2">
<h1 class="text-4xl/normal w-full font-bold pt-6 lg:pt-2 md:text-5xl/normal lg:text-6xl/normal xl:text-7xl/normal">
<h1
class="text-4xl/normal w-full font-bold pt-6 lg:pt-2 md:text-5xl/normal lg:text-6xl/normal xl:text-7xl/normal">
Protect Your
<span id="changing-word" class="text-primary-700 ts-hero-title">Business</span>
<span>from Security Threats</span>
Expand All @@ -148,7 +157,7 @@ <h1 class="text-4xl/normal w-full font-bold pt-6 lg:pt-2 md:text-5xl/normal lg:t
</div>
</div>
</header>



<main>
Expand Down Expand Up @@ -256,7 +265,6 @@ <h2 class="text-4xl/normal mb-8 font-bold text-center text-primary-800 pt-2">
</h2>
<div class="flex flex-col lg:flex-row items-center lg:justify-between pt-6">


<!-- CARD 1 -->

<div
Expand All @@ -278,6 +286,8 @@ <h3 class="font-bold text-xl/loose mt-6 mb-2 text-primary-800 text-center">
</div>
</div>

<div class="arrow"></div>

<!-- CARD 2 -->

<div
Expand All @@ -304,7 +314,6 @@ <h3 class="font-bold text-xl/loose mt-6 mb-2 text-primary-800 text-center">
</div>
</div>


<!-- CARD 3 -->

<div
Expand All @@ -325,6 +334,7 @@ <h3 class="font-bold text-xl/loose mt-6 mb-2 text-primary-800 text-center">
operations, empowering your team to manage threats autonomously.</p>
</div>
</div>

</div>
</section>

Expand Down Expand Up @@ -551,57 +561,57 @@ <h2 class="text-4xl font-bold text-primary-800 py-2 leading-normal">
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
document.addEventListener("DOMContentLoaded", function () {
var words = [
"IT-Systems",
"Assets",
"Data",
"Business"
];

var changingWord = document.getElementById("changing-word");
var currentWordIndex = 0;

// Start des Effekts nach einer Verzögerung
setTimeout(function() {
setTimeout(function () {
rotateWord();
setInterval(rotateWord, 4000); // Wiederhole den Effekt alle 4 Sekunden
}, 2000); // Verzögerung von 2 Sekunden (2000 Millisekunden)

function rotateWord() {
// Verstecke das aktuelle Wort
hideWord();

// Aktualisiere das aktuelle Wort
currentWordIndex = (currentWordIndex + 1) % words.length;

// Zeige das neue Wort an
showWord(words[currentWordIndex]);
}

function hideWord() {
var letters = changingWord.querySelectorAll(".letter");
letters.forEach(function(letter, index) {
setTimeout(function() {
letters.forEach(function (letter, index) {
setTimeout(function () {
letter.classList.add("out");
}, index * 80);
});
}

function showWord(word) {
changingWord.innerHTML = ""; // Leere das aktuelle Wort

// Erstelle die Buchstaben für das neue Wort
for (var i = 0; i < word.length; i++) {
var letter = document.createElement("span");
letter.className = "letter behind";
letter.textContent = word[i];
changingWord.appendChild(letter);
}

var newLetters = changingWord.querySelectorAll(".letter");
newLetters.forEach(function(letter, index) {
setTimeout(function() {
newLetters.forEach(function (letter, index) {
setTimeout(function () {
letter.classList.remove("behind");
letter.classList.add("in");
}, 340 + index * 80);
Expand Down

0 comments on commit 418d006

Please sign in to comment.