Pure HTML and CSS contact form with animation

  • Last updated: Nov 3, 2023
  • Views: 275
  • Author: Admin
Pure HTML and CSS contact form with animation

Hello colleagues.

Today we will learn how to create an animated contact form using pure html and css without using javascript code.

 

HTML Code:

<body>
<div class="contact-info">
    <div class="card">
        <i class="icon fas fa-envelope"></i>
        <div class="card-content">
            <h3>Email</h3>
            <span>it-inzhener.com</span>
        </div>
    </div>

    <div class="card">
        <i class="icon fas fa-phone"></i>
        <div class="card-content">
            <h3>Phone</h3>
            <span>+8888888888</span>
        </div>
    </div>

    <div class="card">
        <i class="icon fas fa-map-marker-alt"></i>
        <div class="card-content">
            <h3>Location</h3>
            <span>Ukraine</span>
        </div>
    </div>
</div>
</body>

 

CSS Code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans",sans-serif;
}

body{
    height: 100vh;
    background-size: cover;
    display: flex;
    align-items: center;
    background-color: #D1D5D8;
}

.contact-info{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.card{
    position: relative;
    flex: 1;
    max-width: 250px;
    height: 150px;
    background-color: #444;
    margin: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.icon{
    font-size: 30px;
    color: #3498DB;
    transition: .2s linear;
}

.card:hover .icon{
    transform: scale(4);
    opacity: 0;
}

.card-content h3,
.card-content span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 15px;
    opacity: 0;
}

.card-content h3{
    top: 22px;
    text-transform: uppercase;
    color: #3498DB;
}

.card-content span{
    bottom: 20px;
    color: #D1D5D8;
    font-weight: 500;
}

.card:hover h3{
    opacity: 1;
    top: 45px;
    transition: .3s linear .3s;
}

.card:hover span{
    opacity: 1;
    bottom: 45px;
    transition: .2s linear .2s;
}

 

Thank you all, I hope my article was of some help to you.

SIMILAR ARTICLES

YII2 defaultRoute - How to change default controller in template

YII2 defaultRoute - How to change default controller in template

Pure HTML/CSS search bar

Pure HTML/CSS search bar

HTML/CSS - Expandable Searchbar Animation

HTML/CSS - Expandable Searchbar Animation