I've already attempted to fix it by defining the height and max height of the container. But thats not worked, and it seems like its being caused by the .info-blocks container, and potentially by some of the translations i have running on the children within it.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="style.css">
<style>
/* 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; /* Black Background */
color: #FFFFFF; /* White Text */
max-height: 90vh; /* Full Viewport Height */
display: flex;
align-items: center;
justify-content: flex-start; /* Keep content aligned to the left */
padding-left: 15%; /* Adjust padding to nudge content to the right */
}
/* Slightly Right-Aligned Content Area */
.hero-content {
max-width: 100%; /* Constrain the width of the text */
text-align: left; /* Align text to the left */
margin-top: 20px;
}
/* Headline Styling */
.hero-content h1 {
font-size: 3rem;
max-width: 100%;
white-space: nowrap;
margin-bottom: 25px; /* Adjust spacing below the headline */
color: #FDE07A; /* Yellow Accent */
}
/* Subheadline Styling */
.hero-content p {
font-size: 1.2rem;
margin-bottom: 20px; /* Match the spacing of h1 */
color: #FFFFFF;
}
/* Call-to-Action Button */
.cta-button {
display: inline-block;
background-color: #FDE07A; /* Yellow Button */
color: #4A4A4A; /* Brownish Text */
padding: 10px 25px; /* Slightly wider for balance */
text-decoration: none;
border-radius: 25px; /* Increased to create a pill-like shape */
border-color: transparent;
font-weight: bold;
transition: background-color 0.3s ease;
margin-top: 20px; /* Add spacing above the button */
}
.cta-button:hover {
background-color: #E5C56E; /* Slightly Darker Yellow */
color: #333333; /* Darker Text on Hover */
cursor: pointer;
}
/* Depressed button effect */
.cta-button:active {
transform: translateY(2px); /* Push the button down */
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2); /* Optional shadow effect */
}
/* Navbar Styling */
.navbar {
display: flex;
align-items: center;
padding: 20px 10%;
background-color: #000000; /* Black Background */
color: #FFFFFF; /* White Text */
}
/* Logo */
.logo {
font-size: 1.5rem;
font-weight: bold;
color: #FDE07A; /* Yellow Accent */
text-transform: uppercase; /* Make text uppercase */
flex: 1; /* Push the navigation links to the right */
margin-left: -10%; /* Align the "T" with the hero section's content */
}
/* 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; /* White Text */
font-size: 1rem;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #FDE07A; /* Yellow Accent on Hover */
}
/* Call-to-Action Button in Navbar */
.cta-button-nav {
background-color: #FDE07A; /* Yellow Button */
color: #4A4A4A; /* Brown Text */
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
text-decoration: none;
transition: background-color 0.3s ease;
}
.cta-button-nav:hover {
background-color: #E5C56E; /* Slightly Darker Yellow */
color: #333333; /* Darker Text on Hover */
}
.logo i {
font-size: 1.5rem; /* Match the size of the text */
color: #FDE07A; /* Yellow Accent */
margin-left: -1px; /* Slight adjustment for alignment */
transform: rotate(-45deg); /* Rotate counterclockwise by 45 degrees */
display: inline-block; /* Ensure rotation works properly */
}
/* Typing Effect */
.typing-effect {
display: inline;
color: #FDE07A; /* Yellow Accent */
font-size: 3rem; /* Keep the original size */
font-weight: bold;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid transparent; /* Used for alignment */
text-shadow: 0px 0px 0px rgba(246, 255, 163, 0);
}
/* cursor2 Animation */
@keyframes blink {
50% {
opacity: 0;
}
}
/* Hero Section */
.hero {
background-color: #000000; /* Black Background */
color: #FFFFFF; /* White Text */
height: 90vh; /* Full Viewport Height */
display: flex; /* Flexbox layout */
align-items: center; /* Center content vertically */
justify-content: flex-start; /* Align content to the left */
position: relative;
padding-left: 15%; /* Adjust spacing for left-aligned text */
}
/* Hero Content Block */
.hero-content {
max-width: 40%; /* Constrain the width of the text */
text-align: left;
z-index: 2; /* Ensure content stays above background elements */
}
/* Hero Image */
.hero-image {
position: relative;
left: 11.5%;
bottom: 2%;
z-index: 1; /* Place the image behind the text */
}
.hero-image img {
width: 500px; /* Maintain image aspect ratio */
max-height: 500px; /* Adjust image height */
display: block; /* Prevent extra spacing below the image */
}
/* Blinking cursor2 */
.cursor2 {
display: inline-block;
width: 10px;
height: 1em; /* Match the height of the text */
background-color: #FFFFFF; /* White cursor2 block */
margin-left: -5px;
vertical-align: top; /* Align with the bottom of the text */
animation: blink 1s steps(1, start) infinite; /* Smooth blink */
}
@keyframes blink {
50% {
opacity: 0; /* cursor2 disappears halfway through the animation */
}
}
/* Adjust margin above and below the section */
.info-section::before,
.info-section::after {
content: '';
display: block;
height: 60px; /* Set the top and bottom spacing */
background-color: transparent; /* Black background to separate */
}
.info-section p {
font-size: 1.2rem;
margin-bottom: 20px;
}
.info-section ul {
list-style-type: disc;
list-style-position: inside;
margin-bottom: 30px;
}
.info-section ul li {
font-size: 1rem;
margin: 10px 0;
}
.info-block i {
font-size: 2rem;
color: #FDE07A; /* Yellow accent for icons */
margin-bottom: 10px;
}
/* Info Section Styling */
.info-section {
background-color: #000000; /* Black background for text below heading */
padding: 20px 15%; /* Adjust padding for alignment */
text-align: left;
color: #FFFFFF; /* White text */
}
/* Typing Section Styling */
.typing-section {
background-color: #FFFFFF; /* White background for heading */
padding: 20px 15%;
margin-bottom: -10px; /* Reduce spacing between sections */
text-align: left;
z-index: 1000;
}
.typing-section h2 {
font-size: 2.5rem;
color: #000000; /* Black text */
margin-bottom: 20px;
display: inline-block; /* Needed for typing animation */
white-space: nowrap; /* Prevent text wrapping */
overflow: visible; /* Hide text overflow during animation */
}
/* Info Content Styling */
.info-content p {
font-size: 1.rem;
line-height: 1.5;
color: #FFFFFF; /* White text */
margin-top: 3%;
max-width: 75%;
width: 600px;
}
/* Info Block Styling */
.info-block {
background-color: transparent; /* Remove background panels */
padding: 20px 0; /* Add some vertical spacing */
border-radius: 0; /* Remove rounded corners */
color: #FFFFFF; /* White text */
box-shadow: none; /* Remove shadow */
text-align: left; /* Align text to the left */
margin-top: 40px;
}
/* Update icon styling for white text */
.info-block i {
font-size: 2rem;
color: #FDE07A; /* Keep yellow icons */
margin-bottom: 10px;
}
/* Headings in Info Blocks */
.info-block h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #FFFFFF; /* White text */
}
/* Paragraphs in Info Blocks */
.info-block p {
font-size: 1rem;
color: #FFFFFF; /* White text */
}
/* Container Styling */
.info-blocks {
background-color: #000000; /* Black background for entire section */
padding: 40px 0%; /* Add padding around the section */
display: grid;
margin-bottom: -2%;
margin-right: -20%;
grid-template-columns: repeat(3, 1fr); /* 3 columns */
grid-template-rows: repeat(2, auto);
gap: 20px;
}
@media (max-width: 1120px) {
.info-blocks {
grid-template-columns: repeat(2, 1fr); /* 2 columns */
grid-template-rows: repeat(3, auto); /* 3 rows */
display: grid;
}
}
.cta-bottom-right {
position: relative; /* Position it normally in the document flow */
margin-top: 40px; /* Add space above the text block */
margin-right: 0; /* Align it to the grid structure */
text-align: left; /* Align text to the left */
color: #FFFFFF; /* White text */
}
.cta-bottom-right p {
font-size: 1rem; /* Standard paragraph text */
margin-bottom: 10px; /* Space below the text */
line-height: 1.5; /* Line height for better readability */
}
.cta-bottom-right p span {
font-size: 1.8rem; /* Larger size for "...So" */
font-weight: bold; /* Bold for emphasis */
display: inline-block; /* Ensures proper alignment */
}
.cta-button {
display: inline-block;
background-color: #FDE07A; /* Yellow Button */
color: #4A4A4A; /* Brownish Text */
padding: 10px 25px;
text-decoration: none;
border-radius: 25px; /* Rounded button */
font-weight: bold;
position: relative; /* Create stacking context for ::before */
overflow: hidden; /* Hide any overflow */
z-index: 0; /* Base stacking level */
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -150%; /* Start outside the left boundary */
width: 200%; /* Ensure it fully covers the button */
height: 100%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-45deg); /* Diagonal shine effect */
z-index:0; /* Ensure it’s behind the button content */
transition: left 0.5s ease-in-out;
}
.cta-button:hover::before {
left: 150%; /* Move it across the button */
}
.cta-button span {
position: relative; /* Ensure text stays above the shine */
z-index: 1; /* Place text above everything */
}
.cta-bottom-right .cta-button:hover {
background-color: #FDE07A; /* Slightly darker yellow */
color: #ffffff; /* Darker text on hover */
}
.info-blocks .info-block:nth-child(6) {
position: relative; /* Ensure the block can be moved using relative positioning */
left: -10%;
top: -3%; /* Move vertically downward */
}
.info-blocks .info-block:nth-child(6) h3 {
font-size: 3rem; /* Adjust the font size for the h3 */
font-weight: bold; /* Adjust the weight */
color: #ffffff; /* Change the color (example: yellow) */
text-align: left; /* Align text to the left */
}
.info-blocks .info-block:nth-child(6) p {
font-size: 1.3rem; /* Adjust the font size for the p */
font-style: normal; /* Optional: make text italic */
color: #FFFFFF; /* Change the color (example: white) */
text-align: left; /* Align text to the left */
text-indent: 60px;
margin-top: 20px; /* Add some spacing if needed */
}
.info-blocks .info-block:nth-child(6) a {
font-size: 1rem; /* Adjust the font size for the p */
font-style: normal; /* Optional: make text italic */
text-align: left; /* Align text to the left */
margin-top: 17px; /* Add some spacing if needed */
}
.info-blocks .info-block:nth-child(6) a {
position: relative; /* Ensure the block can be moved using relative positioning */
left: 60px; /* Move horizontally to the left */
top: 0px; /* Move vertically downward */
}
.info-blocks .info-block:nth-child(1) {
margin-right: 3.5%;
}
.hammer {
display: inline-block;
font-size: 3rem; /* Match your design */
color: #FDE07A; /* Hammer color */
transform-origin: bottom center; /* Pivot point at the bottom of the handle */
animation: hammer-swing 5s infinite ease-in-out; /* Smooth loop */
}
@keyframes hammer-swing {
0% {
transform: rotate(-10deg); /* Upright position */
}
50% {
transform: rotate(20deg); /* Hammering motion */
}
100% {
transform: rotate(-10deg); /* Back to upright */
}
}
/* Footer Container */
.footer {
background-color: #000000; /* Black background */
color: #FFFFFF; /* White text */
padding: 1.2% 10%; /* Padding for spacing */
padding-left: 10.8%;
margin: 0; /* Ensure no extra spacing */
width: 100%; /* Full-width footer */
box-sizing: border-box; /* Include padding in width calculation */
}
/* Footer Content */
.footer-container {
display: flex;
justify-content: space-between; /* Space links and logo evenly */
align-items: center; /* Align vertically */
flex-wrap: wrap; /* Wrap content on smaller screens */
gap: 20px; /* Add space between items */
}
/* Footer Links */
.footer-links {
flex: 1;
text-align: left;
}
.footer-links ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 56px; /* Adds spacing between the links */
justify-content: left; /* Centers the links horizontally */
}
.footer-links ul li {
margin-bottom: 10px;
}
.footer-links ul li a {
text-decoration: none;
color: #FFFFFF; /* White text */
font-size: 0.75rem;
}
.footer-links ul li a:hover {
color: #FDE07A; /* Yellow hover effect */
}
/* Footer Logo */
.footer-logo {
flex: 1;
text-align: right; /* Center align the text */
display: flex; /* Use flexbox for inline alignment */
align-items: right; /* Align vertically */
justify-content: right; /* Center align horizontally */
gap: 10px; /* Space between logo and text */
margin-right: 20px;
}
.footer-logo i {
transform: rotate(-45deg); /* Rotate counterclockwise by 45 degrees */
}
.logo-text {
font-size: 0.7rem;
font-weight: none;
color: #ffffff; /* Yellow logo text */
}
.logo-tagline {
font-size: 0.7rem;
color: #FFFFFF; /* White tagline */
margin-top: 0px;
display: in-line; /* Stack below logo text */
}
/* Responsive Styling */
@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;
}
}
.nav-link {
text-decoration: none; /* Remove the underline */
color: inherit; /* Inherit the color from parent */
}
.nav-link:hover {
color: inherit; /* Ensure no hover color change */
}
.footer-logo {
display: flex; /* Use flexbox for alignment */
flex-direction: row; /* Align items in a row */
align-items: center; /* Align vertically */
justify-content: right; /* Center horizontally */
gap: 5px; /* Adjust spacing between the text elements */
text-align: center; /* Center align the text */
margin: 0 auto; /* Ensure it's centered within the footer */
}
html, body {
overflow-x: hidden;
}
.navbar {
display: flex;
align-items: center;
padding: 20px 10%; /* Reduce the horizontal padding */
background-color: #000000;
color: #FFFFFF;
max-width: 100vw; /* Ensure it never exceeds the viewport width */
overflow: hidden; /* Prevent extra width */
}
@media (max-width: 715px) {
.nav-links {
display: none; /* Hide menu items */
flex-direction: column;
position: absolute;
top: 60px; /* Adjust based on navbar height */
right: 0;
background-color: black; /* Match your navbar */
width: 100%;
text-align: center;
padding: 10px 0;
}
.nav-links.active {
display: flex; /* Show menu when toggled */
}
.menu-toggle {
display: block; /* Show hamburger icon */
font-size: 30px;
cursor: pointer;
color: white;
background: none;
border: none;
position: absolute;
right: 20px;
top: 15px;
}
}
/* Hide hamburger icon on large screens */
.menu-toggle {
display: none;
}
/* Show hamburger icon only below 1006px */
@media (max-width: 715px) {
.menu-toggle {
display: block; /* Show only on small screens */
}
}
/* Default height for 1344px and below */
.homepagebannertext {
height: 125px;
width: 400px;
}
/* When screen width is 1345px or more, set height to 62px */
@media (min-width: 1498px) {
.homepagebannertext {
height: 62px;
width: 1200px;
}
}
@keyframes glow {
0% {
box-shadow: 0 0 5px #FDE07A, 0 0 10px #FDE07A;
}
50% {
box-shadow: 0 0 20px #FDE07A, 0 0 30px #FDE07A;
}
100% {
box-shadow: 0 0 5px #FDE07A, 0 0 10px #FDE07A;
}
}
@keyframes button-press {
0% {
transform: scale(1);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
50% {
transform: scale(0.95);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}
100% {
transform: scale(1);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
}
.cta-button:active {
transform: scale(0.95);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}
/* Default button styles */
.cta-button {
background-color: #FDE07A; /* Keeps the glow effect without a solid fill */
color: rgb(0, 0, 0);
padding: 1rem 3rem;
font-size: 1rem;
cursor: pointer;
transition: 0.3s ease-in-out;
}
/* Glow effect on hover */
.cta-button:hover {
animation: glow 1.5s infinite alternate;
background: transparent;
box-shadow: 0 0 20px 10px #FDE07A;
color: #FDE07A;
opacity: 1 !important; /* Override any animation reversion */
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.home-hero-p {
animation: fade-in 2s ease-in-out forwards;
animation-delay: 3s;
opacity: 0;
padding-right: 10%;
}
@keyframes fade-in-cta {
0% {
opacity: 0;
}
100% {
opacity: 1;
;
}
}
.home-cta{
animation: fade-in-cta 2s ease-in-out forwards;
animation-delay: 5.5s;
opacity: 0;
animation-fill-mode: forwards;
}
.cta-button.animated {
opacity: 1 !important;
}
@keyframes clipReveal {
0% {
clip-path: inset(50% 0 50% 0); /* Thin horizontal line in center */
}
100% {
clip-path: inset(0 0 0 0); /* Fully reveals the image */
}
}
/* Image Wrapper */
.hero-image span div {
width: 100%;
height: auto;
overflow: hidden;
}
/* Apply Clip-Path Animation to the Image */
.hero-image img {
width: 100%;
height: auto;
clip-path: inset(50% 0 50% 0);
animation: clipReveal 1.5s ease-in-out forwards;
animation-delay: 8.45s;
}
/* White Dot - Starts Hidden */
.white-dot {
position: absolute;
top: 50%;
left: 50%;
width: 0px; /* Initially invisible */
height: 0px;
background-color: white;
border-radius: 50%; /* Makes it a circle */
transform: translate(-50%, -50%);
opacity: 0;
animation: tvFlash 0.2s linear 8s , throb 0.6s infinite alternate 8s;
}
/* TV Flash Effect */
@keyframes tvFlash {
0% { width: 0px; height: 0px; opacity: 0; }
40% { width: 100px; height: 2px; opacity: 1; } /* Quick horizontal flash */
60% { width: 2px; height: 50px; opacity: 1; } /* Quick vertical stretch */
80% { width: 20px; height: 20px; opacity: 1; } /* Shrinks into a small dot */
100% { width: 10px; height: 10px; opacity: 1; } /* Final dot size */
}
/* Throbbing (Pulsating) Effect */
@keyframes throb {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.8; }
}
/* Expand Horizontal Line from the Dot */
.white-line {
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 3px;
background-color: white;
transform: translate(-50%, -50%);
opacity: 0;
animation: expandLine 0.3s ease-in-out forwards 8.2s, moveUp 1.5s ease-in-out forwards 8.45s, wipeOut1 0.5s ease-in-out forwards 10.15s;
z-index: 1000;
}
/* Expanding Horizontal Line */
@keyframes expandLine {
0% { width: 5px; opacity: 1; }
100% { width: 100%; opacity: 1; }
}
/* Moving Line Up */
@keyframes moveUp {
0% { top: 50%; }
100% { top: 0%; }
}
/* Moving Line down */
@keyframes movedown {
0% { top: 50%; }
100% { top: 100%; }
}
.white-line-2 {
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 3px;
background-color: white;
transform: translate(-50%, -50%);
opacity: 0;
animation: expandLine 0.3s ease-in-out forwards 8.2s, movedown 1.5s ease-in-out forwards 8.45s, wipeOut2 0.5s ease-in-out forwards 10.15s;;
z-index: 1000;
}
@keyframes wipeOut1 {
0% { clip-path: inset(0 0 0 0); } /* Fully visible */
100% { clip-path: inset(0 0 0 100%); } /* Fully hidden */
}
@keyframes wipeOut2 {
0% { clip-path: inset(0 0 0 0); } /* Fully visible */
100% { clip-path: inset(0 100% 0 0); } /* Fully hidden */
}
@keyframes shimmer-pass {
0% {
transform: translateX(-100%);
}
50%{
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.home-cta {
position: relative;
overflow: hidden; /* Ensures the shimmer stays within the button */
}
.home-cta::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.6) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: translateX(-100%);
animation: shimmer-pass 0.5s ease-in-out;
animation-delay: 11s;
z-index: 0;
}
@media (max-width: 1590px) {
.hero-image {
left: 0%;
margin-right: 11.5%;
width: 500px !important; /* Set a fixed size (adjust as needed) */
height: auto !important; /* Maintain aspect ratio */
max-width: none !important; /* Prevents any shrinking */
flex-shrink: 0 !important;
margin-left: auto; /* Pushes the image to the right */
}
}
@media (max-width: 1506px) {
.info-blocks {
transform: translateX(calc((100vw - 1506px) / 8)); /* Moves left as screen shrinks */
}
}
@media (max-width: 1506px) {
.hero-content {
transform: translateX(calc((100vw - 1506px) / 8)); /* Moves left as screen shrinks */
}
}
@media (max-width: 1506px) {
.animated-text-home {
transform: translateX(calc((100vw - 1506px) / 8)); /* Moves left as screen shrinks */
}
}
@media (max-width: 1506px) {
.info-content p {
transform: translateX(calc((100vw - 1506px) / 8)); /* Moves left as screen shrinks */
}
}
@media (max-width: 1120px) {
.info-blocks > :nth-child(2),
.info-blocks > :nth-child(4),
.info-blocks > :nth-child(6) {
transform: translateX(50px); /* Moves selected items 40px to the right */
}
}
@media (max-width: 1120px) {
.info-blocks,
.hero-content,
.animated-text-home,
.info-content p {
transform: translateX(calc((100vw - 1506px) / 12.5)); /* Moves left more slowly as screen shrinks */
}
}
.hero-image {
display: flex; /* Allows natural sizing */
justify-content: center; /* Center the image if needed */
align-items: center;
width: auto; /* Match image width */
height: auto; /* Match image height */
}
.hero-image picture {
display: block; /* Prevent inline spacing issues */
width: auto;
height: auto;
}
.hero-image picture img {
display: block; /* Removes extra space from inline elements */
width: auto; /* Let image keep its natural width */
height: auto; /* Let image keep its natural height */
max-width: 100%; /* Ensures it fits within smaller screens */
}
@media (max-width: 986px) {
.hero-image {
width: auto; /* Adjusts to fit new image */
height: auto;
}
}
@media (max-width: 986px) {
.hero-image {
width: 242px !important;
height: 464px !important;
margin-right: auto; /* Unlocks the right margin */
margin-left: auto; /* Centers the image naturally if needed */
transform: translateX(calc((100vw - 986px) / 1000));
margin-left: 12%;
}
}
@media (max-width: 740px) {
.typing-section {
display: none; /* Hides the section completely */
}
}
.info-blocks .info-block {
max-width: 300px;
}
.info-blocks .info-block:nth-child(6) {
width: 350px;
}
@media (max-width: 1120px) {
.info-blocks {
display: grid; /* Ensure grid layout */
grid-template-columns: repeat(2, minmax(0, 1fr)); /* Prevents columns from unevenly resizing */
grid-template-rows: repeat(3, auto);
gap: 20px;
}
.info-blocks .info-block {
width: 100%; /* Forces each block to fill its grid cell */
min-width: 0; /* Prevents overflow from long text */
}
/* Maintain right translation for specific blocks */
.info-blocks .info-block:nth-child(2),
.info-blocks .info-block:nth-child(4),
.info-blocks .info-block:nth-child(6) {
transform: translateX(50px); /* Keep the visual shift */
position: relative; /* Ensures it still respects grid spacing */
}
}
@media (max-width: 740px) {
.hero {
margin-bottom: -20%;
}
}
@media (max-width: 740px) {
.info-content p {
position: relative; /* Keeps it centered even when scrolling */
margin-top: 15%;
margin-bottom: -10%;
left: 52%;
transform: translate(-50%, -50%);
opacity: 0; /* Start hidden */
animation: info-content-p-fadein 2s ease-in-out forwards;
animation-delay: 12s; /* Optional: Adjust delay to sync with other animations */
}
}
@keyframes info-content-p-fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Above 740px: Hidden until scrolled into view */
@media (min-width: 741px) {
.info-content p {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.info-content p.info-content-p-fadein {
opacity: 1;
animation: info-content-p-fadein-above741px 0.5s ease-in-out forwards;
}
}
@keyframes animated-text-home-fadein {
0% {
opacity: 0;
margin-left: -20px; /* Move left without affecting final layout */
}
100% {
opacity: 1;
margin-left: 0; /* Moves to correct position */
}
}
/* Initially hidden */
.animated-text-home {
opacity: 0;
}
/* Animation only applies when this class is added */
.animated-text-home.fade-in {
animation: animated-text-home-fadein 0.5s ease-in-out forwards;
}
@keyframes info-content-p-fadein-above741px {
0% {
opacity: 0;
margin-left: -20px; /* Move left without affecting final layout */
}
100% {
opacity: 1;
margin-left: 0; /* Moves to correct position */
}
}
@keyframes info-block-fadein-rightmove {
0% {
opacity: 0;
margin-left: -20px; /* Start slightly left */
}
100% {
opacity: 1;
margin-left: 0; /* Move to final position */
}
}
/* Initially hidden */
.info-blocks .info-block {
opacity: 0;
}
/* Animation applies when the class is added */
.info-blocks .info-block.fade-in {
animation: info-block-fadein-rightmove 0.5s ease-in-out forwards;
}
/*important bug fix for the font-weight cycling on wdith decrease*/
.info-blocks .info-block:nth-child(1) {
contain: paint;
will-change: contents;
}
@media screen and (max-width: 606px) {
/* Move .info-section further down */
.info-section {
margin-top: 30vh; /* Pushes it down */
}
}
/* Only affects the homepage */
.homepage-body {
background-color: black;
}
@media screen and (max-width: 606px) {
.hero-content {
display: grid !important;
gap: 2vh; /* Adds spacing between children */
width: 100%;
position: relative;
top: 45%;
}
.homepagebannertext {
width: 95vw; /* Full width of the viewport */
height: 80vh; /* Full height of the viewport */
position: relative;
transform: translateX(calc((606px - 100vw) / 5))translateY(calc((100vw - 606px) / 2)); /* Gradually moves right and up */
}
.hero-image {
position: relative;
transform: translateX(calc((606px - 100vw) / 6.6)) translateY(calc((100vw - 606px) / 0.7)); /* Gradually moves right and up */
left: 39vw;
bottom: 8vh;
scale: 130%;
width: 40vw !important;
height: auto !important;
}
.info-section {
margin-top: 123vh;
transform: translateY(calc((100vw - 606px) / 0.34));
height: 1400px;
}
.home-hero-p {
width: 50vw;
height: 20vh;
font-size: 6vw !important;
position: relative;
top: 30vh;
transform: translateX(calc((606px - 100vw) / 5)) translateY(calc((100vw - 606px) / 0.5)); /* Gradually moves right */
}
.homepage-container {
margin-top: 10vh;
height: 3100px;
}
.typing-effect {
font-size: 23vw; /* Scale text dynamically */
line-height: 1.1;
max-width: 100vw;
width: auto;
white-space: normal; /* Ensures proper line breaks */
}
.cursor2 {
font-size: 23vw;
width: 4vw;
margin-left: 2vw;
}
.home-cta {
width: 33vw;
scale: 1.2;
position: relative;
top: 15vh;
margin: auto;
font-size: 1rem;
transform: translateX(calc((606px - 100vw) / 6))translateY(calc((100vw - 606px) / 0.565));
will-change: transform;
transform-style: preserve-3d;
transition: none;
text-align: center;
min-width: max-content;
}
.info-content p {
font-size: 4.5vw;
left: 39%;
top: 2vh;
margin-bottom: 7vh;
}
.info-content {
width: 90vw !important;
}
.info-blocks {
transform: translateX(calc((606px - 100vw) / 79))translateY(calc((100vw - 606px) / 100000));;
position: relative;
right: 12vw;
bottom: 14vh;
padding-top: 0;
}
.info-blocks .info-block:nth-child(2),
.info-blocks .info-block:nth-child(4) {
position: relative;
left: 10vw;
transform: translateX(calc((606px - 100vw) / 1000));
}
.info-blocks .info-block:nth-child(6) {
position: relative;
left: 2.5vw;
transform: translateX(calc((100vw - 606px) / 10));
}
.info-section::after {
position: relative;
bottom: 23vh;
background-color: transparent;
}
}
@media screen and (max-width: 539px) {
.info-blocks .info-block:nth-child(5) {
position: relative;
left: 30vw;
min-width: 205px;
transform: translateX(calc((100vw - 606px) / 8));
}
.info-blocks .info-block:nth-child(6) {
position: relative;
left: -23.5vw;
top: 34vh;
transform: translateX(calc((100vw - 606px) / 4));
}
.info-blocks .info-block:not(:nth-child(5)):not(:nth-child(6)) {
min-width: 157px;
}
.info-blocks .info-block:nth-child(2),
.info-blocks .info-block:nth-child(4) {
transform: translateX(calc((100vw - 606px) / 20));
}
}
@media (max-width: 715px) {
.nav-links {
display: none;
position: fixed;
top: 0;
right: -54vw; /* Hidden off-screen */
width: clamp(188px, 50vw, 344px); /* Half the screen width */
height: 100vh; /* Full viewport height */
background-color: #000000e6;
z-index: 9999;
transition: right 0.3s ease-in-out;
box-shadow: -4px 0 6px rgb(255 255 255 / 67%);
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 50px;
}
.nav-links.active {
right: 0;
padding: 20px clamp(20px, 6vw, 50px); /* Scales padding */
}
.nav-links li {
padding: 20px 0;
}
/* Make Menu Items Even Bigger & Bolder */
.nav-links a {
font-size: clamp(28px, 6vw, 48px); /* Huge font size */
font-weight: 900; /* Extra bold */
color: white;
text-decoration: none;
}
/* Sticky Close Button (Scales Down as Screen Shrinks) */
.menu-toggle {
position: fixed;
top: 15px;
right: 5vw;
font-size: clamp(24px, 5vw, 30px); /* Scales dynamically */
cursor: pointer;
color: white;
background: none;
border: none;
z-index: 10001;
transition: font-size 0.2s ease-in-out;
}
}
.footer-links ul {
margin-left: 4vw; /* Default for large screens */
}
@media (max-width: 1502px) {
.footer-links ul {
transform: translateX(calc((100vw - 1506px) / 8));}
@media (max-width: 1120px) {
.footer-links ul {
transform: translateX(calc((100vw - 1506px) / 12.5)); }
}
@media (max-width: 768px) {
.footer-links ul {
transform: none;
margin-left: 0; }
}
@media (max-width: 434px) {
.footer {
transform: none;
padding: 20px; }
}
}
</style>
</head>
<body class="homepage-body">
<nav class="navbar">
<div class="logo">
<a href="index.html" style="text-decoration: none; color: inherit;">Logo
</a>
</div>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="Products.html">Products</a></li>
<li><a href="signuppage.html">Sign Up</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<button class="menu-toggle">☰</button> <!-- Hamburger icon -->
</nav>
<!-- Hero Section -->
<div class="homepage-container">
<header class="hero">
<div class="hero-content">
<h1 class="homepagebannertext">
<span class="typing-effect"></span>
<span class="cursor2"></span>
</h1>
<p class="home-hero-p">tagline tagline tagline tagline tagline tagline </p>
<a href="signuppage.html" class="cta-button home-cta">Sign Up</a>
</div>
<div class="hero-image">
<picture>
<source srcset="images/image.png" media="(max-width: 986px)">
<img src="images/image.png" alt="image.png">
</picture>
</div>
</header>
<section class="typing-section">
<h2 class="animated-text animated-text-home">typing text typing text typing text</h2>
</section>
<section class="info-section">
<div class="info-content">
<p>
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
</p>
</div>
<div class="info-blocks">
<div class="info-block">
<i class="icon"></i>
<h3>USP 1</h3>
<p>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 </p>
</div>
<div class="info-block">
<i class="icon"></i>
<h3>USP 2</h3>
<p>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
<p>
</div>
<div class="info-block">
<i class="icon"></i>
<h3>USP 3</h3>
<p> 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
<p>
</div>
<div class="info-block">
<i class="icon"></i>
<h3>USP 4</h3>
<p>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 </p>
</div>
<div class="info-block">
<i class="icon"></i>
<h3>USP 5</h3>
<p>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 </p>
</div>
<div class="info-block">
<h3>USP 6<h3>
<p>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 </p>
<a href="signuppage.html" class="cta-button">Sign Up Now</a>
</div>
</div>
</section>
</div>
<script>
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 += "<br>";
} else if (index === 14) { // After "stuff,"
typingEffect.innerHTML += "<br>";
} else if (index === 20) { // After "we're"
typingEffect.innerHTML += "<br>";
}
} else if (window.innerWidth < 1498) {
if (index === 14) { // After "Buy our stuff,"
typingEffect.innerHTML += "<br>";
}
}
// 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();
});
</script>
<script>
function toggleMissionText() {
const missionText = document.getElementById('mission-text');
const isHidden = missionText.style.display === 'none' || missionText.style.display === '';
missionText.style.display = isHidden ? 'block' : 'none';
}
</script>
<script>
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
}
});
}
});
</script>
<script>
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
}
});
</script>
<script>
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);
});
});
});
</script>
<script>
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);
});
}
});
</script>
<script>
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
}
});
</script>
<script>
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
}
});
</script>
<script>
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 <= 606) {
// Move hero-image to the correct position inside hero-content (as the 3rd child)
if (!heroContent.contains(heroImage)) {
const homeHeroP = document.querySelector(".home-hero-p");
if (homeHeroP) {
homeHeroP.insertAdjacentElement("afterend", heroImage);
}
}
} else {
// Move hero-image back to its original position above 606px
if (originalParent && originalNextSibling) {
originalParent.insertBefore(heroImage, originalNextSibling);
} else if (originalParent) {
originalParent.appendChild(heroImage); // Fallback if nextSibling is null
}
}
}
// Run on load and resize
moveHeroImage();
window.addEventListener("resize", moveHeroImage);
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
if (window.innerWidth <= 606) {
console.log("✅ Screen width is 606px or below - Enabling scroll-based animations.");
const homeHeroP = document.querySelector(".home-hero-p");
const homeCta = document.querySelector(".home-cta");
const heroImage = document.querySelector(".hero-image img");
const whiteDot = document.querySelector(".white-dot");
const whiteLine = document.querySelector(".white-line");
const whiteLine2 = document.querySelector(".white-line-2");
const infoContentP = document.querySelector(".info-content p");
// 🔴 Completely REMOVE animations on load (This prevents pre-loading)
homeHeroP.style.animation = "none";
homeCta.style.animation = "none";
infoContentP.style.animation = "none";
heroImage.style.animation = "none";
whiteDot.style.animation = "none";
whiteLine.style.animation = "none";
whiteLine2.style.animation = "none";
// 🔴 Force elements to remain hidden until triggered
homeHeroP.style.opacity = "0";
homeCta.style.opacity = "0";
infoContentP.style.opacity = "0";
// ✅ Intersection Observer Setup (Triggers ONLY on Scroll)
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
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.");
}
});
</script>
<footer class="footer">
<div class="footer-container">
<div class="footer-links">
<ul>
<li><a href="terms.html">Terms</a></li>
<li><a href="privacy.html">Privacy</a></li>
<li><a href="cookies.html">Cookies</a></li>
<li><a href="careers.html">Careers</a></li>
</div>
<div class="footer-logo">
<span class="logo-text">Logo
<span class="logo-tagline">©. 2025 Part of the Company Group</span>
</div>
</div>
</footer>
</body>
</html>
Top comments (0)