Webleb - UI Elements

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

A Code by Metehan

HTML

CSS

JS

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS