From 0df04c7b103c1030421c672a24eb530028af62ea Mon Sep 17 00:00:00 2001
From: marcusferl <marcusferl@web.de>
Date: Sun, 4 Dec 2022 19:34:55 +0100
Subject: [PATCH] basic cards done

---
 src/app/app.component.html                    | 17 +------------
 .../cards/about-me/about-me.component.html    | 19 ++++++++-------
 src/app/cards/angular/angular.component.css   | 20 ++++++++++++++++
 src/app/cards/angular/angular.component.html  | 19 ++++++++++++++-
 src/app/cards/cards.component.html            | 24 +++++++++++++++++++
 src/app/cards/java/java.component.css         | 20 ++++++++++++++++
 src/app/cards/java/java.component.html        | 19 ++++++++++++++-
 7 files changed, 112 insertions(+), 26 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4d4ab1e..0f911e9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,22 +5,7 @@
             <div class="container" style="height: 100px;"></div>
 
         </div>
-        <div class="row p-3">
-            <div class="col-sm-6 align-self-center">
-                <app-about-me></app-about-me>
-            </div>
-            <div class="col-sm-6">
-                <app-csharp></app-csharp>
-            </div>
-        </div>
-        <div class="row p-3">
-            <div class="col-sm-6 align-self-center">
-                <app-android-apps></app-android-apps>
-            </div>
-            <div class="col-sm-6 align-self-center">
-                <app-python></app-python>
-            </div>
-        </div>
+        <app-cards></app-cards>
     </div>
 
 </div>
\ No newline at end of file
diff --git a/src/app/cards/about-me/about-me.component.html b/src/app/cards/about-me/about-me.component.html
index 29530b9..ef2e92a 100644
--- a/src/app/cards/about-me/about-me.component.html
+++ b/src/app/cards/about-me/about-me.component.html
@@ -1,15 +1,18 @@
 <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 class="col-2 mb-2">
+            <a href="https://marcusferl.de">
+                <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>
+            </a>
         </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 class="col-10 d-flex justify-content-end">
+            <h1>About me</h1>
         </div>
+
         <hr>
     </div>
     <img src="https://marcusferl.de/wp-content/uploads/2021/01/edititsme.png" alt="" class="card-img-bottom">
diff --git a/src/app/cards/angular/angular.component.css b/src/app/cards/angular/angular.component.css
index e69de29..6520679 100644
--- a/src/app/cards/angular/angular.component.css
+++ b/src/app/cards/angular/angular.component.css
@@ -0,0 +1,20 @@
+.card {
+    border-radius: 10px;
+
+    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+
+    cursor: pointer;
+
+    background: rgb(136, 136, 136);
+    background: radial-gradient(circle, rgba(136, 136, 136, 0.9472163865546218) 50%, rgba(255, 0, 0, 1) 100%);
+}
+
+.card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
+}
+
+img {
+    height: fit-content;
+}
\ No newline at end of file
diff --git a/src/app/cards/angular/angular.component.html b/src/app/cards/angular/angular.component.html
index f461532..b66ffe5 100644
--- a/src/app/cards/angular/angular.component.html
+++ b/src/app/cards/angular/angular.component.html
@@ -1 +1,18 @@
-<p>angular works!</p>
+<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>
+
+    <img src="https://marcusferl.de/wp-content/uploads/2022/12/angular.png" alt="" class="card-img-bottom"
+        style="max-height: 720px;">
+</div>
\ No newline at end of file
diff --git a/src/app/cards/cards.component.html b/src/app/cards/cards.component.html
index e69de29..f60f8a7 100644
--- a/src/app/cards/cards.component.html
+++ b/src/app/cards/cards.component.html
@@ -0,0 +1,24 @@
+<div class="row p-3">
+    <div class="col-sm-6 align-self-center">
+        <app-about-me></app-about-me>
+    </div>
+    <div class="col-sm-6">
+        <app-csharp></app-csharp>
+    </div>
+</div>
+<div class="row p-3">
+    <div class="col-sm-6 align-self-center">
+        <app-android-apps></app-android-apps>
+    </div>
+    <div class="col-sm-6 align-self-center">
+        <app-python></app-python>
+    </div>
+</div>
+<div class="row p-3">
+    <div class="col-sm-6 align-self-center">
+        <app-angular></app-angular>
+    </div>
+    <div class="col-sm-6 align-self-center">
+        <app-java></app-java>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/cards/java/java.component.css b/src/app/cards/java/java.component.css
index e69de29..1c71a55 100644
--- a/src/app/cards/java/java.component.css
+++ b/src/app/cards/java/java.component.css
@@ -0,0 +1,20 @@
+.card {
+    border-radius: 10px;
+
+    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+
+    cursor: pointer;
+
+    background: rgb(98, 115, 240);
+    background: radial-gradient(circle, rgba(98, 115, 240, 1) 0%, rgba(227, 121, 28, 1) 100%);
+}
+
+.card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
+}
+
+img {
+    height: fit-content;
+}
\ No newline at end of file
diff --git a/src/app/cards/java/java.component.html b/src/app/cards/java/java.component.html
index dd3853c..7db88aa 100644
--- a/src/app/cards/java/java.component.html
+++ b/src/app/cards/java/java.component.html
@@ -1 +1,18 @@
-<p>java works!</p>
+<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>
+
+    <img src="https://marcusferl.de/wp-content/uploads/2022/12/java.png" alt="" class="card-img-bottom"
+        style="max-height: 720px;">
+</div>
\ No newline at end of file