Когда я уменьшаю ширину экрана, высота моего Div увеличивается - как мне остановить это? [закрыто] ⇐ Html

[Anonymous]

Название говорит обо всем. Постепенно отталкивая нижний колонтитул дальше, чем больше я уменьшаю ширину экрана. Попытка достичь. Я уже пытался указать высоту и максимальную высоту, но проблема сохраняется.

Код: Выделить всё

[*]


Homepage


/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

/* Body Styling */
body {
background-color: #FFFFFF;
color: #4A4A4A;
}

/* Hero Section */
.hero {
background-color: #000000;
color: #FFFFFF;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 15%;
}

/* Hero Content */
.hero-content {
max-width: 100%;
text-align: left;
margin-top: 20px;
}

/* Headline Styling */
.hero-content h1 {
font-size: 3rem;
white-space: nowrap;
margin-bottom: 25px;
color: #FDE07A;
}

/* Subheadline Styling */
.hero-content p {
font-size: 1.2rem;
margin-bottom: 20px;
color: #FFFFFF;
}

/* Call-to-Action Button */
.cta-button {
display: inline-block;
background-color: #FDE07A;
color: #4A4A4A;
padding: 10px 25px;
text-decoration: none;
border-radius: 25px;
font-weight: bold;
transition: background-color 0.3s ease;
margin-top: 20px;
}

.cta-button:hover {
background-color: #E5C56E;
color: #333333;
cursor: pointer;
}

.cta-button:active {
transform: translateY(2px);
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Navbar Styling */
.navbar {
display: flex;
align-items: center;
padding: 20px 10%;
background-color: #000000;
color: #FFFFFF;
}

/* Logo */
.logo {
font-size: 1.5rem;
font-weight: bold;
color: #FDE07A;
text-transform: uppercase;
flex: 1;
margin-left: -10%;
}

/* Navigation Links */
.nav-links {
display: flex;
list-style: none;
gap: 20px;
margin: 0;
}

.nav-links li {
padding: 0 10px;
}

.nav-links a {
text-decoration: none;
color: #FFFFFF;
font-size: 1rem;
font-weight: 500;
transition: color 0.3s ease;
}

.nav-links a:hover {
color: #FDE07A;
}

/* Hero Image */
.hero-image {
position: relative;
left: 11.5%;
bottom: 2%;
z-index: 1;
}

.hero-image img {
width: 500px;
max-height: 500px;
display: block;
}

/* Typing Effect */
.typing-effect {
display: inline;
color: #FDE07A;
font-size: 3rem;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid transparent;
}

/* Info Section */
.info-section {
background-color: #000000;
padding: 20px 15%;
text-align: left;
color: #FFFFFF;
}

.info-content p {
font-size: 1rem;
line-height: 1.5;
color: #FFFFFF;
margin-top: 3%;
max-width: 75%;
width: 600px;
}

/* Footer */
.footer {
background-color: #000000;
color: #FFFFFF;
padding: 1.2% 10%;
padding-left: 10.8%;
width: 100%;
}

.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}

.footer-links ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 56px;
}

.footer-links ul li a {
text-decoration: none;
color: #FFFFFF;
font-size: 0.75rem;
}

.footer-links ul li a:hover {
color:  #FDE07A;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
text-align: center;
gap: 0;
}

.footer-links {
text-align: center;
margin-bottom: 20px;
}

.footer-logo {
text-align: center;
position: relative;
bottom: 12px;
}
}









[url=index.html]Logo
[/url]

[list]
[url=index.html]Home[/url]
[*][url=about.html]About[/url]
[*][url=Products.html]Products[/url]
[*][url=signuppage.html]Sign Up[/url]
[*][url=contact.html]Contact[/url]
[/list]
☰ 














tagline tagline tagline tagline tagline tagline
[url=signuppage.html]Sign Up[/url]


[i]






typing text typing text typing text






loada rubbish about a business loada rubbish about a business loada rubbish about a business loada rubbish about a business loada rubbish about a business


