align-items: center; gap: 16px; } .theme-toggle { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 8px; border-radius: 50%; transition: all 0.2s; font-size: 1.1rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { color: var(--primary); background-color: var(--border-color); } .nav-launch { color: white; text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 10px 24px; border-radius: 50px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow: 0 4px 12px rgba(1, 117, 194, 0.25); transition: all 0.2s; } .nav-launch:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(1, 117, 194, 0.35); } header { text-align: center; margin-top: 140px; margin-bottom: 80px; position: relative; } h1 { font-family: 'Poppins', sans-serif; font-size: 3.5rem; margin-bottom: 24px; line-height: 1.1; letter-spacing: -1px; background: linear-gradient(135deg, var(--text-main) 30%, var(--primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; animation: fadeInDown 0.8s ease-out forwards; } header p { font-size: 1.35rem; color: var(--text-secondary); max-width: 680px; margin: 0 auto; opacity: 0; animation: fadeInDown 0.8s ease-out 0.2s forwards; font-weight: 500; } .hero-badges { display: flex; justify-content: center; gap: 12px; margin-top: 24px; opacity: 0; animation: fadeInDown 0.8s ease-out 0.3s forwards; flex-wrap: wrap; } .badge { background-color: var(--card-bg); border: 1px solid var(--border-color); padding: 6px 16px; border-radius: 50px; font-size: 0.875rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 32px; margin-bottom: 80px; opacity: 0; animation: fadeIn 1s ease-out 0.4s forwards; } .card { background-color: var(--card-bg); border-radius: 24px; padding: 40px 32px; text-align: center; border: 1px solid var(--border-color); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; box-shadow: var(--shadow-sm); } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--primary); opacity: 0; transition: opacity 0.3s; } .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; } .card:hover::before { opacity: 1; } .icon-wrapper { width: 80px; height: 80px; border-radius: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; font-size: 40px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .card:hover .icon-wrapper { transform: scale(1.1) rotate(5deg); } .card h3 { font-family: 'Poppins', sans-serif; font-size: 1.5rem; margin-bottom: 12px; color: var(--text-main); font-weight: 600; } .card p { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 32px; flex-grow: 1; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.2s; width: 100%; font-family: 'Inter', sans-serif; font-size: 0.95rem; gap: 8px; cursor: pointer; } .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; box-shadow: 0 4px 12px rgba(1, 117, 194, 0.3); border: none; } .btn-primary:hover { box-shadow: 0 6px 16px rgba(1, 117, 194, 0.4); transform: translateY(-1px); } .btn-outline { background-color: transparent; border: 2px solid var(--border-color); color: var(--text-main); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); background-color: rgba(1, 117, 194, 0.05); } .platform-web { --accent: #448AFF; } .platform-web .icon-wrapper { background-color: rgba(68, 138, 255, 0.1); color: var(--accent); } .platform-windows { --accent: #0078D4; } .platform-windows .icon-wrapper { background-color: rgba(0, 120, 212, 0.1); color: var(--accent); } .platform-mac { --accent: #333333; } .platform-mac .icon-wrapper { background-color: rgba(51, 51, 51, 0.1); color: var(--accent); } .platform-linux { --accent: #E95420; } .platform-linux .icon-wrapper { background-color: rgba(233, 84, 32, 0.1); color: var(--accent); } .platform-android { --accent: #3DDC84; } .platform-android .icon-wrapper { background-color: rgba(61, 220, 132, 0.1); color: var(--accent); } .platform-ios { --accent: #000000; } .platform-ios .icon-wrapper { background-color: rgba(0, 0, 0, 0.1); color: var(--accent); } @media (prefers-color-scheme: dark) { .platform-mac { --accent: #ffffff; } .platform-mac .icon-wrapper { background-color: rgba(255, 255, 255, 0.1); color: white; } .platform-ios { --accent: #ffffff; } .platform-ios .icon-wrapper { background-color: rgba(255, 255, 255, 0.1); color: white; } } [data-theme="dark"] .platform-mac { --accent: #ffffff; } [data-theme="dark"] .platform-mac .icon-wrapper { background-color: rgba(255, 255, 255, 0.1); color: white; } [data-theme="dark"] .platform-ios { --accent: #ffffff; } [data-theme="dark"] .platform-ios .icon-wrapper { background-color: rgba(255, 255, 255, 0.1); color: white; } .open-source-badge { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 24px; padding: 60px 40px; text-align: center; max-width: 800px; margin: 0 auto; position: relative; z-index: 1; box-shadow: var(--shadow-sm); opacity: 0; animation: fadeInUp 0.8s ease-out 0.6s forwards; transition: transform 0.3s; } .open-source-badge:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .open-source-badge h2 { font-family: 'Poppins', sans-serif; margin: 24px 0 16px; color: var(--text-main); font-size: 2.25rem; } .github-btn { background-color: #24292e; color: white; border: none; margin-top: 32px; width: auto; min-width: 220px; font-family: 'Poppins', sans-serif; font-size: 1.1rem; padding: 16px 32px; } .github-btn:hover { background-color: #161b22; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); } footer { margin-top: auto; text-align: center; padding: 40px 24px; color: var(--text-secondary); font-size: 0.95rem; border-top: 1px solid var(--border-color); background-color: var(--card-bg); margin-top: 80px; } footer a { color: var(--primary); text-decoration: none; font-weight: 600; } footer a:hover { text-decoration: underline; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 768px) { h1 { font-size: 2.25rem; } header { margin-top: 100px; } .container { padding-bottom: 40px; } .open-source-badge { padding: 40px 24px; } .nav-actions { gap: 12px; } .nav-launch { padding: 8px 16px; font-size: 0.85rem; } }

Simplify Your Documentation

The ultimate open-source tool to generate professional README.md files in minutes. Stop struggling with Markdown.

Free & Open Source Cross Platform No Setup Required

Web Version

Instant access in your browser. No installation required. Perfect for quick edits.

Source Launch Now

100% Open Source

We believe in community-driven development. Star the project, report issues, or contribute code to make Readme Creator better.

Star on GitHub