Úlohy

Znenie

  1. Otvoríme si projekt s názvom „cv_8“
  2. Upravíme HTML dokument podľa predlohy
  3. Upravíme CSS dokument podľa predlohy

Predloha

HTML

<section id="contact">
    <div class="title-container">
        <h1>Contact</h1>
    </div>

    <div class="content-container">
        <form>
            <div class="input-holder">
                <input type="text" name="name" id="contact-name" placeholder=" " required>
                <label for="contact-name" class="input-placeholder">Name</label>
                <div class="underline"></div>
            </div>

            <div class="input-holder">
                <input type="email" name="email" id="contact-email" placeholder=" " required>
                <label for="contact-email" class="input-placeholder">E-mail</label>
                <div class="underline"></div>
            </div>

            <div class="input-holder">
                <input type="tel" name="phone" id="contact-phone" placeholder=" ">
                <label for="contact-phone" class="input-placeholder">Phone</label>
                <div class="underline"></div>
            </div>

            <div class="input-holder">
                <textarea name="message" id="contact-message" placeholder=" " required></textarea>
                <label for="contact-message" class="input-placeholder">Message</label>
                <div class="underline"></div>
            </div>

            <div class="input-holder">
                <input type="submit" name="submit" value="Send" class="read-more">
            </div>
        </form>
    </div>
</section>

CSS

/* form */
.input-holder{
    position: relative;
    padding-top: 30px;
    margin: 15px 0;
}

input[type="submit"]{
    border: none;
}

input:not([type="submit"]),
textarea{
    background: #ebebeb;
    border: none;
    border-bottom: 2px solid #d1d1d1;
    padding: 15px 20px;
    width: 100%;
    display: block;
    font-family: sans-serif;
    font-size: 16px;
}

textarea{
    height: 150px;
}

.input-holder .underline{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #13c1b1;
    transition: .3s;
}

.input-placeholder{
    position: absolute;
    top: 44px;
    left: 20px;
    color: #a1a1a1;
    transition: .3s;
}

input:not([type="submit"]):not(:placeholder-shown) + .input-placeholder,
input:not([type="submit"]):hover + .input-placeholder,
input:not([type="submit"]):focus + .input-placeholder,
textarea:not(:placeholder-shown) + .input-placeholder,
textarea:hover + .input-placeholder,
textarea:focus + .input-placeholder{
    top: 0;
    left: 0;
}

input:not([type="submit"]):not(:placeholder-shown) ~ .underline,
input:not([type="submit"]):hover ~ .underline,
input:not([type="submit"]):focus ~ .underline,
textarea:hover ~ .underline,
textarea:focus ~ .underline{
    width: 100%;
}

/* contact */
#contact .content-container{
    max-width: 500px;
    margin: 0 auto;
}

Vizualizácia