diff --git a/Blog/tn.css b/Blog/tn.css new file mode 100644 index 00000000..ac50a907 --- /dev/null +++ b/Blog/tn.css @@ -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; +} diff --git a/Blog/tn.html b/Blog/tn.html new file mode 100644 index 00000000..24bd27af --- /dev/null +++ b/Blog/tn.html @@ -0,0 +1,54 @@ + + + + + + Tamil Nadu Blog + + + +
+

Tamil Nadu Blog

+ +
+
+
+

Welcome to the Tamil Nadu Blog

+

Experience the rich culture and natural beauty of Tamil Nadu.

+
+
+

About Me

+

Hey Everyone, I'm Kiki. I love to explore India and am curious about various places. I love to travel.

+
+
+

Blog Posts

+
+ +
+
+
+

Contact Me

+
+ + + + + + + +
+
+
+ + + + diff --git a/Blog/tn.js b/Blog/tn.js new file mode 100644 index 00000000..eec4c366 --- /dev/null +++ b/Blog/tn.js @@ -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. +

+ 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. +

+ 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. +

+ 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. +

+ 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. +

+ 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. +

+ 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. +

+ 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. +

+ 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); + }); +}); diff --git a/login.css b/login.css index 20af43ab..d4ba34b4 100644 --- a/login.css +++ b/login.css @@ -10,17 +10,18 @@ body { justify-content: center; align-items: center; height: 100vh; - background: linear-gradient(135deg, #f0f0f0, #e5f0ff); + background: linear-gradient(135deg, #a2c8ff, #ffd6d6); } .container { width: 100%; height: 100%; - background: rgb(240, 240, 240); + background: rgb(255, 255, 255); display: flex; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); border-radius: 15px; overflow: hidden; + animation: slideIn 1.5s ease-out; } .left-section, .right-section { @@ -33,21 +34,21 @@ body { flex-direction: column; justify-content: center; align-items: center; - background: rgb(240, 240, 240); /* Light Green */ + background: rgb(255, 255, 255); text-align: center; } .animated-heading { font-size: 50px; - font-weight: 600; + font-weight: 600; margin-bottom: 20px; - color: #000000; /* Yellow */ - animation: fadeIn 2s ease-in-out; + color: #ff6f61; + animation: fadeIn 2s ease-in-out, colorChange 5s infinite alternate; } .description { font-size: 16px; - color: #000000; + color: #333333; margin-bottom: 20px; line-height: 1.5; } @@ -59,11 +60,12 @@ body { width: 100%; max-width: 300px; margin-bottom: 20px; + animation: fadeIn 1.5s ease-in-out; } .input-field { padding: 12px 20px; - border: 2px solid #000000; /* Yellow */ + border: 2px solid #ff6f61; border-radius: 90px; font-size: 16px; outline: none; @@ -71,11 +73,11 @@ body { } .input-field:focus { - border-color: #000000; /* Darker Yellow */ + border-color: #ff4d4d; } .submit-button { - background-color: #000000; /* Yellow */ + background-color: #ff6f61; border: none; color: white; padding: 12px 20px; @@ -85,26 +87,27 @@ body { transition: background-color 0.3s, color 0.3s, transform 0.3s; width: 100%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + animation: buttonBounce 1s ease-in-out infinite; } .submit-button:hover { - background-color: #ffffff; /* Darker Yellow */ + background-color: #ff4d4d; transform: scale(1.05); - color: #000000; - border:#000000; + color: #ffffff; + border: #ff4d4d; border-style: groove; } - .right-section { flex: 7; display: flex; justify-content: center; align-items: center; - background: #f0f0f0; + background: #a2c8ff; position: relative; overflow: hidden; padding: 0; + animation: fadeIn 2s ease-in-out; } .transition-image { @@ -125,10 +128,25 @@ body { 100% { opacity: 1; transform: translateY(0); } } +@keyframes colorChange { + 0% { color: #ff6f61; } + 100% { color: #ff4d4d; } +} + +@keyframes buttonBounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-5px); } +} + +@keyframes slideIn { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(0); } +} + .blinking-cursor { font-weight: 100; font-size: 50px; - color: #000000; /* Yellow */ + color: #ff6f61; animation: blink 1s step-end infinite; } @@ -137,7 +155,7 @@ body { color: transparent; } 50% { - color: #070707; /* Yellow */ + color: #333333; } } @@ -145,53 +163,41 @@ body { position: absolute; top: 20px; left: 20px; - background: rgb(240, 240, 240); + background: #ffffff; border: none; - color:rgb(240, 240, 240); - padding: 0px; + color: #ff6f61; + padding: 10px; font-size: 16px; cursor: pointer; - border-radius: 1%; + border-radius: 50%; transition: background-color 0.3s, color 0.3s, transform 0.3s; } .back-button:hover { transform: scale(1.25); - color: #000000; /* Yellow */ + color: #ffffff; + background: #ff6f61; } + .already-signed-up { font-size: 14px; - color: #000000; + color: #333333; margin-top: 20px; display: flex; flex-direction: row; align-items: center; text-decoration: none; - gap: 5px; /* Add some space between the text and the link */ + gap: 5px; } -a{ + +a { font-size: 14px; - color: #000000; - text-decoration: none; + color: #ff6f61; + text-decoration: none; display: inline-block; + transition: color 0.3s; } -/* .already-signed-up span { - margin-bottom: 10px; - font-weight: 600; -} */ - -/* .already-signed-up a { - color: #FFA500; /* Yellow */ - /* text-decoration: none; - font-weight: 600; - background-color: #E0FFD8; - padding: 10px 20px; - border-radius: 20px; - transition: color 0.3s, background-color 0.3s; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); -} */ - -/* .already-signed-up a:hover { - color: white; - background-color: #FFA500; /* Darker Yellow */ \ No newline at end of file +a:hover { + color: #ff4d4d; +} diff --git a/login.html b/login.html index acbb17b4..2b3c3a26 100644 --- a/login.html +++ b/login.html @@ -53,7 +53,7 @@

Create Account