kankys/lukas-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responzivní životopis

Browse Source
This commit is contained in:
Lukáš Kaňka 2024-01-12 03:10:05 +01:00
parent 2f736cacde
commit 1717a5279b
3 changed files with 181 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
styly.css
View File

@ -14,9 +14,7 @@ footer {
max-width: auto;
margin: auto;
}
.flexbox div {
/* background-color: ;*/
@media screen and (max-width: 600px) {
}
.menu,
@ -40,6 +38,12 @@ body {
/*background-color: black; /* případná barva pozadí černá */
/*color: white; } /* bílý text */
}
@media screen and (max-width: 600px) {
body {
width: calc(100% - 16px);
}
}
/* <style> */
a.tlacitko {
/*border-bottom : 1px solid #D1D1D1;*/
@ -72,3 +76,23 @@ a.tlacitko:hover {
.dot {
list-style-type: none;
}
/* .menu {
}
.obsah {
} */
@media screen and (max-width: 600px) {
.flexbox {
width: calc(100% - 16px);
flex-direction: column;
}
.menu {
order: -1;
}
.obsah {
flex-direction: column;
order: 1;
}
}

18
zivotopis.html
View File

@ -15,8 +15,12 @@
<body>
<div class="flexbox">
<div class="menu">
<!-- <div class="title">
<h1>ŽIVOTOPIS LUKÁŠ<br> KAŇKA</h1>
</div> -->
<div class="menu">
<img src="zivotopis/image/1702045296079.jpeg" width="200" height="200" alt="Lukáš Kaňka" />
<h2>Státní příslušnost:</h2>
<ul>
@ -57,11 +61,14 @@
</ul>
</div>
<div class="flexbox-content">
<div class="title">
<h1>ŽIVOTOPIS<br> LUKÁŠ KAŇKA</h1>
</div>
<div class="content">
<strong>
<h1 style="text-align: center">ŽIVOTOPIS LUKÁŠ<br> KAŇKA</h1>
<hr />
</strong>
<section class="info-section">
<h2>O MNĚ</h2>
<hr />
@ -169,6 +176,7 @@
</section>
</div>
</div>
</div>
<footer>Copyright &copy; Lukáš Kaňka 2023</footer>
</body>

36
zivotopis/style1.css
View File

@ -11,6 +11,12 @@ body {
margin: auto;
margin-bottom: 25px;
}
@media screen and (max-width: 600px) {
body {
width: calc(100% - 16px);
}
}
footer {
position: fixed;
bottom: 0;
@ -31,12 +37,20 @@ th {
max-width: auto;
margin: auto;
}
.flexbox-content {
display: flex;
flex-direction: column;
}
.menu {
flex: 1;
margin-top: 25px;
}
.content {
order: 2;
flex: 3;
padding: 55px;
margin-top: -45px;
}
.dot {
list-style-type: none;
@ -46,3 +60,23 @@ th {
.fun {
font-size: 20px;
}
.title {
text-align: center;
order: 1;
}
@media screen and (max-width: 600px) {
.flexbox {
flex-direction: column;
}
.menu {
order: 1;
}
/* .content {
order: 3;
} */
.title {
order: -1;
}
}