Modern Minimalist Paragraph - 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>Modern Minimalist Paragraph</title> <style> @import url('https://fonts.googleapis.com/css2?family=Raleway: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: 'Raleway', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #fafafa; color: #333; margin: 0; } .minimalist-paragraph-container { background: #fff; padding: 20px 30px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.5s ease; cursor: pointer; text-align: center; } .minimalist-paragraph-container:hover { transform: scale(1.05); } .minimalist-paragraph { font-size: 1.2em; font-weight: 400; position: relative; line-height: 1.5; } .minimalist-paragraph strong { font-weight: 700; color: #000; } .minimalist-paragraph .icon { color: #333; margin: 0 5px; animation: blink 1.5s infinite alternate; } .minimalist-paragraph::before, .minimalist-paragraph::after { content: ''; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: linear-gradient(135deg, rgba(0,0,0,0.1) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.1) 25%, transparent 25%), linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.1) 25%, transparent 25%); background-size: 50px 50px; animation: rotate 6s linear infinite; } .minimalist-paragraph::after { filter: blur(10px); } @keyframes blink { from { opacity: 1; } to { opacity: 0.5; } } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="minimalist-paragraph-container"> <div class="minimalist-paragraph"> <strong>✨ Simple Elegance ✨</strong><br> This paragraph embodies minimalist design principles, using clean lines and subtle animations to create an elegant and modern look. Your content will shine with <i class="fas fa-circle icon"></i> clarity and <i class="fas fa-square icon"></i> simplicity. </div> </div> </body> </html>