Portfolio Web Css Part

 

Portfolio Website CSS Code

All Styling Parts with Copy Buttons

1️⃣ General Page Styling

Yeh base style hai jisse poori website ka layout aur look fix hota hai.

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body {
  font-family: 'Poppins', sans-serif;
  background: #f8f9fc;
  color: #333;
  margin: 0;
  padding: 0;
}
.container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
}
.btn {
  background: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}
.btn:hover {
  background: #0056b3;
}
  

2️⃣ Navbar Styling

Yeh code navigation menu aur logo ko design karta hai.

.navbar {
  background: #fff;
  padding: 15px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 999;
}
.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  color: #007bff;
  font-size: 24px;
  font-weight: bold;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}
.nav-links li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}
.nav-links li a:hover {
  color: #007bff;
}
  

3️⃣ Header / Hero Styling

Is section me background aur heading ka design diya gaya hai.

.hero {
  background: linear-gradient(45deg, #007bff, #00c6ff);
  color: white;
  text-align: center;
  padding: 80px 20px;
}
.hero h1 span {
  color: #ffeb3b;
}
.hero .btn {
  margin-top: 15px;
  display: inline-block;
}
  

4️⃣ About Section Styling

Yeh About Me section ke layout aur text formatting ke liye hai.

.about {
  background: #fff;
  padding: 60px 20px;
  text-align: center;
}
.about h2 {
  color: #007bff;
}
.about ul {
  list-style: none;
  padding: 0;
}
.about ul li {
  display: inline-block;
  margin: 10px;
  background: #007bff;
  color: #fff;
  padding: 5px 15px;
  border-radius: 20px;
}
  

5️⃣ Services Section Styling

Yahan services cards ka design aur grid layout set kiya gaya hai.

.services {
  padding: 60px 20px;
  text-align: center;
}
.service-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.service-boxes .box {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.service-boxes .box:hover {
  transform: translateY(-5px);
  transition: 0.3s;
}
  

6️⃣ Projects Section Styling

Projects cards aur grid ke liye styling.

.projects {
  padding: 60px 20px;
  text-align: center;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.project-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.project-card img {
  width: 100%;
  display: block;
}
.project-card h3 {
  padding: 10px;
}
  

7️⃣ Contact Section Styling

Contact form aur inputs ke liye styling.

.contact {
  padding: 60px 20px;
  text-align: center;
}
.contact form {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin: auto;
}
.contact input, .contact textarea {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-family: inherit;
}
.contact button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.contact button:hover {
  background: #0056b3;
}
  

8️⃣ Footer Styling

Website ke neeche ka footer design.

footer {
  background: #007bff;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}