-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (149 loc) · 12.8 KB
/
index.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Verkefni 5</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>Lorem ipsum og pálmatré</h1>
<div class="grid">
<div class="grid__row">
<div class="grid__col">
<div class="text">
<p>Cras ac erat tempor, scelerisque eros id, pharetra erat. Morbi eu massa suscipit elit mattis auctor. Nunc sit amet massa dictum dolor convallis maximus. Etiam nec aliquam quam. Nulla convallis ornare semper. Aenean at rhoncus lectus. Vestibulum nisi lorem, eleifend a eros bibendum, tincidunt ultrices velit. Proin auctor sagittis neque, et commodo sem dignissim vitae. Praesent euismod elit ante, quis vulputate massa ultrices eu. In sagittis ultrices nunc quis malesuada.</p>
<p>Maecenas ullamcorper porttitor nibh quis semper. Phasellus sed sagittis est. Sed mattis velit eros, vitae dictum ligula venenatis a. Integer eu elit vestibulum, porta urna eu, tristique sapien. Vivamus orci justo, tempus a efficitur at, hendrerit sed risus. Fusce sollicitudin, magna ut interdum ultricies, velit lorem vulputate felis, ut gravida quam lectus et leo. Nullam imperdiet metus non urna consectetur gravida. Phasellus in bibendum tortor. Suspendisse id lacinia lorem. Nullam eget turpis imperdiet, hendrerit tortor eu, ullamcorper arcu. Etiam nec volutpat neque, quis sagittis magna. Donec ante enim, tempus in nulla eget, varius elementum augue. Mauris gravida vehicula dolor, vel varius augue posuere vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada porta leo at vulputate. Suspendisse quis risus augue. Quisque sit amet elit at augue pulvinar eleifend finibus a risus. Ut bibendum et est at fermentum. Duis diam neque, pharetra vel dui in, mollis auctor massa. Phasellus rutrum ex eget sagittis sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam efficitur ac erat quis placerat. Mauris vulputate tincidunt enim ac porta. Pellentesque consequat leo et aliquam iaculis.</p>
</div>
</div>
<div class="grid__col">
<img class="image" src="palms1.jpg" alt="Afskaplega lorem-ipsum-leg pálmatré">
</div>
</div>
<div class="grid__row">
<div class="grid__col">
<img class="image" src="palms2.jpg" alt="Jafnvel lorem-ipsum-legri pálmatré">
</div>
<div class="grid__col">
<div class="text">
<p>Nunc ornare libero sit amet felis faucibus tincidunt laoreet sed magna. Etiam volutpat augue quis sapien pharetra, efficitur semper ipsum aliquet. Duis commodo elit libero, et vestibulum tellus scelerisque eu. Sed non viverra tortor. Nulla lorem magna, pellentesque sit amet leo eu, laoreet imperdiet lorem. Fusce porttitor a est pellentesque interdum. Aenean sodales, augue vitae cursus feugiat, neque lectus malesuada leo, hendrerit ultrices dolor dui a tellus. Etiam sagittis libero magna, et pretium leo viverra non.</p>
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum id nulla in iaculis. Vivamus mollis eros non erat mollis tincidunt. Duis volutpat ultrices justo, vel euismod justo elementum nec. Praesent ornare, neque sit amet posuere facilisis, elit erat luctus magna, et vehicula nisl nunc at sem. Ut eros augue, imperdiet eget sagittis non, laoreet in massa. Pellentesque porta id urna sit amet ornare. Nulla vel augue suscipit ante rutrum ullamcorper sed id est. Nullam maximus mollis diam, quis tempus quam molestie in. Duis id purus sed purus convallis mattis. Fusce lobortis arcu a ligula sollicitudin, quis porttitor elit consequat. Nunc non efficitur sapien. Fusce vel sodales nunc.</p>
<p>Aliquam aliquam laoreet ipsum vitae porta. Duis quis elit neque. Suspendisse fermentum rhoncus nunc, efficitur semper tellus consequat sed. Sed aliquam mattis nisi efficitur semper. Integer vitae maximus neque. Etiam non urna sit amet turpis pretium elementum. Donec at libero quis lorem vehicula euismod. Maecenas id metus mattis, mollis nibh eget, consectetur augue. Suspendisse sed maximus neque, sed mollis nibh. In lacinia erat ac dignissim vehicula. Vivamus convallis accumsan turpis, a pellentesque leo. Sed commodo molestie elit eu luctus. Vivamus in tincidunt libero, vitae consectetur lectus. Nulla in porta justo. Nam commodo rutrum justo, eget aliquet augue lobortis vitae. Integer non dapibus ligula.</p>
</div>
</div>
</div>
</div>
<div class="cards">
<div class="cards__row">
<div class="cards__col">
<section class="card">
<h2 class="card__title">Lorem ipsum</h2>
<div class="card__content">
<div class="card__text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam justo ac semper pharetra. Sed eu libero nec felis eleifend venenatis eu ac urna. Praesent pretium nisi scelerisque nibh accumsan tempus.</p>
</div>
</div>
</section>
</div>
<div class="cards__col">
<section class="card">
<h2 class="card__title">Aliquam erat volutpat in dignissim id sagittis nec leo</h2>
<div class="card__content">
<div class="card__text">
<p>Pellentesque sem lectus, posuere in dignissim id, sagittis nec leo. Aliquam erat volutpat. Proin dui leo, maximus sed odio et, vestibulum tempus mauris.</p>
</div>
<div class="card__image">
<img class="card__img" src="img.jpg">
</div>
</div>
</section>
</div>
<div class="cards__col">
<section class="card">
<h2 class="card__title">Loremipsumdolorsitametconsecteturadipiscingelit</h2>
<div class="card__content">
<div class="card__text">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Pellentesque sem lectus, posuere in dignissim id, sagittis nec leo. Aliquam erat volutpat. Proin dui leo, maximus sed odio et, vestibulum tempus mauris.</p>
<p>Pellentesque sem lectus, posuere in dignissim id, sagittis nec leo. Aliquam erat volutpat. Proin dui leo, maximus sed odio et, vestibulum tempus mauris. Loremipsumdolorsitametconsecteturadipiscingelitvestibulumtempusmaurisvestibulumtempusmauris.</p>
<p>Aliquam erat volutpat. Proin dui leo, maximus sed odio et, vestibulum tempus mauris.</p>
</div>
</div>
</section>
</div>
<div class="cards__col">
<section class="card">
<h2 class="card__title">Proin dui leo</h2>
<div class="card__content">
<div class="card__text">
<p>Pellentesque sem lectus, posuere in dignissim id, sagittis nec leo. Aliquam erat volutpat. Proin dui leo, maximus sed odio et, vestibulum tempus mauris. Loremipsumdolorsitametconsecteturadipiscingelit.</p>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Pellentesque sem lectus, posuere in dignissim id, sagittis nec leo. Aliquam erat volutpat. Proin dui leo, maximus sed odio et, vestibulum tempus mauris.</p>
<p>Pellentesque sem lectus, posuere in dignissim id, sagittis nec leo. Aliquam erat volutpat. Proin dui leo, maximus sed odio et, vestibulum tempus mauris. Loremipsumdolorsitametconsecteturadipiscingelit.</p>
</div>
<div class="card__image">
<img class="card__img" src="img.jpg">
</div>
</div>
</section>
</div>
<div class="cards__col">
<section class="card">
<h2 class="card__title">Lorem ipsum</h2>
<div class="card__content">
<div class="card__text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam justo ac semper pharetra. Sed eu libero nec felis eleifend venenatis eu ac urna. Praesent pretium nisi scelerisque nibh accumsan tempus.</p>
</div>
</div>
<ul class="card__tags">
<li class="card__tag">lorem</li>
<li class="card__tag">ipsum</li>
</ul>
</section>
</div>
<div class="cards__col">
<section class="card">
<h2 class="card__title">Lorem ipsum</h2>
<div class="card__content">
<div class="card__text">
<p>Pellentesque sem lectus, posuere in dignissim id, sagittis nec leo. Aliquam erat volutpat. Proin dui leo, maximus sed odio et, vestibulum tempus mauris. Loremipsumdolorsitametconsecteturadipiscingelit.</p>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Pellentesque sem lectus, posuere in dignissim id, sagittis nec leo. Aliquam erat volutpat. Proin dui leo, maximus sed odio et, vestibulum tempus mauris.</p>
<p>Pellentesque sem lectus, posuere in dignissim id, sagittis nec leo. Aliquam erat volutpat. Proin dui leo, maximus sed odio et, vestibulum tempus mauris. Loremipsumdolorsitametconsecteturadipiscingelit.</p>
</div>
<div class="card__image">
<img class="card__img" src="img.jpg">
</div>
</div>
<ul class="card__tags">
<li class="card__tag">lorem</li>
<li class="card__tag">ipsum</li>
<li class="card__tag">dolor</li>
<li class="card__tag">foo</li>
<li class="card__tag">bar</li>
<li class="card__tag">baz</li>
<li class="card__tag">lorem-ipsum</li>
<li class="card__tag">dolor-sit-amet</li>
</ul>
</section>
</div>
</div>
</div>
<div class="grid">
<div class="grid__row">
<div class="grid__col">
<div class="text">
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum id nulla in iaculis. Vivamus mollis eros non erat mollis tincidunt. Duis volutpat ultrices justo, vel euismod justo elementum nec. Praesent ornare, neque sit amet posuere facilisis, elit erat luctus magna, et vehicula nisl nunc at sem. Ut eros augue, imperdiet eget sagittis non, laoreet in massa. Pellentesque porta id urna sit amet ornare. Nulla vel augue suscipit ante rutrum ullamcorper sed id est. Nullam maximus mollis diam, quis tempus quam molestie in. Duis id purus sed purus convallis mattis. Fusce lobortis arcu a ligula sollicitudin, quis porttitor elit consequat. Nunc non efficitur sapien. Fusce vel sodales nunc.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada porta leo at vulputate. Suspendisse quis risus augue. Quisque sit amet elit at augue pulvinar eleifend finibus a risus. Ut bibendum et est at fermentum. Duis diam neque, pharetra vel dui in, mollis auctor massa. Phasellus rutrum ex eget sagittis sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam efficitur ac erat quis placerat. Mauris vulputate tincidunt enim ac porta. Pellentesque consequat leo et aliquam iaculis.</p>
<p>Maecenas ullamcorper porttitor nibh quis semper. Phasellus sed sagittis est. Sed mattis velit eros, vitae dictum ligula venenatis a. Integer eu elit vestibulum, porta urna eu, tristique sapien. Vivamus orci justo, tempus a efficitur at, hendrerit sed risus. Fusce sollicitudin, magna ut interdum ultricies, velit lorem vulputate felis, ut gravida quam lectus et leo. Nullam imperdiet metus non urna consectetur gravida. Phasellus in bibendum tortor. Suspendisse id lacinia lorem. Nullam eget turpis imperdiet, hendrerit tortor eu, ullamcorper arcu. Etiam nec volutpat neque, quis sagittis magna. Donec ante enim, tempus in nulla eget, varius elementum augue. Mauris gravida vehicula dolor, vel varius augue posuere vel.</p>
</div>
</div>
<div class="grid__col">
<img class="image" src="palms3.jpg" alt="lorem-ipsum-legustu pálmatrén">
</div>
</div>
</div>
</main>
</body>
</html>