Webleb - fragmentos de código

HTML

CSS

<!DOCTYPE html>

<head>

<title>Digital Designer Portfolio</title>

<style>

:root {

--purple-indigo: #6366F1;

--soft-purple-top: #E8E3FF;

--soft-purple-bottom: #F0EEFF;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

overflow-x: hidden;

}

/* Circular text animation */

.circular-text-container {

animation: rotateText 20s linear infinite;

}

@keyframes rotateText {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

/* Sparkle rotation animation */

@keyframes rotateSparkle {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.sparkle-rotation {

animation: rotateSparkle 20s linear infinite;

}

/* Waves animation */

@keyframes moveWaves {

0%, 100% { transform: translateX(0); }

50% { transform: translateX(5px); }

}

.waves-movement {

animation: moveWaves 3s ease-in-out infinite;

}

/* Underline draw animation */

@keyframes drawUnderline {

0% { stroke-dasharray: 0 400; }

100% { stroke-dasharray: 400 400; }

}

.underline-draw {

stroke-dasharray: 400;

stroke-dashoffset: 400;

animation: drawUnderline 2s ease-out forwards;

animation-delay: 0.4s;

}

/* Custom scrollbar */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: #f1f1f1;

}

::-webkit-scrollbar-thumb {

background: #888;

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: #555;

}

/* Navbar animation */

@keyframes slideDown {

from { transform: translateY(-100px); opacity: 0; }

to { transform: translateY(0); opacity: 1; }

}

.nav-animation {

animation: slideDown 0.6s ease-out forwards;

}

/* Text animations */

.fade-in-up {

opacity: 0;

transform: translateY(20px);

animation: fadeUp 0.7s ease-out forwards;

}

.fade-in-up-delay-1 {

animation-delay: 0.2s;

}

.fade-in-up-delay-2 {

animation-delay: 0.4s;

}

.fade-in-delay-1 {

opacity: 0;

animation: fadeIn 0.6s ease-out forwards;

animation-delay: 0.6s;

}

.scale-in-delay-1 {

opacity: 0;

transform: scale(0.95);

animation: scaleIn 0.5s ease-out forwards;

animation-delay: 0.8s;

}

.portrait-animation {

opacity: 0;

transform: scale(0.95);

animation: scaleIn 1s ease-out forwards;

animation-delay: 0.3s;

}

.badge-animation {

opacity: 0;

transform: rotate(-20deg) scale(0.8);

animation: badgeIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

animation-delay: 0.8s;

}

@keyframes fadeUp {

to { opacity: 1; transform: translateY(0); }

}

@keyframes fadeIn {

to { opacity: 1; }

}

@keyframes scaleIn {

to { opacity: 1; transform: scale(1); }

}

@keyframes badgeIn {

to { opacity: 1; transform: rotate(-8deg) scale(1); }

}

/* Button hover effects */

.social-btn:hover {

background-color: black !important;

color: white !important;

transform: scale(1.05);

transition: all 0.2s ease;

}

.cta-btn:hover {

background-color: black !important;

color: white !important;

transform: translateY(-2px);

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

transition: all 0.3s ease;

}

</style>

</head>

Digital Designer

</div>

Home

</a>

Services

</a>

About

</a>

Portfolio

</a>

Process

</a>

Pricing

</a>

Contact

</a>

</div>

</button>

</button>

</button>

</div>

</nav>

<path d="M32 8 L34 28 L54 30 L34 32 L32 52 L30 32 L10 30 L30 28 Z"

fill="none"

stroke="black"

stroke-width="2"

transform="rotate(15 32 32)" />

<path d="M48 12 L49 20 L57 21 L49 22 L48 30 L47 22 L39 21 L47 20 Z"

fill="none"

stroke="black"

stroke-width="2"

transform="rotate(-10 48 21)" />

</svg>

</div>

<path d="M0 8 Q25 4, 50 8 T100 8"

fill="none"

stroke="black"

stroke-width="2" />

<path d="M0 20 Q25 16, 50 20 T100 20"

fill="none"

stroke="black"

stroke-width="2" />

<path d="M0 32 Q25 28, 50 32 T100 32"

fill="none"

stroke="black"

stroke-width="2" />

</svg>

</div>

* HELLO!

</span>

I'm Chandler Bing,

<br />

a product designer.

<path class="underline-draw"

d="M0 12 Q100 8, 200 10 T400 12"

fill="none"

stroke="#6366F1"

stroke-width="6"

stroke-linecap="round"/>

</svg>

</span>

</h1>

I'm a freelance product designer based in London. I'm very passionate about the work that I do.

</p>

See My Works

</button>

</div>

<defs>

<path id="circlePath"

d="M 70, 70 m -60, 0 a 60,60 0 1,1 120,0 a 60,60 0 1,1 -120,0"

fill="none"/>

</defs>

AVAILABLE FOR FREELANCE ★

</textPath>

</text>

<path d="M7 17L17 7M17 7H7M17 7V17"

stroke="black"

stroke-width="2"

fill="none"

stroke-linecap="round"/>

</g>

</svg>

</div>

<img

src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"

alt="Chandler Bing - Product Designer Portrait"

class="w-full h-full object-cover object-top"

</div>

</section>

<h2 class="text-4xl font-bold text-center mb-12">Services</h2>

</div>

<h3 class="text-xl font-bold mb-4">UI/UX Design</h3>

<p class="text-gray-600">Creating intuitive and beautiful user interfaces with a focus on user experience.</p>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Product Design</h3>

<p class="text-gray-600">Designing digital products from concept to launch with a user-centered approach.</p>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Design Strategy</h3>

<p class="text-gray-600">Developing design systems and strategies that align with business goals.</p>

</div>

</section>

<h2 class="text-4xl font-bold text-center mb-12">About Me</h2>

<div>

With over 8 years of experience in digital design, I've worked with startups and Fortune 500 companies to create products that users love.

</p>

My approach combines analytical thinking with creative execution, ensuring every design decision serves both the user and the business.

</p>

<span class="bg-white border border-gray-300 rounded-full px-4 py-2 text-sm font-medium">Figma</span>

<span class="bg-white border border-gray-300 rounded-full px-4 py-2 text-sm font-medium">Sketch</span>

<span class="bg-white border border-gray-300 rounded-full px-4 py-2 text-sm font-medium">Adobe Creative Suite</span>

<span class="bg-white border border-gray-300 rounded-full px-4 py-2 text-sm font-medium">Prototyping</span>

</div>

<h3 class="text-xl font-bold mb-6">Experience Timeline</h3>

<h4 class="font-bold">Senior Product Designer</h4>

<p class="text-gray-600">TechCorp Inc. • 2020-Present</p>

</div>

<h4 class="font-bold">UI/UX Designer</h4>

<p class="text-gray-600">DesignStudio • 2017-2020</p>

</div>

<h4 class="font-bold">Junior Designer</h4>

<p class="text-gray-600">Creative Agency • 2015-2017</p>

</div>

</section>

<h2 class="text-4xl font-bold text-center mb-12">Featured Work</h2>

<h3 class="text-xl font-bold mb-2">E-commerce App Redesign</h3>

<p class="text-gray-600 mb-4">Complete redesign of a shopping app with 40% increase in conversions.</p>

<span class="text-sm font-medium text-purple-600">UI/UX Design</span>

</div>

<h3 class="text-xl font-bold mb-2">Health & Fitness Platform</h3>

<p class="text-gray-600 mb-4">Mobile-first design for a fitness tracking platform with 1M+ users.</p>

<span class="text-sm font-medium text-purple-600">Product Design</span>

</div>

<h3 class="text-xl font-bold mb-2">Banking Dashboard</h3>

<p class="text-gray-600 mb-4">Complex financial dashboard with data visualization for a banking client.</p>

<span class="text-sm font-medium text-purple-600">UI Design</span>

</div>

</section>

<h2 class="text-4xl font-bold text-center mb-12">My Design Process</h2>

</div>

<h3 class="font-bold mb-2">Discover</h3>

<p class="text-gray-600 text-sm">Research & requirements gathering</p>

</div>

</div>

<h3 class="font-bold mb-2">Define</h3>

<p class="text-gray-600 text-sm">Problem definition & strategy</p>

</div>

</div>

<h3 class="font-bold mb-2">Design</h3>

<p class="text-gray-600 text-sm">Wireframing & prototyping</p>

</div>

</div>

<h3 class="font-bold mb-2">Deliver</h3>

<p class="text-gray-600 text-sm">Testing & implementation</p>

</div>

</section>

<h2 class="text-4xl font-bold text-center mb-12">Pricing Plans</h2>

<h3 class="text-xl font-bold mb-4">Starter</h3>

<div class="text-3xl font-bold mb-6">$2,500<span class="text-lg text-gray-500 font-normal">/project</span></div>

<span>UI/UX Design</span>

</li>

<span>3 Design Revisions</span>

</li>

<span>Basic Prototype</span>

</li>

</ul>

Get Started

</button>

</div>

Most Popular

</div>

<h3 class="text-xl font-bold mb-4">Professional</h3>

<div class="text-3xl font-bold mb-6">$5,000<span class="text-lg text-gray-500 font-normal">/project</span></div>

<span>Full Product Design</span>

</li>

<span>Unlimited Revisions</span>

</li>

<span>Interactive Prototype</span>

</li>

<span>Design System</span>

</li>

</ul>

Get Started

</button>

</div>

<h3 class="text-xl font-bold mb-4">Enterprise</h3>

<div class="text-3xl font-bold mb-6">Custom<span class="text-lg text-gray-500 font-normal">/quote</span></div>

<span>End-to-End Product Design</span>

</li>

<span>Team Collaboration</span>

</li>

<span>Ongoing Support</span>

</li>

<span>User Testing & Research</span>

</li>

</ul>

Contact Sales

</button>

</div>

</section>

<h2 class="text-4xl font-bold text-center mb-12">Get In Touch</h2>

<div>

<h3 class="text-2xl font-bold mb-6">Let's work together</h3>

Have a project in mind? I'd love to hear about it. Send me a message and let's discuss how we can create something amazing together.

</p>

<span>hello@digitaldesigner.com</span>

</div>

</div>

<span>London, United Kingdom</span>

</div>

</div>

<label for="email" class="block text-sm font-medium mb-2">Email</label>

</div>

<label for="message" class="block text-sm font-medium mb-2">Message</label>

</div>

Send Message

</button>

</form>

</div>

</section>

<div class="text-lg font-bold mb-4 md:mb-0">Digital Designer</div>

<a href="#" class="text-gray-600 hover:text-black">Privacy Policy</a>

<a href="#" class="text-gray-600 hover:text-black">Terms of Service</a>

</div>

</footer>

// Initialize Lucide icons

lucide.createIcons();

// Smooth scrolling for anchor links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function(e) {

e.preventDefault();

const targetId = this.getAttribute('href');

if (targetId === '#') return;

const targetElement = document.querySelector(targetId);

if (targetElement) {

// Update active nav link

document.querySelectorAll('nav a').forEach(link => {

link.classList.remove('text-purple-600');

link.classList.add('text-black', 'hover:text-purple-600');

});

this.classList.remove('text-black', 'hover:text-purple-600');

this.classList.add('text-purple-600');

// Scroll to element

window.scrollTo({

top: targetElement.offsetTop - 80,

behavior: 'smooth'

});

}

});

// Form submission handler

document.getElementById('contact-form').addEventListener('submit', function(e) {

e.preventDefault();

// Get form values

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const message = document.getElementById('message').value;

// Simple validation

if (!name || !email || !message) {

alert('Please fill in all fields');

return;

}

// In a real app, you would send this data to a server

console.log('Form submitted:', { name, email, message });

// Show success message

alert('Thank you for your message! I will get back to you soon.');

// Reset form

this.reset();

});

// Navbar background on scroll

window.addEventListener('scroll', function() {

const nav = document.getElementById('main-nav');

if (window.scrollY > 50) {

nav.classList.add('shadow-md');

} else {

nav.classList.remove('shadow-md');

}

});

// Animation on scroll for sections

function checkScroll() {

const sections = document.querySelectorAll('section');

sections.forEach(section => {

const sectionTop = section.getBoundingClientRect().top;

const windowHeight = window.innerHeight;

if (sectionTop < windowHeight - 100) {

section.style.opacity = '1';

section.style.transform = 'translateY(0)';

}

});

}

// Initial check on load

document.addEventListener('DOMContentLoaded', checkScroll);

// Check on scroll

window.addEventListener('scroll', checkScroll);

// Set initial styles for animation

document.querySelectorAll('section').forEach((section, index) => {

if (index > 0) { // Skip hero section

section.style.opacity = '0';

section.style.transform = 'translateY(20px)';

section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';

}

});

