Un código de alejandrokundrah

Abrir en el editor Video Publica tu código

Recomendado

2 January 2025

Carrusel de tarjetas JavaScript

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 código de alejandrokundrah

Recomendado

Una página de inicio extraña

Aplicación del tiempo

Carrusel de tarjetas JavaScript

HTML

CSS

JS

Recomendado

Una página de inicio extraña

Aplicación del tiempo

Carrusel de tarjetas JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS