I have a page, that has a upload form in it, but now I want to let the page look like something and not just boring
I have my form (upload) then have the following i want to add. wave.png, island.png stars.jpg.
I can not get it to show all of them on the correct place Stars and island must be full page then wave must be at bottom, but I cannot get it there if I use botom, it only shows it just below center of page.
So stars and island full page then wave bottom, then my form on top of that in the center. ( would like to have the waves animated). What is the problem with this code.
My code
.
I have my form (upload) then have the following i want to add. wave.png, island.png stars.jpg.
I can not get it to show all of them on the correct place Stars and island must be full page then wave must be at bottom, but I cannot get it there if I use botom, it only shows it just below center of page.
So stars and island full page then wave bottom, then my form on top of that in the center. ( would like to have the waves animated). What is the problem with this code.
body {
background-image: url(./assets/images/wave.png), url(./assets/images/island.png), url(./assets/images/stars.jpg);
background-position: center , center center, center center;
background-repeat: no-repeat;
background-size: auto, cover, auto 200px;
font-family: Arial, sans-serif;
text-align: center;
color: white;
}
/* Styles the main heading */
h1 {
font-size: 40px;
margin: 50px 0;
}
/* Styles the form container */
form {
margin: 0 auto; /* centers the form */
max-width: 500px;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border: 5px solid #800080; /* dark purple */
}
/* Styles the labels for form inputs */
label {
display: block;
margin: 10px 0;
text-align: left;
font-size: 20px;
color: #333333; /* dark gray */
}
/* Styles the file input */
input[type="file"] {
background-color: #FF69B4; /* pink */
color: white;
font-size: 20px;
padding: 10px 20px;
border: none;
border-radius: 20px;
margin: 30px 0;
}
/* Styles the submit button */
input[type="submit"] {
background-color: #FF69B4; /* pink */
color: white;
font-size: 20px;
padding: 10px 20px;
border: none;
border-radius: 20px;
}
/* Styles the text input */
input[type="text"] {
font-size: 20px;
padding: 10px;
border-radius: 20px;
border: 2px solid #ccc; /* light gray */
width: 100%;
box-sizing: border-box;
outline: none;
}
/* Styles the label for the "description" input */
label[for="description"] {
color: #023020; /* dark green */
}
/* Styles the label for the "value" input */
label[for="value"] {
color: #00FFFF; /* light blue */
}
</style>
My code
.
