-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
333dfe5
commit ff6faf6
Showing
6 changed files
with
387 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| .contact-info { | ||
| background-color: #1c1c1c; | ||
| color: #ffffff; | ||
| padding: 40px; | ||
| border-radius: 12px; | ||
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); | ||
| max-width: 800px; | ||
| margin: auto; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .contact-info h2 { | ||
| font-family: 'Helvetica Neue', sans-serif; | ||
| font-weight: bold; | ||
| color: #e50914; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .contact-info p { | ||
| font-family: 'Helvetica Neue', sans-serif; | ||
| font-size: 16px; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .contact-details { | ||
| display: flex; | ||
| justify-content: center; | ||
| gap: 20px; | ||
| flex-wrap: wrap; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .contact-item { | ||
| background-color: #141414; | ||
| border-radius: 8px; | ||
| padding: 20px; | ||
| width: 200px; | ||
| } | ||
|
|
||
| .contact-item h3 { | ||
| font-family: 'Helvetica Neue', sans-serif; | ||
| font-weight: bold; | ||
| color: #e50914; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .contact-item p { | ||
| font-family: 'Helvetica Neue', sans-serif; | ||
| font-size: 14px; | ||
| color: #ffffff; | ||
| } | ||
|
|
||
| .contact-button { | ||
| background-color: #e50914; | ||
| color: #ffffff; | ||
| border: none; | ||
| padding: 15px 25px; | ||
| border-radius: 8px; | ||
| font-family: 'Helvetica Neue', sans-serif; | ||
| font-weight: bold; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease, transform 0.2s ease; | ||
| } | ||
|
|
||
| .contact-button:hover { | ||
| background-color: #d40813; | ||
| transform: scale(1.05); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| .faq-wrapper { | ||
| width: 100%; | ||
| padding: 50px 0; | ||
| background-color: #141414; /* Netflix dark background */ | ||
| } | ||
|
|
||
| .faq-container { | ||
| background-color: #1c1c1c; /* Darker gray for container */ | ||
| color: white; | ||
| width: 90%; /* 90% width of parent */ | ||
| margin: 0 auto; | ||
| border-radius: 8px; /* Rounded corners */ | ||
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); /* Darker shadow */ | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .faq-title { | ||
| text-align: center; | ||
| font-size: 2.5rem; | ||
| margin-bottom: 40px; | ||
| color: #e50914; /* Netflix Red */ | ||
| font-family: 'Helvetica Neue', sans-serif; | ||
| text-transform: uppercase; | ||
| letter-spacing: 1.5px; | ||
| } | ||
|
|
||
| .faq-item { | ||
| margin-bottom: 20px; | ||
| border-bottom: 1px solid #333; /* Dark gray separator */ | ||
| padding-bottom: 10px; | ||
| } | ||
|
|
||
| .faq-question { | ||
| width: 100%; | ||
| background-color: transparent; | ||
| color: #e50914; /* Netflix Red for questions */ | ||
| padding: 15px 0; | ||
| font-size: 1.4rem; | ||
| border: none; | ||
| cursor: pointer; | ||
| text-align: left; | ||
| font-family: 'Helvetica Neue', sans-serif; | ||
| font-weight: bold; | ||
| position: relative; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .faq-question:hover { | ||
| color: #ff1a1a; /* Slightly brighter red on hover */ | ||
| } | ||
|
|
||
| .faq-question::after { | ||
| content: '▼'; /* Down arrow */ | ||
| font-size: 1rem; | ||
| position: absolute; | ||
| right: 0; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| transition: transform 0.3s ease; | ||
| color: #e50914; /* Netflix Red arrow */ | ||
| } | ||
|
|
||
| .faq-answer { | ||
| max-height: 0; | ||
| overflow: hidden; | ||
| transition: max-height 0.5s ease; | ||
| padding-left: 20px; | ||
| color: #e0e0e0; /* Light gray for answer text */ | ||
| } | ||
|
|
||
| .faq-answer p { | ||
| font-size: 1rem; | ||
| line-height: 1.5; | ||
| padding: 10px 0; | ||
| } | ||
|
|
||
| .faq-answer.active { | ||
| max-height: 300px; | ||
| } | ||
|
|
||
| .faq-question.active::after { | ||
| transform: translateY(-50%) rotate(180deg); /* Rotate arrow when active */ | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| const faqQuestions = document.querySelectorAll('.faq-question'); | ||
|
|
||
| faqQuestions.forEach(question => { | ||
| question.addEventListener('click', () => { | ||
| const answer = question.nextElementSibling; | ||
|
|
||
| // Toggle the active class to open or close the FAQ answer | ||
| answer.classList.toggle('active'); | ||
|
|
||
| // Adjust the max height based on its current state | ||
| if (answer.classList.contains('active')) { | ||
| answer.style.maxHeight = answer.scrollHeight + 'px'; | ||
| } else { | ||
| answer.style.maxHeight = '0'; | ||
| } | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| .sec2 { | ||
| margin-top: 7px; | ||
| margin-bottom: 7px; | ||
| width: 100%; | ||
| height: 600px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| background-color: #141414; | ||
| } | ||
|
|
||
| .sec2-1 { | ||
| width: 40%; | ||
| height: 70%; | ||
| padding-left: 5%; | ||
| padding-right: 5%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| color: white; | ||
| font-family: 'Helvetica Neue', sans-serif; | ||
| } | ||
|
|
||
| .heading-sec2 { | ||
| font-size: 50px; | ||
| font-weight: bold; | ||
| color: #e50914; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .text-sec2 { | ||
| font-size: 25px; | ||
| margin-top: -3%; | ||
| color: #b3b3b3; | ||
| } | ||
|
|
||
| .sec2-2 { | ||
| width: 40%; | ||
| height: 70%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .sec2-2-img { | ||
| width: 90%; | ||
| height: 95%; | ||
| border-radius: 10px; | ||
| box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.6); | ||
| transition: transform 0.3s ease-in-out; | ||
| } | ||
|
|
||
| .sec2-2-img:hover { | ||
| transform: scale(1.05); | ||
| } | ||
|
|
||
| /* Optional for future video */ | ||
| .sec2-2-video { | ||
| position: absolute; | ||
| top: 51px; | ||
| right: 0px; | ||
| width: 555px; | ||
| border-radius: 10px; | ||
| box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.6); | ||
| transition: transform 0.3s ease-in-out; | ||
| } | ||
|
|
Oops, something went wrong.