Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated the social media icons with animations #1999

Closed
wants to merge 2 commits into from
Closed

updated the social media icons with animations #1999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a766dc7
updated the social media icons with animations
ritikm31 Nov 10, 2024
56876f0
blog added in the blog section
ritikm31 Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
189 changes: 171 additions & 18 deletions blog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,194 @@
body {
background-color: white;
color: black;
transition: background-color 0.3s, color 0.3s;
background-color: white;
color: black;
transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
background-color: #121212;
color: #ffffff;
background-color: #121212;
color: #ffffff;
}

header.dark-mode {
background-color: #1f1f1f;
background-color: #1f1f1f;
}

.mode-toggle {
cursor: pointer;
border: none;
background: transparent;
outline: none;
padding: 10px;
cursor: pointer;
border: none;
background: transparent;
outline: none;
padding: 10px;
}

.mode-toggle img {
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

.navbar {
background-color: #f0f0f0;
transition: background-color 0.3s;
background-color: #f0f0f0;
transition: background-color 0.3s;
}

body.dark-mode .navbar {
background-color: #333;
background-color: #333;
}

body.dark-mode .navbar a:hover {
color: #4C51BF;
transform: translateY(-2px);
color: #4c51bf;
transform: translateY(-2px);
}

.blog-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}

.blog-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

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

.blog-image {
width: 100%;
height: 200px;
object-fit: cover;
}

.blog-content {
padding: 1.5rem;
}

.blog-date {
color: #666;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}

.blog-title {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #333;
}

.blog-excerpt {
color: #666;
line-height: 1.6;
margin-bottom: 1rem;
}

.read-more {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
background-color: #2563eb;
color: white;
text-decoration: none;
border-radius: 6px;
transition: background-color 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
min-width: 120px;
}

.read-more:hover {
background-color: #1d4ed8;
}

.read-more:disabled {
background-color: #93c5fd;
cursor: not-allowed;
}

.section-title {
text-align: center;
font-size: 2.5rem;
color: #333;
margin-bottom: 1rem;
}

.section-subtitle {
text-align: center;
color: #666;
max-width: 600px;
margin: 0 auto 2rem;
}

/* Loading Spinner */
.spinner {
display: none;
width: 20px;
height: 20px;
border: 3px solid #ffffff;
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
margin-left: 8px;
}

.loading .spinner {
display: inline-block;
}

.button-text {
margin-right: 8px;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}

/* Modal styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1000;
}

.modal.active {
display: flex;
}

.modal-content {
background-color: white;
padding: 2rem;
border-radius: 12px;
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
}

.modal-close {
float: right;
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
}
56 changes: 56 additions & 0 deletions blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -518,6 +518,7 @@
pointer-events: none;
z-index: 99999999;
}

</style>
</head>

Expand Down Expand Up @@ -710,6 +711,60 @@ <h2>Discover Travel Tips, Stories, and Inspiration</h2>
<option value="">All Tags</option>
</select>
</div>


<h1 class="section-title">Travel Adventures</h1>
<section class="blog-container">

<div class="blog-grid">
<article class="blog-card">
<img src="/img/santorini.jpg" width="auto" alt="Santorini sunset" class="blog-image">
<div class="blog-content">
<div class="blog-date">October 15, 2024</div>
<h2 class="blog-title">Hidden Gems of Santorini</h2>
<p class="blog-excerpt">Beyond the famous blue domes and sunsets, discover the secret spots and local favorites that make Santorini truly special. From hidden beaches to family-run tavernas...</p>
<button class="read-more" data-article="santorini">
<span class="button-text">Read More</span>
<span class="spinner"></span>
</button>
</div>
</article> <br>

<article class="blog-card">
<img src="/img/japanese-temple.jpg" width="auto" alt="Japanese temple in autumn" class="blog-image">
<div class="blog-content">
<div class="blog-date">October 8, 2024</div>
<h2 class="blog-title">Autumn in Kyoto</h2>
<p class="blog-excerpt">Experience the magical transformation of Kyoto as autumn paints the ancient temples and gardens in brilliant shades of red and gold. A guide to the best viewing spots...</p>
<button class="read-more" data-article="kyoto">
<span class="button-text">Read More</span>
<span class="spinner"></span>
</button>
</div>
</article> <br>

<article class="blog-card">
<img src="/img/mountains.jpg" width="auto" Peruvian mountains" class="blog-image">
<div class="blog-content">
<div class="blog-date">October 1, 2024</div>
<h2 class="blog-title">Hiking the Inca Trail</h2>
<p class="blog-excerpt">A day-by-day journey through one of the world's most famous treks. From preparation tips to hidden archaeological sites, here's everything you need to know...</p>
<button class="read-more" data-article="inca-trail">
<span class="button-text">Read More</span>
<span class="spinner"></span>
</button>
</div>
</article>
</div>
</section>

<!-- Modal -->
<div class="modal" id="articleModal">
<div class="modal-content">
<span class="modal-close">&times;</span>
<div id="modalContent"></div>
</div>
</div>

<div class="blog-container">
<!-- Blog posts will be dynamically generated here -->
Expand Down Expand Up @@ -1181,6 +1236,7 @@ <h2>Exclusive Deals and Offers!</h2>

<script src="visi.js"></script>
<script src="script.js"></script>
<script src="blognew.js"></script>

</body>

Expand Down
74 changes: 74 additions & 0 deletions blognew.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
const articleContent = {
'santorini': {
title: 'Hidden Gems of Santorini',
content: `
<h1>Hidden Gems of Santorini</h1>
<p>Discover the secret spots and local favorites that make Santorini truly special...</p>
<h2>1. Secret Beach Spots</h2>
<p>Away from the crowded beaches of Oia, there are hidden coves only locals know about...</p>
<h2>2. Family Tavernas</h2>
<p>Skip the tourist traps and discover authentic Greek cuisine...</p>
`
},
'kyoto': {
title: 'Autumn in Kyoto',
content: `
<h1>Autumn in Kyoto</h1>
<p>Experience the magical transformation of Kyoto in autumn...</p>
<h2>Best Viewing Spots</h2>
<p>From temples to hidden gardens, here are the most spectacular locations...</p>
`
},
'inca-trail': {
title: 'Hiking the Inca Trail',
content: `
<h1>Hiking the Inca Trail</h1>
<p>A comprehensive guide to one of the world's most famous treks...</p>
<h2>Preparation Tips</h2>
<p>Essential information for making the most of your journey...</p>
`
}
};

// Get DOM elements
const modal = document.getElementById('articleModal');
const modalContent = document.getElementById('modalContent');
const closeButton = document.querySelector('.modal-close');

// Add click handlers to all Read More buttons
document.querySelectorAll('.read-more').forEach(button => {
button.addEventListener('click', async function() {
const articleId = this.dataset.article;

// Show loading state
this.classList.add('loading');
this.disabled = true;

try {
// Simulate API call with setTimeout
await new Promise(resolve => setTimeout(resolve, 1500));

// Update modal content
modalContent.innerHTML = articleContent[articleId].content;

// Show modal
modal.classList.add('active');
} finally {
// Remove loading state
this.classList.remove('loading');
this.disabled = false;
}
});
});

// Close modal when clicking the close button
closeButton.addEventListener('click', () => {
modal.classList.remove('active');
});

// Close modal when clicking outside the content
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.classList.remove('active');
}
});
Binary file added img/japanese-temple.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/mountains.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/santorini.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading