cesnimda
45 lines
2.7 KiB
HTML
45 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="robots" content="noindex,nofollow">
|
|
<title>Homepage concepts | Jobjakt design review</title>
|
|
<link rel="stylesheet" href="concepts.css">
|
|
</head>
|
|
<body class="">
|
|
<a class="skip" href="#main">Skip to content</a>
|
|
<main id="main" class="gallery wrap">
|
|
<h1>Homepage concepts</h1>
|
|
<p class="lede">Compare four approaches and choose any combination of hero, navigation, typography, imagery and layout.</p>
|
|
<p class="fine">Static design review. The product captures show synthetic development fixtures.</p>
|
|
<div class="gallery-grid">
|
|
<article class="gallery-card">
|
|
<a href="minimal.html" aria-label="Open concept A: Modern Minimalist"><img src="renders/minimal-desktop.png" alt="Desktop mockup of Modern Minimalist"></a>
|
|
<h2>A · Modern Minimalist</h2>
|
|
<p>A split hero with clear registration and a genuine application preview.</p>
|
|
<div class="nav"><a href="minimal.html">Responsive page</a><a href="renders/minimal-desktop.png">Full desktop</a><a href="renders/minimal-phone.png">Full phone</a></div>
|
|
</article>
|
|
<article class="gallery-card">
|
|
<a href="premium.html" aria-label="Open concept B: Premium SaaS"><img src="renders/premium-desktop.png" alt="Desktop mockup of Premium SaaS"></a>
|
|
<h2>B · Premium SaaS</h2>
|
|
<p>A theatre-style dashboard preview below a centred violet hero.</p>
|
|
<div class="nav"><a href="premium.html">Responsive page</a><a href="renders/premium-desktop.png">Full desktop</a><a href="renders/premium-phone.png">Full phone</a></div>
|
|
</article>
|
|
<article class="gallery-card">
|
|
<a href="human.html" aria-label="Open concept C: Friendly and Human"><img src="renders/human-desktop.png" alt="Desktop mockup of Friendly and Human"></a>
|
|
<h2>C · Friendly and Human</h2>
|
|
<p>Illustrated professions lead into a genuine teacher CV editing example.</p>
|
|
<div class="nav"><a href="human.html">Responsive page</a><a href="renders/human-desktop.png">Full desktop</a><a href="renders/human-phone.png">Full phone</a></div>
|
|
</article>
|
|
<article class="gallery-card">
|
|
<a href="editorial.html" aria-label="Open concept D: Modern Editorial"><img src="renders/editorial-desktop.png" alt="Desktop mockup of Modern Editorial"></a>
|
|
<h2>D · Modern Editorial</h2>
|
|
<p>A typographic masthead and an asymmetric Career Workspace showcase.</p>
|
|
<div class="nav"><a href="editorial.html">Responsive page</a><a href="renders/editorial-desktop.png">Full desktop</a><a href="renders/editorial-phone.png">Full phone</a></div>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|