archos
/
archoslinux
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

aktualizovan html kd a styly

This commit is contained in:
Archos 2023-12-28 11:07:20 +01:00
parent e80c7a93e5
commit 339739fbd3
2 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -70,15 +70,24 @@
<p>Krátký odstavec popisující tebe a tvou práci.</p>
</section>
<section>
<h2>Kontakt</h2>
<p>E-mail: <a href="mailto:archos@archoslinux.cz">archos@archoslinux.cz</a></p>
<p>E-mail: <a href="mailto:archos@arch-linux.cz">archos@arch-linux.cz</a></p>
<p>Telefon: +420739274900</p>
<p>Matrix: <a href="https://matrix.to/#/@archos:mxchat.cz">archos:mxchat.cz</a></p>
<p>Pixelfed: <a href="https://pixelfed.cz/i/web/profile/441194050239729665">Sleduj mě na Pixelfed</a></p>
<p>Mastodon: <a href="https://mastodon.arch-linux.cz/@archos">Sleduj mě na Mastodon</a></p>
<p>Keyoxide: <a href="https://keyoxide.org/archos%40archoslinux.cz">Archos</a></p>
</section>
<!-- HTML - Upravená část pro Kontakty -->
<section>
<!-- Sekce kontaktů s mřížkovým layoutem -->
<section class="box-grid-container">
<!-- Každý kontakt je block-link s obrázkem na pozadí a textem -->
<div class="block-link" style="background-image: url('path/to/your/image.jpg');">
<a href="mailto:archos@archoslinux.cz">
<div class="block-link-wrapper">
<img src="path/to/your/icon.svg" alt="Ikona E-mailu">
<p class="link-title">E-mail</p>
</div>
</a>
</div>
<!-- Opakujte pro další kontakty -->
</section>
</section>
<footer>
<p>© [2023], archos</p>
</footer>

57
styles.css
View File

@ -1,39 +1,38 @@
body {
font-family: Arial, sans-serif;
color: #333333;
line-height: 1.6;
/* Základní styly pro mřížkový layout */
.box-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Automatické rozložení sloupců */
gap: 10px; /* Mezera mezi prvky */
}
h1 {
color: #123456;
font-size: 24px;
/* Styly pro jednotlivé bloky odkazů */
.block-link {
background-size: cover; /* Obrázek pokryje celý prvek */
border-radius: 10px; /* Zaoblené rohy */
overflow: hidden; /* Skryje přebytečný obsah */
position: relative; /* Pro umístění textu */
}
p {
font-size: 16px;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
a {
color: #0066cc;
text-decoration: none;
.block-link a {
display: block; /* Odkaz pokryje celý prvek */
text-decoration: none; /* Bez podtržení odkazu */
color: white; /* Bílá barva textu */
}
a:hover {
text-decoration: underline;
.block-link-wrapper {
position: absolute;
bottom: 10px; /* Umístění textu u spodního okraje */
left: 10px; /* Umístění textu u levého okraje */
}
img {
width: 150px; /* nebo jiná požadovaná velikost */
height: 150px;
border-radius: 50%; /* Toto vytvoří kruhový tvar */
.block-link img {
width: 30px; /* Šířka ikony */
height: auto; /* Automatická výška ikony */
}
.link-title {
margin-top: 5px; /* Horní okraj pro text */
font-weight: bold; /* Tučný text */
}
/* Přidáte další styly podle potřeby */