Rustic Charm Article - VexaX
Run Code
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>Rustic Charm Article</title> <style> @import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); body { font-family: 'Amatic SC', cursive; background: #faf3e0; margin: 0; padding: 0; } .article-container { max-width: 700px; margin: 50px auto; background: #fff; border-radius: 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; padding: 20px; } .article-header { text-align: center; color: #8c7043; background: #f0e5d8; padding: 20px; border-radius: 10px 10px 0 0; } .article-header h1 { margin: 0; font-size: 2.5em; } .article-content { padding: 20px; line-height: 1.6; color: #8c7043; } .article-content h2 { margin-top: 1.5em; } .icon-bar { position: fixed; top: 50%; right: 0; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; } .icon-bar a { display: block; background: #8c7043; padding: 10px; text-align: center; color: #fff; border-radius: 5px 0 0 5px; transition: background 0.3s; } .icon-bar a:hover { background: #a98d6b; } .highlight { background: #ffeb3b; padding: 3px 5px; border-radius: 3px; } .fade-in { animation: fadeIn 2s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div class="icon-bar"> <a href="#" title="Home"><i class="fas fa-home"></i></a> <a href="#" title="Search"><i class="fas fa-search"></i></a> <a href="#" title="Contact"><i class="fas fa-envelope"></i></a> <a href="#" title="Profile"><i class="fas fa-user"></i></a> </div> <div class="article-container"> <div class="article-header"> <h1>Rustic Charm Article</h1> </div> <div class="article-content"> <h2>Introduction</h2> <p class="fade-in">This article brings a touch of rustic charm, combining warm colors and a hand-drawn font to create a cozy reading experience.</p> <h2>Why Style Matters</h2> <p class="fade-in">A rustic style can evoke feelings of nostalgia and comfort, making your content more relatable and engaging.</p> <h2>Conclusion</h2> <p class="fade-in">We hope you enjoy the Rustic Charm design. Embrace the warmth and simplicity of rustic styling in your own projects.</p> </div> </div> <script> document.addEventListener("DOMContentLoaded", function () { const fadeIns = document.querySelectorAll(".fade-in"); fadeIns.forEach((element, index) => { element.style.animationDelay = `${index * 0.5}s`; }); }); </script> </body> </html>