Modify Design Cards (#5512)

* modified cards * cards for videos * card size * added badges * modified badges * minor edits badges * edited video page * edit vault page * edit dashboard page * edit delegation dashboard * edit NFTs * edit scams * edit opengov * edit DOT page * edits account guides * edit bounty guides * final edits * modified cards + removed badges * Update docs/general/governance-apps.md Co-authored-by: Radha <[email protected]> * Update docs/general/scams.md Co-authored-by: Radha <[email protected]> * Update docs/general/staking-apps.md Co-authored-by: Radha <[email protected]> * Update docs/general/polkadot-vault.md Co-authored-by: Radha <[email protected]> * edits to all cards --------- Co-authored-by: Radha <[email protected]>
w3f · Jan 16, 2024 · e283905 · e283905
1 parent 059b5ff
commit e283905
Show file tree

Hide file tree

Showing 16 changed files with 406 additions and 264 deletions.
diff --git a/docs/general/getting-started.md b/docs/general/getting-started.md
@@ -26,92 +26,86 @@ The Wiki has three main sections:
 
 ## Interact with Polkadot
 
-<tr class="cards-container">
-  <td>
-    <a class="guide-link" href="../docs/learn-accounts">
-      <img src="/img/polkadot-guide/Account.jpg" alt="Drawing" width="250" height="150"/>
-        <div class="cards-body">
-            <h5 class="cards-title">Accounts</h5>
-        </div>
+<div className="row">
+  <div className="col text--center">
+    <a href="../docs/learn-accounts">
+      <img src="/img/polkadot-guide/Account.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-  <td>
-    <a class="guide-link" href="../docs/learn-transactions">
-      <img src="/img/polkadot-guide/Transfer.jpg" alt="Drawing" width="250" height="150"/>
-        <div class="cards-body">
-            <h5 class="cards-title">Transactions</h5>
-        </div>
+    <p>
+      <a href="../docs/learn-accounts">Accounts</a>
+    </p>
+  </div>
+  <div className="col text--center">
+    <a href="../docs/learn-transactions">
+      <img src="/img/polkadot-guide/Transfer.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-  <td>
-    <a class="guide-link" href="../docs/learn-staking">
-      <img class="guide-image" src="/img/polkadot-guide/Stake.jpg" alt="Drawing" width="250" height="150" />
-              <div class="cards-body">
-                  <h5 class="cards-title">Staking</h5>
-              </div>
+    <p>
+      <a href="../docs/learn-transactions">Transactions</a>
+    </p>
+  </div>
+  <div className="col text--center">
+    <a href="../docs/learn-staking">
+      <img src="/img/polkadot-guide/Stake.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-</tr>
-
-<br />
-
-<tr class="cards-container">
-<td>
-    <a class="guide-link" href="../docs/learn-polkadot-opengov">  
-      <img class="guide-image" src="/img/polkadot-guide/Council.jpg" alt="Drawing" width="250" height="150"/>
-              <div class="cards-body">
-                  <h5 class="cards-title">Polkadot OpenGov</h5>
-              </div>
+    <p>
+      <a href="../docs/learn-staking">Staking</a>
+    </p>
+  </div>
+</div>
+
+<div className="row">
+  <div className="col text--center">
+    <a href="../docs/learn-polkadot-opengov">
+      <img src="/img/polkadot-guide/Council.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-  <td>
-    <a class="guide-link" href="../docs/learn-proxies">
-      <img class="guide-image" src="/img/polkadot-guide/Proxy.jpg" alt="Drawing" width="250" height="150"/>
-              <div class="cards-body">
-                  <h5 class="cards-title">Proxy Accounts</h5>
-              </div>
+    <p>
+      <a href="../docs/learn-polkadot-opengov">Polkadot OpenGov</a>
+    </p>
+  </div>
+  <div className="col text--center">
+    <a href="../docs/learn-proxies">
+      <img src="/img/polkadot-guide/Proxy.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-  <td>
-    <a class="guide-link" href="../docs/learn-identity">
-      <img class="guide-image" src="/img/polkadot-guide/Identity.jpg" alt="Drawing" width="250" height="150"/>
-              <div class="cards-body">
-                 <h5 class="cards-title">Account Identity</h5>
-              </div>
+    <p>
+      <a href="../docs/learn-proxies">Proxy Accounts</a>
+    </p>
+  </div>
+  <div className="col text--center">
+    <a href="../docs/learn-identity">
+      <img src="/img/polkadot-guide/Identity.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-</tr>
-
-<br />
-
-<tr class="cards-container">
-  <td>
-    <a class="guide-link" href="../docs/learn-parachains">  
-      <img class="guide-image" src="/img/polkadot-guide/Parachain.jpg" alt="Drawing" width="250" height="150"/>
-              <div class="cards-body">
-                  <h5 class="cards-title">Parachains</h5>
-              </div>
+    <p>
+      <a href="../docs/learn-identity">Account Identity</a>
+    </p>
+  </div>
+</div>
+
+<div className="row">
+  <div className="col text--center">
+    <a href="../docs/learn-parachains">
+      <img src="/img/polkadot-guide/Parachain.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-  <td>
-    <a class="guide-link" href="../docs/learn-bridges">  
-      <img class="guide-image" src="/img/polkadot-guide/Bridges.jpg" alt="Drawing" width="250" height="150"/>
-              <div class="cards-body">
-                  <h5 class="cards-title">Bridges</h5>
-              </div>
+    <p>
+      <a href="../docs/learn-parachains">Parachains</a>
+    </p>
+  </div>
+  <div className="col text--center">
+    <a href="../docs/learn-bridges">
+      <img src="/img/polkadot-guide/Bridges.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-  <td>
-  <a class="guide-link" href="../docs/ambassadors">  
-    <img class="guide-image" src="/img/polkadot-guide/Ambassadors.jpg" alt="Drawing" width="250" height="150"/>
-            <div class="cards-body">
-                <h5 class="cards-title">Become an Ambassador</h5>
-            </div>
-  </a>
-  </td>
-</tr>
-
-<br />
+    <p>
+      <a href="../docs/learn-bridges">Bridges</a>
+    </p>
+  </div>
+  <div className="col text--center">
+    <a href="../docs/ambassadors">
+      <img src="/img/polkadot-guide/Ambassadors.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      <a href="../docs/ambassadors">Become an Ambassador</a>
+    </p>
+  </div>
+</div>
 
 ## What is Polkadot?
 
@@ -133,11 +127,24 @@ specific to their use cases, and for those applications to communicate securely
 other value proposition. The trustless cooperation between applications is what makes Polkadot an
 ideal ecosystem to build a [web3 future](./web3-and-polkadot.md).
 
-See the videos below to know more about Polkadot.
-
-[![Polkadot](https://img.youtube.com/vi/_-k0xkooSlA/0.jpg)](https://www.youtube.com/watch?v=_-k0xkooSlA)
-
-[![Introduction to Polkadot](https://img.youtube.com/vi/BQ60bTU1bPg/0.jpg)](https://www.youtube.com/watch?v=BQ60bTU1bPg)
+<div className="row">
+  <div className="col text--center">
+    <a href="https://www.youtube.com/watch?v=_-k0xkooSlA">
+      <img src="https://img.youtube.com/vi/_-k0xkooSlA/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      <a href="https://www.youtube.com/watch?v=_-k0xkooSlA">Polkadot: Are You Ready to Start Building?</a>
+    </p>
+  </div>
+  <div className="col text--center">
+    <a href="https://www.youtube.com/watch?v=BQ60bTU1bPg">
+      <img src="https://img.youtube.com/vi/BQ60bTU1bPg/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      <a href="https://www.youtube.com/watch?v=BQ60bTU1bPg">What is Polkadot?</a>
+    </p>
+  </div>
+</div>
 
 ## What can I do with my DOT?
 

diff --git a/docs/general/governance-apps.md b/docs/general/governance-apps.md
@@ -32,7 +32,16 @@ To make OpenGov multi-role delegation easy and intuitive,
 displays the list of delegates and their details. The video tutorial below walks through the
 features of the Delegation Dashboard and shows how to perform multi-role delegation.
 
-[![Delegation Dashboard Tutorial](https://img.youtube.com/vi/RapBYZc5ZPo/0.jpg)](https://www.youtube.com/watch?v=RapBYZc5ZPo)
+<div className="row">
+  <div className="col text--center">
+    <a href="https://www.youtube.com/watch?v=RapBYZc5ZPo">
+      <img src="https://img.youtube.com/vi/RapBYZc5ZPo/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      <a href="https://www.youtube.com/watch?v=RapBYZc5ZPo">Delegation Dashboard Tutorial</a>
+    </p>
+  </div>
+</div>
 
 For detailed instructions on how to delegate your voting power using dashboard, check
 [this support guide.](https://support.polkadot.network/support/solutions/articles/65000184123-polkadot-opengov-how-to-delegate-your-voting-power).

diff --git a/docs/general/polkadot-vault.md b/docs/general/polkadot-vault.md
@@ -32,7 +32,16 @@ Vault app.
 
 :::
 
-[![Polkadot Vault Tutorial](https://img.youtube.com/vi/IG_RGLsb2g0/0.jpg)](https://www.youtube.com/watch?v=IG_RGLsb2g0)
+<div className="row">
+  <div className="col text--center">
+    <a href="https://www.youtube.com/watch?v=IG_RGLsb2g0">
+      <img src="https://img.youtube.com/vi/IG_RGLsb2g0/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      <a href="https://www.youtube.com/watch?v=IG_RGLsb2g0">How to Use Polkadot Vault</a>
+    </p>
+  </div>
+</div>
 
 [Polkadot Vault](https://www.parity.io/technologies/signer) (formerly Parity Signer) is a cold
 storage solution that allows you to use a phone in airplane mode as an air-gapped wallet. The Vault

diff --git a/docs/general/scams.md b/docs/general/scams.md
@@ -19,7 +19,16 @@ with anyone, they can access your account, including your funds. This informatio
 for hackers and malicious actors. Check out the wiki doc on
 [how to recognize scams](../general/scams.md).
 
-[![Account Creation Tutorial](https://img.youtube.com/vi/ARsdXZycJAg/0.jpg)](https://www.youtube.com/watch?v=ARsdXZycJAg)
+<div className="row">
+  <div className="col text--center">
+    <a href="https://www.youtube.com/watch?v=ARsdXZycJAg">
+      <img src="https://img.youtube.com/vi/ARsdXZycJAg/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      <a href="https://www.youtube.com/watch?v=ARsdXZycJAg">Stay Safe in Polkadot</a>
+    </p>
+  </div>
+</div>
 
 :::info
 

diff --git a/docs/general/staking-apps.md b/docs/general/staking-apps.md
@@ -39,54 +39,51 @@ You can find more information about the Polkadot staking dashboard on the dedica
 
 Below a list of video tutorial about the Polkadot Staking Dashboard.
 
-<tr class="cards-container">
-  <td>
-    <a class="guide-link" href="https://youtu.be/F59N3YKYCRs?feature=shared">  
-      <img class="guide-image" src="https://img.youtube.com/vi/F59N3YKYCRs/0.jpg" alt="Drawing" width="250" height="150"/>
-              <div class="cards-body">
-                  <h5 class="cards-title">Nominate</h5>
-              </div>
+<div className="row">
+  <div className="col text--center">
+    <a href="https://youtu.be/F59N3YKYCRs?feature=shared">
+      <img src="https://img.youtube.com/vi/F59N3YKYCRs/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-  <td>
-    <a class="guide-link" href="https://youtu.be/dDIG7QAApig?feature=shared">  
-      <img class="guide-image" src="https://img.youtube.com/vi/dDIG7QAApig/0.jpg" alt="Drawing" width="250" height="150"/>
-              <div class="cards-body">
-                  <h5 class="cards-title">Join a Nomination Pool</h5>
-              </div>
+    <p>
+      <a href="https://youtu.be/F59N3YKYCRs?feature=shared">Stake your DOT</a>
+    </p>
+  </div>
+  <div className="col text--center">
+    <a href="https://youtu.be/dDIG7QAApig?feature=shared">
+      <img src="https://img.youtube.com/vi/dDIG7QAApig/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-  <td>
-  <a class="guide-link" href="https://youtu.be/hvXLc4H7rA4?feature=shared">  
-    <img class="guide-image" src="https://img.youtube.com/vi/hvXLc4H7rA4/0.jpg" alt="Drawing" width="250" height="150"/>
-            <div class="cards-body">
-                <h5 class="cards-title">Staking Dashboard Walkthrough</h5>
-            </div>
-  </a>
-  </td>
-</tr>
-
-<br />
-
-<tr class="cards-container">
-  <td>
-    <a class="guide-link" href="https://youtu.be/58pIe8tt2o4?feature=shared">  
-      <img class="guide-image" src="https://img.youtube.com/vi/58pIe8tt2o4/0.jpg" alt="Drawing" width="250" height="150"/>
-              <div class="cards-body">
-                  <h5 class="cards-title">After Staking</h5>
-              </div>
+    <p>
+      <a href="https://youtu.be/dDIG7QAApig?feature=shared">Join a Nomination Pool</a>
+    </p>
+  </div>
+  <div className="col text--center">
+    <a href="https://youtu.be/hvXLc4H7rA4?feature=shared">
+      <img src="https://img.youtube.com/vi/hvXLc4H7rA4/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-  <td>
-    <a class="guide-link" href="https://youtu.be/aTFWhwy_Mxg?feature=shared">  
-      <img class="guide-image" src="https://img.youtube.com/vi/aTFWhwy_Mxg/0.jpg" alt="Drawing" width="250" height="150"/>
-              <div class="cards-body">
-                  <h5 class="cards-title">Create, Manage & Destroy Pools</h5>
-              </div>
+    <p>
+      <a href="https://youtu.be/hvXLc4H7rA4?feature=shared">Staking Dashboard Walkthrough</a>
+    </p>
+  </div>
+</div>
+
+<div className="row">
+  <div className="col text--center">
+    <a href="https://youtu.be/58pIe8tt2o4?feature=shared">
+      <img src="https://img.youtube.com/vi/58pIe8tt2o4/0.jpg" width="300" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
     </a>
-  </td>
-
-</tr>
+    <p>
+      <a href="https://youtu.be/58pIe8tt2o4?feature=shared">After Staking</a>
+    </p>
+  </div>
+  <div className="col text--center">
+    <a href="https://youtu.be/aTFWhwy_Mxg?feature=shared">
+      <img src="https://img.youtube.com/vi/aTFWhwy_Mxg/0.jpg" width="300" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      <a href="https://youtu.be/aTFWhwy_Mxg?feature=shared">Create, Manage & Destroy Pools</a>
+    </p>
+  </div>
+</div>
 
 ## Sub.ID
 

diff --git a/docs/learn/learn-DOT.md b/docs/learn/learn-DOT.md
@@ -157,7 +157,16 @@ Another way is to use our web-based
 You can also earn WNDs as rewards by [becoming a validator](learn-validator.md) on Westend network.
 Watch the video below on how to get started on Westend.
 
-[![Testing Polkadot features on Westend](https://img.youtube.com/vi/0ji0ccZyb3k/0.jpg)](https://www.youtube.com/watch?v=0ji0ccZyb3k)
+<div className="row">
+  <div className="col text--center">
+    <a href="https://www.youtube.com/watch?v=0ji0ccZyb3k">
+      <img src="https://img.youtube.com/vi/0ji0ccZyb3k/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      <a href="https://www.youtube.com/watch?v=0ji0ccZyb3k">Testing Polkadot features on Westend</a>
+    </p>
+  </div>
+</div>
 
 | Unit            | Decimal Places | Conversion to Planck   | Conversion to WND  |
 | --------------- | -------------- | ---------------------- | ------------------ |

diff --git a/docs/learn/learn-architecture.md b/docs/learn/learn-architecture.md
@@ -124,4 +124,13 @@ For a video overview of the architecture of
 {{ polkadot: Polkadot :polkadot }}{{ kusama: Kusama :kusama }} watch the video below for the
 whiteboard interview with W3F researcher Alistair Stewart:
 
-[![Architecture Overview](https://img.youtube.com/vi/xBfC6uTjvbM/0.jpg)](https://www.youtube.com/watch?v=xBfC6uTjvbM)
+<div className="row">
+  <div className="col text--center">
+    <a href="https://www.youtube.com/watch?v=xBfC6uTjvbM">
+      <img src="https://img.youtube.com/vi/xBfC6uTjvbM/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      <a href="https://www.youtube.com/watch?v=xBfC6uTjvbM">Architecture Overview</a>
+    </p>
+  </div>
+</div>
diff --git a/docs/learn/learn-auction.md b/docs/learn/learn-auction.md
@@ -26,7 +26,16 @@ The parachain slots will be leased according to an unpermissioned
 improving security while operating on a blockchain. See [Rationale](#rationale) for additional
 details.
 
-[![A Beginner's guide to Parachain Slot Auctions](https://img.youtube.com/vi/i5-Rw2Sf7-w/0.jpg)](https://youtu.be/i5-Rw2Sf7-w)
+<div className="row">
+  <div className="col text--center">
+    <a href="https://youtu.be/i5-Rw2Sf7-w">
+      <img src="https://img.youtube.com/vi/i5-Rw2Sf7-w/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      <a href="https://youtu.be/i5-Rw2Sf7-w">A Beginner's guide to Parachain Slot Auctions</a>
+    </p>
+  </div>
+</div>
 
 ## Auction Schedule