+ Hello! I am Harikrishnan R, a passionate designer sharing my works during various events and i am familiar with tools like Adobe photoshop,Figma and Canva. Welcome to my world!
++ Connect with me on + + + +
+${post.content.slice(0, 100)}...
+ + + + `; + + designContainer.appendChild(postDiv); + } + currentPostIndex += postsPerLoad; + + // Toggle button visibility + document.getElementById("load-more").style.display = + currentPostIndex < designPosts.length ? "block" : "none"; + document.getElementById("load-less").style.display = + currentPostIndex > postsPerLoad ? "block" : "none"; +} + + +function loadLessPosts() { + const designContainer = document.getElementById("design-container"); + designContainer.innerHTML = ""; + currentPostIndex = 0; + loadPosts(); + + // Toggle button visibility + document.getElementById("load-less").style.display = "none"; +} + +// Event listeners for buttons +document.getElementById("load-more").addEventListener("click", loadPosts); +document.getElementById("load-less").addEventListener("click", loadLessPosts); + +// Event delegation for Read More / Read Less buttons +document.getElementById("design-container").addEventListener("click", (event) => { + if (event.target.classList.contains("read-more-btn")) { + const postContent = event.target.previousElementSibling; + const fullContent = event.target.nextElementSibling; + const readLessBtn = fullContent.nextElementSibling; + + postContent.style.display = "none"; + fullContent.style.display = "block"; + event.target.style.display = "none"; + readLessBtn.style.display = "inline-block"; + } + + if (event.target.classList.contains("read-less-btn")) { + const fullContent = event.target.previousElementSibling; + const postContent = fullContent.previousElementSibling; + const readMoreBtn = postContent.nextElementSibling; + + fullContent.style.display = "none"; + postContent.style.display = "block"; + readMoreBtn.style.display = "inline-block"; + event.target.style.display = "none"; + } +}); + +// Load initial posts +loadPosts(); diff --git a/style1.css b/style1.css new file mode 100644 index 0000000..f5e4440 --- /dev/null +++ b/style1.css @@ -0,0 +1,219 @@ + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + line-height: 1.6; + background-color: #fff; + color: #000 +} + +header { + background-color: #000; + padding: 1rem 0; + text-align: center; + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +header h1 { + margin: 0; + font-size: 2rem; + color:white; } +nav ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + justify-content: center; + gap: 1.5rem; + flex-wrap: wrap; +} + +nav ul li { + margin: 0; +} + +nav ul li a { + color: #fff; + text-decoration: none; + font-weight: bold; + padding: 0.5rem 1rem; + transition: color 0.3s ease, background 0.3s ease; +} + +nav ul li a:hover { + color: #ffa500; + background: #444; + border-radius: 5px; +} + +main { + padding: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +section { + margin-bottom: 2rem; +} + +.design-section #design-container { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + margin-bottom: 1rem; +} + +.design-post { + border: 1px solid #ddd; + padding: 1rem; + border-radius: 5px; + background: #fff; + width: 300px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.design-post:hover { + transform: translateY(-5px); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); +} + +.design-post h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; + color: #333; +} + +.design-post img { + width: 100%; + height: auto; + border-radius: 5px; + margin-bottom: 0.5rem; +} + +.design-post p { + font-size: 1rem; + margin-bottom: 1rem; +} + +footer { + background: #333; + color: #fff; + text-align: center; + padding: 1rem 0; + position: relative; + bottom: 0; + width: 100%; +} + +footer p { + margin: 0; + font-size: 0.9rem; +} + +/* Form Styles */ +form { + max-width: 400px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 0.5rem; + background: #fff; + padding: 1rem; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +form input, form textarea { + padding: 0.5rem; + border: 1px solid #ddd; + border-radius: 5px; + font-size: 1rem; +} + +form textarea { + resize: vertical; + min-height: 100px; +} + +form button { + background: #333; + color: #fff; + padding: 0.3rem 0.8rem; + border: none; + border-radius: 5px; + font-size: 0.9rem; + cursor: pointer; + transition: background 0.3s ease; +} + +form button:hover { + background: #555; +} + +/* Buttons */ +button { + background: #333; + color: #fff; + padding: 0.2rem 0.6rem; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 0.8rem; + margin: 0.5rem auto; + display: block; + transition: background 0.3s ease, transform 0.3s ease; +} + +button:hover { + background: #555; + transform: scale(1.05); +} + +button:active { + transform: scale(0.95); +} +.about-me-container { + display: flex; + align-items: center; + gap: 1.5rem; + margin-top: 1rem; +} + +.about-photo img { + width: 150px; + height: 150px; + border-radius: 50%; + object-fit: cover; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.about-text { + flex: 1; +} + +.instagram-link { + color: #000; + font-weight: bold; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 0.5rem; + transition: color 0.3s ease; +} + +.instagram-link i { + font-size: 1.2rem; +} +/* Responsive Design */ +@media (max-width: 768px) { + nav ul { + flex-direction: row; /* Ensure items stay in a row */ + gap: 1rem; /* Reduce gap for smaller screens */ + } +}