DocSF

DocSF

Did You Know?

Advanced visual search system powered by Ajax

Contact form animato

In questi appunti un contact form (potrebbe essere qualsiasi altra cosa) che entra in pagina da destra verso sinistra con un’animazione a comparsa

HTML

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Contact Form</title>
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="maint">Animated Contact Form</h1>
        <div class="section animated bounceInLeft">
            <div class="brandname">
                <h3>WEB DEV TRICK</h3>
                <ul>
                    <li> +91 1234567890</li>
                    <li>contact@webdevtrick.com</li>
                    <li>webdevtrick.com</li>
                </ul>
            </div>
            <div class="contact">
                <h3>Email Me</h3>
                <form action="#">
                    <p>
                        <label for="#">Name</label>
                        <input type="text" name="name">
                    </p>
                    <p>
                        <label for="#">Company</label>
                        <input type="text" name="company">
                    </p>
                    <p>
                        <label for="#">Email Address</label>
                        <input type="email" name="email">
                    </p>
                    <p>
                        <label for="#">Phone Number</label>
                        <input type="text" name="phone">
                    </p>
                    <p class="full">
                        <label for="#">Message</label>
                        <textarea name="message" cols="30" rows="5"></textarea>
                    </p>
                    <p class="full">
                        <button>Submit</button>
                    </p>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

CSS

* {
    box-sizing: border-box;
}
 
body {
    background: #92bde7;
    color: #485e74;
    line-height: 1.6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 1em;
}
 
.container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
}
 
ul {
    list-style: none;
    padding: 0;
}
 
.maint {
    text-align: center;
	color: white;
}
.section {
    box-shadow: 0 0 20px 0 rgba(72, 94, 116, 0.7);
}
 
.section > * {
    padding: 1em;
}
 
.brandname {
    background: #c9e6ff;
}
 
.brandname h3, .brandname ul {
    text-align: center;
    margin: 0 0 1rem 0;
}
 
.contact {
    background: #f9feff;
}
 
.contact form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
 
.contact form label {
    display: block;
}
 
.contact form p {
    margin: 0;
}
 
.contact form .full {
    grid-column: 1 / 3;
}
 
.contact form button, .contact form input, .contact form textarea {
    width: 100%;
    padding: 1em;
    border: 1px solid #c9e6ff;
}
 
.contact form button {
    background: #c9e6ff;
    border: 0;
    text-transform: uppercase;
}
 
.contact form button:hover, .contact form button:focus {
    background: #92bde7;
    color: #fff;
    outline: 0;
    transition: background-color 0.5s ease-out;
}
 
/* LARGE SCREENS */
@media(min-width:700px) {
    .section {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
 
    .section > * {
        padding: 2em;
    }
 
    .compnay-info h3, .brandname ul, .maint {
        text-align: left;
    }
}

Related Post

Fiscalità dei Derivati

Fiscalità e contabilizzazione dei Derivati Valuta Il r...

Le criptovalute, fanno gola agli hacker: Come

Il mondo delle criptovalute apre nuovi interessanti sce...

Creazione siti per agriturismo in Sardegna, a Cagliari, in tutta Italia

Web Marketing per agriturismi: promuoversi co

Una delle attività che preferisco come freelance è pr...

Leave a Comment