Úprava souboru index.html

This commit is contained in:
janrippl 2025-02-23 19:26:31 +01:00
parent 8427ee84ba
commit c934acf3c6

View file

@ -62,7 +62,21 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center"><img class="img-fluid rounded-3 my-5" style="opacity: 40%; background: inherit; filter:blur(3px); mix-blend-mode: lighten;" src="assets/alien3.png" alt="..." /></div> <style>
.img {
height: 300px;
opacity: 40%;
filter:blur(3px);
}
.img:hover {
content: url("assets/alien3.png");
transform: scale(1.1);
opacity: 100%;
filter:blur(1px);
}
</style>
<div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center"><img class="img-fluid rounded-3 my-5 img" style="background: inherit; mix-blend-mode: lighten;" src="assets/alien3.png" alt="..." /></div>
</div> </div>
</div> </div>
</header> </header>
@ -71,11 +85,12 @@
<div class="container px-5 my-5"> <div class="container px-5 my-5">
<div class="row gx-5"> <div class="row gx-5">
<div class="col-lg-4 mb-5 mb-lg-0"> <div class="col-lg-4 mb-5 mb-lg-0">
<h2 class="fw-bolder mb-0"><big><i class="fl-gitea pe-sm-1"></i></big> Gitea</h2> <h2 class="fw-bolder mb-0"><big><i class="fl-gitea ps-sm-1"></i></big> Gitea</h2>
<p class="mt-2 small text-muted">Primárně využívám služeb NoLog &middot; CZ...</p> <p class="mt-2 small text-muted">Primárně využívám služeb NoLog &middot; CZ</p>
<p><small>Úpravy HTML/CSS šablon</small></p>
<ul style="list-style-type: none;"> <ul style="list-style-type: none;">
<li> <li>
<details class="mt-2"><summary>HTML5 &plus; CSS3 &plus; JS <small><i class="fa fa-chevron-right ps-sm-2"></i></small></summary><p>text</p></details></li> <details class="mt-2"><summary>HTML5 &plus; CSS3 &plus; JS <i class="fa fa-chevron-right ps-sm-2"></i></summary><p>text</p></details></li>
<li><details class="mt-2"><summary>PHP <i class="fa fa-chevron-right ps-sm-2 text-small"></i></summary><p>text</p></details></li> <li><details class="mt-2"><summary>PHP <i class="fa fa-chevron-right ps-sm-2 text-small"></i></summary><p>text</p></details></li>
<li><details class="mt-2"><summary>PHP &dash; GTK <i class="fa fa-chevron-right ps-sm-2 text-small"></i></summary><p>text</p></details></li> <li><details class="mt-2"><summary>PHP &dash; GTK <i class="fa fa-chevron-right ps-sm-2 text-small"></i></summary><p>text</p></details></li>
<li><details class="mt-2"><summary>Perl <i class="fa fa-chevron-right ps-sm-2 text-small"></i></summary><p>text</p></details></li> <li><details class="mt-2"><summary>Perl <i class="fa fa-chevron-right ps-sm-2 text-small"></i></summary><p>text</p></details></li>
@ -85,31 +100,35 @@
<div class="row gx-5 row-cols-1 row-cols-md-2"> <div class="row gx-5 row-cols-1 row-cols-md-2">
<div class="col mb-5 h-100"> <div class="col mb-5 h-100">
<div class="feature bg-dark bg-gradient text-white rounded-3 mb-4"><i class="bi bi-1-circle-fill"></i></div> <div class="feature bg-dark bg-gradient text-white rounded-3 mb-4"><i class="bi bi-1-circle-fill"></i></div>
<h2 class="h5" align="left"><big><i class="fl-debian pe-sm-3"></i></big>Debian<small><i class="fa fa-chevron-circle-right ps-sm-2"></i></small></h2> <hr>
<h2 class="h5" align="left"><big><i class="fl-debian pe-sm-3"></i></big>Debian<i class="fa fa-chevron-circle-right ps-sm-3"></i></h2>
<hr> <hr>
<div align="right"><small><b>&mdash; Výchozí systém pro servery <i class="fa fa-server"></i></b></small></div> <div align="right"><small><b>&mdash; Výchozí systém pro servery <i class="fa fa-server"></i></b></small></div>
<p class="mb-0" align="right">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p> <p class="mb-5" align="right">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
</div> </div>
<div class="col mb-5 h-100"> <div class="col mb-5 h-100">
<div class="feature bg-dark bg-gradient text-white rounded-3 mb-4"><i class="bi bi-2-circle-fill"></i></div> <div class="feature bg-dark bg-gradient text-white rounded-3 mb-4"><i class="bi bi-2-circle-fill"></i></div>
<h2 class="h5" align="left"><big><i class="fl-ubuntu pe-sm-3"></i></big>Ubuntu<small><i class="fa fa-chevron-circle-right ps-sm-2"></i></small></h2> <hr>
<h2 class="h5" align="left"><big><i class="fl-ubuntu pe-sm-3"></i></big>Ubuntu<i class="fa fa-chevron-circle-right ps-sm-3"></i></h2>
<hr> <hr>
<div align="right"><small><b>&mdash; Výchozí systém pro stanice <i class="fa fa-desktop"></i></b></small></div> <div align="right"><small><b>&mdash; Výchozí systém pro stanice <i class="fa fa-desktop"></i></b></small></div>
<p class="mb-0" align="right">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p> <p class="mb-5" align="right">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
</div> </div>
<div class="col mb-5 mb-md-0 h-100"> <div class="col mb-5 mb-md-0 h-100">
<div class="feature bg-dark bg-gradient text-white rounded-3 mb-4"><i class="bi bi-3-circle-fill"></i></div> <div class="feature bg-dark bg-gradient text-white rounded-3 mb-4"><i class="bi bi-3-circle-fill"></i></div>
<h2 class="h5" align="left"><big><i class="fl-freebsd pe-sm-3"></i></big>Free BSD<i class="fa fa-chevron-circle-right ps-sm-2"></i></h2> <hr>
<h2 class="h5" align="left"><big><i class="fl-freebsd pe-sm-3"></i></big>Free BSD<i class="fa fa-chevron-circle-right ps-sm-3"></i></h2>
<hr> <hr>
<div align="right"><small><b>&mdash; Provoz vlastních serverů</b></small></div> <div align="right"><small><b>&mdash; Provoz vlastních serverů</b></small></div>
<p class="mb-0" align="right">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p> <p class="mb-5" align="right">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
</div> </div>
<div class="col h-100"> <div class="col h-100">
<div class="feature bg-dark bg-gradient text-white rounded-3 mb-4"><i class="bi bi-4-circle-fill"></i></div> <div class="feature bg-dark bg-gradient text-white rounded-3 mb-4"><i class="bi bi-4-circle-fill"></i></div>
<h2 class="h5" align="left"><big><i class="fl-gnome pe-sm-3"></i></big>GNOME<i class="fa fa-chevron-circle-right ps-sm-2"></i></h2> <hr>
<h2 class="h5" align="left"><big><i class="fl-gnome pe-sm-3"></i></big>GNOME<i class="fa fa-chevron-circle-right ps-sm-3"></i></h2>
<hr> <hr>
<div align="right"><small><b>&mdash; Provoz vlastních serverů</b></small></div> <div align="right"><small><b>&mdash; Provoz vlastních serverů</b></small></div>
<p class="mb-0"align="right">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p> <p class="mb-5"align="right">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
</div> </div>
</div> </div>
</div> </div>
@ -122,13 +141,15 @@
<div class="row gx-5 justify-content-center"> <div class="row gx-5 justify-content-center">
<div class="col-lg-10 col-xl-7"> <div class="col-lg-10 col-xl-7">
<div class="text-center"> <div class="text-center">
<h1><big><i class='bx bxl-blender'></i></big>𝙰𝚁𝙴𝙰 𝟻𝟷</h1>
<div class="fs-4 mb-4 fst-italic">"Working with Start Bootstrap templates has saved me tons of development time when building new projects! Starting with a Bootstrap template just makes things easier!"</div> <div class="fs-4 mb-4 fst-italic">"Working with Start Bootstrap templates has saved me tons of development time when building new projects! Starting with a Bootstrap template just makes things easier!"</div>
<div class="d-flex align-items-center justify-content-center"> <div class="d-flex align-items-center justify-content-center">
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." /> <!--<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />-->
<h1><big>𐬽</big></h1>
<div class="fw-bold"> <div class="fw-bold">
Tom Ato <!--Tom Ato
<span class="fw-bold text-dark mx-1">/</span> <span class="fw-bold text-dark mx-1">/</span>
CEO, Pomodoro CEO, Pomodoro-->
</div> </div>
</div> </div>
</div> </div>
@ -152,7 +173,7 @@
<div class="card h-100 shadow border-0"> <div class="card h-100 shadow border-0">
<img class="card-img-top" src="https://dummyimage.com/600x350/ced4da/6c757d" alt="..." /> <img class="card-img-top" src="https://dummyimage.com/600x350/ced4da/6c757d" alt="..." />
<div class="card-body p-4"> <div class="card-body p-4">
<div class="badge bg-dark bg-gradient rounded-pill mb-2">Nudismus</div> <div class="badge bg-dark bg-gradient rounded-pill mb-2"><small>Nudismus</small></div>
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">Nudista &middot; Online</h5></a> <a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">Nudista &middot; Online</h5></a>
<p class="card-text mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div> </div>
@ -173,8 +194,9 @@
<div class="card h-100 shadow border-0"> <div class="card h-100 shadow border-0">
<img class="card-img-top" src="https://dummyimage.com/600x350/adb5bd/495057" alt="..." /> <img class="card-img-top" src="https://dummyimage.com/600x350/adb5bd/495057" alt="..." />
<div class="card-body p-4"> <div class="card-body p-4">
<div class="badge bg-dark bg-gradient rounded-pill mb-2">Media</div> <div class="badge bg-dark bg-gradient rounded-pill mb-2"><small>Nudismus</small></div>
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">Another blog post title</h5></a> <div class="badge bg-dark bg-gradient rounded-pill mb-2"><small>Nahota</small></div>
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">Nahota &middot; Online</h5></a>
<p class="card-text mb-0">This text is a bit longer to illustrate the adaptive height of each card. Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text mb-0">This text is a bit longer to illustrate the adaptive height of each card. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div> </div>
<div class="card-footer p-4 pt-0 bg-transparent border-top-0"> <div class="card-footer p-4 pt-0 bg-transparent border-top-0">