Styling Lists, Forms and Buttons

This second lesson finishes the look by styling the projects list, the contact form, and the footer, plus adding small interactive touches like hover and focus effects.

• The projects list removes default bullets with list-style: none, and each item instead gets a background color and a colored left border, turning a plain list into card-like blocks.
• The form uses display: flex with flex-direction: column so labels and inputs stack neatly with even spacing between them.
• Inputs and the textarea use :focus, a pseudo-class that applies its style only when the visitor clicks into the field, creating a visible highlight.
• The button uses :hover so its color shifts slightly when the mouse moves over it, and transition makes that shift smooth instead of instant.
• The footer gets simple centered, muted text so it does not compete for attention with the rest of the page.

/* Projects list */

#projects ul {

  list-style: none;

}



#projects li {

  background-color: #f0f4f8;

  padding: 12px 16px;

  margin-bottom: 10px;

  border-left: 4px solid #3b82f6;

  border-radius: 4px;

  font-weight: 500;

}



/* Form styling */

form {

  display: flex;

  flex-direction: column;

  gap: 15px;

}



label {

  font-weight: 600;

  font-size: 14px;

  color: #374151;

}



input, textarea {

  padding: 10px 12px;

  border: 1px solid #d1d5db;

  border-radius: 6px;

  font-size: 14px;

  font-family: inherit;

}



input:focus, textarea:focus {

  outline: none;

  border-color: #3b82f6;

  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);

}



button {

  background-color: #3b82f6;

  color: white;

  border: none;

  padding: 12px;

  border-radius: 6px;

  font-size: 15px;

  cursor: pointer;

  transition: background-color 0.2s ease;

}



button:hover {

  background-color: #2563eb;

}



/* Footer */

footer {

  text-align: center;

  padding: 20px;

  color: #9ca3af;

  font-size: 14px;

}

Explanation:

• gap: 15px inside the flex form adds even spacing between each label and input without needing separate margin rules on every field.
• The box-shadow on input:focus creates a soft blue glow around the field instead of the browser's default focus outline.
• cursor: pointer on the button makes sure the mouse turns into a hand icon, signaling it's clickable, even though buttons usually do this automatically.