[/i]
USP 1
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

[i][/i]
USP 2
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text


[i][/i]
USP 3
  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text


[i][/i]
USP 4
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

[i][/i]
USP 5
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

USP 6
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
[url=signuppage.html]Sign Up Now[/url]








const text = "Buy our stuff, we're the best.";
const typingEffect = document.querySelector(".typing-effect");
let index = 0;

function typeText() {
if (index < text.length) {
// Determine where to insert line breaks based on screen width
if (window.innerWidth < 607) {
if (index === 7) { // After "Buy our"
typingEffect.innerHTML += "
";
} else if (index === 14) { // After "stuff,"
typingEffect.innerHTML += "
";
} else if (index === 20) { // After "we're"
typingEffect.innerHTML += "
";
}
} else if (window.innerWidth < 1498) {
if (index === 14) { // After "Buy our stuff,"
typingEffect.innerHTML += "
";
}
}

// Append the next character
typingEffect.innerHTML += text[index];
index++;
setTimeout(typeText, 100); // Typing speed
}
}

typeText(); // Start typing animation

// Restart the typing effect on window resize
window.addEventListener("resize", function() {
typingEffect.innerHTML = "";
index = 0;
typeText();
});



function toggleMissionText() {
const missionText = document.getElementById('mission-text');
const isHidden = missionText.style.display === 'none' || missionText.style.display === '';

missionText.style.display = isHidden ? 'block' : 'none';
}



document.addEventListener("DOMContentLoaded", function() {
const menuToggle = document.querySelector(".menu-toggle");
const navLinks = document.querySelector(".nav-links");

if (menuToggle && navLinks) {
menuToggle.addEventListener("click", function() {
navLinks.classList.toggle("active");

// Optionally, toggle the icon to "X" when the menu is open
if (navLinks.classList.contains("active")) {
menuToggle.innerHTML = "✖"; // Close icon
} else {
menuToggle.innerHTML = "☰"; // Hamburger icon
}
});
}
});



document.addEventListener("DOMContentLoaded", function() {
const ctaButton = document.querySelector(".cta-button");

if (ctaButton) {
setTimeout(() => {
ctaButton.classList.add("animated"); // Locks in opacity
}, 6000); // Matches the animation delay
}
});



document.addEventListener("DOMContentLoaded", function() {
const buttons = document.querySelectorAll(".cta-button");

buttons.forEach(button => {
button.addEventListener("click", function(event) {
event.preventDefault(); // Prevent instant navigation
const link = this.getAttribute("href"); // Get the button's link

// Apply an instant, deep press effect
this.style.transform = "scale(0.85)";  // Goes deeper
this.style.boxShadow = "0px 0px 2px rgba(0, 0, 0, 0.1)"; // Almost flat

// Jerky snap-back after 40ms
setTimeout(() => {
this.style.transform = "scale(1)";
this.style.boxShadow = "0px 4px 8px rgba(0, 0, 0, 0.2)";
}, 40);

// Navigate after 200ms
setTimeout(() => {
window.location.href = link;
}, 200);
});
});
});



document.addEventListener("DOMContentLoaded", function() {
if (window.innerWidth > 740) {
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("info-content-p-fadein");
observer.unobserve(entry.target); // Stops observing after fading in
}
});
}, {
threshold: 0.2
} // Triggers when 20% of the element is visible
);

document.querySelectorAll(".info-content p").forEach(p => {
observer.observe(p);
});
}
});



document.addEventListener("DOMContentLoaded", function() {
const animatedText = document.querySelector(".animated-text-home");

if (animatedText) {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animatedText.classList.add("fade-in"); // Apply animation
observer.unobserve(animatedText); // Stop observing once triggered
}
});
}, {
threshold: 0.2
});

observer.observe(animatedText); // Observe when element enters viewport
}
});



