Webleb - Extraits de Code

HTML

<!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>

Metehan

Recommandé

Un code de Metehan

Un code de Metehan

Un code de Metehan

HTML

CSS

JS

Recommandé

Un code de Metehan

Un code de Metehan

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS