body { font-family: 'Cairo', sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; color: #222; } .container { display: flex; } .sidebar { width: 250px; background-color: #212121; color: #fff; min-height: 100vh; padding: 20px; position: sticky; top: 0; } .sidebar h2 { font-size: 1.2em; margin-bottom: 15px; } .menu-item { margin-bottom: 10px; cursor: pointer; } .menu-item:hover { color: #00bfa5; } .submenu { display: none; margin-right: 15px; } .menu-item.active + .submenu { display: block; } .main-content { flex: 1; padding: 40px; background-color: #fff; } .article-page { max-width: 800px; margin: 0 auto; } .article-title { font-size: 2.5em; color: #333; margin-bottom: 15px; } .article-body { line-height: 2; font-size: 1.2em; } .article-body h2 { margin-top: 40px; color: #444; } .article-body blockquote { background-color: #f0f0f0; border-right: 4px solid #00bfa5; padding: 15px 25px; margin: 30px 0; font-style: italic; } .article-body img { width: 100%; border-radius: 10px; margin: 20px 0; } .author-box { display: flex; align-items: center; margin-top: 50px; border-top: 1px solid #ddd; padding-top: 20px; } .author-box img { width: 60px; height: 60px; border-radius: 50%; margin-left: 15px; } .author-box .author-name { font-weight: bold; font-size: 1.1em; } .article-footer { margin-top: 40px; } .article-tags a { color: #00bfa5; margin-left: 10px; text-decoration: none; } .article-tags a:hover { text-decoration: underline; } .publish-box { background-color: #f9f9f9; padding: 30px; margin-top: 50px; border-radius: 10px; } .publish-box input, .publish-box textarea { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; } .publish-box button { background-color: #00bfa5; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } .publish-box button:hover { background-color: #009e86; } function toggleMenu(element) { element.classList.toggle("active"); }