Skip to content

Commit ed2ed73

Browse files
machalmachal
committed
BEM struktura a ocista HTML
1 parent c2d29b3 commit ed2ed73

File tree

2 files changed

+277
-13
lines changed

2 files changed

+277
-13
lines changed

‎index.html

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,8 @@ <h2 class="inline-list__heading inline-list__heading--invisible">
9090
<img alt="Minirelax v lázních AKCE -20%" src="img/hotel_1.jpg">
9191
</a>
9292
<span class="flags">
93-
<strong class="list-item_flag flag flag--ratings">Skvělé hodnocení</strong>
94-
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
93+
<strong class="flag flag--ratings">Skvělé hodnocení</strong>
94+
<a class="flag flag--lastminute" href="#">Last Minute</a>
9595
</span>
9696
</p>
9797
<!-- .image -->
@@ -109,7 +109,6 @@ <h2>
109109
</p>
110110
</div>
111111
<!-- .content -->
112-
<div class="clear_zero">&nbsp;</div>
113112
</article>
114113
<!-- .list-item -->
115114

@@ -119,7 +118,7 @@ <h2>
119118
<img alt="Mandloňový pobyt" src="img/hotel_2.jpg">
120119
</a>
121120
<span class="flags">
122-
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
121+
<a class="flag flag--lastminute" href="#">Last Minute</a>
123122
</span>
124123
</p>
125124
<!-- .image -->
@@ -137,7 +136,6 @@ <h2>
137136
</p>
138137
</div>
139138
<!-- .content -->
140-
<div class="clear_zero">&nbsp;</div>
141139
</article>
142140
<!-- .list-item -->
143141

@@ -147,7 +145,7 @@ <h2>
147145
<img alt="Velikonoční gurmánský pobyt" src="img/hotel_3.jpg">
148146
</a>
149147
<span class="flags">
150-
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
148+
<a class="flag flag--lastminute" href="#">Last Minute</a>
151149
</span>
152150
</p>
153151
<!-- .image -->
@@ -165,7 +163,6 @@ <h2>
165163
</p>
166164
</div>
167165
<!-- .content -->
168-
<div class="clear_zero">&nbsp;</div>
169166
</article>
170167
<!-- .list-item -->
171168

@@ -175,7 +172,7 @@ <h2>
175172
<img alt="Jarovín Rosé pobytový balíček" src="img/hotel_4.jpg">
176173
</a>
177174
<span class="flags">
178-
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
175+
<a class="flag flag--lastminute" href="#">Last Minute</a>
179176
</span>
180177
</p>
181178
<!-- .image -->
@@ -192,7 +189,6 @@ <h2>
192189
</p>
193190
</div>
194191
<!-- .content -->
195-
<div class="clear_zero">&nbsp;</div>
196192
</article>
197193
<!-- .list-item -->
198194

@@ -202,8 +198,8 @@ <h2>
202198
<img alt="Relax v Pohodě AKCE -20%" src="img/hotel_1.jpg">
203199
</a>
204200
<span class="flags">
205-
<strong class="list-item_flag flag flag--ratings">Skvělé hodnocení</strong>
206-
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
201+
<strong class="flag flag--ratings">Skvělé hodnocení</strong>
202+
<a class="flag flag--lastminute" href="#">Last Minute</a>
207203
</span>
208204
</p>
209205
<!-- .image -->
@@ -220,7 +216,6 @@ <h2>
220216
</p>
221217
</div>
222218
<!-- .content -->
223-
<div class="clear_zero">&nbsp;</div>
224219
</article>
225220
<!-- .list-item -->
226221

@@ -246,7 +241,6 @@ <h2>
246241
</p>
247242
</div>
248243
<!-- .content -->
249-
<div class="clear_zero">&nbsp;</div>
250244
</article>
251245
<!-- .list-item -->
252246

