Webleb - Extraits de Code

HTML

<!DOCTYPE html>

<head>

<title>3D Portfolio | Creative Developer</title>

<style>

/* Base Styles */

:root {

--primary: #6c5ce7;

--secondary: #a29bfe;

--dark: #2d3436;

--light: #f5f6fa;

--accent: #fd79a8;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Poppins', sans-serif;

background-color: var(--dark);

color: var(--light);

overflow-x: hidden;

perspective: 1000px;

}

/* 3D Container */

.container-3d {

transform-style: preserve-3d;

transition: transform 1s;

min-height: 100vh;

}

/* Navigation */

nav {

position: fixed;

top: 0;

left: 0;

width: 100%;

padding: 2rem;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 100;

mix-blend-mode: difference;

}

.logo {

font-size: 1.8rem;

font-weight: 700;

color: var(--light);

text-decoration: none;

}

.nav-links {

display: flex;

gap: 2rem;

}

.nav-links a {

color: var(--light);

text-decoration: none;

font-weight: 500;

transition: color 0.3s;

position: relative;

}

.nav-links a:hover {

color: var(--accent);

}

.nav-links a::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background-color: var(--accent);

transition: width 0.3s;

}

.nav-links a:hover::after {

width: 100%;

}

/* Hero Section */

.hero {

height: 100vh;

display: flex;

align-items: center;

padding: 0 10%;

position: relative;

overflow: hidden;

}

.hero-content {

max-width: 600px;

transform: translateZ(50px);

}

.hero h1 {

font-size: 4rem;

margin-bottom: 1rem;

background: linear-gradient(45deg, var(--primary), var(--accent));

-webkit-background-clip: text;

background-clip: text;

color: transparent;

line-height: 1.2;

}

.hero p {

font-size: 1.2rem;

margin-bottom: 2rem;

opacity: 0.9;

}

.btn {

display: inline-block;

padding: 12px 30px;

background: linear-gradient(45deg, var(--primary), var(--accent));

color: white;

text-decoration: none;

border-radius: 50px;

font-weight: 600;

transition: transform 0.3s, box-shadow 0.3s;

box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);

}

.btn:hover {

transform: translateY(-5px);

box-shadow: 0 6px 20px rgba(108, 92, 231, 0.6);

}

.hero-image {

position: absolute;

right: 10%;

width: 40%;

max-width: 500px;

transform-style: preserve-3d;

animation: float 6s ease-in-out infinite;

}

@keyframes float {

0%, 100% { transform: translateY(0) rotateY(0deg); }

50% { transform: translateY(-20px) rotateY(5deg); }

}

/* About Section */

.about {

padding: 8rem 10%;

background-color: rgba(0, 0, 0, 0.2);

transform-style: preserve-3d;

}

.section-title {

font-size: 2.5rem;

margin-bottom: 3rem;

color: var(--light);

position: relative;

display: inline-block;

}

.section-title::after {

content: '';

position: absolute;

bottom: -10px;

left: 0;

width: 50%;

height: 4px;

background: linear-gradient(45deg, var(--primary), var(--accent));

border-radius: 2px;

}

.about-content {

display: flex;

gap: 4rem;

align-items: center;

}

.about-text {

flex: 1;

}

.about-text p {

margin-bottom: 1.5rem;

line-height: 1.6;

}

.skills {

display: flex;

flex-wrap: wrap;

gap: 1rem;

margin-top: 2rem;

}

.skill {

background-color: rgba(108, 92, 231, 0.1);

padding: 0.5rem 1.2rem;

border-radius: 50px;

border: 1px solid var(--primary);

font-size: 0.9rem;

}

.about-image {

flex: 1;

position: relative;

transform-style: preserve-3d;

}

.about-image img {

width: 100%;

border-radius: 10px;

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

transform: rotateY(15deg);

transition: transform 0.5s;

}

.about-image:hover img {

transform: rotateY(5deg);

}

/* Projects Section */

.projects {

padding: 8rem 10%;

transform-style: preserve-3d;

}

.projects-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

gap: 2rem;

margin-top: 3rem;

}

.project-card {

background-color: rgba(45, 52, 54, 0.7);

border-radius: 10px;

overflow: hidden;

transform-style: preserve-3d;

transition: transform 0.5s, box-shadow 0.5s;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

position: relative;

}

.project-card::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(45deg, var(--primary), var(--accent));

opacity: 0;

transition: opacity 0.3s;

z-index: 1;

}

.project-card:hover {

transform: translateY(-10px) rotateX(5deg);

box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);

}

.project-card:hover::before {

opacity: 0.2;

}

.project-image {

width: 100%;

height: 200px;

object-fit: cover;

}

.project-info {

padding: 1.5rem;

}

.project-info h3 {

font-size: 1.3rem;

margin-bottom: 0.5rem;

}

.project-info p {

margin-bottom: 1rem;

opacity: 0.8;

font-size: 0.9rem;

}

.project-tags {

display: flex;

flex-wrap: wrap;

gap: 0.5rem;

margin-top: 1rem;

}

.project-tag {

background-color: rgba(108, 92, 231, 0.2);

padding: 0.3rem 0.8rem;

border-radius: 50px;

font-size: 0.7rem;

}