document.addEventListener("DOMContentLoaded", function() {
const blocks = document.querySelectorAll(".info-blocks .info-block");

if (blocks.length > 0) {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
observer.unobserve(entry.target); // Stop observing once triggered

// Start sequential fade-in
blocks.forEach((block, index) => {
setTimeout(() => {
block.classList.add("fade-in");
}, index * 500); // 500ms delay per block
});
}
});
}, {
threshold: 0.2
});

observer.observe(blocks[0]); // Observe the first block to trigger the sequence
}
});



document.addEventListener("DOMContentLoaded", function() {
const heroImage = document.querySelector(".hero-image");
const heroContent = document.querySelector(".hero-content");
const hero = document.querySelector(".hero");

if (!heroImage || !heroContent || !hero) return; // Prevents errors

// Store the original parent and next sibling
const originalParent = heroImage.parentElement;
const originalNextSibling = heroImage.nextElementSibling;

function moveHeroImage() {
if (window.innerWidth  {
if (entry.isIntersecting) {
console.log(`🎯 ${entry.target.className} has entered the viewport`);

// ✅ Step 1: Fade in home-hero-p when it scrolls into view
if (entry.target === homeHeroP) {
homeHeroP.style.opacity = "1";
homeHeroP.style.animation = "fade-in 1s ease-out forwards";
console.log("🚀 home-hero-p fade-in triggered");

// ✅ Step 2: Trigger White Dot Animation (TV Flash)
whiteDot.style.animation = "tvFlash 0.2s linear, throb 0.6s infinite alternate";
console.log("⚡ tvFlash & throb triggered");

// ✅ Step 3: Expand the White Lines (0.2s after scroll)
setTimeout(() => {
whiteLine.style.animation = "expandLine 0.3s ease-in-out forwards";
whiteLine2.style.animation = "expandLine 0.3s ease-in-out forwards";
console.log("🟡 expandLine triggered (0.2s after scroll)");
}, 200);

// ✅ Step 4: Move White Lines & Reveal Hero Image (0.5s after scroll)
setTimeout(() => {
heroImage.style.animation = "clipReveal 1.5s ease-in-out forwards";
whiteLine.style.animation += ", moveUp 1.5s ease-in-out forwards";
whiteLine2.style.animation += ", movedown 1.5s ease-in-out forwards";
console.log("🔵 clipReveal, moveUp, movedown triggered (0.5s after scroll)");
}, 500);

// ✅ Step 5: Remove White Lines After Movement (2.15s after scroll)
setTimeout(() => {
whiteLine.style.animation += ", wipeOut1 0.5s ease-in-out forwards";
whiteLine2.style.animation += ", wipeOut2 0.5s ease-in-out forwards";
console.log("🔴 wipeOut1 & wipeOut2 triggered (2.15s after scroll)");
}, 2150);
}

// ✅ Step 6: Fade in home-cta when it scrolls into view
if (entry.target === homeCta) {
homeCta.style.opacity = "1";
homeCta.style.animation = "fade-in-cta 1s ease-out forwards";
console.log("🟣 fade-in-cta triggered");
}

// ✅ Step 7: Fade in info-content p when it scrolls into view
if (entry.target === infoContentP) {
infoContentP.style.opacity = "1";
infoContentP.style.animation = "info-content-p-fadein 1s ease-out forwards";
console.log("🔵 info-content p fade-in triggered");
}

observer.unobserve(entry.target);  // Stop observing once animation is triggered
}
});
}, {
threshold: 0.2
});

// Attach observer to each element
observer.observe(homeHeroP);
observer.observe(homeCta);
observer.observe(infoContentP);
} else {
console.log("⛔ Screen width is above 606px - Scroll animations are disabled.");
}
});






[*][url=terms.html]Terms[/url]
[*][url=privacy.html]Privacy[/url]
[*][url=cookies.html]Cookies[/url]
[*][url=careers.html]Careers[/url]

Logo
©. 2025 Part of the Company Group

Подробнее здесь: https://stackoverflow.com/questions/794 ... -stop-this