```
CSS (in style.css file):
```
body {
background: linear-gradient(to bottom, #f0f0f0, #ccc);
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery img {
width: 25%;
margin: 10px;
border-radius: 10px;
}
#capture-btn {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.interaction {
margin-top: 20px;
}
#user-input {
padding: 10px;
width: 50%;
border: none;
border-radius: 5px;
}
#submit-btn {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
```
JavaScript (in script.js file):
```
let userInput = document.getElementById("user-input");
let submitBtn = document.getElementById("submit-btn");
submitBtn.addEventListener("click", function() {
let userInputValue = userInput.value;
if (userInputValue === "") {
alert("Please enter your favorite type of photography!");
} else {
alert(`Great, your favorite type of photography is ${userInputValue}!`);
}
});jj
