Un codice di alejandrokundrah

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

2 March 2025

Pulsanti social media in evidenza

HTML

<!DOCTYPE html>
<html lang="en">

<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 codice di alejandrokundrah

Consigliato

Un codice di lebdev

Un codice di Metehan

Pulsanti social media in evidenza

HTML

CSS

JS

Consigliato

Un codice di lebdev

Un codice di Metehan

Pulsanti social media in evidenza

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS