-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathalternatingTextAndImage.html
65 lines (65 loc) · 2.36 KB
/
alternatingTextAndImage.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
<html>
<head>
<meta charset="utf-8" />
<title>HTML MOCKER DEMO</title>
<link rel="stylesheet" href="alternatingTextAndImage.css" />
</head>
<body>
<main>
<article>
<div class="img">
<img
class="hm-img hm-size-50x50__500x500"
src="https://images.unsplash.com/photo-1532289608746-8aaaa40620f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80"
alt="Mobile phone near a laptop"
/>
</div>
<div class="content">
<h1 class="hm-text hm-size-10__15">Headline 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
vulputate est non neque faucibus elementum.
</p>
<a class="cta" href="#" title="CTA">button 1</a>
</div>
</article>
<article>
<div class="img">
<img
class="hm-img hm-size-50x50__500x500"
src="https://images.unsplash.com/photo-1579412690850-bd41cd0af397?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80"
alt="Curved computer display on a table"
/>
</div>
<div class="content">
<h1 class="hm-text hm-size-10__15">Headline 2</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
vulputate est non neque faucibus elementum.
</p>
<a class="cta" href="#" title="CTA">button 2</a>
</div>
</article>
<article>
<div class="img">
<img
class="hm-img hm-size-50x50__500x500"
src="https://images.unsplash.com/photo-1579412690850-bd41cd0af397?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80"
alt="Mobile phone with black screen"
/>
</div>
<div class="content">
<h1 class="hm-text hm-size-10__15">Headline 3</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
rhoncus urna sed mauris facilisis convallis. Nam blandit, ante ut
ultricies iaculis, sem ligula molestie ipsum, mollis iaculis diam
urna eget massa.
</p>
<a class="cta" href="#" title="CTA">button 3</a>
</div>
</article>
</main>
<script src="htmlmocker.js"></script>
</body>
</html>