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

feat: Added new TN blog #1168

Closed
wants to merge 1 commit into from
Closed

feat: Added new TN blog #1168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
112 changes: 112 additions & 0 deletions Blog/tn.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}

header h1 {
margin: 0;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 10px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
padding: 20px;
}

section {
margin-bottom: 20px;
}

section h2 {
color: #333;
}

#home p, #about p {
color: #555;
}

#posts .post {
background-color: #fff;
border: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
}

#posts .post h3 {
margin-top: 0;
}

#posts .post .date {
color: #999;
font-size: 0.9em;
}

#posts .post .post-image {
max-width: 100%;
height: auto;
border-radius: 5px;
margin: 10px 0;
}

#contact-form {
display: flex;
flex-direction: column;
}

#contact-form label {
margin-top: 10px;
}

#contact-form input, #contact-form textarea {
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}

#contact-form button {
margin-top: 10px;
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

#contact-form button:hover {
background-color: #555;
}

footer {
text-align: center;
padding: 10px 0;
background-color: #333;
color: #fff;
position: fixed;
width: 100%;
bottom: 0;
}
54 changes: 54 additions & 0 deletions Blog/tn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tamil Nadu Blog</title>
<link rel="stylesheet" href="tn.css">
</head>
<body>
<header>
<h1>Tamil Nadu Blog</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome to the Tamil Nadu Blog</h2>
<p>Experience the rich culture and natural beauty of Tamil Nadu.</p>
</section>
<section id="about">
<h2>About Me</h2>
<p>Hey Everyone, I'm Kiki. I love to explore India and am curious about various places. I love to travel.</p>
</section>
<section id="blog">
<h2>Blog Posts</h2>
<div id="posts">

</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form id="contact-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<p>&copy; 2024 Tamil Nadu Blog. All rights reserved.</p>
</footer>
<script src="tn.js"></script>
</body>
</html>
81 changes: 81 additions & 0 deletions Blog/tn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
document.addEventListener("DOMContentLoaded", function() {
const blogPosts = [
{
title: "Exploring Chennai",
date: "April 1, 2024",
content: `
Today I arrived in Chennai, the capital city of Tamil Nadu, known for its rich cultural heritage and vibrant arts scene. The city's bustling streets, historic temples, and serene beaches make it a captivating destination.
<br><br>
As I wandered through the city, the iconic Marina Beach stretched along the coast, offering a perfect spot to enjoy the sunrise. The Kapaleeshwarar Temple, with its stunning Dravidian architecture, was a highlight of my visit.
<br><br>
I indulged in traditional South Indian cuisine, savoring dishes like dosas, idlis, and filter coffee. The warmth of the locals and the vibrant atmosphere of the city made me feel at home. I can't wait to explore more of Tamil Nadu's cultural treasures.
`,
imageUrl: "https://www.tamilnadutourism.tn.gov.in/img/pages/large-desktop/marina_beach_20210617083007_882.jpg"
},
{
title: "Discovering Mahabalipuram",
date: "April 2, 2024",
content: `
Today was spent exploring the ancient town of Mahabalipuram, a UNESCO World Heritage Site known for its rock-cut temples and intricate sculptures. The Shore Temple, standing majestically by the sea, was a testament to the region's architectural brilliance.
<br><br>
I visited the Pancha Rathas, a group of monolithic rock temples carved in the shape of chariots. The detailed carvings and the grandeur of these structures left me in awe. The Arjuna's Penance, a massive rock relief, depicted scenes from Hindu mythology and showcased the artistic prowess of the Pallava dynasty.
<br><br>
In the evening, I took a stroll along the sandy shores, with the sound of waves creating a serene ambiance. The sunset painted the sky in hues of orange and pink, adding to the enchanting atmosphere of Mahabalipuram.
`,
imageUrl: "https://upload.wikimedia.org/wikipedia/commons/4/4f/Mahabalipuram_Arjuna_Penance.jpg"
},
{
title: "Journey to Madurai",
date: "April 3, 2024",
content: `
Today's journey took me to Madurai, one of the oldest continuously inhabited cities in the world. The city is home to the magnificent Meenakshi Amman Temple, an architectural marvel with its towering gopurams and intricate sculptures.
<br><br>
I participated in the evening aarti ceremony at the temple, witnessing the devotion of the pilgrims and the vibrant rituals. The temple's colorful murals and sculptures depicted stories from Hindu mythology, offering a glimpse into the region's rich cultural heritage.
<br><br>
Madurai's bustling bazaars and narrow lanes were a sensory delight, with the aroma of jasmine flowers and traditional spices filling the air. The city's rich history and cultural vibrancy made it a memorable experience.
`,
imageUrl: "https://upload.wikimedia.org/wikipedia/commons/6/66/Meenakshi_Temple_Tower.JPG"
},
{
title: "Exploring Thanjavur",
date: "April 4, 2024",
content: `
Today I ventured into Thanjavur, a town renowned for its rich history and cultural significance. The Brihadeeswarar Temple, a UNESCO World Heritage Site, stood as a testament to the architectural brilliance of the Chola dynasty.
<br><br>
The temple's towering vimana and intricate sculptures were awe-inspiring, showcasing the grandeur of South Indian architecture. The frescoes and murals inside the temple narrated tales of gods and goddesses, offering a glimpse into the region's artistic heritage.
<br><br>
Thanjavur is also famous for its classical music and dance forms, particularly Bharatanatyam. I had the opportunity to witness a mesmerizing dance performance, where the dancers' graceful movements and expressive gestures brought the stories to life.
`,
imageUrl: "https://upload.wikimedia.org/wikipedia/commons/1/1a/Brihadisvara_Temple%2C_Thanjavur.jpg"
}
];

const postsContainer = document.getElementById("posts");

blogPosts.forEach(post => {
const postElement = document.createElement("div");
postElement.classList.add("post");

const postTitle = document.createElement("h3");
postTitle.textContent = post.title;

const postDate = document.createElement("p");
postDate.classList.add("date");
postDate.textContent = post.date;

const postImage = document.createElement("img");
postImage.src = post.imageUrl;
postImage.alt = post.title;
postImage.classList.add("post-image");

const postContent = document.createElement("p");
postContent.innerHTML = post.content;

postElement.appendChild(postTitle);
postElement.appendChild(postDate);
postElement.appendChild(postImage);
postElement.appendChild(postContent);

postsContainer.appendChild(postElement);
});
});
Loading
Loading