Página de destino da agência de marketing digital

Abrir no Editor Publique Seu Código

Recomendado

27 November 2024

Efeito de animação de texto flutuante

5 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="https://i.postimg.cc/XvZmZXGf/favicon.png" type="image">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

</head>
<body id="top">
    <header>
        <div class="container">
            <a href="#" class="logo"><img src="https://i.postimg.cc/x87tV35B/logo.png" alt="Funel logo"></a>

<nav class="navbar " data-navbar>
                    <ul class="navbar-list">
                        <li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
                        <li class="nav-item"><a href="#about" class="nav-link">What we do</a></li>
                        <li class="nav-item"><a href="#features" class="nav-link">Why us?</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Our work</a></li>
                        <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
                    </ul>

<button class="btn btn-primary">Get in touch</button>
                </nav>
            </div>
        </div>
    </header>

<main>
        <article>
            <section class="hero" id="home">
                <div class="container">
                    <div class="hero-content">
                        <h1 class="h1 hero-title">Your full-funnel growth agency</h1>

<p class="hero-text">Capture and retrieve your lists across devices to help you stay organized at work, home, and on the go</p>

<button class="btn btn-primary">Get Started</button>
                    </div>
                    <div class="hero-banner"></div>
                </div>

<p class="section-text">Each time a digital asset is purchased or sold, Sequoir donates a percentage of the fees back into the development of the asset through its charitable foundation</p>

<h3 class="h3 card-title">Paid Search and Social Management</h3>

<p class="card-text">Help your business increase their visibility and reach targeted audiences effectively</p>
                                </div>
                            </li>

<h3 class="h3 card-title">Direct Response Content</h3>

<p class="card-text">Drive immediate engagement and conversions, prompting your audience to act right away</p>
                                </div>
                            </li>

<h3 class="h3 card-title"><abbr title="Conversion Rate Optimization">CRO</abbr> and Retention Optimizations</h3>

<p class="card-text">By optimizing both conversion rates and customer retention, your business will significantly boost their overall revenue</p>
                                </div>
                            </li>
                        </ul>
                    </div>

<div class="about-bottom-content">
                            <h2 class="h2 section-title">We're obsessed with growth</h2>

<p class="section-text">Each time a digital asset is purchased or sold, Sequoir donates a percentage of the fees back</p>

<section class="features" id="features">
                <div class="container">
                    <h2 class="h2 section-title">Our team is made up of all different backgrounds from all over the world</h2>

<p class="section-text">Our team is a vibrant tapestry woven from diverse backgrounds and cultures from all corners of the globe. This rich variety not only enhances our creativity and innovation but also fosters a deeper understanding and collaboration among us</p>

<div class="feature-item-content">
                                <h3 class="h2 item-title">Cover your everyday expenses</h3>

<p class="item-text">Everyday expenses can quickly add up. That's why it's important to have a plan to cover them</p>
                            </div>
                        </li>

<div class="feature-item-content">
                                <h3 class="h2 item-title">We offer low fees that are transparent</h3>

<p class="item-text">We believe in clear and honest pricing. That's why our fees are low and transparent, with no hidden charges or surprises</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>

<p class="cta-text">Focus on what matters most. We're committed to providing you exceptional value</p>

<section class="contact" id="contact">
                <div class="container">
                    <div class="contact-content">
                        <h2 class="h2 contact-title">Let's scale your brand, together</h2>

<div class="input-wrapper">
                            <label for="phone" class="input-label">Phone</label>
                            <input type="tel" name="phone" id="phone" required placeholder="Type Phone Number" class="input-field">
                        </div>

<div class="input-wrapper">
                            <label for="email" class="input-label">Email Address</label>
                            <input type="email" name="email" id="email" required placeholder="Type Email Address" class="input-field">
                        </div>

<button type="submit" class="btn btn-primary">Send Message</button>
                    </form>
                </div>
            </section>
        </article>
    </main>

<p class="footer-text">Follow us on</p>

<div class="footer-link-box">
                    <ul class="footer-link-list">
                        <li><h3 class="h4 link-title">Company</h3></li>
                        <li><a href="#" class="footer-link">About Us</a></li>
                        <li><a href="#" class="footer-link">Features</a></li>
                        <li><a href="#" class="footer-link">Pricing</a></li>
                    </ul>

<ul class="footer-link-list">
                        <li><h3 class="h4 link-title">Products</h3></li>
                        <li><a href="#" class="footer-link">Blog</a></li>
                        <li><a href="#" class="footer-link">Help Center</a></li>
                        <li><a href="#" class="footer-link">Contact</a></li>
                    </ul>

