Un code par alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Recommandé

2 July 2025

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
</head>

<body>
    <div class="container">
        <span class="big-circle"></span>
        <span class="right-circle"></span>
        <div class="form">
            <div class="contact-info">
                <h3 class="title">Let's get in touch</h3>
                <p class="text">
                    Lorem ipsum dolor sit, amet consecteture adipisicing elit. Veniam repellendus!
                </p>

<div class="info">
                    <div class="information">
                        <i class="fas fa-map-marker-alt"></i>  
                        <p>101 Dakar City Senegal, GD 400011</p>
                    </div>
                    <div class="information">
                        <i class="fas fa-envelope"></i>  
                        <p>sample@codevik.com</p>
                    </div>
                    <div class="information">
                        <i class="fas fa-phone"></i>  
                        <p>0123-456-789</p>
                    </div>
                </div>

<div class="social-media">
                    <p>Connect with us :</p>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>
            </div>

<form>
                    <h3 class="title">Contact us</h3>
                    <div class="input-conatiner">
                        <input type="text" name="name" class="input">
                        <label for="">Username</label>
                        <span>Username</span>
                    </div>

<div class="input-conatiner">
                        <input type="email" name="email" class="input">
                        <label for="">Email</label>
                        <span>Email</span>
                    </div>

<div class="input-conatiner">
                        <input type="tel" name="phone" class="input">
                        <label for="">Phone</label>
                        <span>Phone</span>
                    </div>

<div class="input-conatiner textarea">
                        <input name="message" class="input" />
                        <label for="">Message</label>
                        <span>Message</span>
                    </div>
                    <input type="submit" value="Send" class="btn">
                </form>
            </div>
        </div>

</div>

</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");

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

.container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 2rem;
    background-color: #c8e3eb;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    display: flex;
}

.form {
    width: 100%;
    max-width: 820px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.contact-form {
    background-color: #3571f1;
    position: relative;
}

.circle {
    background: linear-gradient(135deg, transparent 10%, #310346);
    position: absolute;
    border-radius: 50%;
}

.circle.one {
    width: 130px;
    height: 130px;
    top: 130px;
    right: -40px;
}

.circle.two {
    width: 80px;
    height: 80px;
    top: 10px;
    right: 30px;
}

.contact-form:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    background-color: #1a32bc;
    transform: rotate(45deg);
    top: 50px;
    left: -13px;
}

form {
    padding: 2.3rem 2.2rem;
    z-index: 10;
    overflow: hidden;
    position: relative;
}

.title {
    color: #fff;
    font-weight: 500;
    font-size: 1.5rem;
    margin-bottom: 0.7rem;
    line-height: 1;
}

.input-conatiner {
    position: relative;
    margin: 1rem 0;
}

input {
    width: 100%;
    outline: none;
    border: 2px solid #fafafa;
    padding: 0.6rem 1.2rem;
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    border-radius: 5px;
    transition: 0.3s;
    background: none;
}

textarea.input {
    padding: 0.8rem 1.2rem;
    min-height: 150px;
    border-radius: 5px;
    resize: none;
    overflow-y: auto;
    outline: none;
    background: transparent;
    border: 2px solid #fafafa;
    width: 100%;
    color: #fff;
    font-size: 0.95rem;
}

.input-conatiner label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    padding: 0 0.4rem;
    color: #fafafa;
    font-size: 0.9rem;
    font-weight: 400;
    pointer-events: none;
    z-index: 1000;
    transition: 0.5s;
}

.input-conatiner.textarea label {
    top: 1rem;
    transform: translateY(0);
}

.btn {
    padding: 0.6rem 1.3rem;
    background-color: #fff;
    border: 2px solid #fafafa;
    color: #2a1abc;
    font-size: 0.95rem;
    line-height: 1;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    width: 100%;
    margin: 0;
    transition: 0.3s;
}

.btn:hover {
    background-color: transparent;
    color: #fff;
}

.input-conatiner span {
    position: absolute;
    top: 0;
    left: 25px;
    transform: translateY(-50%);
    font-size: 0.8rem;
    padding: 0 0.4rem;
    color: transparent;
    pointer-events: none;
    z-index: 500;
}

