Skip to content

Commit

Permalink
Animando
Browse files Browse the repository at this point in the history
  • Loading branch information
@fvandrad
fvandrad committed Jan 6, 2025
1 parent f3de099 commit f7e82ed
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 8 deletions.
58 changes: 54 additions & 4 deletions dedicacao-a-deus/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ body {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
min-height: 100vh;
color: var(--text-light);
animation: fadeIn 1s ease-in;
}

nav {
Expand All @@ -29,6 +30,7 @@ nav {
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
animation: slideDown 0.5s ease-out;
}

nav ul {
Expand All @@ -42,11 +44,12 @@ nav a {
color: var(--text-light);
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
transition: all 0.3s ease;
}

nav a:hover {
color: var(--accent-color);
transform: scale(1.1);
}

header {
Expand All @@ -58,18 +61,21 @@ header {
flex-direction: column;
justify-content: center;
align-items: center;
animation: fadeIn 2s ease-in;
}

h1 {
font-size: 4rem;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
animation: slideUp 1s ease-out;
}

.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
animation: fadeIn 1.5s ease-in;
}

.verse-section {
Expand All @@ -79,23 +85,27 @@ h1 {
margin: 20px 0;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: transform 0.3s;
transition: all 0.3s ease;
animation: slideIn 0.5s ease-out;
}

.verse-section:hover {
transform: translateY(-5px);
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.verse {
font-size: 1.5rem;
font-style: italic;
margin-bottom: 10px;
animation: fadeIn 1s ease-in;
}

.verse-reference {
font-weight: bold;
text-align: right;
color: var(--accent-color);
animation: slideLeft 0.5s ease-out;
}

.prayer-section {
Expand All @@ -104,28 +114,37 @@ h1 {
padding: 40px;
background: rgba(255, 255, 255, 0.15);
border-radius: 15px;
animation: scaleIn 0.5s ease-out;
}

.testimonials-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 40px 0;
animation: fadeIn 1s ease-in;
}

.testimonial-card {
background: rgba(255, 255, 255, 0.15);
padding: 20px;
border-radius: 10px;
text-align: center;
transition: all 0.3s ease;
animation: slideUp 0.5s ease-out;
}

.testimonial-card:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

footer {
text-align: center;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
margin-top: 40px;
animation: slideUp 0.5s ease-out;
}

.section-title {
Expand All @@ -134,6 +153,37 @@ footer {
margin: 40px 0;
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
animation: slideDown 0.5s ease-out;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes slideDown {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

@keyframes slideUp {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

@keyframes slideIn {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

@keyframes slideLeft {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

@keyframes scaleIn {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
Expand All @@ -153,4 +203,4 @@ footer {
.verse {
font-size: 1.2rem;
}
}
}
14 changes: 14 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,18 @@ document.addEventListener('DOMContentLoaded', function() {
const expanded = menuIcon.getAttribute('aria-expanded') === 'true' ? 'false' : 'true';
menuIcon.setAttribute('aria-expanded', expanded);
});
});

document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.animate-on-scroll');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2 }); // Ajuste o threshold conforme necessário

elements.forEach(el => observer.observe(el));
});
71 changes: 67 additions & 4 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,13 @@ body {
text-align: center;
color: #fff;
text-shadow: 0 2px 4px rgb(255, 255, 255, 2);
animation: fadeIn 1s ease-in;
}

.header-content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
animation: slideInDown 1s ease-out;
}

/* Navigation */
Expand All @@ -51,6 +53,7 @@ body {
position: sticky;
top: 0;
z-index: 100;
animation: slideInDown 0.5s ease-out;
}

.nav a {
Expand All @@ -59,24 +62,27 @@ body {
display: flex;
align-items: center;
gap: 0.5rem;
transition: color 0.3s;
transition: all 0.3s ease;
}

.nav a:hover {
color: var(--primary-color);
transform: translateY(-2px);
}

/* Welcome Section */
.welcome {
padding: 4rem 2rem;
text-align: center;
background-color: var(--light-bg);
animation: fadeIn 1s ease-in;
}

/* Verses Section */
.verses {
padding: 4rem 2rem;
text-align: center;
animation: fadeIn 1s ease-in;
}

.verse-cards {
Expand All @@ -91,25 +97,38 @@ body {
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
animation: fadeInUp 0.5s ease-out;
}

.card:hover {
transform: translateY(-10px);
}

.card img {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto 1rem;
transition: transform 0.3s ease;
}

.card img:hover {
transform: scale(1.05);
}

/* Prayer Section */
.prayer {
padding: 4rem 2rem;
background-color: var(--light-bg);
text-align: center;
animation: fadeIn 1s ease-in;
}

.prayer p {
text-align: left;
margin: 0 10%;
animation: slideInLeft 0.5s ease-out;
}

/* Footer */
Expand All @@ -118,6 +137,7 @@ body {
color: white;
padding: 2rem;
text-align: center;
animation: fadeIn 1s ease-in;
}

.social-links {
Expand All @@ -128,11 +148,55 @@ body {
color: white;
margin: 0 1rem;
font-size: 1.5rem;
transition: color 0.3s;
transition: all 0.3s ease;
}

.social-links a:hover {
color: var(--accent-color);
transform: scale(1.2);
}

/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes slideInDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

@keyframes fadeInUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

/* Responsive Design */
Expand All @@ -146,10 +210,9 @@ body {
align-items: center;
gap: 1rem;
position: relative;

}

.verse-cards {
grid-template-columns: 1fr;
}
}
}

0 comments on commit f7e82ed

Please sign in to comment.