kankys
/
testing-docs.cz
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responzivní web

This commit is contained in:
Lukáš Kaňka 2024-01-11 18:08:50 +01:00
parent 59b4b53543
commit 02703bbd63
2 changed files with 127 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
index.html
View File

@ -36,38 +36,44 @@
</div>
<hr />
<div class="flexbox">
<div class="navigation">
<table>
<caption>
Rubriky:
</caption>
<tr>
<th>
<li>
<a class="button" href="automatizovane-testovani.html">Automatizované testování</a>
</li>
<li><a class="button" href="nastroje.html">Nástroje</a></li>
<li>
<a class="button" href="penetracni-testovani.html">Penetrační testování</a>
</li>
<li>
<a class="button" href="testing-obecne.html">Testing obečně</a>
</li>
<li>
<a class="button" href="testovani-mobilnich-aplikaci.html">Testování mobilních aplikací</a>
</li>
<li>
<a class="button" href="testovani-pristupnosti.html">Testování přístupnosti</a>
</li>
<li>
<a class="button" href="zatezove-testovani.html">Zátěžové testování</a>
</li>
</th>
</tr>
</table>
<div class="dropdown-content
">
<table>
<caption>
Rubriky:
</caption>
<tr>
<th>
<li>
<a class="button" href="automatizovane-testovani.html">Automatizované testování</a>
</li>
<li><a class="button" href="nastroje.html">Nástroje</a></li>
<li>
<a class="button" href="penetracni-testovani.html">Penetrační testování</a>
</li>
<li>
<a class="button" href="testing-obecne.html">Testing obečně</a>
</li>
<li>
<a class="button" href="testovani-mobilnich-aplikaci.html">Testování mobilních
aplikací</a>
</li>
<li>
<a class="button" href="testovani-pristupnosti.html">Testování přístupnosti</a>
</li>
<li>
<a class="button" href="zatezove-testovani.html">Zátěžové testování</a>
</li>
</th>
</tr>
</table>
</div>
</div>
<div class="content">
<p class="big-text">Testing Docs CZ</p>
<p>

138
style.css
View File

@ -1,100 +1,148 @@
:root {
--special_black: rgb(11, 2, 2);
--special_white: white;
--special_grey: grey;
--special_black_original: black;
--special_black: rgb(11, 2, 2);
--special_white: white;
--special_grey: grey;
--special_black_original: black;
}
/* Body */
body {
background-color: var(--special_black);
color: var(--special_white);
width: calc(100% - 32px);
max-width: 1200px;
margin: auto;
background-color: var(--special_black);
color: var(--special_white);
width: calc(100% - 32px);
max-width: 1200px;
margin: auto;
}
@media screen and (max-width: 600px) {
body {
width: calc(100% - 16px);
}
}
.menu-item {
display: inline-block;
width: 200px;
height: 20px;
position: static;
text-align: center;
display: inline-block;
width: 200px;
height: 20px;
position: static;
text-align: center;
}
.flexbox {
display: flex;
display: flex;
/* flex-direction: column; */
}
.navigation {
flex: 1;
/* margin: 0px 0px 0px 50px; */
padding: 25px;
/* margin-top: 20px; */
flex: 1;
/* margin: 0px 0px 0px 50px; */
padding: 25px;
/* margin-top: 20px; */
}
/* .dropdown-content {
display: none;
} */
.content {
flex: 3;
margin-bottom: 25px;
flex: 3;
margin-bottom: 25px;
}
@media screen and (max-width: 600px) {
/* Nastavení sloupcu na sloupce mobil */
.flexbox {
flex-direction: column;
}
/* ˇPořadí zobrazení */
.navigation {
order: -1;
flex-direction: column;
}
/* škrývání */
.navigation:hover .dropdown-content {
display: block;
}
/* roletka posuvník */
.dropdown-content {
overflow: auto;
max-height: 100px; /* or any other value */
}
.content {
order: 1;
flex-direction: column;
}
}
.articles {
margin: 0px 50px 0px 0px;
margin-top: 25px;
margin: 0px 50px 0px 0px;
margin-top: 25px;
}
@media screen and (max-width: 600px) {
.articles {
display: none;
}
}
footer {
position: fixed;
bottom: 0;
position: fixed;
bottom: 0;
}
.big-text {
font-size: 40px;
text-align: center;
font-size: 40px;
text-align: center;
}
h1 {
font-family: cursive;
margin: 0px 0px 0px 30px;
font-family: cursive;
margin: 0px 0px 0px 30px;
}
h2 {
font-family: cursive;
margin: 0px 0px 0px 30px;
font-family: cursive;
margin: 0px 0px 0px 30px;
}
/*.link-white*/
.button {
color: var(--special_white);
color: var(--special_white);
}
td,
th {
border: 1px solid var(--special_white);
padding: 10px;
border: 1px solid var(--special_white);
padding: 10px;
}
.code-box {
border: 1px solid var(--special_white);
padding: 10px;
background-color: var(--special_grey);
font-family: monospace;
color: var(--special_black_original);
font-weight: bold;
border-radius: 8px;
border: 1px solid var(--special_white);
padding: 10px;
background-color: var(--special_grey);
font-family: monospace;
color: var(--special_black_original);
font-weight: bold;
border-radius: 8px;
}
.not-dot {
list-style-type: none;
list-style-type: none;
}
.link {
color: var(--special_white);
color: var(--special_white);
/*cursor: unset;*/
}
.strong-text {
font-weight: bold;
font-weight: bold;
}
.link-black {
color: var(--special_black_original);
color: var(--special_black_original);
}