cardheader

src/app/about-me/about-me.component.html

@@ -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>

src/app/app.module.ts

@@ -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';

src/app/cards/about-me/about-me.component.css

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

src/app/cards/about-me/about-me.component.html

@@ -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>

src/app/cards/android-apps/android-apps.component.html

@@ -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>
+    <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>
+
     <img src="https://marcusferl.de/wp-content/uploads/2022/12/android.png" alt="" class="card-img-bottom"
         style="max-height: 720px;">
 </div>
-</a>

src/app/cards/csharp/csharp.component.html

@@ -1,9 +1,16 @@
-<a href="#" class="custom-card">
 <div class="card p-2 my-1 bg-danger" style="width: auto;">
-
+    <div class="row">
-        <h5>C#</h5>
+        <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>
+    </div>
     <img src="https://marcusferl.de/wp-content/uploads/2022/12/pngegg.png" alt="" class="card-img-bottom">
 </div>
-
-</a>

src/app/cards/python/python.component.html

@@ -1,9 +1,16 @@
-<a href="#" class="custom-card">
 <div class="card p-2 my-1 bg-danger" style="width: auto;">
-
+    <div class="row">
-        <h5>Python</h5>
+        <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>
+    </div>
     <img src="https://marcusferl.de/wp-content/uploads/2022/12/python.png" alt="" class="card-img-bottom">
 </div>
-
-</a>