<ul class="footer-link-list">
                        <li><h3 class="h4 link-title">Resources</h3></li>
                        <li><a href="#" class="footer-link">FAQ's</a></li>
                        <li><a href="#" class="footer-link">Testimonial</a></li>
                        <li><a href="#" class="footer-link">Terms & Conditions</a></li>
                    </ul>

<ul class="footer-link-list">
                        <li><h3 class="h4 link-title">Relevant</h3></li>
                        <li><a href="#" class="footer-link">Why</a></li>
                        <li><a href="#" class="footer-link">Products</a></li>
                        <li><a href="#" class="footer-link">Customers</a></li>
                    </ul>
                </div>
            </div>
        </div>

<div class="footer-bottom">
            <p class="copyright">© 2024 ULTRA CODE All rights reserved</p>
        </div>
    </footer>

CSS

:root {
    --maximum-yellow-red: hsl(37, 100%, 68%);
    --royal-blue-dark: hsl(231, 61%, 22%);
    --silver-chalice: hsl(0, 0%, 70%);
    --oxford-blue: hsl(231, 100%, 8%);
    --bittersweet: hsl(2, 100%, 69%);
    --french-rose: hsl(342, 90%, 61%);
    --davys-gray: hsl(180, 3%, 28%);
    --cool-gray: hsl(240, 13%, 62%);
    --platinum: hsl(0, 0%, 92%);
    --white-2: hsl(0, 0%, 98%);
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);
    --rythm: hsl(240, 9%, 53%);

--ff-poppins: "Poppins", sans-sarif;

--fs-1: 32px;
    --fs-2: 26px;
    --fs-3: 22px;
    --fs-4: 18px;
    --fs-5: 15px;
    --fs-6: 14px;

--fw-700: 700;
    --fw-600: 600;
    --fw-500: 500;

--transition: 0.25s ease-in-out;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
a { text-decoration: none; }
a, img, button, span, ion-icon, label, input, textarea { display: block; }

button {
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

textarea, input { 
    font: inherit;
    background: none;
    border: none;
    width: 100%;
}

:is(input, textarea):focus { outline: none; }
:focus { outline-offset: 4px; }
html { font-family: var(--ff-poppins); scroll-behavior: smooth; }
body { background: var(--white); overflow-x: hidden; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--white); }
::-webkit-scrollbar-thumb { background: hsl(0, 0%, 50%); }

.container { padding: 0px 15px; }

.h1, .h2, .h3 { font-weight: var(--fw-600); line-height: 1.3; text-transform: capitalize; }
    .h1 { color: var(--oxford-blue); font-size: var(--fs-1); }
    .h2 { font-size: var(--fs-2); }
    .h3 { color: var(--oxford-blue); font-size: var(--fs-3); }
    .h4 { color: var(--royal-blue-dark); font-size: var(--fs-5); font-weight: var(--fw-600); }

.btn {
    font-size: var(--fs-6);
    text-transform: uppercase;
    font-weight: var(--fw-600);
    padding: 10px 40px;
    border: 1px solid;
    border-radius: 6px;
}

.btn-primary{ background: var(--bittersweet); border-color: var(--bittersweet); color: var(--white); }
    .btn-primary:is(:hover, :focus) { --bittersweet: hsl(2, 90%, 65%); }
    .btn-secondary:is(:hover, :focus) { background: hsla(0, 0%, 100%, .1); }

/*HEADER*/

header { position: relative; padding: 35px 0; z-index: 2; }
    header .container { display: flex; justify-content: space-between; align-items: center; }

.navbar-menu-btn { font-size: 30px; padding: 5px; }

.navbar {
    position: absolute;
    top: calc(100% - 15px);
    left: 15px;
    right: 15px;
    background: var(--maximum-yellow-red);
    max-height: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition);
    transform-origin: top;
    overflow: hidden;
}

.navbar.active { visibility: visible; pointer-events: all; max-height: 280px; }
    .navbar .btn-primary { display: none; }

.navbar-list { padding: 10px; }
.nav-item:not(:last-child) { border-bottom: 1px solid hsla(0, 0%, 100%, .2); }

.nav-link {
    font-size: var(--fs-6);
    color: var(--royal-blue-dark);
    font-weight: var(--fw-600);
    padding: 15px 10px;
    opacity: 0;
    transition: opacity var(--transition);
}

.nav-link:is(:hover, :focus) { background: hsla(0, 0%, 100%, .2);}
    .navbar.active .nav-link { transition-delay: .2s; opacity: 1; }

/*HERO*/

.hero { position: relative; padding: 130px 0px 140px; z-index: 1; }
    .hero .btn-primary { margin-inline: auto; }
.hero-content { text-align: center; }
.hero-title, .hero-text { margin-bottom: 40px; }
    .hero-text { font-size: var(--fs-4); color: var(--oxford-blue); }
.hero-banner { display: none; }

.shape-content {
    position: absolute;
    width: 900px;
    top: -230px;
    right: -300px;
    z-index: -1;
}

/*ABOUT*/

.about {
    position: relative;
    z-index: 1;
    background: url('https://i.postimg.cc/d1MzCdy2/about-bg.png') no-repeat;
    background-position: center;
    background-size: cover;
    padding: 120px 0;
    text-align: center;
}

.about .h2 { color: var(--white); }

.about-top { margin-bottom: 120px; }
    .about-top .section-title { margin-bottom: 20px; }
    .about-top .section-text { color: var(--white); font-size: var(--fs-4); margin-bottom: 60px; }

.about-list { display: grid; grid-template-columns: 1fr; gap: 30px; }
.about-card { background: var(--white); padding: 40px; border-radius: 12px; box-shadow: 0 2px 4px hsla(0, 0%, 0%, .1); }
    .about-card .card-title { margin-bottom: 15px; }
    .about-card .card-text { color: var(--davys-gray); }

.card-icon {
    color: var(--bittersweet);
    font-size: 45px;
    width: max-content;
    margin-inline: auto;
    margin-bottom: 15px;
}

.about-bottom-banner { margin-bottom: 120px; }
    .about-bottom-banner img { width: 100%; height: 100%; }

.about-bottom .section-title { margin-bottom: 20px; }
.about-bottom .section-text { color: var(--white); font-size: var(--fs-4); margin-bottom: 40px; }
.about-bottom .btn-secondary { color: var(--white); margin-inline: auto; }

/*FEATURES*/

.features { padding: 120px 0; text-align: center; }
    .features .section-title { color: var(--royal-blue-dark); margin-bottom: 20px; }
    .features .section-text { color: var(--rythm); font-size: var(--fs-4); margin-bottom: 120px; }

.features-item:first-child { margin-bottom: 100px; }
.features-item-banner { max-width: 350px; margin-inline: auto; margin-bottom: 60px; }
    .features-item-banner img { width: 100%; }
.features-item .item-title { color: var(--royal-blue-dark); margin-bottom: 20px; }
.features-item .item-text { color: var(--rythm); font-size: var(--fs-4); }

/*CTA*/

.cta { padding: 120px 0; }
    .cta input { color: var(--white); padding: 10px 15px; border-bottom: 1px solid; margin-bottom: 30px; }
        .cta input::placeholder { color: inherit; }
    .cta .btn-secondary { color: var(--white); margin-inline: auto; }

.cta-card { 
    background: linear-gradient(to top, var(--bittersweet) 0, var(--french-rose));
    padding: 80px 36px;
    border-radius: 20px;
    text-align: center;
}

.cta-title {
    color: var(--white);
    font-size: var(--fs-1);
    font-weight: var(--fw-600);
    line-height: 1.3;
    margin-bottom: 20px;
}

.cta-text { color: var(--white); font-size: var(--fs-6); margin-bottom: 50px; }

/*CONTACT*/

.contact { margin-bottom: 120px; }
.contact-content { margin-bottom: 50px; }
.contact-title { color: var(--royal-blue-dark); margin-bottom: 60px; text-align: center; font-weight: var(--fw-500) !important; }
.contact-banner img { width: 100%; }
.input-wrapper { margin-bottom: 30px; }
.input-label { color: var(--oxford-blue); font-size: var(--fs-6); font-weight: var(--fw-600); margin-bottom: 10px; }
.input-field { border-bottom: 1px solid var(--platinum); padding: 7px 0; font-size: var(--fs-6); }
    .input-field::placeholder { color: var(--silver-chalice); }
textarea { max-height: 300px; min-height: 100px; height: 100px; resize: vertical; }

/*FOOTER*/

footer { background: var(--white-2); }
    footer .logo { margin-bottom: 30px; }
.footer-top { padding: 80px 0px 50px; }
.footer-brand { margin-bottom: 20px; }
.footer-text { color: var(--rythm); font-size: var(--fs-6); margin-bottom: 20px; }
.social-list { display: flex; justify-content: flex-start; gap: 20px; }
.social-link { color: var(--rythm); font-size: var(--fs-4); margin-bottom: 10px; }
    .social-link:is(:hover, :focus) { color: var(--french-rose); }
.footer-link-list:not(:last-child) { margin-bottom: 30px; }
.footer-link-list .link-title { margin-bottom: 15px; }
.footer-link { color: var(--cool-gray); font-size: var(--fs-6); margin-bottom: 10px; max-width: 150px; }
    .footer-link:is(:hover, :focus) { color: var(--french-rose); }
.footer-bottom { padding: 20px 15px; border-top: 1px solid hsla(0, 0%, 18%, .2); }
.copyright { color: var(--cool-gray); text-align: center; font-size: var(--fs-6); }
    .copyright a { display: inline-block; color: var(--cool-gray); }
        .copyright a:is(:hover, :focus) { color: var(--french-rose); }

/*GO-TOP*/

.go-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 5;
    width: 50px;
    height: 50px;
    background: linear-gradient(-45deg, var(--maximum-yellow-red), var(--french-rose));
    box-shadow: 0 2px 4px hsla(0, 0%, 0%, .25);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    font-size: 22px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition);
}

.go-top.active { opacity: 1; visibility: visible; pointer-events: all; }

/*MEDIA QUERIES*/

@media(min-width: 450px) {
    :root {
        --fs-1: 60px;
    }

.h1, .h2 { font-weight: var(--fw-700); }
    .btn { padding-block: 15px; }

.navbar { left: auto; width: 300px; }

.hero { padding: 140px 0 160px; }
    .shape-content { top: -70px; right: -260px; }

.about-card .card-title { padding-inline: 40px; }
    .about-bottom-banner { max-width: 400px; margin-inline: auto; margin-bottom: 40px; }
    .about-bottom-content { padding-inline: 50px; }

.features .h2 { --fs-2: 32px; }

.cta-title { --fs-1: 42px; }
    .cta-form { display: flex; justify-content: center; align-items: flex-end; gap: 30px; }
    .cta input { margin-bottom: 0; }
    .cta .btn-secondary { min-width: max-content; }

.contact-title { --fs-2: 32px; }
    .contact-banner { max-width: 300px; margin-inline: auto; }
}

@media(min-width: 560px) {
    .container { max-width: 550px; margin-inline: auto; }

.navbar-wrapper { position: relative; }
    .navbar { top: calc(100% + 15px); right: 0; }

.hero-content, .about-bottom-content { text-align: left; }
    .hero .btn-primary, .about-bottom .btn-secondary { margin-inline: 0; }
    .shape-content { top: -156px; right: -152px; }

.footer-brand { margin-bottom: 40px; }
    .footer-link-box { display: grid; grid-template-columns: 1fr 1fr; }
}

@media(min-width: 768px) {
    :root {
        --fs-2: 35px;
        --fs-4: 20px;
    }

.container { max-width: 740px; }

.about-list { grid-template-columns: 1fr 1fr; }

.about-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

.about-card .card-title { padding-inline: 0; }

.contact-title { --fs2: 42px; }
}

@media(min-width: 1024px) {
    .container { max-width: 950px; }

.navbar-menu-btn { display: none; }

.navbar {
        max-height: unset;
        visibility: visible;
        position: static;
        width: auto;
        background: none;
        pointer-events: all;
        overflow: visible;
        display: flex;
    }

.navbar-list {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-right: 20px;
    }

.nav-link { opacity: 1; padding: 0 15px; }
    .navbar .btn-primary { display: block; }

.hero-content { max-width: 550px; }

.hero-banner {
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 500px;
        padding-top: 500px;
        background: url('https://i.postimg.cc/htTB3ywY/hero-banner.png') no-repeat;
        background-size: contain;
    }

.about-top .section-text { max-width: 650px; margin-inline:  auto; }
    .about-list { grid-template-columns: repeat(3, 1fr); }
    .about-bottom { display: flex; justify-content: space-between; align-items: center; }
    .about-bottom-banner { margin-bottom: 0; height: 330px; }
    .about-bottom-content { padding-inline: 0; width: 50%; }

.features :is(.section-title .section-text) { max-width: 650px; margin-inline: auto; }
    .features-item { display: flex; align-items: center; gap: 50px; }
        .features-item:last-child { flex-direction: row-reverse; }
    .features-item-banner { margin-inline: 0; margin-bottom: 0; }
    .feature-item-content { width: 50%; text-align: left; }

.cta-card > * {max-width: 500px; margin-inline: auto; }

.contact .container { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
    .contact-content { max-width: 400px; }
    .contact-title { text-align: left; }
    .contact-form { width: 50%; }

.footer-top .container { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
    .footer-brand, .footer-link-list:not(:last-child) { margin-bottom: 0; }
    .footer-link-box { grid-template-columns: repeat(4, 1fr); gap: 50px; } 
}

@media(min-width: 1200px) {
    :root { --fs-2: 42px; }

.container { max-width: 1150px; }

.hero-banner { right: 100px; }

.about-bottom-banner { height: 400px; }

.features .h2 { --fs-2: 42px; }
    .features :is(.section-text, .section-title) { max-width: 850px; }
}

Página de destino da agência de marketing digital

Recomendado

Site de portfólio completo

Efeito de animação de texto flutuante

Um Código por sofiane.blida09

HTML

CSS

JS

Recomendado

Site de portfólio completo

Efeito de animação de texto flutuante

Um Código por sofiane.blida09

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS