mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
75 lines
1.6 KiB
HTML
75 lines
1.6 KiB
HTML
<form class="form">
|
|
<span class="title">Subscribe to our newsletter.</span>
|
|
<p class="description">Nostrud amet eu ullamco nisi aute in ad minim nostrud adipisicing velit quis. Duis tempor incididunt dolore.</p>
|
|
<div>
|
|
<input placeholder="Enter your email" type="email" name="email" id="email-address">
|
|
<button type="submit">Subscribe</button>
|
|
</div>
|
|
</form>
|
|
<style>
|
|
/* From Uiverse.io by Yaya12085 - Tags: subscription, form */
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #606c88;
|
|
background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);
|
|
background: linear-gradient(to right, #3f4c6b, #606c88);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
max-width: 350px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 2rem;
|
|
line-height: 2rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.025em;
|
|
color: #fff;
|
|
}
|
|
|
|
.description {
|
|
line-height: 1.5rem;
|
|
font-size: 1rem;
|
|
margin-top: 1rem;
|
|
color: rgb(209 213 219);
|
|
}
|
|
|
|
.form div {
|
|
display: flex;
|
|
max-width: 28rem;
|
|
margin-top: 1rem;
|
|
column-gap: 0.5rem;
|
|
}
|
|
|
|
.form div input {
|
|
outline: none;
|
|
line-height: 1.5rem;
|
|
font-size: 0.875rem;
|
|
color: rgb(255 255 255 );
|
|
padding: 0.5rem 0.875rem;
|
|
background-color: rgb(255 255 255 / 0.05);
|
|
border: 1px solid rgba(253, 253, 253, 0.363);
|
|
border-radius: 0.375rem;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.form div input::placeholder {
|
|
color: rgb(216, 212, 212);
|
|
}
|
|
|
|
.form div input:focus {
|
|
border: 1px solid rgb(99 102 241);
|
|
}
|
|
|
|
.form div button {
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
padding: 0.625rem 0.875rem;
|
|
background-color: rgb(99 102 241);
|
|
border-radius: 0.375rem;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
</style>
|