Health And Wellness - 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"> <title>Health & Wellness</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #42e695, #3bb2b8); font-family: 'Georgia', serif; } .article-container { position: relative; width: 90%; max-width: 800px; padding: 2rem; background: rgba(255, 255, 255, 0.2); border-radius: 15px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); animation: bounceIn 1s ease-in-out; } .article-header { display: flex; align-items: center; margin-bottom: 1rem; } .article-header img { border-radius: 50%; width: 60px; height: 60px; margin-right: 1rem; } .article-header h1 { font-size: 2.5rem; color: #fff; } .article-content { color: #fff; } .article-content p { line-height: 1.8; margin: 0.7rem 0; } .article-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; } .article-footer .tags { display: flex; gap: 0.5rem; } .article-footer .tags span { background: rgba(255, 255, 255, 0.3); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.9rem; } .article-footer .social-icons { display: flex; gap: 0.5rem; } .article-footer .social-icons a { color: #fff; font-size: 1.5rem; transition: transform 0.3s; } .article-footer .social-icons a:hover { transform: scale(1.1); } @keyframes bounceIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } </style> </head> <body> <div class="article-container"> <div class="article-header"> <img src="https://via.placeholder.com/60" alt="Author"> <h1>Health & Wellness</h1> </div> <div class="article-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula ligula at nisi scelerisque, at aliquet ligula cursus. Nullam eget urna nec arcu bibendum placerat. Fusce posuere arcu a leo fermentum, in scelerisque libero blandit.</p> <p>Phasellus a nulla et nisl interdum egestas. Vivamus dapibus justo eu augue lacinia, non sollicitudin lorem porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur imperdiet volutpat ante at varius.</p> <p>Aenean euismod auctor risus, a facilisis lacus viverra in. Suspendisse potenti. Cras interdum diam id sapien finibus, in gravida justo varius. Proin et tortor id arcu dictum vehicula.</p> </div> <div class="article-footer"> <div class="tags"> <span>#health</span> <span>#wellness</span> <span>#lifestyle</span> </div> <div class="social-icons"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> </body> </html>