In this video i'm going to permit you to present your individual personalized touchdown page for your nft mission at the side of a countdown timer and metamask integration we'll even deploy it without cost it's nice to have a touchdown page for your nft mission that you just can exercise it to allotment extra info for your mission like a avenue.
Blueprint or notifications as to when nfts are going to drop currently we're going to present this primary touchdown page that staunch makes exercise of html css and javascript you won't have to perceive any delight in frameworks this would possibly increasingly likely maybe maybe even have all of the linked hyperlinks to your socials discord server a countdown timer and a call to action we'll additionally combine meta disguise now this goes to.
Be an ongoing mission currently we're staunch going to position up the fundamentals so that we'll be willing so as to add more evolved efficiency in proceeding videos now one of the necessary things we're going to pause in future videos is we're going to verify to stare if a customer owns one in every of our nfts we're going to permit users to explain their nfts with a enjoyable animation give.
Entry to hidden pages on our set up of living to solely owners of our nfts and allow users to mint straight from our set up of living so gape for those aspects to be added very soon and verify the video description for any adjustments or updates i'm no longer going to have you apply along and write the code yourself even as you must be taught the system html css and javascript works i have videos.
On all of those matters so that you just can be taught more we're going to clone this touchdown page from one in every of my github repos there's a link within the description for the repo it's nft touchdown page at the present the repo is at version 1.0 if there are any newer versions verify the notes to stare what has changed so that you just can make exercise of this repo you would also tranquil fork it after which.
Clone it this requires that you just would even have a free github story so lunge forward and signal in even as you don't already have one after you've signed up from this repo up right here on the tip lawful you're going to stare a fork lunge forward and fork it after you've forked it click on on code after which let's reproduction this url now in vs code lunge over to the extensions tab and analysis for github.
Repositories you'll want to set up this extension after that above the arrange cog you'll stare story and make certain you're logged into your github story right here now let's lunge as much as the offer withhold a watch on tab and let's clone a repository we're going to paste in that url that we copied earlier buy out the set up of living the set up you must position it apart for your pc.
And then originate it and shut the getting started now to stare what the set up of living seems like we'll want to initiate a local server there's a large vs code extension that can pause this for us it's called dwell server let's lunge over to the extensions and let's analysis for dwell server and this is it lawful right here so that you just'll want to set up this after you've attach in that.
Let's originate up the index.html file and now at the backside you would also tranquil stare this lunge dwell button even as you don't stare that staunch lawful click on wherever within the story after which click on originate with dwell server now you would also tranquil stare the set up of living originate for your browser now there are a couple of things that we can pause to customize the set up of living we're going to initiate again with this index.html first.
We are able to vary the title of the rep set up of living lawful now it's position to codecats and this is what shows up within the browser tab so if i click on over right here that you just can stare my browser tab right here says codecats if we alter this to your nfts and lunge forward and set up that withhold a watch on s it's going to automatically change and.
Now it says your nft is right here next we have a bunch of icons these are going to level to up within the browser tab as successfully as meta disguise afterward so again we lunge over to our browser tab that you just can stare this cat with coronary heart eyes emoji so that you just would also tranquil potentially change that out and these are saved if we lunge over to our recordsdata we have photos after which x icon interior x.
Icon we have let me manufacture this a itsy-bitsy bit greater so we can read them we have the same image however a bunch of diverse sizes after which this set up of living net manifest a large set up of living that can relief you produce these photos is favicon.io this set up of living will relief you generate those photos from your individual personalized photos from text or from emojis.
It’ll generate all of the diverse sizes that you just wish after you've created those that you just can change them within the photos folder you would also tranquil change the total recordsdata along with your individual lawful next let's scroll down right here and we have our logo lawful right here we have this image this shows up on the left aspect of the header i'm staunch the usage of 1 in all the emoji icons as a.
Placeholder all lawful now as we scroll down right here next we have some hyperlinks and these are to our socials so this one goes to discord so that you just're going to want to change that along with your individual discord invite link the following one is twitter and the following one is openc.io to the codecats assortment so that you just must change these along with your individual now even as you don't have any.
Of those or you would even have diverse ones that you just can delete or reproduction the same code so as to add or buy hyperlinks so even as you don't have a twitter that you just can staunch spend this complete code block lawful right here and delete it or if as an alternative you would even have instagram uh that you just can change this with an instagram link you'll staunch want to vary this image right here to an instagram icon as we scroll.
Down next we have our countdown so this countdown timer the solely thing that it is essential to vary is this info date field and likewise you'll want to vary this to the yell time that you just wish the countdown timer to depend all of the system down to it's valuable that you just set up this in utc time so that it shows up the same for any individual it doesn’t topic what time zone they're in and.
When the timer gets to zero the timer will disappear from the set up of living the final half which which that you just can customize right here is the heading and the text for the decision to action allotment as successfully because the decision to action link and button text so that's this text right here all the strategy in which by the h1 this paragraph text after which i have a link to my discord again after which join the cat.
Immunity because the text that shows up lawful right here on the button so again as we alter this and we attach it apart we'll stare that it updates lawful right here in staunch time now for the colors and fonts let's end this html file we'll lunge over to our recordsdata let's originate up the vogue.css file and the very first thing you stare at the tip is we're importing a bunch of fonts from google.
Fonts so lawful right here that you just can stare that we're importing arvo we're importing poppins and roboto so even as you wished to vary these fonts you would pause that by going to fonts.google.com and likewise that you just can struggle by right here and buy a font that you just adore lunge forward and buy out the types that you just.
Love as many as you wish after which at the tip lawful scrutinize your chosen families you'll stare the total ones that you just've chosen and likewise you staunch want this import observation so lawful right here staunch buy out this import observation after which that you just can return into vs code delete the present import observation and paste for your personalized import observation even as you've.
Changed the import observation to diverse fonts you'll want to make certain you change out the font names right here in our global variables so lawful now my predominant font is poppins the secondary font is arvo and the font for any code snippets is roboto after which staunch below these font variables we stare our shade variables and so which which that you just can change any of.
These out so if i hover over this let's change this to successfully rather then blue let's lunge to let's change it to this green shade and repair it apart you'll stare that it automatically updates and we can stare this in staunch time if we want to vary our accent shade let's change this to i don't know this red.
Effect that and there it automatically updates all lawful next i want to level to you how the metamask integration works we have this button in our header it says join to meta disguise let's originate up our html file and we can stare that button right here join pockets after which at the very backside of our html file we're importing.
A few scripts this first script is importing our meta disguise onboarding bundle after which the 2nd one is referencing our app.js javascript file that we have in our recordsdata over right here app.js so let's originate up that one at the tip of this you're going to stare our countdown timer capabilities so let's lunge previous all of that and right here is our.
Metamask connection capabilities the very first thing that we're doing is we're developing a brand contemporary onboarding object after which we're getting get entry to to our onboarding button after which we're going to present a smooth checklist of accounts then we're going to verify to stare if meta disguise is attach in if it's no longer attach in then we're going to change the button to hiss set up.
Metamask and as soon as the customer clicks that it's going to then bring them to the browser's extension store to set up the metamask extension if it's already attach in then we're going to change the button to hiss join metamask that's what it says lawful now because i already have it attach in now as soon as the user.
Clicks the button then it's going to request for their permission to get entry to their accounts so i'm going to circulation forward and click on that join meta disguise that's going to request me pause i want to join with metamask gape the icon right here is the icon that i'm the usage of for my net set up of living so i'm going to circulation forward and allow this connection.
And join and so now we're linked so now we're going to change the button text to have this verify trace after which we're going to get the final four digits of the story quantity because it's truly prolonged we staunch want to buy the final four digits and repair them up right here staunch to level to the user that they are linked after which if we.
Gallop down a itsy-bitsy bit extra right here if the user adjustments to a extraordinary story in meta disguise then we'll change the button again now in this video this is all that we're gonna pause with metamask we're now willing to pause more evolved things now that we have the traffic metamask connection and we'll gape at those more evolved aspects in a future video very.
Quickly it would possibly well maybe maybe also already be released by the level you look this video so verify the cards and the description for added hyperlinks however next let's deploy this app so that it's dwell on the rep even as you've made any adjustments and hopefully you would even have you'll want to sync those adjustments along with your forked github repo so let me end these and if i’m going over right here to my offer.
Tab you'll stare that i've made two adjustments to be capable to commit these adjustments we'll want to kind a message in right here and likewise that you just can kind the leisure you wish staunch an extraordinarily temporary description of what you potentially did lunge to hiss updated uh text and colours then we'll click on the verify trace to commit it after which click on sync adjustments and now our.
Modifications had been pushed to github we're going to deploy our set up of living the usage of netlify which goes to join to github and withhold our set up of living updated for us as we manufacture adjustments so lunge forward and lunge to netlify.com and join a free story even as you haven't already that you just can stare i already have one other sites position up i have my codecats.xyz right here as successfully.
We're going so as to add a brand contemporary set up of living we're going to import from an present mission we're going to make exercise of github and now let's lunge forward and analysis for our repo so it changed into as soon as nft i'll staunch analysis for that even as you solely have one it'll staunch be there already so nft touchdown page after which scroll down and deploy the set up of living and easy as that now you're going to.
Gain a generic netlify url and it's going to be one thing humorous so mine is zealous knew 21b769 however it absolutely's now dwell on the rep now even as you must care for your individual domain name that you just can pause that for example mine is codecats.xyz even as you take care of a personalized domain name that you just can lunge into domain settings right here and.
Switch this to in actuality lunge to your personalized domain however that's entirely no longer necessary let's lunge forward and spend a gape at our set up of living staunch click on this image right here and our set up of living is dwell on the rep now to any extent extra whenever you manufacture any adjustments to your github repo the same system we did earlier than by committing and syncing the adjustments netlify goes to.
Robotically redeploy your set up of living and so it's steadily going to be updated however be searching for more videos for this mission like this video to support me out and subscribe even as you haven't already for more videos like this you.
