AltoCode
Calciano
HTML
<!-- ============================================ -->
<!-- FORM -->
<!-- ============================================ -->
<section id="contact-2061">
<div class="cs-container">
<div class="cs-content">
<span class="cs-topper">Modulo di Candidatura</span>
<h2 class="cs-title">Candidati per Lavorare con Noi</h2>
<p class="cs-text">
Orci eu lobortis elementum nibh tellus. Vulputate eu scelerisque felis imperdiet proin
fermentum leo vel. Luctus accumsan tortor posuere ac ut consequat semper.
Et pharetra pharetra massa massa ultricies mi quis.
</p>
</div>
<form class="cs-form" id="cs-form-2061" name="Contact Form" method="post">
<label class="cs-label cs-split">
Nome *
<input class="cs-input" required type="text" id="first-name-2061" name="Nome">
</label>
<label class="cs-label cs-split">
Cognome *
<input class="cs-input" required type="text" id="last-name-2061" name="Cognome">
</label>
<label class="cs-label cs-split">
Email *
<input class="cs-input" required type="email" id="email-2061" name="Email">
</label>
<label class="cs-label cs-split">
Numero Cell. *
<input class="cs-input" required type="tel" id="phone-2061" name="Numero Cell.">
</label>
<label class="cs-label">
Scegli una posizione *
<select class="cs-input cs-select" required id="position-2061" name="Ruolo">
<option value="" disabled selected>Opzioni</option>
<option value="Server">Server</option>
<option value="Chef">Chef</option>
<option value="Manager">Manager</option>
<option value="Altro">Altro</option>
</select>
</label>
<label class="cs-label">
Quando puoi cominciare? *
<input class="cs-input cs-date" required type="date" id="start-date-2061" name="giorno di inizio">
</label>
<label class="cs-label">
Qual è la tua disponibilità per un colloquio?
<input class="cs-input" type="text" id="interview-availability-2061" name="disponibilità colloquio">
</label>
<label class="cs-label cs-split">
Fascia di retribuzione prevista
<input class="cs-input" type="text" id="pay-range-2061" name="retribuzione">
</label>
<label class="cs-label cs-split">
Anni di esperienza
<input class="cs-input" type="text" id="years-experience-2061" name="Anni di esperienza">
</label>
<label class="cs-label cs-message">
Parlaci delle tue esperienze nel ruolo
<textarea class="cs-input cs-textarea" id="previous-experience-2061" name="esperienze ruolo" placeholder="Raccontaci la tua esperienza precedente..."></textarea>
</label>
<div class="cs-wrapper">
<button class="cs-button-solid cs-submit" type="submit">Invia</button>
</div>
</form>
</div>
<img class="cs-graphic cs-graphic-left" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/dental-drop-green.svg" alt="goccia decorativa" width="528" height="830" decoding="async">
<img class="cs-graphic cs-graphic-right" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/dental-drop-blue.svg" alt="goccia decorativa" width="528" height="830" decoding="async">
</section>
CSS
/*-- -------------------------- -->
<--- FORM -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#contact-2061 {
padding: var(--sectionPadding);
overflow: hidden;
position: relative;
}
#contact-2061 .cs-container {
width: 100%;
max-width: 59rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5rem;
}
#contact-2061 .cs-content {
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#contact-2061 .cs-text {
max-width: none;
}
#contact-2061 .cs-form {
width: 100%;
max-width: clamp(29rem, 59vw, 52.875rem);
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.75rem;
}
#contact-2061 .cs-label {
font-size: 1rem;
font-weight: 700;
line-height: 1.5em;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
grid-column: span 12;
gap: 0.5rem;
}
#contact-2061 .cs-input {
font-family: inherit;
font-size: 1rem;
width: 100%;
height: 3.5rem;
box-sizing: border-box;
padding-left: 1.5rem;
background-color: #f7f7f7;
color: var(--bodyTextColor);
border: none;
border-radius: 0.5rem;
}
#contact-2061 .cs-select,
#contact-2061 .cs-date {
border-right: 1.5rem solid rgba(0, 0, 0, 0);
}
#contact-2061 .cs-textarea {
height: 7.5rem;
margin-bottom: 2rem;
padding-top: 1rem;
}
#contact-2061 .cs-wrapper {
width: 100%;
display: flex;
justify-content: center;
grid-column: span 12;
}
#contact-2061 .cs-button-solid {
font-size: 1rem;
font-weight: 700;
line-height: clamp(2.875rem, 5.5vw, 3.5rem);
text-align: center;
text-decoration: none;
min-width: 9.375rem;
margin: 0;
box-sizing: border-box;
padding: 0 2rem;
background-color: var(--primary);
color: #fff;
border-radius: 0.5rem;
display: inline-block;
position: relative;
z-index: 1;
}
#contact-2061 .cs-button-solid:before {
content: "";
width: 0%;
height: 100%;
background: #000;
opacity: 1;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: width 0.3s;
}
#contact-2061 .cs-button-solid:hover:before {
width: 100%;
}
#contact-2061 .cs-submit {
border: none;
}
#contact-2061 .cs-submit:hover {
cursor: pointer;
}
#contact-2061 .cs-graphic {
display: none;
position: absolute;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#contact-2061 .cs-split {
grid-column: span 6;
}
#contact-2061 .cs-graphic {
display: block;
}
#contact-2061 .cs-graphic-left {
width: 33rem;
height: auto;
bottom: -6.6875rem;
left: -24.5625rem;
}
#contact-2061 .cs-graphic-right {
width: 30.1875rem;
height: auto;
top: -2.125rem;
right: -19.75rem;
}
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#contact-2061 .cs-graphic-left {
right: -20.1875rem;
bottom: -3.25rem;
}
#contact-2061 .cs-graphic-right {
right: -18.125rem;
}
}
/* Large Desktop - 1920px */
@media only screen and (min-width: 120rem) {
#contact-2061 .cs-graphic-left {
margin-right: 47.5rem;
right: 50%;
bottom: 0;
left: initial;
}
#contact-2061 .cs-graphic-right {
margin-left: 48.4375rem;
right: initial;
left: 50%;
}
}