Webleb - UI Elements

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

CSS

JS

3d website

Recommended