Мобильная версияВот как это должно выглядеть (вот что происходит, когда я объединяю их все в index.html)
[img]https:// i.sstatic.net/H3rhw0hO.png[/img]
Вот как выглядит веб-страница, когда я отделяю верхний и нижний колонтитулы от index.html (заголовок больше не зависает вверху) экрана и анимация для нижний колонтитул перестает работать):
Вот мой HTML-код:
RV
Это мой Footer.html
2024 © by Rithvik Amar
{
const file = el.getAttribute("data-include");
if (file) {
fetch(file)
.then(response => {
if (response.ok) return response.text();
throw new Error("Network response was not ok.");
})
.then(html => {
el.innerHTML = html;
})
.catch(err => console.error("There was a problem including the HTML file:", err));
}
});
}
document.addEventListener("DOMContentLoaded", includeHTML);
RITHVIK VADDADI
Cyber Security Enthusiast | Toastmasters | Cardistry
About me
Hello, I am Rithvik Vaddadi, a current NSF with a diploma in Cyber Security and Digital Forensics. Drawn to the world of computers, I aspire to make people's lives easier and protect them from cyber attacks with the help of technology around us. As a problem solver, I am known to use my creative and critical thinking skills when providing solutions in my past leadership roles and projects. When involved in projects, I tend to notice people's strengths and weaknesses and assign them to roles where their potential would be fully maximized in the project. When my mind is fixed on a goal, I dedicate my energy and focus to achieving the goal.
View My Resume
View My LinkedIn
My Education Journey
Army
SAF Singapore Armed Forces
Vocation: 5SIR Infantry Soldier as a General Purpose Machine Gun (GPMG) Gunner and Platoon 2ic
Rank: Corporal
ORD Date: 2nd May 2025
Overseas involvement: Brunei, Malaysia, Australia.
Achievements: Due to my exceptional combat fitness and leadership, I was chosen to represent my battalion in a Joint Adventure Training (JAT) with the Malaysian Army Rangers.
Skills: Proficient in handling GPMG, SAR21, and LMG. Trained in drone flying. (DJI Mavick Pro, Vesper, Cetus)
Polytechnic
Ngee Ann Polytechnic
Course: Cyber Security and Digital Forensics
CCAs: Vice-President and Student Advisor of NP's Toastmasters Club, Head of Logistics for NP's ICTSociety, Tchoukball
Achievements: I led a 2-hour group focus session with the Minister of Education, Mr Chan Chun Sing, about the future of Singapore's education, housing, etc.
Showcased my capstone project at Singapore International Cyber Week X Govware (SICW 2022).
Spearheaded a YEP-GO overseas cross-cultural program with a school in Ladakh, India for a week.
Secondary School
Bukit Batok Secondary School
Stream: Express double science (Physics and Chemistry)
O-Level L1R5: 10 L1R4: 7
CCAs: Badminton (Vice-Captain), Student Council (Vice President), Lewis House Captain
Achievements: I attended a photoshoot with my school's principle for our school website and magazine. This event was a testament to the contributions and impact I made in the school's community. Involved in many volunteer programs such as donating rice, beach clean-ups, etc.
Это мой код стилей.CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page{
position: relative;
background: #e2e2e2;
height: 300vh;
}
.logo{
font-size: 22px;
}
.header{
color: white;
background: transparent;
position: sticky;
z-index: 2;
top: 0;
transition: 0.3s ease-in-out;
height: 80px;
}
.scrolled{
height: 50px;
background: black;
transition: .3s ease-in-out;
}
.header-content{
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1100px;
margin: 0 auto;
height: 100%;
padding: 0 40px;
}
.nav{
display: flex;
width: 40%;
}
.nav-list{
list-style: none;
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
gap: 20px;
}
.nav-link a{
color: white;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: 0.3s;
}
.nav-link a:hover{
border-bottom: 2px solid white;
transition: 0.3s;
}
.menu-icon{
display: none;
flex-direction: column;
cursor: pointer;
}
.menu-icon .bar{
width: 25px;
height: 3px;
background-color: red;
margin: 4px 0;
transition: 0.4s;
}
@media (max-width:768px){
.nav{
display: none;
flex-direction: column;
background-color: black;
width: 100%;
position: relative;
top: 80px;
left: 0;
text-align: center;
}
.nav-list{
flex-direction: column;
width: 100%;
}
.nav-link a{
padding: 12px;
border-bottom: 1px solid white;
width: 100%;
display: block;
}
.menu-icon{
display: flex;
}
.nav.show{
display:flex;
}
}
.about{
background-image: url(Images/CardistryBGD2.jpg);
background-size: cover;
height: 100vh;
position: relative;
top: -80px;
z-index: 1;
display: flex;
justify-content: center;
align-items:center;
flex-direction: column;
}
.about-text{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.title{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color:white;
font-size: 9vw;
}
.Intro{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 1.5vw;
color: white;
margin-top: 10px;
}
.arrow-wrap {
position: absolute;
bottom: 30%;
left: 50%;
transform: translate(-50%, -25px);
-webkit-animation: arrow 0.5s 1s infinite ease-out alternate;
animation: arrow 0.5s 1s infinite ease-out alternate;
text-align: center;
}
.arrow {
position: relative;
padding: 15px;
border-left: solid 5px red;
border-bottom: solid 5px whitesmoke;
display: block;
}
.arrow-down {
transform: rotate(-45deg);
position: relative;
margin-top: -15px;
}
@keyframes arrow {
0% {
bottom: 0px;
}
100% {
bottom: 10px;
}
}
/* Hover effect */
.arrow-wrap:hover {
animation-play-state: paused;
}
/* Responsive styling for mobile screens */
@media (max-width: 768px) {
/* Place arrow differently on mobile */
.arrow-wrap {
bottom: 30px;
}
}
h2{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
font-size: 3vw;
margin: 8px;
padding: 30px;
}
.Avatar{
vertical-align: middle;
width: 145px;
height: 140px;
border-radius: 50%;
margin-left: 15px;
}
.text-buttons{
display: flex;
flex-direction: column;
}
.overview{
background-image: url(Images/CardBG.jpg);
background-size: cover;
margin: -80px 0 0 0;
padding:0;
height: auto;
display: flex;
justify-content: center;
align-items:center;
flex-direction: column;
.OV{
display: flex;
align-items: flex-start;
max-width: 1150px;
color: white;
font-family: 'Montserrat';
text-align: left;
}
.description{
margin-left: 25px;
font-size: 1.2em;
}
.buttons{
display: flex;
gap: 20px;
margin-top: 20px;
}
button{
background: rgb(165, 1, 1);
color: #fff;
font-weight: 600;
border: none;
border-radius: 12px;
/* height: 50px;
width: 200px; */
padding: 10px 20px;
font-size: 18px;
font-family: 'Montserrat';
margin-top: 20px;
box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
transition: background-color 0.3s ease, transform 0.2s ease;
cursor: pointer;
}
button:hover{
background-color: #8a0000;
transform: translateY(-2px);
box-shadow: 0px 6px 8px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
.overview {
padding: 0px;
}
.OV {
flex-direction: column;
text-align: center;
align-items: center;
}
.content{
flex-direction: column;
}
.Avatar {
margin-left: 0;
margin-bottom: 20px;
width: 120px;
height: 120px;
}
.description {
margin-left: 0;
font-size: 4vw;
}
.buttons{
flex-direction: column;
align-items: center;
}
button{
width: 150px;
height: auto;
}
}
@media (max-width: 480px) {
.OV{
align-items: center;
}
h2 {
font-size: 6vw;
}
.description {
font-size: 5vw;
}
.Avatar {
margin: 0;
width: 100px;
height: 100px;
}
button{
width: 100%;
height: 16px;
padding: 10px;
}
.buttons{
align-items: center;
}
}
/* Section Styles */
.education-section {
padding: 20px 20px;
color: white;
text-align: center;
}
.cards-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 20px;
margin-bottom: 0;
}
/* Card Styles */
.card {
width: 300px;
height: 400px;
perspective: 1000px;
margin: 20px;
transition: transform 0.3s ease box-shadow 0.3s ease;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
position: relative;
}
/* Hover Animation */
.card:hover {
transform: scale(1.05); /* Slight jump effect */
box-shadow: 0px 12px 24px rgba(255, 255, 255, 0.3);
}
/* Card Flip Animation */
.card-inner {
position: relative;
width: 100%;
height: 100%;
max-width: 1000px;
margin: 0 auto;
transform-style: preserve-3d;
transition: transform 0.8s ease;
cursor: pointer;
border-radius: 15px;
box-shadow: none;
font-family: Arial, sans-serif;
line-height: 1.6;
letter-spacing: 0.5px;
color: #f1f1f1;
}
.card-front, .card-back {
box-shadow: none;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* Hide the back while flipping */
border-radius: 10px;
background-color: #1e1e1e;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
}
.card-front {
background: linear-gradient(135deg, #ac0101 0%, #941616 100%); /* Gradient */
color: white;
font-size: 1.5em;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
/* Back Card Design with Image Background */
.card-back {
background-image: url('your-image-back.jpg'); /* Replace with your image */
background-size: cover;
background-position: center;
transform: rotateY(180deg);
padding: 30px;
font-size: 1em;
color: #ddd;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start; /* Align items from the top */
align-items: center; /* Center the items horizontally */
border-radius: 15px;
position: relative;
transition: background 0.5s ease;
}
.card-inner h1{
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
}
/* Style for the h3 element (Title) */
.card-back h3 {
font-size: 1.8em;
color: #ffffff;
margin-bottom: 20px;
text-align: center;
width: 100%; /* Ensure it takes up full width */
position: absolute;
top: 30px; /* Adjust this value to control the top spacing */
left: 50%;
transform: translateX(-50%); /* Center horizontally */
}
/* Style for paragraph or other content */
.card-back p {
font-size: 1.2em;
text-align: left;
margin-top: 80px; /* Ensure it's below the h3 title */
z-index: 1;
width: 100%;
padding: 0 20px;
}
.card-inner.flip {
transform: rotateY(180deg);
}
/* Expand animation */
.card.expand {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: transparent;
transform: none;
transition: width 0.5s ease, height 0.5s ease;
box-shadow: none;
}
.card-back .close-btn {
position: absolute;
top: 15px;
right: 15px;
background-color: transparent;
border: none;
color: white;
font-size: 0.5em;
cursor: pointer;
font-weight: bold;
z-index: 1;
}
/* Media Queries for responsiveness */
@media (max-width: 768px) {
.cards-container {
flex-direction: column;
align-items: center;
}
.card {
width: 80%;
height: auto;
}
}
.gallery{
width:600px;
display:flex;
overflow-x: scroll;
}
.gallery div{
width: 100%;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 30px;
padding: 10px;
flex:none;
}
.gallery div img{
width:100%;
/* filter:grayscale(100%); */
transition: tranform 0.5s;
}
.gallery::-webkit-scrollbar{
display:none;
}
.gallery-wrap{
display:flex;
align-items:center;
justify-content: center;
margin: 2% auto;
}
.backBtn, .nextBtn{
width:50px;
cursor: pointer;
margin: 40px;
}
.gallery div img:hover{
transform: scale(1.1);
}
.footer-top {
text-align: center;
background-size: cover;
background-position: center;
padding: 30px 0px;
font-family: rubik;
margin-top: 0;
}
.page-wrapper
{
position: relative;
bottom: 0;
width: 100%;
z-index: 11111;
}
.footer-top, .footer-bottom {
background-color: #989090;
}
footer p, footer strong, footer b, footer {
color: #ffffff;
}
#waterdrop {
height: 80px;
}
#waterdrop canvas {
bottom: -70px !important;
}
.footer-site-info
{
padding-top: 10px;
}
footer {
text-align: center;
}
.footer-container {
justify-content: center;
display: flex;
align-items: center;
width: 100%;
}
.footer-container a {
padding: 0px 16px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: medium;
}
.fa:hover {
color: #45405F;
}
.footer-icons {
display: flex;
justify-content: center;
gap:20px;
padding-bottom: 10px;
}
.copyright {
color:#f2f2f2;
overflow: hidden;
margin-bottom: -30px;
}
.telegram{
padding: 0px;
width: 30px;
text-decoration: none;
}
.telegram:hover{
opacity: 0.7;
}
.linkedin{
padding: 0px;
width: 30px;
text-decoration: none;
}
.linkedin:hover{
opacity: 0.7;
}
.insta{
padding: 0px;
width: 30px;
text-decoration: none;
}
.insta:hover{
opacity: 0.7;
}
Это мой код Javascript:
const header = document.querySelector('.header');
window.addEventListener("scroll", () => {
if(window.scrollY >= 150){
header.classList.add("scrolled");
} else if(window.scrollY {
navMenu.classList.toggle('show');
});
window.addEventListener('load', function(){
this.document.querySelector('.arrow-wrap').computedStyleMap.display = 'block';
});
// Select all cards
const cards = document.querySelectorAll('.card');
// Add event listeners to each card
cards.forEach(card => {
const cardInner = card.querySelector('.card-inner');
// Only flip when you click the card front
const cardFront = card.querySelector('.card-front');
cardFront.addEventListener('click', function (e) {
e.stopPropagation(); // Prevent the event from propagating to the document
cardInner.classList.toggle('flip'); // Flip the card
card.classList.toggle('expand'); // Expand the card
});
// Close button logic (for collapsing and un-flipping)
const closeButton = card.querySelector('.close-btn');
closeButton.addEventListener('click', function (e) {
e.stopPropagation(); // Prevent clicking the card behind the button
cardInner.classList.remove('flip'); // Remove the flip effect
card.classList.remove('expand'); // Collapse the card
});
});
const nextButtons = document.querySelectorAll('.nextBtn');
const backButtons = document.querySelectorAll('.backBtn');
const galleries = document.querySelectorAll('.gallery');
// Function to scroll the gallery
function scrollGallery(direction, gallery) {
const scrollAmount = gallery.clientWidth;
gallery.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
}
// Adding event listeners to each pair of buttons
nextButtons.forEach((btn, index) => {
btn.addEventListener('click', () => scrollGallery(1, galleries[index]));
});
backButtons.forEach((btn, index) => {
btn.addEventListener('click', () => scrollGallery(-1, galleries[index]));
});
window.addEventListener('scroll', function() {
const footer = document.querySelector('.footer');
const scrollable = document.documentElement.scrollHeight - window.innerHeight;
const scrolled = window.scrollY;
if (Math.ceil(scrolled) >= scrollable) {
footer.classList.add('expanded'); // Expand footer when at the bottom
} else {
footer.classList.remove('expanded'); // Hide footer when not at the bottom
}
});
Подробнее здесь: https://stackoverflow.com/questions/791 ... index-html
