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; max-width: auto;
margin: auto; margin: auto;
} }
@media screen and (max-width: 600px) {
.flexbox div {
/* background-color: ;*/
} }
.menu, .menu,
@ -40,6 +38,12 @@ body {
/*background-color: black; /* případná barva pozadí černá */ /*background-color: black; /* případná barva pozadí černá */
/*color: white; } /* bílý text */ /*color: white; } /* bílý text */
} }
@media screen and (max-width: 600px) {
body {
width: calc(100% - 16px);
}
}
/* <style> */ /* <style> */
a.tlacitko { a.tlacitko {
/*border-bottom : 1px solid #D1D1D1;*/ /*border-bottom : 1px solid #D1D1D1;*/
@ -72,3 +76,23 @@ a.tlacitko:hover {
.dot { .dot {
list-style-type: none; 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> <body>
<div class="flexbox"> <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" /> <img src="zivotopis/image/1702045296079.jpeg" width="200" height="200" alt="Lukáš Kaňka" />
<h2>Státní příslušnost:</h2> <h2>Státní příslušnost:</h2>
<ul> <ul>
@ -57,11 +61,14 @@
</ul> </ul>
</div> </div>
<div class="flexbox-content">
<div class="title">
<h1>ŽIVOTOPIS<br> LUKÁŠ KAŇKA</h1>
</div>
<div class="content"> <div class="content">
<strong>
<h1 style="text-align: center">ŽIVOTOPIS LUKÁŠ<br> KAŇKA</h1>
<hr />
</strong>
<section class="info-section"> <section class="info-section">
<h2>O MNĚ</h2> <h2>O MNĚ</h2>
<hr /> <hr />
@ -169,6 +176,7 @@
</section> </section>
</div> </div>
</div> </div>
</div>
<footer>Copyright &copy; Lukáš Kaňka 2023</footer> <footer>Copyright &copy; Lukáš Kaňka 2023</footer>
</body> </body>

36
zivotopis/style1.css
View File

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