</script>

</body>

</html>

Validating your code, please wait...

HTML

CSS

<!DOCTYPE html>

<head>

<title>Digital Designer Portfolio</title>

<style>

:root {

--purple-indigo: #6366F1;

--soft-purple-top: #E8E3FF;

--soft-purple-bottom: #F0EEFF;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

overflow-x: hidden;

}

/* Circular text animation */

.circular-text-container {

animation: rotateText 20s linear infinite;

}

@keyframes rotateText {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

/* Sparkle rotation animation */

@keyframes rotateSparkle {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.sparkle-rotation {

animation: rotateSparkle 20s linear infinite;

}

/* Waves animation */

@keyframes moveWaves {

0%, 100% { transform: translateX(0); }

50% { transform: translateX(5px); }

}

.waves-movement {

animation: moveWaves 3s ease-in-out infinite;

}

/* Underline draw animation */

@keyframes drawUnderline {

0% { stroke-dasharray: 0 400; }

100% { stroke-dasharray: 400 400; }

}

.underline-draw {

stroke-dasharray: 400;

stroke-dashoffset: 400;

animation: drawUnderline 2s ease-out forwards;

animation-delay: 0.4s;

}

/* Custom scrollbar */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: #f1f1f1;

}

::-webkit-scrollbar-thumb {

background: #888;

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: #555;

}

/* Navbar animation */

@keyframes slideDown {

from { transform: translateY(-100px); opacity: 0; }

to { transform: translateY(0); opacity: 1; }

}

.nav-animation {

animation: slideDown 0.6s ease-out forwards;

}

/* Text animations */

.fade-in-up {

opacity: 0;

transform: translateY(20px);

animation: fadeUp 0.7s ease-out forwards;

}

.fade-in-up-delay-1 {

animation-delay: 0.2s;

}

.fade-in-up-delay-2 {

animation-delay: 0.4s;

}

.fade-in-delay-1 {

opacity: 0;

animation: fadeIn 0.6s ease-out forwards;

animation-delay: 0.6s;

}

.scale-in-delay-1 {

opacity: 0;

transform: scale(0.95);

animation: scaleIn 0.5s ease-out forwards;

animation-delay: 0.8s;

}

.portrait-animation {

opacity: 0;

transform: scale(0.95);

animation: scaleIn 1s ease-out forwards;

animation-delay: 0.3s;

}

.badge-animation {

opacity: 0;

transform: rotate(-20deg) scale(0.8);

animation: badgeIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

animation-delay: 0.8s;

}

@keyframes fadeUp {

to { opacity: 1; transform: translateY(0); }

}

@keyframes fadeIn {

to { opacity: 1; }

}

@keyframes scaleIn {

to { opacity: 1; transform: scale(1); }

}

@keyframes badgeIn {

to { opacity: 1; transform: rotate(-8deg) scale(1); }

}

/* Button hover effects */

.social-btn:hover {

background-color: black !important;

color: white !important;

transform: scale(1.05);

transition: all 0.2s ease;

}

.cta-btn:hover {

background-color: black !important;

color: white !important;

transform: translateY(-2px);

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

transition: all 0.3s ease;

}

</style>

</head>

Digital Designer

</div>

Home

</a>

Services

</a>

About

</a>

Portfolio

</a>

Process

</a>

Pricing

</a>

Contact

</a>

</div>

</button>

</button>

</button>

</div>

</nav>

<path d="M32 8 L34 28 L54 30 L34 32 L32 52 L30 32 L10 30 L30 28 Z"

fill="none"

stroke="black"

stroke-width="2"

transform="rotate(15 32 32)" />

<path d="M48 12 L49 20 L57 21 L49 22 L48 30 L47 22 L39 21 L47 20 Z"

fill="none"

stroke="black"

stroke-width="2"

transform="rotate(-10 48 21)" />

</svg>

</div>

<path d="M0 8 Q25 4, 50 8 T100 8"

fill="none"

stroke="black"

stroke-width="2" />

<path d="M0 20 Q25 16, 50 20 T100 20"

fill="none"

stroke="black"

stroke-width="2" />

<path d="M0 32 Q25 28, 50 32 T100 32"

fill="none"

stroke="black"

stroke-width="2" />

</svg>

</div>

* HELLO!

</span>

I'm Chandler Bing,

<br />

a product designer.

<path class="underline-draw"

d="M0 12 Q100 8, 200 10 T400 12"

fill="none"

stroke="#6366F1"

stroke-width="6"

stroke-linecap="round"/>

</svg>

</span>

</h1>

I'm a freelance product designer based in London. I'm very passionate about the work that I do.

</p>

See My Works

</button>

</div>

<defs>

<path id="circlePath"

d="M 70, 70 m -60, 0 a 60,60 0 1,1 120,0 a 60,60 0 1,1 -120,0"

fill="none"/>

</defs>

AVAILABLE FOR FREELANCE ★

</textPath>

</text>

<path d="M7 17L17 7M17 7H7M17 7V17"

stroke="black"

stroke-width="2"

fill="none"

stroke-linecap="round"/>

</g>

</svg>

</div>

<img

src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"

alt="Chandler Bing - Product Designer Portrait"

class="w-full h-full object-cover object-top"

</div>

</section>

<h2 class="text-4xl font-bold text-center mb-12">Services</h2>

</div>

<h3 class="text-xl font-bold mb-4">UI/UX Design</h3>

<p class="text-gray-600">Creating intuitive and beautiful user interfaces with a focus on user experience.</p>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Product Design</h3>

<p class="text-gray-600">Designing digital products from concept to launch with a user-centered approach.</p>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Design Strategy</h3>

<p class="text-gray-600">Developing design systems and strategies that align with business goals.</p>

</div>

</section>

<h2 class="text-4xl font-bold text-center mb-12">About Me</h2>

<div>

With over 8 years of experience in digital design, I've worked with startups and Fortune 500 companies to create products that users love.

</p>

My approach combines analytical thinking with creative execution, ensuring every design decision serves both the user and the business.

</p>

<span class="bg-white border border-gray-300 rounded-full px-4 py-2 text-sm font-medium">Figma</span>

<span class="bg-white border border-gray-300 rounded-full px-4 py-2 text-sm font-medium">Sketch</span>

<span class="bg-white border border-gray-300 rounded-full px-4 py-2 text-sm font-medium">Adobe Creative Suite</span>

<span class="bg-white border border-gray-300 rounded-full px-4 py-2 text-sm font-medium">Prototyping</span>

</div>

<h3 class="text-xl font-bold mb-6">Experience Timeline</h3>

<h4 class="font-bold">Senior Product Designer</h4>

<p class="text-gray-600">TechCorp Inc. • 2020-Present</p>

</div>

<h4 class="font-bold">UI/UX Designer</h4>

<p class="text-gray-600">DesignStudio • 2017-2020</p>

</div>

<h4 class="font-bold">Junior Designer</h4>

<p class="text-gray-600">Creative Agency • 2015-2017</p>

</div>

</section>

<h2 class="text-4xl font-bold text-center mb-12">Featured Work</h2>

<h3 class="text-xl font-bold mb-2">E-commerce App Redesign</h3>

<p class="text-gray-600 mb-4">Complete redesign of a shopping app with 40% increase in conversions.</p>

<span class="text-sm font-medium text-purple-600">UI/UX Design</span>

</div>

<h3 class="text-xl font-bold mb-2">Health & Fitness Platform</h3>

<p class="text-gray-600 mb-4">Mobile-first design for a fitness tracking platform with 1M+ users.</p>

<span class="text-sm font-medium text-purple-600">Product Design</span>

</div>

<h3 class="text-xl font-bold mb-2">Banking Dashboard</h3>

<p class="text-gray-600 mb-4">Complex financial dashboard with data visualization for a banking client.</p>

<span class="text-sm font-medium text-purple-600">UI Design</span>

</div>

</section>

<h2 class="text-4xl font-bold text-center mb-12">My Design Process</h2>

</div>

<h3 class="font-bold mb-2">Discover</h3>

<p class="text-gray-600 text-sm">Research & requirements gathering</p>

</div>

</div>

<h3 class="font-bold mb-2">Define</h3>

<p class="text-gray-600 text-sm">Problem definition & strategy</p>

</div>

</div>

<h3 class="font-bold mb-2">Design</h3>

<p class="text-gray-600 text-sm">Wireframing & prototyping</p>

</div>

</div>

<h3 class="font-bold mb-2">Deliver</h3>

<p class="text-gray-600 text-sm">Testing & implementation</p>

</div>

</section>

<h2 class="text-4xl font-bold text-center mb-12">Pricing Plans</h2>

<h3 class="text-xl font-bold mb-4">Starter</h3>

<div class="text-3xl font-bold mb-6">$2,500<span class="text-lg text-gray-500 font-normal">/project</span></div>

<span>UI/UX Design</span>

</li>

<span>3 Design Revisions</span>

</li>

<span>Basic Prototype</span>

</li>

</ul>

Get Started

</button>

</div>