-
-
- Apps Wallet (hosted)
-A wallet built on the polkadot-js stack. This version is updated alongside any changes to the code and always has the latest features.
- -
-
+ 
+
Apps Wallet (IPFS)
-An IPFS version of the polkadot-js wallet. This version is updated weekly but fits closer with the Web3 vision of decentralization.
- + +
+
+ 
-
+ 
+
+ Launch Polkadot
+ Developer Interface
+
-
-
+
+
+
+
+
Extension
-A browser-based vault for management of your account keys. It is meant to be used alongside wallets such as the apps UI.
- + + + +Explore Polkadot with user-friendly wallets.
+Access the Polkadot Ecosystem through these easy to use wallets.
+
+
For desktop
+
+
+
+
-
+ 
+
+
+
+
+
+
+ 
+
+ Download
+
+
+
+
+ Download
+
+
+
+ SubWallet
+
+
+ Mobile app
+ Web extension
+
+
+ 
+
+
+
+ 
+
+ Download
+
+
+
+
+ Download
+
+
+
+ Talisman
+
+
+ Web extension
+
+
-
+ Phishing
-Community driven lists of urls and addresses of dishonest operators. Used ecosystem wide in wallets and extensions.
- +
+
- For mobile
+
+
+
+
+ 
+
+
+
+ 
+ Download
+
+
+ Download
+
+
+ Nova Wallet
+
+
+ Mobile app
+
+
-
-
+
Documentation
-Developer documentation for all (most?) of the libraries under the polkadot-js umbrella. If you want to build, this is where to start.
- + + + +
+
- For developers
+
+
- Polkadot Developer Tools
+Build, Deploy, and Interact with the Polkadot Ecosystem
-
- code
-The code for everything we do. API, utilities, crypto, tools, user-facing interfaces and documentation.
- + +
+
+
+ 
+
+
+
+
+
+
+ 
+
+ Download
+
+
+
+
+ Download
+
+
+
+ Polkadot Developer
+
+
+ Polkadot Developer
+ Signer
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+ Launch
+
+
+
+
+ Launch
+
+
+
+ Polkadot Developer
+
+
+ Polkadot Developer
+ Interface
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Docs
+ + LINK + ++ Developer documentation for libraries under the polkadot-js + umbrella. If you want to build, this is where to start. +
+
+ 
+
+
+
+
+
+
+
+
+ Code
+ + LINK + ++ API, utilities, crypto, tools, user-facing interfaces and + documentation. +
+
+ 
+
+
+
+
+
+ Phishing
+ + LINK + ++ Community driven lists of urls and addresses of dishonest + operators. Used ecosystem wide in wallets and extensions. +
+
-
- 
-
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a0e48ad
--- /dev/null
+++ b/style.css
@@ -0,0 +1,413 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+@font-face {
+ font-family: "Unbounded";
+ src: url("Unbounded/Unbounded-VariableFont_wght.ttf");
+}
+
+@font-face {
+ font-family: "Manrope";
+ src: url("Manrope/Manrope-VariableFont_wght.ttf");
+}
+
+:root {
+ --primary: #000000e5;
+ --secondary: #e0195d;
+ --background: #e5e7eb;
+ --info: #fed204;
+
+ font-family: "Unbounded";
+ font-weight: 300;
+}
+
+body {
+ background: url("./assets/background_top.svg") no-repeat top/contain,
+ url("./assets/background_bottom.svg") no-repeat bottom/contain;
+ padding: 2rem 1rem;
+ max-width: 70vw;
+ background-color: var(--background);
+ color: var(--primary);
+ margin-inline: auto;
+}
+
+/* Header Styles */
+.headerWrapper {
+ display: flex;
+ align-items: start;
+ justify-content: space-between;
+ position: relative;
+}
+
+.header__launch {
+ position: absolute;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ background: #ffffff;
+ border: 1px solid var(--background);
+ color: var(--primary);
+ padding: 0.6rem 0.8rem 0.6rem 1rem;
+ overflow: hidden;
+ height: 72px;
+ font-weight: 400;
+ cursor: pointer;
+ border-radius: 35px;
+ transition: all 0.2s ease-in-out;
+}
+
+.header__launch:hover {
+ height: 285px;
+}
+
+.header__launch__title {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 7rem;
+}
+
+.header__launch__title {
+ padding-left: 0.5rem;
+}
+
+/* Hero section styles */
+.hero {
+ display: flex;
+ flex-direction: column;
+ max-width: 700px;
+ margin-block: 12rem 10rem;
+ color: var(--primary);
+}
+
+.hero h2 {
+ font-size: 50px;
+ font-weight: 400;
+ letter-spacing: -2px;
+ line-height: 120%;
+}
+
+.hero p {
+ font-size: 18px;
+ font-family: Manrope;
+ font-weight: 400;
+ color: var(--primary);
+ line-height: 250%;
+ color: #000000b2;
+}
+
+/* Info Badge */
+.badge {
+ background-color: var(--info);
+ border-radius: 24px;
+ padding: 8px 12px;
+ max-width: fit-content;
+ font-family: Manrope;
+ font-weight: 500;
+ color: #1a1a1a;
+}
+
+/* Cards styles */
+.cardWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 3rem;
+}
+
+.desktop__extensions,
+.mobile__extensions {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.card__items {
+ width: 100%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+}
+
+.card__item {
+ display: flex;
+ flex-direction: column;
+ border-radius: 16px;
+ background-color: #ffffff;
+ border: 1px solid gainsboro;
+ gap: 1rem;
+ padding: 0.5rem;
+ overflow: hidden;
+}
+
+.card__item > img {
+ object-fit: cover;
+}
+
+.card__item:hover,
+.chip__item:hover {
+ .extension__cta,
+ .chip__cta {
+ background-color: var(--secondary);
+ }
+ .card__info h2,
+ .chip__info h2 {
+ color: var(--secondary);
+ }
+}
+
+.card__item > div {
+ padding: 0.6rem 1rem 1rem 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.card__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.extension__cta,
+.chip__cta {
+ text-decoration: none;
+ outline: none;
+ border: none;
+ font-family: Unbounded;
+ text-transform: uppercase;
+ background: #000000;
+ border-radius: 8px;
+ color: var(--background);
+ padding: 0.4rem 1.2rem;
+ cursor: pointer;
+ transition: background-color 0.1s ease-in;
+}
+
+.card__info {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.card__info h2 {
+ font-family: Unbounded;
+ font-weight: 400;
+ font-size: 32px;
+ line-height: 130%;
+ letter-spacing: -0.5px;
+ transition: color 0.1s ease-in;
+}
+
+.card__info .extension__badges {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.extension__badge {
+ background: #0000001a;
+ border-radius: 32px;
+ padding: 4px 12px;
+ max-width: fit-content;
+ font-size: 15px;
+ line-height: 18px;
+ font-weight: 300;
+ color: #1a1a1a;
+ text-transform: uppercase;
+}
+
+/* Developer tools */
+.developerTools {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ margin-top: 8rem;
+}
+
+.developerTools__hero h2 {
+ font-family: Unbounded;
+ font-weight: 400;
+ font-size: 50px;
+ line-height: 120%;
+ letter-spacing: -2px;
+}
+
+.developerTools__hero p {
+ font-family: Manrope;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 150%;
+ letter-spacing: 0px;
+ color: #000000b2;
+}
+
+/* Chip Item */
+.chip__item {
+ display: flex;
+ gap: 1rem;
+ border-radius: 16px;
+ background-color: #ffffff;
+ border: 1px solid gainsboro;
+ padding: 1rem 1.5rem;
+}
+
+.chip__item img {
+ width: 4rem;
+ height: 4rem;
+}
+
+.chip__info__wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 0.2rem;
+ width: 100%;
+}
+
+.chip__info__wrapper p {
+ font-family: Manrope;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 150%;
+ letter-spacing: 0px;
+ color: #000000b2;
+ max-width: 360px;
+}
+
+.chip__info {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.chip__info h2 {
+ font-family: Unbounded;
+ font-weight: 400;
+ font-size: 28px;
+ line-height: 130%;
+ letter-spacing: -0.5px;
+}
+
+.chip__info p {
+ font-family: Manrope;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 150%;
+ letter-spacing: 0px;
+}
+
+/* Footer */
+footer {
+ background-color: var(--background);
+ border-radius: 32px;
+ border: 1px solid #e5e7eb;
+ backdrop-filter: blur(120px);
+ background: #ffffff99;
+ margin-block: 6rem 1rem;
+ padding: 0.7rem 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.footer__left {
+ display: flex;
+ align-items: center;
+ gap: 2rem;
+ font-family: Manrope;
+ font-weight: 600;
+ font-size: 14px;
+ letter-spacing: 0px;
+}
+
+.footer__left > section > span:first-child {
+ border: 1px solid var(--primary);
+ border-radius: 50%;
+ padding-inline: 0.25rem;
+ margin-right: 0.5rem;
+}
+
+.footer__right {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+}
+
+.footer__right a {
+ background-color: transparent;
+ text-decoration: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 40px;
+ height: 40px;
+ gap: 8px;
+ border-radius: 50%;
+ padding: 8px;
+}
+
+.footer__right a:hover {
+ background: #0000001a;
+}
+
+/* Responsive design */
+@media screen and (max-width: 1600px) {
+ body {
+ padding: 2rem 1rem;
+ max-width: 90vw;
+ }
+}
+
+@media screen and (max-width: 950px) {
+ .header__launch {
+ height: auto;
+ padding: 0;
+ }
+
+ .header__launch > img {
+ display: none;
+ }
+
+ .header__launch:hover {
+ height: auto;
+ }
+
+ .header__launch__title {
+ padding: 0.5rem;
+ }
+
+ .header__launch__title p {
+ display: none;
+ }
+
+ .hero p {
+ line-height: initial;
+ }
+
+ .card__items {
+ grid-template-columns: repeat(1, 1fr);
+ }
+}
+
+@media screen and (max-width: 600px) {
+ body {
+ padding: 2rem 0.5rem;
+ max-width: 98vw;
+ }
+
+ .cardWrapper {
+ flex-direction: column-reverse;
+ }
+
+ footer {
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .footer__left > section {
+ display: none;
+ }
+}
- polkadot{.js}
+
+
+
+