Ein Code von alejandrokundrah

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

11 December 2024

<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;
    }
}

Ein Code von alejandrokundrah

Empfohlen

Ein Code von staticcloud996

Ein Code von jrj332790

Metes Code

HTML

CSS

JS

Empfohlen

Ein Code von staticcloud996

Ein Code von jrj332790

Metes Code

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS