Ale neděje se to. Kde je potíž?
- Kód: Vybrat vše
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<title>Titulek stránky</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="Popis stránky" />
<meta name="author" content="Jméno autora" />
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<p>testovací text</p>
<p style="background: red; color: #FFEE00; border-radius: 999px; width: 100px; height: 100px; vertical-align: top; display: flex; align-items: center; justify-content: center; ">Bestseller!</p>
<nav class="some-meaningless-class"><ul><li><a>...</nav>
<nav class="menu">
<ul>
<li><a href="#1">Lorem</a></li>
<li><a href="#2">Accusantium</a></li>
<li><a href="#3">Adipisci</a></li>
<li><a href="#4">Aut</a></li>
<li><a href="#5">Eos</a></li>
</ul>
</nav>
<script src="js/script.js"></script>
</body>
</html>
____
- Kód: Vybrat vše
@font-face {
font-family: Poppins;
src: url(fonty/Poppins-Regular.ttf);
font-weight: normal;
}
@font-face {
font-family: Poppins;
src: url(fonty/Poppins-ExtraBold.ttf);
font-weight: bold;
}
.centrovany {
text-align: center;
}
body {
font-family: "Poppins";
font-size: 14px;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center;
color: #0a294b;
}
h2 {
font-size: 1.7em;
}
article h2 {
font-size: 2em;
}
article h1 {
margin: 0;
font-size: 2.3em;
font-weight: bold;
text-transform: uppercase;
border-bottom: 4px solid #ef6534;
}
article h1,
h2,
h3,
h4,
h5,
h6 {
padding: 10px 0;
color: #00386b;
width: max-content;
}
article header {
height: 900px;
background: none;
}
article section p {
margin-bottom: 1.5em;
line-height: 1.8em;
}
article section a {
color: #ef6534;
}
#centrovac {
margin: 0 auto;
max-width: 960px;
}
.domu-article {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 100px max-content;
border: 3px inherit green;
box-shadow: 2px 2px 7px #F22609;
}
.domu-article img {
width: 300px;
grid-row-start: 1;
grid-row-end: span 2;
grid-column: 2;
filter: hue-rotate(90deg);
}// https://developer.mozilla.org/en-US/docs/Web/CSS/filter
article {
padding: 200px 50px;
flex: 1;
}
.vlevo{
float:left;
padding: 10px;
}
.reference-tlacitko {
background: #F3A30D;
color: black;
font-size: 0.9em;
text-decoration: none;
text-transform: uppercase;
padding: 12px 25px;
border-radius: 25px;
}
body > header {
height: 100px;
position: fixed;
display: flex;
justify-content: space-evenly;
top: 0;
background: #00386B;
color: white;
width: 100%;
z-index: 1;
}
#logo {
background: url('source/hlavicka.png') no-repeat;
background-size: 40px 40px;
height: 40px;
margin: auto 0 auto 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
#logo > * {
margin: 0 0 0 50px;
}
#logo h1 {
font-weight: normal;
font-size: 1.5em;
line-height: 1.2em;
}
#logo h1 span {
font-weight: bold;
text-transform: uppercase;
}
#logo small {
text-transform: uppercase;
font-size: 0.85em;
}
nav ul {
margin: 0;
height: 100%;
align-items: center;
list-style-type: upper-roman;
display: flex;
}
nav ul li {
padding: 0 25px;
margin: 0 5px;
font-size: 1em;
line-height: 4.3em;
}
nav ul a {
color: orange;
padding: 8px 0;
text-decoration: none;
text-transform: uppercase;
}
nav ul a:hover, .aktivni a {
border-bottom: 2px solid #EF6534;
}
.kontakt-tlacitkoq {
background: #3783AA;
padding: 10px 20px;
border-radius: 20px;
}
.kontakt-tlacitko:hover,
.reference-tlacitko:hover {
filter: brightness(115%) contrast(85%);
border: 0;
}
footer {
box-sizing: border-box;
text-align: center;
height: 100px;
color: white;
background: #414042;
padding: 50px 0 0 0;
clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
}
#centrovac {
margin: 0 auto;
max-width: 960px;
}
#dovednosti td {
width: 33%;
padding: 10px;
vertical-align: bottom;
border: 1px solid gray;
}
#dovednosti {
border-collapse: collapse;
}
#reference img {
border: 1px solid gray;
padding: 6px;
box-shadow: 3px 3px 6px #36F828;
margin-right: 6px;
}
.clanek {
box-sizing: border-box;
width: 100%;
height: 200px;
margin: 20px 0;
padding: 15px;
background: blue;
}
.postranni-panel {
box-sizing: border-box;
width: 100%;
height: 100px;
margin: 20px 0;
padding: 10px;
background: red;
}
@media screen and (min-width: 900px) {
.clanek {
width: 79%;
float: left;
}
.postranni-panel {
width: 19%;
float: right;
}
}
nav.menu {
display: block;
width: 100%;
background: blue;
}
nav.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav.menu ul li {
width: 100%;
}
nav.menu a {
display: block;
color: white;
text-decoration: none;
font-family: sans-serif;
line-height: 2em;
padding: 0 15px;
}
nav.menu a:hover {
background: rgba(0, 0, 0, 0.1);
}
