Sunset Bliss - 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>Sunset Bliss</title> <style> body { background-color: #ffe5b4; font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .article-container { background: linear-gradient(to bottom right, #ff7e5f, #feb47b); background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0)); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6), 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7); border-radius: 15px; padding: 20px; max-width: 600px; margin: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; } .article-container:hover { transform: translateY(-10px); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6), 20px 20px 40px rgba(0, 0, 0, 0.2), -20px -20px 40px rgba(255, 255, 255, 0.8); } .article-header { display: flex; align-items: center; margin-bottom: 20px; } .article-header img { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1), -2px -2px 5px rgba(255, 255, 255, 0.7); } .article-title { font-size: 1.5em; color: #333; } .article-content { color: #fff; line-height: 1.6; } .article-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; } .article-footer .icon { font-size: 1.5em; cursor: pointer; transition: color 0.3s ease; } .article-footer .icon:hover { color: #ff7e5f; } .article-footer .read-more { background: #ff7e5f; color: #fff; padding: 10px 20px; border: none; border-radius: 30px; cursor: pointer; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1), -2px -2px 5px rgba(255, 255, 255, 0.7); transition: background 0.3s ease, transform 0.3s ease; } .article-footer .read-more:hover { background: #feb47b; transform: translateY(-5px); } </style> </head> <body> <div class="article-container"> <div class="article-header"> <img src="https://via.placeholder.com/50" alt="Author"> <div class="article-title">Sunset Bliss</div> </div> <div class="article-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac neque nec lorem sodales vehicula. Sed a ex at nisl cursus tincidunt at vel ligula.</p> <p>Fusce quis turpis et lorem tincidunt cursus. Aliquam erat volutpat. Vivamus venenatis erat ut purus tincidunt, non ultricies lorem vehicula.</p> </div> <div class="article-footer"> <div> <span class="icon">👍</span> <span class="icon">💬</span> <span class="icon">🔗</span> </div> <button class="read-more">Read More</button> </div> </div> </body> </html>