Layouts and Stacks

Author: Mithun

DesignCode/Assets.xcassets/Colors/backgroundShadow3.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "0.271",
+          "alpha" : "0.300",
+          "blue" : "0.788",
+          "green" : "0.235"
+        }
+      }
+    }
+  ]
+}

DesignCode/Assets.xcassets/Colors/backgroundShadow4.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "0.925",
+          "alpha" : "0.300",
+          "blue" : "0.482",
+          "green" : "0.494"
+        }
+      }
+    }
+  ]
+}

DesignCode/ContentView.swift

@@ -10,20 +10,42 @@ import SwiftUI
 
 struct ContentView: View {
    var body: some View {
-      VStack {
+      ZStack {
+
+         VStack {
+            Text("Card Back")
+         }
+         .frame(width: 300, height: 220.0)
+         .background(Color.blue)
+         .cornerRadius(10)
+         .shadow(radius: 20)
+         .offset(x: 0, y: -20)
+
          VStack {
-            Text("UI Design")
-               .font(.title)
-               .fontWeight(.bold)
-               .color(Color("accent"))
-               .padding(.top)
-            Text("Certificate")
-               .color(.white)
+            HStack {
+               VStack(alignment: .leading) {
+                  Text("UI Design")
+                     .font(.headline)
+                     .fontWeight(.bold)
+                     .color(Color("accent"))
+                     .padding(.top)
+                  Text("Certificate")
+                     .color(.white)
+               }
+               Spacer()
+               Image("Logo")
+                  .resizable()
+                  .frame(width: 30, height: 30)
+            }
+            .padding(.horizontal)
+            Spacer()
+            Image("Background")
          }
-         Image("Background")
+         .frame(width: 340.0, height: 220.0)
+         .background(Color.black)
+         .cornerRadius(10)
+         .shadow(radius: 20)
       }
-      .background(Color.black)
-      .cornerRadius(10)
    }
 }