‎index__bem.html

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="cs" class="no-js">
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
8+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
9+
10+
<link href="css/style.css" rel="stylesheet" type="text/css">
11+
12+
<title>Ubytování na Jižní Moravě</title>
13+
14+
<meta content="Nejteplejší a nejúrodnější oblast u nás, kde si na své přijdou jak milovníci přírodních krás, tak zájemci o kulturní bohatství. V tomto nížinatém kraji naleznete sice jen malé kopce, ale zato vás čeká příležitost ke koštování vína a seznámení s dávnými lidovými zvyky a tradicemi." name="description">
15+
16+
<script>
17+
document.documentElement.className =
18+
document.documentElement.className.replace("no-js","js");
19+
</script>
20+
21+
</head>
22+
23+
<body>
24+
25+
<div class="container">
26+
27+
<p class="site-logo">
28+
Kunratická
29+
cestovní kancelář
30+
</p>
31+
32+
<nav class="site-nav" role="navigation">
33+
<div class="site-nav__main" id="navigace">
34+
<ul>
35+
<li>
36+
<a href="#">Najít ubytování</a>
37+
</li>
38+
<li>
39+
<a href="#">Státy</a>
40+
</li>
41+
<li>
42+
<a href="#">Slevy a Last Minute</a>
43+
</li>
44+
<li>
45+
<a href="#">O nás</a>
46+
</li>
47+
<li>
48+
<a href="#">Kontakt</a>
49+
</li>
50+
</ul>
51+
</div>
52+
</nav>
53+
54+
55+
<main class="content" role="main">
56+
57+
<div class="content__head without_nav">
58+
<h1>Ubytování na Jižní Moravě</h1>
59+
</div>
60+
<!-- .content__head -->
61+
62+
<div id="subdivisions">
63+
64+
<div class="inline-list">
65+
<h2 class="inline-list__heading inline-list__heading--invisible">
66+
Města v této oblasti
67+
</h2>
68+
<a class="inline-list__item" href="#">Brno</a>
69+
<a class="inline-list__item" href="#">Hodonín</a>
70+
<a class="inline-list__item" href="#">Hustopeče</a>
71+
<a class="inline-list__item" href="#">Kostelec u Zlína</a>
72+
<a class="inline-list__item" href="#">Lednice</a>
73+
<a class="inline-list__item" href="#">Luhačovice</a>
74+
<a class="inline-list__item" href="#">Lukov</a>
75+
<a class="inline-list__item" href="#">Valtice</a>
76+
<a class="inline-list__item" href="#">Znojmo</a>
77+
</div>
78+
79+
</div>
80+
<!-- id=subdivisions -->
81+
82+
<div class="clearBothZero"></div>
83+
84+
<div class="content__body">
85+
<div class="list-items">
86+
87+
<article class="list-item bordered">
88+
<p class="list-item__image">
89+
<a href="#" class="list-item__image-anchor">
90+
<img alt="Minirelax v lázních AKCE -20%" src="img/hotel_1.jpg" class="list-item__image-img">
91+
</a>
92+
<span class="flags">
93+
<strong class="flag flag--ratings">Skvělé hodnocení</strong>
94+
<a class="flag flag--lastminute" href="#">Last Minute</a>
95+
</span>
96+
</p>
97+
<!-- .image -->
98+
<div class="list-item__content">
99+
<h2>
100+
<a href="#">Minirelax v lázních AKCE -20%</a>
101+
</h2>
102+
<p>
103+
WELLNESS HOTEL POHODA, Luhačovice, Jižní Morava, Česká republika
104+
<br>
105+
<strong>termíny:</strong> 02.04.2018 - 20.04.2018
106+
</p>
107+
<p class="price price--big">
108+
<strong>4 noci od</strong> 5 570 Kč
109+
</p>
110+
</div>
111+
<!-- .content -->
112+
</article>
113+
<!-- .list-item -->
114+
115+
<article class="list-item">
116+
<p class="list-item__image">
117+
<a href="#" class="list-item__image-anchor">
118+
<img alt="Mandloňový pobyt" src="img/hotel_2.jpg" class="list-item__image-img">
119+
</a>
120+
<span class="flags">
121+
<a class="flag flag--lastminute" href="#">Last Minute</a>
122+
</span>
123+
</p>
124+
<!-- .image -->
125+
<div class="list-item__content">
126+
<h2>
127+
<a href="#">Mandloňový pobyt</a>
128+
</h2>
129+
<p>
130+
<strong>termíny:</strong> 23.03.2018 - 25.03.2018
131+
<br>
132+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto fuga eius earum perspiciatis exercitationem.
133+
</p>
134+
<p class="price price--big">
135+
<strong>2 noci od</strong> 2 975 Kč
136+
</p>
137+
</div>
138+
<!-- .content -->
139+
</article>
140+
<!-- .list-item -->
141+
142+
<article class="list-item">
143+
<p class="list-item__image">
144+
<a href="#" class="list-item__image-anchor">
145+
<img alt="Velikonoční gurmánský pobyt" src="img/hotel_3.jpg" class="list-item__image-img">
146+
</a>
147+
<span class="flags">
148+
<a class="flag flag--lastminute" href="#">Last Minute</a>
149+
</span>
150+
</p>
151+
<!-- .image -->
152+
<div class="list-item__content">
153+
<h2>
154+
<a href="#">Velikonoční gurmánský pobyt</a>
155+
</h2>
156+
<p>
157+
<strong>termíny:</strong> 30.03.2018 - 02.04.2018
158+
<br>
159+
Sapiente veritatis iure eligendi iusto molestias at, nobis enim?
160+
</p>
161+
<p class="price price--big">
162+
<strong>2-3 noci od</strong> 3 245 Kč
163+
</p>
164+
</div>
165+
<!-- .content -->
166+
</article>
167+
<!-- .list-item -->
168+
169+
<article class="list-item">
170+
<p class="list-item__image">
171+
<a href="#" class="list-item__image-anchor">
172+
<img alt="Jarovín Rosé pobytový balíček" src="img/hotel_4.jpg" class="list-item__image-img">
173+
</a>
174+
<span class="flags">
175+
<a class="flag flag--lastminute" href="#">Last Minute</a>
176+
</span>
177+
</p>
178+
<!-- .image -->
179+
<div class="list-item__content">
180+
<h2>
181+
<a href="#">Jarovín Rosé pobytový balíček</a>
182+
</h2>
183+
<p>
184+
<strong>termíny:</strong> 06.04.2018 - 08.04.2018 <br>
185+
Consequatur impedit quas corporis sint animi id quod vel officiis, repellat ad reprehenderit.
186+
</p>
187+
<p class="price price--big">
188+
<strong>2 noci od </strong>2 595 Kč
189+
</p>
190+
</div>
191+
<!-- .content -->
192+
</article>
193+
<!-- .list-item -->
194+
195+
<article class="list-item">
196+
<p class="list-item__image">
197+
<a href="#" class="list-item__image-anchor">
198+
<img alt="Relax v Pohodě AKCE -20%" src="img/hotel_1.jpg" class="list-item__image-img">
199+
</a>
200+
<span class="flags">
201+
<strong class="flag flag--ratings">Skvělé hodnocení</strong>
202+
<a class="flag flag--lastminute" href="#">Last Minute</a>
203+
</span>
204+
</p>
205+
<!-- .image -->
206+
<div class="list-item__content">
207+
<h2>
208+
<a href="#">Relax v Pohodě AKCE -20%</a>
209+
</h2>
210+
<p>
211+
<strong>termíny:</strong> 15.04.2018 - 20.04.2018<br>
212+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
213+
</p>
214+
<p class="price price--big">
215+
<strong>3 noci od</strong> 4 560 Kč
216+
</p>
217+
</div>
218+
<!-- .content -->
219+
</article>
220+
<!-- .list-item -->
221+
222+
<article class="list-item">
223+
<p class="list-item__image">
224+
<a href="#" class="list-item__image-anchor">
225+
<img alt="PENZION ONYX foto" src="img/hotel_3.jpg" class="list-item__image-img">
226+
</a>
227+
<span class="flags"></span>
228+
</p>
229+
<!-- .image -->
230+
<div class="list-item__content">
231+
<h2>
232+
<a href="#">PENZION ONYX</a>
233+
</h2>
234+
<p>
235+
Lednice
236+
<br>
237+
Penzion Onyx se nachází v klidové zóně obce Lednice. Je vzdálený jen 800 m od centra obce.
238+
</p>
239+
<p class="price price--big">
240+
<strong>1 noc od</strong> 595 Kč
241+
</p>
242+
</div>
243+
<!-- .content -->
244+
</article>
245+
<!-- .list-item -->
246+
247+
248+
<div class="clearBothZero"></div>
249+
250+
</div>
251+
<!-- /.row -->
252+
253+
</div>
254+
<!-- .content__body -->
255+
</main>
256+
<!-- .content -->
257+
258+
<p id="foot">
259+
&copy; 2005 &ndash; 2018 Cestovka
260+
</p>
261+
262+
</div>
263+
<!-- .container -->
264+
265+
<script src="js/lib/jquery.js"></script>
266+
<script src="js/rekrea-footer.js"></script>
267+
268+
</body>
269+
270+
</html>

0 commit comments

Comments
 (0)