mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
117 lines
2.8 KiB
HTML
117 lines
2.8 KiB
HTML
|
|
<div class="form-container">
|
|
<div class="form">
|
|
<span class="heading">Get in touch</span>
|
|
<input placeholder="Name" type="text" class="input">
|
|
<input placeholder="Email" id="mail" type="email" class="input">
|
|
<textarea placeholder="Say Hello" rows="10" cols="30" id="message" name="message" class="textarea"></textarea>
|
|
<div class="button-container">
|
|
<div class="send-button">Send</div>
|
|
<div class="reset-button-container">
|
|
<div id="reset-btn" class="reset-button">Reset</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Smit-Prajapati - Tags: form, contacts form, coolform */
|
|
.orange {
|
|
color: #ff7a01;
|
|
}
|
|
|
|
.form-container {
|
|
max-width: 700px;
|
|
margin: 30px;
|
|
background-color: #001925;
|
|
padding: 30px;
|
|
border-left: 5px solid #ff7a01;
|
|
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
|
|
}
|
|
|
|
.heading {
|
|
display: block;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-container .form .input {
|
|
color: #87a4b6;
|
|
width: 100%;
|
|
background-color: #002733;
|
|
border: none;
|
|
outline: none;
|
|
padding: 10px;
|
|
margin-bottom: 20px;
|
|
font-weight: bold;
|
|
transition: all 0.2s ease-in-out;
|
|
border-left: 1px solid transparent;
|
|
}
|
|
|
|
.form-container .form .input:focus {
|
|
border-left: 5px solid #ff7a01;
|
|
}
|
|
|
|
.form-container .form .textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: none;
|
|
outline: none;
|
|
background-color: #013747;
|
|
color: #ff7a01;
|
|
font-weight: bold;
|
|
resize: none;
|
|
max-height: 150px;
|
|
margin-bottom: 20px;
|
|
border-left: 1px solid transparent;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.form-container .form .textarea:focus {
|
|
border-left: 5px solid #ff7a01;
|
|
}
|
|
|
|
.form-container .form .button-container {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.form-container .form .button-container .send-button {
|
|
flex-basis: 70%;
|
|
background: #ff7a01;
|
|
padding: 10px;
|
|
color: #001925;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border: 1px solid transparent;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.form-container .form .button-container .send-button:hover {
|
|
background: transparent;
|
|
border: 1px solid #ff7a01;
|
|
color: #ff7a01;
|
|
}
|
|
|
|
.form-container .form .button-container .reset-button-container {
|
|
filter: drop-shadow(1px 1px 0px #ff7a01);
|
|
flex-basis: 30%;
|
|
}
|
|
|
|
.form-container .form .button-container .reset-button-container .reset-button {
|
|
position: relative;
|
|
text-align: center;
|
|
padding: 10px;
|
|
color: #ff7a01;
|
|
font-weight: bold;
|
|
background: #001925;
|
|
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.form-container .form .button-container .reset-button-container .reset-button:hover {
|
|
background: #ff7a01;
|
|
color: #001925;
|
|
}
|
|
</style>
|