39 lines
1.9 KiB
HTML
39 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>WanderQ Homepage Structure QA</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; background: #111a15; font-family: Arial, sans-serif; }
|
|
body { width: 1480px; padding: 20px; }
|
|
header { display: flex; justify-content: space-between; padding: 18px 4px; color: #f3efe5; font-size: 18px; letter-spacing: .08em; }
|
|
main { display: grid; grid-template-columns: repeat(2, 720px); gap: 20px; align-items: start; }
|
|
section { overflow: hidden; background: #f3efe5; }
|
|
.source img, .segment img { display: block; width: 720px; }
|
|
.source { height: 1164px; }
|
|
.source img { height: 1164px; }
|
|
.implementation { height: 1164px; }
|
|
.segment { position: relative; overflow: hidden; width: 720px; }
|
|
.segment img { position: absolute; left: 0; top: 0; height: 500px; }
|
|
.segment-one { height: 500px; }
|
|
.segment-two { height: 450px; }
|
|
.segment-two img { top: -50px; }
|
|
.segment-three { height: 214px; }
|
|
.segment-three img { top: -175px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header><span>SOURCE STRUCTURE</span><span>IMPLEMENTED HOMEPAGE</span></header>
|
|
<main>
|
|
<section class="source"><img src="/figma-home-structure-preview.png" alt="Approved homepage structure" /></section>
|
|
<section class="implementation">
|
|
<div class="segment segment-one"><img src="/home-qa-desktop-01-hero.png" alt="Implemented hero" /></div>
|
|
<div class="segment segment-two"><img src="/home-qa-desktop-02-transition.png" alt="Implemented transition" /></div>
|
|
<div class="segment segment-three"><img src="/home-qa-desktop-03-experiences.png" alt="Implemented experience cards" /></div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|