diff --git a/index.html b/index.html index 0713992..e4ba4e6 100644 --- a/index.html +++ b/index.html @@ -90,17 +90,14 @@

Reimagining the Next Generation of App Store for Utility NFTs.

-
-
- -
-
+
+
+ +
+

Explore Possibilities
@@ -120,7 +117,8 @@

+

MyriadFlow offers individual digital marketplace where creators and organizations can buy, sell, and trade NFTs. Get your NFT @@ -156,7 +154,8 @@

+

Offering NFTs that change the concept, that is, Dynamic NFTs that provide dynamic features, changes in a DNFT smart contract are based on @@ -194,7 +193,8 @@

+

Experience both the physical and digital worlds with Myriadflow. Explore online shopping with in-store pickup or virtual reality games incorporating real-world objects. Make your NFT trading and transferring @@ -223,71 +223,71 @@

-

+

AIREX
(Augmented Interactive Reality Experiences)
- +

- -
+ +

Now offer Augmented Interactive Reality Experiences by creating modifiable single layer NFTs where users literally get to interact with it.


-

MyriadFlow makes it easier to launch AIREX integrating Chain-link VRF and algorithmic SDKs.

+

MyriadFlow makes it easier to launch AIREX integrating Chain-link VRF + and algorithmic SDKs.

-

- 3 Simple Steps
MyriadFlow + class="pt-14 m28:text-2xl text-3xl m48:text-4xl m28:font-extrabold text-center font-black lg:font-extrabold mb-20 sm:mb-24"> + You are three steps away!

-
-
-
-

- Choose NFT Experience -

-

- Select the NFT experience you would like to offer with options - ranging from NFT Store, Collection, Utilities (Rent, Lend, - Fraction, Access etc.), Physical Asset to NFT, - Subscriptions-as-NFT, Profile Picture Projects etc. -

-
-
-

- Select Authentication -

-

- Select Authentication Option for your users with options as Web3 - Authentication and Web2 login along with Custodial Wallet. -

-
-
-

- Configure Payment Options -

-

- Choose Blockchain Deployment & Payment Options ranging from - selecting Crypto (ETH, Matic, ONE, SOL, NEAR, ATOM) & Fiat (USD, - AED, INR) Integrated with Crypto On/Off Ramp Service. -

-
+ + +
+
+ +
Choose NFT Experience
+
Select the NFT experience you would like to offer + with options ranging from NFT Store, Collection, + Utilities (Rent, Lend, Fraction, Access etc.), + Physical Asset to NFT, Subscriptions-as-NFT, + Profile Picture Projects etc.
+
+ +
+ +
Select Authentication
+
Select Authentication Option for your users with + options as Web3 Authentication and Web2 + login along with Custodial Wallet.
+
+ +
+ +
Configure Payment + Options
+
Choose Blockchain Deployment & Payment Options + ranging from selecting Crypto(ETH, Matic, ONE, SOL, + NEAR, ATOM) & Fiat (USD, AED, INR) Integrated + with Crypto On/Off Ramp Service.
+
+
diff --git a/resources/Vector28.png b/resources/Vector28.png new file mode 100644 index 0000000..8eef283 Binary files /dev/null and b/resources/Vector28.png differ diff --git a/styles.css b/styles.css index 89b78f2..dfc3fb6 100644 --- a/styles.css +++ b/styles.css @@ -50,6 +50,124 @@ body { color: white; } +.image-margin { + margin: 20px; +} + +.size{ + width: 350px; /* Set the desired width */ + height: 350px; +} + +.text-container { + position: relative; +} + +.image-text2 { + position: absolute; + top: 50%; /* Position the text vertically in the middle of the container */ + left: 50%; /* Position the text horizontally in the middle of the container */ + transform: translate(-30%, -200%); /* Center the text precisely */ + padding: 10px; /* Adjust padding as needed */ + font-size: 18px; /* Adjust font size as needed */ + width: 80%; +} +.image-text5 { + position: absolute; + top: 50%; /* Position the text vertically in the middle of the container */ + left: 50%; /* Position the text horizontally in the middle of the container */ + transform: translate(-45%, -30%); /* Center the text precisely */ + padding: 10px; /* Adjust padding as needed */ + font-size: 18px; /* Adjust font size as needed */ + width: 20%; +} + +@media (max-width: 1000px) { + .image-container { + flex-direction: column; + position: relative; + } + .image-container img { + /* position: absolute; */ + top: 50%; + left: 50%; + transform: translate(0%, 0%); + max-width: 100%; + max-height: 100%; + } + .size{ + width: 100%; /* Set the desired width */ + height: 100%; + } + .image-margin { + margin: 10px; + } + .image-text5 { + position: absolute; + top: 50%; /* Position the text vertically in the middle of the container */ + left: 50%; /* Position the text horizontally in the middle of the container */ + transform: translate(-45%, -30%); /* Center the text precisely */ + padding: 10px; /* Adjust padding as needed */ + font-size: 18px; /* Adjust font size as needed */ + width: 100%; + } +} + +@media (max-width: 1000px) and (min-width: 500px) { + .image-container { + flex-direction: column; + position: relative; + } + .image-container img { + /* position: absolute; */ + top: 50%; + left: 50%; + transform: translate(30%, 0%); + max-width: 100%; + max-height: 100%; + } + .size{ + width: 60%; /* Set the desired width */ + height: 100%; + } + .image-margin { + margin: 10px; + } + .image-text2 { + position: absolute; + top: 50%; /* Position the text vertically in the middle of the container */ + left: 50%; /* Position the text horizontally in the middle of the container */ + transform: translate(-30%, -200%); /* Center the text precisely */ + padding: 10px; /* Adjust padding as needed */ + font-size: 18px; /* Adjust font size as needed */ + width: 60%; + } + .image-text5 { + position: absolute; + top: 50%; /* Position the text vertically in the middle of the container */ + left: 50%; /* Position the text horizontally in the middle of the container */ + transform: translate(-45%, -30%); /* Center the text precisely */ + padding: 10px; /* Adjust padding as needed */ + font-size: 18px; /* Adjust font size as needed */ + width: 50%; + } +} + +@media (min-width: 999px) { + .image-container { + flex-direction: row; + } + .image-text5 { + position: absolute; + top: 50%; /* Position the text vertically in the middle of the container */ + left: 50%; /* Position the text horizontally in the middle of the container */ + transform: translate(-45%, -30%); /* Center the text precisely */ + padding: 10px; /* Adjust padding as needed */ + font-size: 18px; /* Adjust font size as needed */ + width: 80%; + } +} + /* ! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com */ /*