Структура портфеля по нейроморфизму
Простой, отзывчивый макет Neumorphism для портфолио, поддерживающий темный режим.
HTML-код
<div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8">
<div class="container mx-auto">
<!-- Header -->
<header class="p-6 mb-8 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
</header>
<!-- Main Content -->
<main class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Project Card -->
<div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 1</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 1.</p>
<img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
</div>
<!-- Project Card -->
<div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 2</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 2.</p>
<img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
</div>
</main>
<!-- Footer -->
<footer class="mt-8 p-6 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-center text-gray-700 dark:text-gray-300">
<p>© 2023 My Portfolio</p>
</footer>
</div>
</div>
<style>
/* Custom Neumorphism Shadows */
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
}
</style>
Связанные компоненты
Компонент макета электронной коммерции
Адаптивный компонент макета электронной коммерции с поддержкой темных тем, созданный с помощью Tailwind CSS в соответствии с принципами Material Design. Он включает в себя панель навигации, основную область содержимого со списками продуктов и нижний колонтитул. Цветовая гамма – пастельная.
Компонент макета
Адаптивный компонент макета блога, разработанный в соответствии с принципами Material Design, использующий монохроматическую цветовую схему и поддерживающий темный режим.
Макет RetroBlog
Простой, адаптивный макет блога с ретро/винтажной эстетикой, поддержкой темного режима и дополнительной цветовой схемой, созданной с помощью Tailwind CSS.