.input-conatiner span:before, 
.input-conatiner span:after {
    content: '';
    position: absolute;
    width: 10%;
    opacity: 0;
    transition: 0.3s;
    height: 5px;
    background-color: #3571f1;
    top:50%;
    transform: translateY(-50%);
}

.input-conatiner span:before {
    left: 50%;
}

.input-conatiner span:after {
    right: 50%;
}

.input-conatiner.focus label{
    top: 0;
    transform: translateY(-50%);
    left: 25px;
    font-size: 0.8rem;
}

.input-conatiner.focus span:before,
.input-conatiner.focus span:after {
    width: 50%;
    opacity: 1;
}

.contact-info {
    padding: 2.3rem 2.2rem;
    position: relative;
}

.contact-info .title {
    color: #1d1abc;
}

.text {
    color: #333;
    margin: 1.5rem 0 2rem 0;
}

.information {
    display: flex;
    color: #555;
    margin: 0.7rem 0;
    align-items: center;
    font-size: 0.95rem;
}

.information i {
    color: #1a53bc;
}

.social-media {
    padding: 2rem 0 0 0;
}

.social-media p {
    color: #333;
}

.social-icons {
    display: flex;
    margin-top: 0.5rem;
}

.social-icons a {
    width: 35px;
    height: 35px;
    background: linear-gradient(45deg, #1a5bbc, #141c92);
    border-radius: 5px;
    color: #fff;
    text-align: center;
    line-height: 35px;
    margin-right: 0.5rem;
    transition: 0.3s;
}

.social-icons a:hover {
    transform: scale(1.1);
}

.contact-info:before {
    content: '';
    position: absolute;
    width: 110px;
    height: 100px;
    border: 22px solid #1a4dbc;
    border-radius: 50%;
    bottom: -77px;
    right: 50px;
    opacity: 0.3;
}

.big-circle {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #1c7bd4, #15449b);
    bottom: 50%;
    right: 50%;
    transform: translate(-40%, 38%);
}

.big-circle:after {
    position: absolute;
    width: 360px;
    height: 360px;
    content: '';
    background-color: #fafafa;
    border-radius: 50%;
    top: calc(50% - 180px);
    left: calc(50% - 180px);
}

.right-circle {
    /* content: ''; */
    position: absolute;
    width: 400px;
    height: 400px;
    background-color: #fafafa;
    border-radius: 50%;
    background: linear-gradient(to bottom, #1c7bd4, #15449b);
    bottom: 50%;
    right: 50%;
    transform: translate(150%, 75%);
    opacity: 0.8; 
}

.right-circle:after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: #fafafa;
    border-radius: 50%;
    top: calc(50% - 150px);
    left: calc(50% - 140px);
}

/* // make it responsive */

@media(max-width: 850px) {
    .form{
        grid-template-columns: 1fr;
    }

.contact-info:before {
        bottom: initial;
        top: -75px;
        right: 65px;
        transform: scale(0.95);
    }

.right-circle {
        transform: translate(140%, 43%);
    }

.contact-form:before {
        top: -13px;
        left: initial;
        right: 70px;
    }

.big-circle{
        bottom: 75%;
        transform: scale(0.9) translate(-40%, 30%);
    }

.text {
        margin: 1rem 0 1.5rem 0;
    }

.social-media {
        padding: 1.5rem 0 0 0;
    }
}

@media(max-width:480px) {
    .container{
        padding: 1.5rem;
    }

.contact-info:before {
        display: none;
    }

.right-circle, .big-circle {
        display: none;
    }

form, .contact-info {
        /* font-size: 0.8rem; */
        padding: 1.7rem 1.6rem;
    }

.text, .information, .social-media p {
        font-size: 0.8rem;
    }

.title{
        font-size: 1.15rem;
    }

.social-icons a {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

.input {
        padding: 0.45rem 1.2rem;
    }

.btn {
        padding: 0.45rem 1.2rem;
    }
}

Un code par alejandrokundrah

Recommandé

Un code de Mete

Un code de Mete

Un code par staticdata256

HTML

CSS

JS

Recommandé

Un code de Mete

Un code de Mete

Un code par staticdata256

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS