cardheader

This commit is contained in:
marcus@weifer.de 2022-12-03 00:10:58 +01:00
parent e4d5ddede7
commit 4c8196e3ee
10 changed files with 68 additions and 27 deletions

View File

@ -1,6 +0,0 @@
<a href="https://marcusferl.de" class="custom-card">
<div class="card p-2 my-1" style="width: auto;">
<h3>About me</h3>
<img src="https://marcusferl.de/wp-content/uploads/2021/01/edititsme.png" alt="" class="card-img-bottom">
</div>
</a>

View File

@ -4,7 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { AboutMeComponent } from './about-me/about-me.component';
import { AboutMeComponent } from './cards/about-me/about-me.component';
import { CardsComponent } from './cards/cards.component';
import { AndroidAppsComponent } from './cards/android-apps/android-apps.component';
import { CsharpComponent } from './cards/csharp/csharp.component';

View File

@ -15,3 +15,9 @@
img {
height: fit-content;
}
button {
border-radius: 50%;
height: 50px;
width: 50px;
}

View File

@ -0,0 +1,16 @@
<div class="card p-2 my-1" style="width: auto;">
<div class="row">
<div class="col-sm-10">
<h2 class="card-title">About me</h2>
</div>
<div class="col-sm-1">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="currentColor"
class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
<path
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
</svg>
</div>
<hr>
</div>
<img src="https://marcusferl.de/wp-content/uploads/2021/01/edititsme.png" alt="" class="card-img-bottom">
</div>

View File

Before

Width:  |  Height:  |  Size: 2.9 MiB

After

Width:  |  Height:  |  Size: 2.9 MiB

View File

@ -1,7 +1,18 @@
<a href="https://marcusferl.de" class="custom-card">
<div class="card p-2 my-1" style="width: auto;">
<h3>Android Apps</h3>
<img src="https://marcusferl.de/wp-content/uploads/2022/12/android.png" alt="" class="card-img-bottom"
style="max-height: 720px;">
<div class="card p-2 my-1" style="width: auto;">
<div class="row">
<div class="col-sm-10">
<h2 class="card-title">Android Apps</h2>
</div>
<div class="col-sm-1">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="currentColor"
class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
<path
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
</svg>
</div>
<hr>
</div>
</a>
<img src="https://marcusferl.de/wp-content/uploads/2022/12/android.png" alt="" class="card-img-bottom"
style="max-height: 720px;">
</div>

View File

@ -1,9 +1,16 @@
<a href="#" class="custom-card">
<div class="card p-2 my-1 bg-danger" style="width: auto;">
<h5>C#</h5>
<div class="card p-2 my-1 bg-danger" style="width: auto;">
<div class="row">
<div class="col-sm-10">
<h2 class="card-title">C#</h2>
</div>
<div class="col-sm-1">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="currentColor"
class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
<path
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
</svg>
</div>
<hr>
<img src="https://marcusferl.de/wp-content/uploads/2022/12/pngegg.png" alt="" class="card-img-bottom">
</div>
</a>
<img src="https://marcusferl.de/wp-content/uploads/2022/12/pngegg.png" alt="" class="card-img-bottom">
</div>

View File

@ -1,9 +1,16 @@
<a href="#" class="custom-card">
<div class="card p-2 my-1 bg-danger" style="width: auto;">
<h5>Python</h5>
<div class="card p-2 my-1 bg-danger" style="width: auto;">
<div class="row">
<div class="col-sm-10">
<h2 class="card-title">Python</h2>
</div>
<div class="col-sm-1">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="currentColor"
class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
<path
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
</svg>
</div>
<hr>
<img src="https://marcusferl.de/wp-content/uploads/2022/12/python.png" alt="" class="card-img-bottom">
</div>
</a>
<img src="https://marcusferl.de/wp-content/uploads/2022/12/python.png" alt="" class="card-img-bottom">
</div>