<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camp Activities Inquiry</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
<style>
.camp-activities-inquiry light-regular {
font-family: "Shadows Into Light", cursive;
font-weight: 400;
font-style: normal;
}
body {
font-family: "Shadows Into Light", cursive;
font-weight: 400;
font-size: 30px;
font-style: normal;
display: flex;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
transition: background-color 1s ease;
}
section {
padding: 20px;
border-radius: 10px;
display: flex;
margin-top: 100px;
flex-direction: column;
overflow: hidden;
width: 100%;
max-width: 500px;
height: auto;
font-family: "Shadows Into Light", cursive;
font-weight: 400;
font-size: 20px;
}
.card {
transition: height 0.5s ease-in-out;
display: flex;
flex-direction: column;
position: absolute;
margin-bottom: 20px; /* Adjust this value to control the gap between cards */
font-family: "Shadows Into Light", cursive;
font-weight: 400;
font-size: 20px;
}
.card label {
display: block;
margin-bottom: 5px;
font-size: 18px; /* Increase text size */
color: #333; /* Default text color */ /* Adjust this value to control the gap between label and input/select/textarea */
font-family: "Shadows Into Light", cursive;
font-weight: 400;
font-size: 25px;
}
/* Style for select element */
.card select {
width: 100%;
padding: 10px;
font-size: 16px;
margin-bottom: 10px;
border: none; /* Remove default border */
border-radius: 10px; /* Add border-radius for rounded edges */
appearance: none;
-webkit-appearance: none;
background-color: #f9f9f9; /* Background color for the select */
color: #333; /* Text color */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a box shadow */
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Add transitions for smooth animation */
}
/* Style for option elements */
.card select option {
font-size: 16px;
border: none;
}
/* Style for when select is focused */
.card select:focus {
outline: none;
background-color: #fff; /* Change background color when focused */
color: #007bff; /* Change text color when focused */
box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Change box shadow when focused */
}
/* Style for open select */
.card.select-container.open::before {
background-color: rgba(255, 255, 255, 0); /* Semi-transparent white background */
backdrop-filter: blur(5px); /* Add blur effect */
z-index: 1; /* Ensure the blur layer is behind the select */
border-radius: 10px; /* Add border-radius to match the select */
}
/* Style for open select */
.card select.open {
animation: openSelect 0.3s ease; /* Add animation for opening */
}
/* Style for open select */
.card.select-container.open select {
border: none; /* Remove border when select is open */
outline: none; /* Remove outline when select is open */
}
@keyframes openSelect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.card.select-container {
position: relative;
}
.card.select-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(5px);
z-index: 1;
border-radius: 10px;
}
.card button {
margin-right: 10px;
margin-bottom: 10px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 4px;
padding: 8px 12px;
cursor: pointer;
width: 100px;
}
.hidden {
height: 0;
overflow: hidden;
visibility: hidden;
}
textarea {
width: 98%;
min-width: 98%;
min-height: 75px;
resize: vertical;
margin-bottom: 10px;
font-size: 16px;
color: #0099ff;
border: none;
border-bottom: 2px solid #007bff;
padding-bottom: 8px;
outline: none;
caret-color: blue;
background-color: transparent;
}
#activity-card label {
color: #1ff0ff;
}
#allergies-card label {
color: #993000;
}
#additional-info-card label {
color: #00c9fc;
}
#buttons_together {
display: flex;
justify-content: flex-start;
}
.card textarea::placeholder {
font-size: 20px;
color: #999;
}
.card button#back-btn, .card button#back-btn-2 {
background-color: transparent;
color: #ffffff;
border: 2px solid #727272;
border-radius: 5px;
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
}
.card button#back-btn:hover, .card button#back-btn-2:hover {
background-color: #d3d3d3;
color:#000000
}
.card button#back-btn:active, .card button#back-btn-2:hover {
border-color: #999;
}
.background-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0.75;
z-index: -1;
transition: opacity 0.5s ease;
}
.newclass {
font-family: "Shadows Into Light", cursive;
font-weight: 400;
font-size: 30px;
}
</style>
</head>
<body>
<section id="camp-activities-inquiry">
<div class="background-image"></div>
<h1 class="newclass">Camp Activities Inquiry</h1>
<form action="/submit-form" method="POST">
<div id="activity-card" class="card">
<label for="activity-select">Which camp activities are you most looking forward to?</label>
<select id="activity-select" name="activity">
<option value="">--Please choose an option--</option>
<option value="hiking">Hiking</option>
<option value="canoeing">Canoeing</option>
<option value="fishing">Fishing</option>
<option value="crafts">Crafts</option>
<option value="archery">Archery</option>
</select>
<button type="button" id="next-btn">Next</button>
</div>
<div id="allergies-card" class="card hidden">
<label for="food-allergies">Food Allergies (if any)</label>
<textarea id="food-allergies" name="food_allergies" rows="4" cols="50" placeholder="Write here..."></textarea>
<div id="buttons_together">
<button type="button" id="back-btn">Back</button>
<button type="button" id="next-btn-2">Next</button>
</div>
</div>
<div id="additional-info-card" class="card hidden">
<label for="additional-info">Additional things the counselor should know</label>
<textarea id="additional-info" name="additional_info" rows="4" cols="50" placeholder="Write here..."></textarea>
<div id="buttons_together">
<button type="button" id="back-btn-2">Back</button>
<button type="submit">Submit</button>
</div>
</div>
</form>
</section>
<script>
const activityCard = document.getElementById('activity-card');
const allergiesCard = document.getElementById('allergies-card');
const additionalInfoCard = document.getElementById('additional-info-card');
const nextBtn = document.getElementById('next-btn');
const nextBtn2 = document.getElementById('next-btn-2');
const backBtn = document.getElementById('back-btn');
const backBtn2 = document.getElementById('back-btn-2');
const background = document.querySelector('.background-image');
const hone = document.querySelector('.newclass');
const images = [
'https://images.unsplash.com/photo-1551632811-561732d1e306?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1458442310124-dde6edb43d10?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
];
background.style.backgroundImage = `url(${images[0]})`;
document.body.style.backgroundColor = 'lightgreen';
nextBtn.addEventListener('click', () => {
slideUp(activityCard);
slideDown(allergiesCard);
document.body.style.backgroundColor = 'lightblue';
background.style.backgroundImage = `url(${images[1]})`;
background.style.opacity = 0.75;
});
nextBtn2.addEventListener('click', () => {
slideUp(allergiesCard);
slideDown(additionalInfoCard);
document.body.style.backgroundColor = 'black';
background.style.backgroundImage = `url(${images[2]})`;
background.style.opacity = 0.75;
hone.style.color = 'white';
});
backBtn.addEventListener('click', () => {
slideUp(allergiesCard);
slideDown(activityCard);
document.body.style.backgroundColor = 'lightgreen';
background.style.backgroundImage = `url(${images[0]})`;
background.style.opacity = 0.75;
});
backBtn2.addEventListener('click', () => {
slideUp(additionalInfoCard);
slideDown(allergiesCard);
document.body.style.backgroundColor = 'lightblue';
background.style.backgroundImage = `url(${images[1]})`;
background.style.opacity = 0.75;
hone.style.color = 'black';
});
function slideUp(element) {
element.style.height = '0';
element.style.visibility = 'hidden';
}
function slideDown(element) {
element.style.visibility = 'visible';
const height = element.scrollHeight + 'px';
element.style.height = height;
}
document.addEventListener('DOMContentLoaded', function() {
const selects = document.querySelectorAll('.card select');
selects.forEach(select => {
select.addEventListener('click', function() {
this.classList.toggle('open');
});
});
});
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.