VSCodeTesting/paty2.html at master · kKobalt/VSCodeTesting · GitHub

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
<!DOCTYPE html>

<html lang="cs" xml:lang="cs" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>pátý: CSS</title>
	<style>
		#stranka {
			width: 500px;
			margin: 0 auto;
			border: 1px dashed green;
		}


		#hlavicka {
			width: 500px;
			height: 50px;
			background: silver;
			text-align: center;
			font-size: 2em;
			color: white;
		}

		#menu {
			border: 1px solid black;
			height: 30px;
			width: 500px;
			color: white;
			background: orange;
		}

		#menu span {
			display: none;
		}

		#obsah {
			border: 1px solid black;
			width: 500px;
			color: black;
			background: red;
			/* padding: 0px; */
			/* padding: 10px; */
		}

		/* display: block - předdefinuje textový element na blokový (nebo) */
		#obsah a {
			display: block;
			/* border: 1px solid black; */
			width: 150px;
			margin: 5px;
			padding: 5px;
			color: black;
			background: silver;
		}
	</style>
</head>

<body id="top">
	<div id="stranka">

		<h2>Pátý2: CSS</h2>

		<div id="new">
			<div id="hlavicka">
				<p>Hlavička FIRMY</p>
			</div>
			<div id="menu">
				<span>
					<a href="paty1.html">pátý1</a>
					<a href="paty2.html">pátý2</a>
					<a href="paty3.html">pátý3</a>
				</span>
			</div>
			<div id="obsah">
				<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam libero autem obcaecati nesciunt assumenda
					officiis facere aliquid deleniti voluptate exercitationem cupiditate, incidunt, sequi maxime delectus minus
					iusto ipsam enim, excepturi eligendi earum reiciendis tempore aliquam? Praesentium, voluptates, sint inventore
					a atque eos voluptas vitae sed ipsa perspiciatis quasi natus repellendus porro sapiente maxime consequuntur
					pariatur, est maiores! Accusamus veritatis, cupiditate labore minus corrupti assumenda odio nam non fugiat id
					pariatur laboriosam sed ea. Ea doloribus harum perspiciatis similique nihil, quo ducimus vitae! Nulla, ut,
					maxime, eius eaque facilis commodi facere debitis aspernatur voluptate dolorum totam! Ipsum dolorem at
					voluptatem ullam?</p>
				<p>Omnis eius facere est tempora possimus alias dolores voluptatibus pariatur, similique porro vero ea dicta,
					labore, aspernatur quod fugiat culpa quibusdam ab illo! Ab reprehenderit natus eaque tempore. Voluptatibus
					officiis, doloribus voluptates earum laboriosam veritatis error dolores, deleniti recusandae fuga neque dolore
					magnam illo vero animi tempore. Dolorum, tempore et. Iste ipsam nesciunt atque ea, sunt ducimus tempora
					recusandae amet eius? Blanditiis, quisquam? Qui nobis accusamus sed aperiam maxime commodi eius temporibus,
					quis aliquam quo animi placeat itaque sit odio fugiat facere assumenda ut. Maxime iure veniam, quos
					consectetur
					mollitia et ipsa? Ipsam voluptate tenetur itaque repellat, beatae nisi distinctio!</p>
				<ul>
					<li> <a href="paty1.html">pátý1</a> </li>
					<li> <a href="paty2.html">pátý2</a> </li>
					<li> <a href="paty3.html">pátý3</a> </li>
				</ul>
			</div>
			<p style="text-align: right"><a href="#top">top</a> | <a href="index.html">INDEX.html</a></p><br />
		</div>
</body>

</html>