Free
Features
Julian Sterling Features
A features block extracted from the Julian Sterling template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.
0
7
julian-sterling.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Julian Sterling Features | Tailwind CSS UI Block</title>
<meta name="description" content="A features block extracted from the Julian Sterling template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.">
<meta name="keywords" content="Julian Sterling, Tailwind CSS template, HTML website template, digital product architect, designer portfolio, UX portfolio, responsive creative design">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="Julian Sterling | Tailwind CSS Digital Product Architect Portfolio Template">
<meta property="og:description" content="An elegant Tailwind CSS portfolio template for digital product architects, UX designers, and human-centric interface specialists.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Julian Sterling template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Julian Sterling | Tailwind CSS Digital Product Architect Portfolio Template">
<meta name="twitter:description" content="An elegant Tailwind CSS portfolio template for digital product architects, UX designers, and human-centric interface specialists.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Julian Sterling template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
<style>
html {
overflow-x: hidden;
}
body {
font-family: 'Inter', sans-serif;
background-color: #ffffff;
color: #1a1a1a;
overflow-x: hidden;
}
.serif {
font-family: 'Playfair Display', serif;
}
.oval-container {
border-radius: 50% / 40%;
overflow: hidden;
}
.bg-decorative-waves {
background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.1,18.3c0,0-2.7-1.1-4.8-1.1s-4.8,1.1-4.8,1.1s-2.7-1.1-4.8-1.1S2,18.3,2,18.3' fill='none' stroke='%23eeeeee' stroke-width='1'/%3E%3C/svg%3E");
background-repeat: repeat;
}
</style>
</head>
<body class="antialiased overflow-x-hidden">
<!-- block:start features -->
<section id="skills-languages" class="py-16 md:py-32 px-4 sm:px-6 md:px-12 border-t border-neutral-100 overflow-hidden">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20">
<!-- Skills -->
<div class="space-y-8 md:space-y-12">
<h3 class="text-[10px] uppercase tracking-[0.3em] font-bold text-neutral-300">Skills</h3>
<div class="grid grid-cols-2 gap-y-6 sm:gap-y-8 gap-x-3 sm:gap-x-4">
<div class="space-y-2 min-w-0">
<h4 class="serif text-base sm:text-xl">Product Strategy</h4>
<p class="text-[10px] uppercase tracking-widest text-neutral-400">Advanced</p>
</div>
<div class="space-y-2 min-w-0">
<h4 class="serif text-base sm:text-xl">Visual Design</h4>
<p class="text-[10px] uppercase tracking-widest text-neutral-400">Expert</p>
</div>
<div class="space-y-2 min-w-0">
<h4 class="serif text-base sm:text-xl">User Research</h4>
<p class="text-[10px] uppercase tracking-widest text-neutral-400">Intermediate</p>
</div>
<div class="space-y-2 min-w-0">
<h4 class="serif text-base sm:text-xl">Systems Thinking</h4>
<p class="text-[10px] uppercase tracking-widest text-neutral-400">Advanced</p>
</div>
</div>
</div>
<!-- Languages -->
<div class="space-y-8 md:space-y-12">
<h3 class="text-[10px] uppercase tracking-[0.3em] font-bold text-neutral-300">Languages</h3>
<div class="space-y-6 md:space-y-8">
<div class="flex justify-between items-end border-b border-neutral-100 pb-2 gap-4">
<h4 class="serif text-base sm:text-xl">Swedish</h4>
<p class="text-[10px] uppercase tracking-widest text-neutral-400 shrink-0">Native</p>
</div>
<div class="flex justify-between items-end border-b border-neutral-100 pb-2 gap-4">
<h4 class="serif text-base sm:text-xl">English</h4>
<p class="text-[10px] uppercase tracking-widest text-neutral-400 shrink-0">Fluent</p>
</div>
<div class="flex justify-between items-end border-b border-neutral-100 pb-2 gap-4">
<h4 class="serif text-base sm:text-xl">German</h4>
<p class="text-[10px] uppercase tracking-widest text-neutral-400 shrink-0">Professional</p>
</div>
</div>
</div>
</div>
</section>
<!-- block:end features -->
<script>
(function () {
var button = document.getElementById('mobile-menu-button');
var navigation = document.getElementById('mobile-navigation');
var iconOpen = document.getElementById('mobile-menu-icon-open');
var iconClose = document.getElementById('mobile-menu-icon-close');
if (!button || !navigation) return;
function setMenu(open) {
navigation.hidden = !open;
button.setAttribute('aria-expanded', String(open));
button.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
if (iconOpen && iconClose) {
iconOpen.classList.toggle('hidden', open);
iconClose.classList.toggle('hidden', !open);
}
}
button.addEventListener('click', function (event) {
event.stopPropagation();
setMenu(navigation.hidden);
});
navigation.querySelectorAll('.mobile-nav-link').forEach(function (link) {
link.addEventListener('click', function () {
setMenu(false);
});
});
document.addEventListener('click', function (event) {
if (!navigation.hidden && !navigation.contains(event.target) && !button.contains(event.target)) {
setMenu(false);
}
});
})();
</script>
</body>
</html>
From this template
Free
Portfolio
Julian Sterling
Unlimited access to all products
Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access