/* Contact Section */

.contact {

padding: 8rem 10%;

background-color: rgba(0, 0, 0, 0.2);

transform-style: preserve-3d;

}

.contact-content {

display: flex;

gap: 4rem;

margin-top: 3rem;

}

.contact-info {

flex: 1;

}

.contact-item {

display: flex;

align-items: center;

margin-bottom: 1.5rem;

}

.contact-icon {

width: 50px;

height: 50px;

background: linear-gradient(45deg, var(--primary), var(--accent));

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

margin-right: 1rem;

font-size: 1.2rem;

}

.contact-form {

flex: 1;

background-color: rgba(45, 52, 54, 0.7);

padding: 2rem;

border-radius: 10px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}

.form-group {

margin-bottom: 1.5rem;

}

.form-group label {

display: block;

margin-bottom: 0.5rem;

font-weight: 500;

}

.form-group input,

.form-group textarea {

width: 100%;

padding: 0.8rem;

background-color: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 5px;

color: var(--light);

font-family: 'Poppins', sans-serif;

}

.form-group textarea {

height: 150px;

resize: vertical;

}

/* Footer */

footer {

text-align: center;

padding: 2rem;

background-color: rgba(0, 0, 0, 0.5);

}

.social-links {

display: flex;

justify-content: center;

gap: 1.5rem;

margin-bottom: 1rem;

}

.social-link {

width: 40px;

height: 40px;

border-radius: 50%;

background-color: rgba(255, 255, 255, 0.1);

display: flex;

justify-content: center;

align-items: center;

transition: background-color 0.3s;

}

.social-link:hover {

background-color: var(--primary);

}

/* 3D Effects */

.parallax-element {

transition: transform 0.5s;

}

/* Responsive Styles */

@media (max-width: 1024px) {

.hero h1 {

font-size: 3rem;

}

.about-content {

flex-direction: column;

}

.contact-content {

flex-direction: column;

}

@media (max-width: 768px) {

.hero {

flex-direction: column;

text-align: center;

padding-top: 100px;

}

.hero-content {

margin-bottom: 3rem;

}

.hero-image {

position: relative;

right: auto;

width: 80%;

}

.nav-links {

display: none;

}

@media (max-width: 480px) {

.hero h1 {

font-size: 2.2rem;

}

.hero p {

font-size: 1rem;

}

.section-title {

font-size: 2rem;

}

</style>

</head>

<body>

<nav>

<a href="#" class="logo">3D Portfolio</a>

<a href="#about">About</a>

<a href="#projects">Projects</a>

<a href="#contact">Contact</a>

</div>

</nav>

<h1>Hi, I'm Alex<br>Creative Developer</h1>

<p>I create immersive 3D web experiences and interactive designs that push the boundaries of modern web development.</p>

</div>

</div>

</section>

<h2 class="section-title">About Me</h2>

<p>I'm a passionate front-end developer specializing in creating 3D web experiences. With over 5 years of experience in the industry, I've worked with startups and established companies to bring their digital visions to life.</p>

<p>My expertise includes JavaScript, Three.js, React, and modern CSS techniques. I love pushing the boundaries of what's possible on the web while maintaining performance and accessibility.</p>

<span class="skill">JavaScript</span>

<span class="skill">Three.js</span>

<span class="skill">React</span>

<span class="skill">WebGL</span>

</div>

</div>

</section>

<h2 class="section-title">My Projects</h2>

<h3>3D Product Configurator</h3>

<p>Interactive 3D product customizer for e-commerce websites with real-time rendering.</p>

<span class="project-tag">Three.js</span>

<span class="project-tag">React</span>

<span class="project-tag">WebGL</span>

</div>

<h3>Virtual Art Gallery</h3>

<p>Immersive VR art gallery experience accessible through web browsers.</p>

<span class="project-tag">A-Frame</span>

<span class="project-tag">WebXR</span>

</div>

<h3>Interactive Data Visualization</h3>

<p>3D data visualization tool for complex datasets with interactive controls.</p>

<span class="project-tag">Three.js</span>

<span class="project-tag">TypeScript</span>

</div>

</section>

<h2 class="section-title">Get In Touch</h2>

</div>

<div>

<h3>Email</h3>

<p>hello@3dportfolio.com</p>

</div>

</div>

<div>

<h3>Phone</h3>

</div>

</div>

<div>

<h3>Location</h3>

<p>San Francisco, CA</p>

</div>

<form>

</div>

<label for="email">Email</label>

</div>

<label for="message">Message</label>

</div>

<button type="submit" class="btn">Send Message</button>

</form>

</div>

</section>

</div>

</footer>

</div>

// 3D Parallax Effect

document.addEventListener('mousemove', (e) => {

const container = document.getElementById('container3D');

const x = e.clientX / window.innerWidth;

const y = e.clientY / window.innerHeight;

// Apply 3D rotation to the entire container

container.style.transform = `rotateY(${(x - 0.5) * 10}deg) rotateX(${(0.5 - y) * 1

Site Web 3D

Recommandé

Jeu de pile ou face

Un code de Mete

Un code par pan4o

HTML

CSS

JS

Recommandé

Jeu de pile ou face

Un code de Mete

Un code par pan4o

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS