421 lines
7.0 KiB
CSS
421 lines
7.0 KiB
CSS
*{
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
background-color: rgb(210, 227, 200);
|
|
}
|
|
.container{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
border: 5px dotted rgb(22, 48, 32);
|
|
background-color: rgb(115, 144, 114);
|
|
|
|
}
|
|
|
|
.box {
|
|
height: 200px;
|
|
width: 200px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.obsah{
|
|
font-family: Times new Rowan;
|
|
text-align: left;
|
|
padding-left: 400px;
|
|
padding-right: 100px;
|
|
}
|
|
/* Style the header */
|
|
header {
|
|
background-color:rgb(48, 77, 48);
|
|
padding: 10px;
|
|
text-align: center;
|
|
font-size: 50px;
|
|
color: rgb(210, 227, 200);
|
|
height: 200px;
|
|
|
|
}
|
|
|
|
/* Create two columns/boxes that floats next to each other */
|
|
nav {
|
|
float: left;
|
|
width: 100%;
|
|
/* height: 300px; only for demonstration, should be removed */
|
|
background:rgb(115, 144, 114);
|
|
padding: 10px;
|
|
color: rgb(210, 227, 200);
|
|
}
|
|
|
|
/* Style the list inside the menu */
|
|
nav ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
color: rgb(210, 227, 200);
|
|
}
|
|
nav ul li :hover{
|
|
color:rgb(210, 227, 200);
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
nav ul li {
|
|
color: rgb(255, 255, 255);
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
/*linky formatovanie*/
|
|
a:link {
|
|
color: rgb(48, 77, 48);
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
a:visited {
|
|
color: rgb(48, 77, 48);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:active {
|
|
color: yellow;
|
|
background-color: transparent;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.container box{
|
|
color: pink;
|
|
}
|
|
|
|
article{
|
|
padding: 50px;
|
|
}
|
|
|
|
|
|
|
|
article {
|
|
|
|
/*float: left;*/
|
|
padding: 50px;
|
|
background-color: rgb(210, 227, 200);
|
|
|
|
}
|
|
|
|
/* Clear floats after the columns */
|
|
section::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
height: fit-content;
|
|
}
|
|
.responsive {
|
|
width: 100%;
|
|
max-width: 421px;
|
|
max-height: 638px;
|
|
height: auto;
|
|
}
|
|
|
|
/* Style the footer */
|
|
footer {
|
|
background-color: rgb(48, 77, 48);
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: rgb(210, 227, 200);
|
|
font-size: 1.5vw
|
|
}
|
|
|
|
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
|
|
/* @media (max-width: 600px) {
|
|
nav, article {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
*/
|
|
|
|
|
|
|
|
#tabulka2, #tabulka2 th, #tabulka2 td
|
|
{
|
|
border: 2px solid black;
|
|
border-collapse: collapse;
|
|
color:rgb(48, 77, 48);
|
|
height: 50px;
|
|
max-width: max-content;
|
|
border-top-width: 3px;
|
|
border-right-width: 3px;
|
|
border-bottom-width: 3px;
|
|
border-left-width: 3px;
|
|
|
|
}
|
|
/* CLASS zapisujeme v css znakom . */
|
|
.podfarbenie tr
|
|
{
|
|
background-color: rgb(159, 190, 142);
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.navbar {
|
|
overflow: hidden;
|
|
background-color: rgb(9, 56, 27);
|
|
}
|
|
|
|
.navbar a {
|
|
float: left;
|
|
font-size: 16px;
|
|
color: rgb(210, 227, 200);
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dropdown {
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dropdown .dropbtn {
|
|
font-size: 16px;
|
|
border: none;
|
|
outline: none;
|
|
color: rgb(210, 227, 200);
|
|
padding: 14px 16px;
|
|
background-color: inherit;
|
|
font-family: inherit;
|
|
margin: 0;
|
|
}
|
|
|
|
.navbar a:hover, .dropdown:hover .dropbtn {
|
|
background-color: rgb(210, 227, 200);
|
|
color: rgb(9, 56, 27);
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: rgb(98, 143, 102);
|
|
min-width: 160px;
|
|
box-shadow: 0px 8px 16px 0px rgb(9, 56, 27);
|
|
z-index: 1;
|
|
}
|
|
|
|
.dropdown-content a {
|
|
float: none;
|
|
color:rgb(9, 56, 27);
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.dropdown-content a:hover {
|
|
background-color:rgb(210, 227, 200);
|
|
}
|
|
|
|
.dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
|
|
|
|
.text{
|
|
font-size: 2vw;
|
|
}
|
|
.odkazy{
|
|
font-size: 1.5vw;
|
|
}
|
|
|
|
.img1{
|
|
border: hidden;
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 2000px){
|
|
body{
|
|
background-color: rgb(210, 227, 200);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
/*============================================*/
|
|
|
|
|
|
@media screen and (max-width: 780px ) {
|
|
body{
|
|
background-color: rgb(210, 227, 200);
|
|
}
|
|
|
|
|
|
header{
|
|
height: 130px;
|
|
color: rgb(210, 227, 200);
|
|
|
|
}
|
|
.dropdown .dropbtn {
|
|
font-size: 18px;
|
|
}
|
|
.dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
.navbar a {
|
|
font-size: 16px;
|
|
}
|
|
all and (max-width: 600px) {
|
|
#header {
|
|
flex-flow: column wrap;
|
|
}
|
|
|
|
#header .flex-item{
|
|
padding: 4px;
|
|
margin: 2px;
|
|
line-height: 0px;
|
|
height: 25px;
|
|
color: black;
|
|
}
|
|
|
|
.topnav a:not(:first-child), .dropdown .dropbtn {
|
|
display: none;
|
|
}
|
|
.topnav a.icon {
|
|
float: right;
|
|
display: block;
|
|
}
|
|
|
|
.container_menu{
|
|
display: flex;
|
|
flex-flow: row;
|
|
}
|
|
|
|
.topnav.responsive {position: relative;}
|
|
.topnav.responsive a.icon {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.topnav.responsive a {
|
|
float: none;
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
.topnav.responsive .dropdown {float: none;}
|
|
.topnav.responsive .dropdown-content {position: relative;}
|
|
.topnav.responsive .dropdown .dropbtn {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.responsive{
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 780px ) {
|
|
body{
|
|
background-color: rgb(210, 227, 200);
|
|
}
|
|
header{
|
|
height: 200px;
|
|
color: rgb(210, 227, 200);
|
|
|
|
}
|
|
.dropdown .dropbtn {
|
|
font-size: 20px;
|
|
}
|
|
.navbar a {
|
|
font-size: 20px;
|
|
}
|
|
.article{
|
|
padding-right: 50px;
|
|
padding-left: 50px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1350px ) {
|
|
body{
|
|
background-color: rgb(210, 227, 200);
|
|
}
|
|
header{
|
|
height: 260px;
|
|
color: rgb(210, 227, 200);
|
|
|
|
}
|
|
.dropdown .dropbtn {
|
|
font-size: 25px;
|
|
}
|
|
.navbar a {
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1700px ) {
|
|
body{
|
|
background-color: rgb(210, 227, 200);
|
|
}
|
|
header{
|
|
height: 400px;
|
|
color: rgb(210, 227, 200);
|
|
}
|
|
.dropdown .dropbtn {
|
|
font-size: 30px;
|
|
}
|
|
.navbar a {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 2500px ) {
|
|
body{
|
|
background-color: rgb(210, 227, 200);
|
|
}
|
|
header{
|
|
height: 450px;
|
|
color: rgb(210, 227, 200);
|
|
}
|
|
.dropdown .dropbtn {
|
|
font-size: 30px;
|
|
}
|
|
.navbar a {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|