Merge pull request #36 from google/social-link-colab-tutorial

social-link-colab-tutorial

Author: lavinigam-gcp

docs/get-started/tutorial.md

@@ -1,6 +1,42 @@
 # Build Your First Intelligent Agent Team: A Progressive Weather Bot with ADK
 
-
+<!-- Optional outer container for overall padding/spacing -->
+<div style="padding: 10px 0;">
+
+  <!-- Line 1: Open in Colab -->
+  <!-- This div ensures the link takes up its own line and adds space below -->
+  <div style="margin-bottom: 10px;">
+    <a href="https://colab.research.google.com/github/google/adk-docs/blob/main/examples/python/notebooks/adk_tutorial.ipynb" target="_blank" style="display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: #4285F4;">
+      <img width="32px" src="https://www.gstatic.com/pantheon/images/bigquery/welcome_page/colab-logo.svg" alt="Google Colaboratory logo">
+      <span>Open in Colab</span>
+    </a>
+  </div>
+
+  <!-- Line 2: Share Links -->
+  <!-- This div acts as a flex container for the "Share to" text and icons -->
+  <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
+    <!-- Share Text -->
+    <span style="font-weight: bold;">Share to:</span>
+
+    <!-- Social Media Links -->
+    <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A//github.com/google/adk-docs/blob/main/examples/python/notebooks/adk_tutorial.ipynb" target="_blank" title="Share on LinkedIn">
+      <img width="20px" src="https://upload.wikimedia.org/wikipedia/commons/8/81/LinkedIn_icon.svg" alt="LinkedIn logo" style="vertical-align: middle;">
+    </a>
+    <a href="https://bsky.app/intent/compose?text=https%3A//github.com/google/adk-docs/blob/main/examples/python/notebooks/adk_tutorial.ipynb" target="_blank" title="Share on Bluesky">
+      <img width="20px" src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Bluesky_Logo.svg" alt="Bluesky logo" style="vertical-align: middle;">
+    </a>
+    <a href="https://twitter.com/intent/tweet?url=https%3A//github.com/google/adk-docs/blob/main/examples/python/notebooks/adk_tutorial.ipynb" target="_blank" title="Share on X (Twitter)">
+      <img width="20px" src="https://upload.wikimedia.org/wikipedia/commons/5/5a/X_icon_2.svg" alt="X logo" style="vertical-align: middle;">
+    </a>
+    <a href="https://reddit.com/submit?url=https%3A//github.com/google/adk-docs/blob/main/examples/python/notebooks/adk_tutorial.ipynb" target="_blank" title="Share on Reddit">
+      <img width="20px" src="https://redditinc.com/hubfs/Reddit%20Inc/Brand/Reddit_Logo.png" alt="Reddit logo" style="vertical-align: middle;">
+    </a>
+    <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//github.com/google/adk-docs/blob/main/examples/python/notebooks/adk_tutorial.ipynb" target="_blank" title="Share on Facebook">
+      <img width="20px" src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" alt="Facebook logo" style="vertical-align: middle;">
+    </a>
+  </div>
+
+</div>
 This tutorial extends from the [Quickstart example](https://google.github.io/adk-docs/get-started/quickstart/) for [Agent Development Kit](https://google.github.io/adk-docs/get-started/). Now, you're ready to dive deeper and construct a more sophisticated, **multi-agent system**.
 
 We'll embark on building a **Weather Bot agent team**, progressively layering advanced features onto a simple foundation. Starting with a single agent that can look up weather, we will incrementally add capabilities like: