hero section – CSS Snippet

Go back

<section class="hero" id="home">

    <div class="hero-content">
        <p class="hero-tag">HELLO, I'M MEET</p>

        <h1>
            I BUILD.
            <span>I CREATE.</span>
            I EXPERIMENT.
        </h1>

        <p class="hero-description">
            Student, developer and creator exploring technology,
            design and everything that makes the web interesting.
        </p>

        <div class="hero-buttons">
            <a href="#projects" class="hero-primary">View My Work ↗</a>
            <a href="#about" class="hero-secondary">Explore More</a>
        </div>
    </div>

    <div class="hero-visual">
        <div class="visual-ring"></div>
        <div class="visual-circle">
            <span>&lt;/&gt;</span>
        </div>
        <div class="floating-card card-one">HTML</div>
        <div class="floating-card card-two">CSS</div>
        <div class="floating-card card-three">JS</div>
    </div>

</section>