Десктопный фрейм дизайна, экспортированный в PNG
Что получилось правильно
- Весь первый экран: плашка-метка, двухцветный заголовок, абзац текста, залитая и контурная кнопки в фиолетовом цвете дизайна.
- Карточка дашборда настоящим HTML: боковое меню с активным пунктом, сумма к оплате, столбчатая диаграмма из div и три строки счетов с бейджами «Paid», «Due» и «Overdue» в зелёном, оранжевом и красном.
- Ряд логотипов клиентов, где каждое название набрано текстом.
Что придётся поправить руками
- Логотипы временные: знак Ledgerly стал типовым SVG из стопки слоёв, у Globex и Northwind иконки Font Awesome, а плитка Stark Industries использует класс bg-dark, который на странице нигде не определён, поэтому её не видно. Замените их своими SVG.
- Иконка с искрами в плашке-метке задана как fa-sparkles, а в бесплатном наборе Font Awesome 5 такой нет, поэтому на её месте пусто.
- При ширине 1280 пикселей строкам счетов тесно, и INV-0042 переносится на две строки. Дайте правой колонке больше места или сократите колонку с датой.
ledgerly-frame.html (первые строки body)
<body class="min-h-screen">
<!-- Navigation -->
<nav class="max-w-7xl mx-auto px-6 py-6 flex items-center justify-between">
<div class="flex items-center space-x-12">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<svg class="w-5 h-5" fill="white" viewbox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5">
</path>
</svg>
</div>
<span class="text-xl font-bold text-dark">
Ledgerly
</span>
</div>
<div class="hidden md:flex space-x-8 text-muted font-medium">
<a class="hover:text-primary transition" href="#">
Features
</a>
<a class="hover:text-primary transition" href="#">
Pricing
</a>
<a class="hover:text-primary transition" href="#">
Customers
</a>
<a class="hover:text-primary transition" href="#">