-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path006-pixel-perfect.html
83 lines (61 loc) · 2.68 KB
/
006-pixel-perfect.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
<script src="./utils.js"></script>
<script src="./pixelperfect.js"></script>
<link rel="stylesheet" href="style.css">
<title>All Together - Pixel Perfect</title>
</head>
<body>
<div class="hero">
<img data-image-formats="3by1"
data-image-path="https://techsupporteu.scene7.com/is/image/AEMEMEAPractice/AdobeStock_178854618"
data-image-smart
id="hero"/>
</div>
<div class="main">
<p id="dimensions-screen"></p>
<div class="flex-container">
<div class="card">
<img data-image-formats="1by1"
data-image-path="https://techsupporteu.scene7.com/is/image/AEMEMEAPractice/AdobeStock_636568731"
data-image-smart
id="card1">
<p id="dimensions-card1"></p>
</div>
<div class="card">
<img data-image-formats="1by1"
data-image-path="https://techsupporteu.scene7.com/is/image/AEMEMEAPractice/AdobeStock_626510945"
data-image-smart
id="card2">
<p id="dimensions-card2"></p>
</div>
</div>
<div class="text-image">
<div class="text">
<p id="dimensions-card3"></p>
<p>Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<div class="image">
<img data-image-formats="3by1 800,1by1"
data-image-path="https://techsupporteu.scene7.com/is/image/AEMEMEAPractice/AdobeStock_622586678"
data-image-smart
id="card3">
</div>
</div>
<div class="large-teaser">
<div class="text">
<p id="dimensions-card4"></p>
<p>Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<div class="image-wrapper">
<img data-image-formats="3by1 800,1by1"
data-image-path="https://techsupporteu.scene7.com/is/image/AEMEMEAPractice/AdobeStock_437633256"
data-image-smart
id="card4">
</div>
</div>
</div>
</body>
</html>