diff --git a/Components/Forms/File-Upload-Form-2/index.html b/Components/Forms/File-Upload-Form-2/index.html new file mode 100644 index 00000000..ab39ad79 --- /dev/null +++ b/Components/Forms/File-Upload-Form-2/index.html @@ -0,0 +1,52 @@ + + + + + + + File Upload Form + + + + +
+
+ + + + + + + +

Browse File to upload!

+
+ + +
+ + + \ No newline at end of file diff --git a/Components/Forms/File-Upload-Form-2/style.css b/Components/Forms/File-Upload-Form-2/style.css new file mode 100644 index 00000000..7ebac77d --- /dev/null +++ b/Components/Forms/File-Upload-Form-2/style.css @@ -0,0 +1,76 @@ +body{ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f0f0; + margin: 0; + font-family: Arial, sans-serif; +} + +.container { + height: 300px; + width: 300px; + border-radius: 10px; + box-shadow: 4px 4px 30px rgba(0, 0, 0, .2); + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + padding: 10px; + gap: 5px; + background-color: rgba(0, 110, 255, 0.041); +} + +.header { + flex: 1; + width: 100%; + border: 2px dashed royalblue; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.header svg { + height: 100px; +} + +.header p { + text-align: center; + color: black; +} + +.footer { + background-color: rgba(0, 110, 255, 0.075); + width: 100%; + height: 40px; + padding: 8px; + border-radius: 10px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: flex-end; + color: black; + border: none; +} + +.footer svg { + height: 130%; + fill: royalblue; + background-color: rgba(70, 66, 66, 0.103); + border-radius: 50%; + padding: 2px; + cursor: pointer; + box-shadow: 0 2px 30px rgba(0, 0, 0, 0.205); +} + +.footer p { + flex: 1; + text-align: center; +} + +#file { + display: none; +} \ No newline at end of file diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html index 8b617819..7d59753a 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -310,6 +310,19 @@

File Upload Form

+
+

File Upload Form 2

+
+ + + +
+
+ + + +
+

Game Signup Form