Content Link Component(콘텐츠 링크 구성 요소)로 건너뛰기
파스텔 색상의 레트로/빈티지 '콘텐츠로 건너뛰기' 링크 구성 요소로, 비즈니스/기업 웹사이트용으로 설계되었으며 접근성 및 다크 모드 지원을 제공합니다.
HTML 코드
<!DOCTYPE html>
<html lang="en" class="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skip to Content Component</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
pastelPink: '#FFD1DC',
pastelBlue: '#AEC6CF',
pastelGreen: '#77DD77',
pastelYellow: '#FDFD96',
pastelPurple: '#B39EB5',
darkBg: '#1A202C',
darkText: '#E2E8F0',
darkAccent: '#6B46C1'
},
fontFamily: {
'retro': ['"Press Start 2P"', 'cursive'],
'monospace': ['"Roboto Mono"', 'monospace'],
'sans': ['"Arial"', 'sans-serif'] // Fallback or main body font
},
boxShadow: {
'retro-neon': '0 0 10px rgba(255, 209, 220, 0.7), 0 0 20px rgba(255, 209, 220, 0.5), 0 0 30px rgba(255, 209, 220, 0.3)',
'retro-inset': 'inset 0 0 5px rgba(0,0,0,0.2)'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto+Mono:wght@400;700&display=swap');
/* Base styles for the component */
.skip-link {
@apply absolute -top-96 left-1/2 -translate-x-1/2 p-3 font-semibold text-center text-lg rounded-lg border-2 border-transparent transition-all duration-300 ease-in-out z-50;
/* Default to a subtle look */
@apply bg-pastelGreen text-gray-800 border-pastelYellow dark:bg-darkAccent dark:text-darkText dark:border-darkText;
/* Retro specific styling */
font-family: 'Roboto Mono', monospace; /* More readable for the actual link */
}
.skip-link:focus {
@apply top-4 sm:top-6 md:top-8 shadow-lg outline-none;
/* Retro focus effects */
@apply bg-pastelRed transform scale-105 border-pastelPink shadow-retro-neon;
@apply dark:bg-darkAccent dark:border-pastelPink dark:shadow-retro-neon;
}
/* Simulate page content for demonstration */
#main-content {
@apply p-8 mt-16 sm:mt-24 md:mt-32 mx-auto max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl;
@apply text-gray-800 dark:text-gray-200;
font-family: 'sans', sans-serif;
}
.dark-mode-toggle {
@apply fixed bottom-4 right-4 p-3 rounded-full bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 shadow-lg cursor-pointer z-50;
}
</style>
</head>
<body class="bg-pastelBlue dark:bg-darkBg min-h-screen flex flex-col items-center justify-center transition-colors duration-300">
<a href="#main-content" class="skip-link" role="link" aria-label="Skip to main content of the page">
SKIP TO CONTENT
</a>
<header class="w-full bg-pastelPink dark:bg-darkBg text-pastelYellow dark:text-darkText py-4 shadow-md z-10 relative">
<div class="container mx-auto px-4 flex justify-between items-center">
<h1 class="text-2xl sm:text-3xl font-retro text-pastelGreen dark:text-pastelYellow tracking-wide">
CORPORATE <span class="hidden sm:inline">SYSTEM</span>
</h1>
<nav class="hidden md:flex space-x-6">
<ul class="flex space-x-6">
<li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">Products</a></li>
<li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">Services</a></li>
<li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">About Us</a></li>
<li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main id="main-content">
<h2 class="text-3xl sm:text-4xl font-retro mb-6 text-center text-pastelGreen dark:text-pastelYellow tracking-wide">Welcome to Our Corporate Portal</h2>
<p class="mb-4 text-justify leading-relaxed text-gray-700 dark:text-gray-300">
Embrace the future with our cutting-edge solutions designed to elevate your business. We combine innovative technology with timeless principles to deliver unparalleled results. Our commitment to excellence ensures that every project, big or small, is handled with precision and care.
</p>
<p class="mb-4 text-justify leading-relaxed text-gray-700 dark:text-gray-300">
Explore our diverse range of services, from digital transformation strategies to bespoke software development. Our team of seasoned professionals is dedicated to empowering your success in an ever-evolving market. We believe in building lasting relationships through trust and exceptional service.
</p>
<img src="https://picsum.photos/seed/corporate1/800/400" alt="Modern office space with collaborative work" class="w-full h-auto rounded-lg mb-6 shadow-md object-cover">
<h3 class="text-2xl sm:text-3xl font-retro mb-4 text-pastelPurple dark:text-pastelPink">Our Core Values</h3>
<ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-300">
<li>Innovation & Adaptability: Constantly evolving to meet market demands.</li>
<li>Integrity & Transparency: Building trust through honest communication.</li>
<li>Customer Centricity: Prioritizing client needs and satisfaction.</li>
<li>Excellence in Execution: Delivering high-quality results every time.</li>
</ul>
<div class="mt-8 text-center">
<a href="#" class="inline-block px-8 py-3 bg-pastelGreen text-gray-900 border-2 border-pastelYellow rounded-lg text-lg font-monospace shadow-md hover:bg-pastelYellow hover:text-white transform transition-all duration-300 ease-in-out dark:bg-darkAccent dark:text-darkText dark:border-darkText dark:hover:bg-pastelPink dark:hover:border-pastelPink">
Learn More
</a>
</div>
</main>
<button class="dark-mode-toggle" onclick="document.documentElement.classList.toggle('dark')">
Toggle Dark Mode
</button>
</body>
</html>관련 구성 요소
Content Link Component(콘텐츠 링크 구성 요소)로 건너뛰기
Neumorphism 스타일과 Earth tones 색 구성표가 있는 대시보드에 대한 반응형 Skip to Content 링크 구성 요소입니다.
브루탈리스트: 콘텐츠 링크로 건너뛰기(포레스트/그린)
원시적이고 대담한 '콘텐츠로 건너뛰기' 링크 구성 요소는 예약/예약 시스템에 적합한 숲/녹색 색상 팔레트를 사용하여 브루탈리즘 스타일로 디자인되었습니다. 반응이 빠르고 다크 모드를 지원합니다.
콘텐츠 링크로 건너뛰기
3D 디자인 스타일의 콘텐츠 링크 구성 요소로 흙색 색 구성표를 사용하며 중간 정도의 복잡성을 가진 전자 상거래용으로 설계되었습니다. 반응형 디자인과 어두운 테마 지원이 포함됩니다.