style.css

body {
  font-family: Arial, sans-serif;
  margin: 10px;
  padding: 20px;
  background-color: #f4f4f4;

  background-image: url("data:image/jpeg;base64,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");
  background-color: #cccccc;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

header {
  background-color: #4fa8f1;
  color: white;
  padding: 10px 0;
  text-align: center;
  background-color: #f4f4f4;

  background-image: url("data:image/jpeg;base64,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");
  background-color: #cccccc;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

nav ul {
  list-style: none;
  padding: 0;
  color: #ccc;
}

nav ul li {
  display: inline;
  margin: 10px 20px;
  color: #ffffff;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

nav ul li a.active {
  font-weight: bold;
  border-bottom: 4px solid #fff;
}

main {
  padding: 20px;
}

footer {
  background-color: #484fdb;
  color: white;
  text-align: center;
  padding: 10px ;
  position: fixed;
  bottom: 0;
  width: 95%;
  background-image: url("data:image/jpeg;base64,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");
  background-color: #cccccc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.alumni-list {
  display: flex;
  flex-wrap: wrap;
}

.alumni-card {
  background-color: white;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 15px;
  flex: 1 1 calc(33% - 40px);
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.alumni-card h3 {
  margin-top: 0;
}

@media (max-width: 768px) {
  .alumni-card {
    flex: 1 1 calc(50% - 40px);
  }
}

@media (max-width: 480px) {
  .alumni-card {
    flex: 1 1 100%;
  }
}