Category: Projects

Responsive Navbar

<!DOCTYPE html>
<html>
<head>
  <style>
body { margin: 0; font-family: Arial; }
.navbar {
  display: flex;
  justify-content: space-between;
  background: #333;
  padding: 10px 20px;
}
.navbar a {
  color: white;
  text-decoration: none;
  padding: 10px;
}
.navbar a:hover {
  background: #575757;
  border-radius: 5px;
}
@media (max-width: 600px) {
  .navbar { flex-direction: column; text-align: center; }
}  </style>
</head>
<body>
  <div class="navbar">
&lt;a href="#"&gt;Home&lt;/a&gt;
&lt;a href="#"&gt;About&lt;/a&gt;
&lt;a href="#"&gt;Services&lt;/a&gt;
&lt;a href="#"&gt;Contact&lt;/a&gt;  </div>
</body>
</html>

Explanation:

flexbox arranges items in a row.
@media query makes it vertical on small screens.

August 21, 2025

Profile Card

<!DOCTYPE html>
<html>
<head>
  <style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f4f4f4;
  font-family: Arial, sans-serif;
}
.card {
  background: white;
  width: 300px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  text-align: center;
  padding: 20px;
}
.card img {
  width: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
}
.card h2 {
  margin: 10px 0;
}
.card p {
  color: gray;
}
.card button {
  background: blue;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  margin-top: 10px;
  cursor: pointer;
  transition: 0.3s;
}
.card button:hover {
  background: darkblue;
}  </style>
</head>
<body>
  <div class="card">
&lt;img src="https://via.placeholder.com/100" alt="Profile"&gt;
&lt;h2&gt;John Doe&lt;/h2&gt;
&lt;p&gt;Web Developer&lt;/p&gt;
&lt;button&gt;Follow&lt;/button&gt;  </div>
</body>
</html>

Explanation:

box-shadow creates a floating card effect.
border-radius rounds corners.
hover effect on button adds interactivity.

August 21, 2025