Modello di sito Web portfolio: design moderno

989 Primes

Apri nell'Editor Pubblica il Tuo Codice

Modello di sito Web portfolio: design moderno

Consigliato

17 July 2025

Modello HTML della pagina di errore 404

25 July 2025

Casella di registrazione di accesso 3D HTML CSS

14 September 2024

Modulo di Accesso Moderno

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Portfolio — Modern Design 2025</title>
    <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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
        rel="stylesheet"
    />
    <style>
        :root {
            --bg: #0a0a0a;
            --text: #e0e0e0;
            --accent: #00ff99;
            --accent-dark: #00cc77;
            --gray: #2a2a2a;
            --border: rgba(0, 255, 153, 0.2);
            --shadow: 0 0 40px rgba(0, 255, 153, 0.15);
            --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            overflow-x: hidden;
            position: relative;
        }

.bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

.bg-animation::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 80%, rgba(0, 255, 153, 0.08) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(0, 255, 153, 0.06) 0%, transparent 50%);
            animation: pulse 8s infinite alternate;
        }

@keyframes pulse {
            0% { opacity: 0.6; transform: scale(1); }
            100% { opacity: 1; transform: scale(1.05); }
        }

header {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 1.5rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            backdrop-filter: blur(12px);
            background: rgba(10, 10, 10, 0.7);
            border-bottom: 1px solid var(--border);
            transition: var(--transition);
        }

.logo {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
            font-size: 1.5rem;
            color: var(--accent);
            text-decoration: none;
            letter-spacing: -0.5px;
        }

nav ul {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

nav a {
            color: var(--text);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: var(--transition);
        }

nav a::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: var(--transition);
        }

nav a:hover {
            color: var(--accent);
        }

nav a:hover::after {
            width: 100%;
        }

.hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 0 5%;
            position: relative;
        }

.hero h1 {
            font-size: clamp(3rem, 8vw, 6rem);
            font-weight: 700;
            line-height: 0.9;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff, var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.hero .subtitle {
            font-size: 1.5rem;
            color: #aaaaaa;
            margin-bottom: 2rem;
            max-width: 600px;
        }

.cta-button {
            padding: 1rem 2.5rem;
            background: transparent;
            color: var(--accent);
            border: 2px solid var(--accent);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

.cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--accent);
            transition: var(--transition);
            z-index: -1;
        }

.cta-button:hover::before {
            left: 0;
        }

.cta-button:hover {
            color: var(--bg);
            box-shadow: var(--shadow);
        }

.projects {
            padding: 10rem 5%;
            background: var(--gray);
        }

.section-title {
            font-size: 3rem;
            margin-bottom: 4rem;
            text-align: center;
            background: linear-gradient(135deg, #ffffff, var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2.5rem;
            max-width: 1400px;
            margin: 0 auto;
        }

.project-card {
            background: rgba(20, 20, 20, 0.8);
            border-radius: 1.5rem;
            overflow: hidden;
            position: relative;
            transition: var(--transition);
            border: 1px solid var(--border);
            backdrop-filter: blur(10px);
        }

.project-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow);
            border-color: var(--accent);
        }

.project-img {
            height: 250px;
            background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
            position: relative;
            overflow: hidden;
        }

.project-img::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect fill="%23222222" width="400" height="300"/><path fill="%23333333" d="M0 150 Q100 50 200 150 T400 150 L400 300 L0 300 Z"/></svg>') center/cover;
            opacity: 0.6;
        }

.project-info {
            padding: 2rem;
        }

.project-title {
            font-size: 1.5rem;
            margin-bottom: 0.75rem;
            color: var(--accent);
        }

.project-desc {
            color: #bbbbbb;
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }

.project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

.tag {
            background: rgba(0, 255, 153, 0.15);
            color: var(--accent);
            padding: 0.35rem 0.75rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 500;
        }

.contact {
            padding: 8rem 5%;
            text-align: center;
        }

.contact h2 {
            font-size: 3rem;
            margin-bottom: 2rem;
            background: linear-gradient(135deg, #ffffff, var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.contact p {
            max-width: 600px;
            margin: 0 auto 3rem;
            color: #aaaaaa;
            font-size: 1.1rem;
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
        }

.social-links a {
            color: var(--text);
            font-size: 1.5rem;
            transition: var(--transition);
        }

.social-links a:hover {
            color: var(--accent);
            transform: translateY(-5px);
        }

footer {
            padding: 3rem 5%;
            text-align: center;
            border-top: 1px solid var(--border);
            color: #666;
            font-size: 0.9rem;
        }

@media (max-width: 768px) {
            nav ul {
                gap: 1rem;
            }

.hero {
                text-align: center;
                align-items: center;
            }

.projects-grid {
                grid-template-columns: 1fr;
            }
        }

html {
            scroll-behavior: smooth;
        }

.fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

.fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <div class="bg-animation"></div>

<header>
        <a href="#" class="logo">PORTFOLIO</a>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<section class="hero" id="home">
        <h1 class="fade-in">Hello, I am <br />Primes</h1>
        <p class="subtitle fade-in">UI/UX Designer • Frontend Developer • Creator</p>
        <a href="#projects" class="cta-button fade-in">View Works</a>
    </section>

<section class="projects" id="projects">
        <h2 class="section-title fade-in">My Projects</h2>
        <div class="projects-grid">
            <div class="project-card fade-in">
                <div class="project-img"></div>
                <div class="project-info">
                    <h3 class="project-title">Neon Dashboard</h3>
                    <p class="project-desc">A modern analytics dashboard with a neon interface and animated charts.</p>
                    <div class="project-tags">
                        <span class="tag">React</span>
                        <span class="tag">Framer Motion</span>
                        <span class="tag">Chart.js</span>
                    </div>
                </div>
            </div>

<div class="project-card fade-in">
                <div class="project-img"></div>
                <div class="project-info">
                    <h3 class="project-title">AI Landing</h3>
                    <p class="project-desc">A landing page for an AI product with 3D animations and interactive elements.</p>
                    <div class="project-tags">
                        <span class="tag">Three.js</span>
                        <span class="tag">GSAP</span>
                        <span class="tag">WebGL</span>
                    </div>
                </div>
            </div>

<div class="project-card fade-in">
                <div class="project-img"></div>
                <div class="project-info">
                    <h3 class="project-title">Crypto Wallet</h3>
                    <p class="project-desc">A mobile wallet app with biometrics and dark mode.</p>
                    <div class="project-tags">
                        <span class="tag">React Native</span>
                        <span class="tag">TypeScript</span>
                        <span class="tag">Biometrics</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });

Consigliato

Modello HTML della pagina di errore 404

Casella di registrazione di accesso 3D HTML CSS

Modulo di Accesso Moderno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS