/* ========================== Abdul Rafay – Portfolio Style Clean, Modern & Minimalist ========================== */ /* ----- GOOGLE FONT (add link in of HTML) ----- ------------------------------------------------------ */ /* ----- NAVIGATION BAR ----- */ nav { background-color: #0f172a; /* dark slate to match header */ text-align: center; padding: 1em 0; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline; margin: 0 18px; } nav a { color: #f1f5f9; font-weight: 500; text-decoration: none; transition: color 0.3s; } nav a:hover { color: #38bdf8; /* cyan hover accent */ text-decoration: none; } /* ===== BODY ===== */ body { font-family: 'Poppins', Arial, sans-serif; background: #f8fafc; /* soft neutral background */ margin: 0; padding: 0; color: #1f2937; /* rich gray text */ line-height: 1.6; } /* ===== HEADER (TOP BANNER) ===== */ header { background: linear-gradient(120deg, #0f172a, #1e3a8a, #0f172a); background-size: 400% 400%; animation: gradientShift 10s ease infinite; color: #f1f5f9; text-align: center; padding: 5em 1em; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } header h1 { font-size: 2.8em; font-weight: 600; margin: 0; letter-spacing: 1px; } header h2 { font-size: 1.2em; color: #cbd5e1; font-weight: 400; margin-top: 0.5em; } /* ===== MAIN SECTIONS ===== */ section { max-width: 900px; margin: 3em auto; padding: 2.5em; background: #ffffff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03); transition: transform 0.3s; } section:hover { transform: translateY(-3px); } h2 { color: #1e3a8a; border-left: 5px solid #38bdf8; padding-left: 10px; font-weight: 600; margin-bottom: 1em; } h3 { color: #1e3a8a; font-weight: 500; margin-top: 1.5em; } p, li { color: #374151; font-size: 1em; line-height: 1.7; } ul { padding-left: 25px; } /* ===== LINKS ===== */ a { color: #1e3a8a; text-decoration: none; transition: color 0.3s; } a:hover { color: #0ea5e9; text-decoration: underline; } /* ===== FOOTER ===== */ footer { text-align: center; padding: 1.5em 0; background-color: #0f172a; color: #e2e8f0; margin-top: 3em; font-size: 0.9em; } /* ===== PROJECT CARDS (Optional Section) ===== */ .project-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .project-card { background-color: #fff; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); width: 280px; padding: 1.5em; transition: transform 0.3s, box-shadow 0.3s; } .project-card:hover { transform: translateY(-6px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); } .project-card h3 { color: #1e3a8a; margin-bottom: 0.5em; } .project-card p { font-size: 0.9em; color: #444; } /* ===== BUTTON STYLE ===== */ .btn { display: inline-block; background-color: #1e3a8a; color: #fff; padding: 0.6em 1.2em; border-radius: 6px; text-decoration: none; font-size: 0.9em; margin-top: 0.8em; transition: background 0.3s; } .btn:hover { background-color: #0ea5e9; }