Pastel Social Media Posts - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://kit.fontawesome.com/f2c67a1c6b.js" crossorigin="anonymous"></script> <title>Pastel Social Media Posts</title> <style> body { font-family: 'Arial', sans-serif; background: #ffecf0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .post-container { display: flex; flex-direction: column; gap: 20px; width: 80%; max-width: 600px; } .post { background: #ffffff; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); padding: 20px; transition: transform 0.3s, box-shadow 0.3s; } .post:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .post-header { display: flex; align-items: center; gap: 15px; } .post-header img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .post-header h2 { margin: 0; font-size: 1.5em; color: #333; } .post-body { margin-top: 15px; font-size: 1em; line-height: 1.6; color: #666; } .post-body p { margin: 0; } .post-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; } .post-footer .icons { display: flex; gap: 10px; } .post-footer .icons i { font-size: 1.2em; cursor: pointer; color: #ff6f61; transition: color 0.3s; } .post-footer .icons i:hover { color: #ffafbd; } .post-footer .time { font-size: 0.8em; color: #bbb; } </style> <script> document.addEventListener("DOMContentLoaded", function() { const likeButtons = document.querySelectorAll(".like-btn"); likeButtons.forEach(button => { button.addEventListener("click", () => { button.classList.toggle("liked"); }); }); }); </script> </head> <body> <div class="post-container"> <div class="post"> <div class="post-header"> <img src="https://via.placeholder.com/50" alt="User"> <h2>User Name</h2> </div> <div class="post-body"> <p>Pastel design post with soft and soothing colors. πΈπ¨</p> </div> <div class="post-footer"> <div class="icons"> <i class="like-btn fas fa-heart"></i> <i class="fas fa-comment"></i> <i class="fas fa-share"></i> </div> <div class="time">35 minutes ago</div> </div> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </body> </html>