# [ADVANCED] BUILDING A COMPLEX WEBSITE WITH PHOTOSHOP AND WEBFLOW | METASTARTUP ## Метаданные - **Канал:** Varun Mayya - **YouTube:** https://www.youtube.com/watch?v=90h0ZuLfm68 - **Дата:** 31.12.2018 - **Длительность:** 1:10:52 - **Просмотры:** 7,652 ## Описание A lot of you have been asking for a complex website webflow guide so I made one. This will be a part of Metastartup, but I'm not numbering this episode yet. You will need to refer to my previous Webflow tutorial if you want to learn the basics. This isn't a tutorial, it's a walkthrough. You'll need to keep pausing and Googling stuff if you don't understand it - this is what makes a good designer/developer/entrepreneur. Being able to start out by understanding other people's work while using Google as a crutch to fill in knowledge gaps. ## Содержание ### [0:00](https://www.youtube.com/watch?v=90h0ZuLfm68) sup guys welcome back to another episode of meta startup you know we're gonna we've been doing the business section so far and you know we're on episode 17 but I'm gonna take a quick detour to teach you something a lot more complex in this video I'm actually going to be showing you how to build a complex website and you know I've been building a production grade website for one of our own investments called a loon which is a cap table management platform and for now you don't need to think about what that is but I'm going to be building that and showing you the entire process from you know how I take it from mock-ups calm to Photoshop to illustrator to using Envato elements to using web fluids it's going to be a very complex tutorial so if you don't understand something go back to my previous videos on web flow to kind of learn the basics so this video is gonna be for more advanced users and it's alright if you don't understand everything I will be doing a Q& A on this episode because it's just I'm building an entire website for a production website from scratch so I am going to make mistakes I'm not going to fully edit this video so you'll hear a lot of arms and butts and whatnot but you know I have a deadline and I want to achieve or hit that deadline as quickly as possible so I'm truly sorry for not being able to edit the entire video cool so I picked up this image from innovative elements and for those of you don't know what envato elements is it's this subscription-based you know free graphics and audio clip platform it's amazing everybody every entrepreneur even designers should own a subscription to this so I just went to jigsaw I mean inverter elements I look for the word jigsaw I click on 3d presidenta got this change the render to make sure it's a little forward-facing you know put it on here let me show you what I did I held the alt button down and just kept pressing you know down so it kept creating 3d layers obviously I'm going to undo all of this now but this is how I created the layer below this I'm gonna bring that layer back so I just want to give it a 3d effect because you know 3d is cool and what why not now I want to make sure that I have the image of a company here so I'm going to go back to invite oh elements I've actually already download something from elements you see it's there yep found it so this is on this traitor I'm going to copy this I'm going to bring it over Photoshop pixels that's right what I want to do is I want to map this directly onto this so I'm gonna use the distort tool again this is possibly one of the worst ways to do 3d in Photoshop but um I don't have options I don't want to go through cinema 4d which is another tool for tools is confusing as it is for somebody in the audience looking at this so let's just zoom in make sure we're aligned with this okay that's good okay this is good yes and this was okay this is perfect we don't have to be perfect because you know I'm right after this video I'm going to go and actually make it perfect what I'm going to do now is I'm actually going to select this which is everything apart from just that middle section I'm gonna invert it I'm going to cut out this piece and paste it again alright so cut this piece out there's a lot of rubbish around it which I'm not gonna clean right now but I want to make sure that this piece has its match I actually feel like I'm doing a jigsaw puzzle here how strange is that let's see just bring your inner shape I'm going to have to probably distort this as well because there's a lot of garbage around it you know it's not perfectly around that thing but that's okay we can work with it we don't have to be perfect we just want something that we can work with okay good what I'm gonna do actually is I'm just gonna cut this out put it back in so that we don't have too much garbage to deal with later I still some there are some artifacts around this I'm gonna do it now but you know it's just unnecessary delete back delete this as well okay so I'm just going to delete the this there to go back to the layer 3 put this in its part again we're gonna do some distortion here so ideally you're supposed to use layer masks for this but I'm in a hurry so maybe later cool so now that we've got all of this I'm just gonna bring the opacity of this layer back so in a typical video I'd name all of my layers but you nobody got time for that right so see I want something where the edges are clear this is good I'm gonna linear burn this too but I want to make sure that this layer we press control them just four curves I'm just gonna make a little brighter because whoops because otherwise it's gonna look terrible okay that looks good I'm gonna be changing the color on this to reflect this color you just take a slightly darker tone cool so this should be good enough I'm gonna take the entire thing just hold the entire thing around press ctrl e that merges the entire thing hold ctrl a ctrl c ctrl n opens a new layer sorry your new document just gonna put this here take this off save this right so we're gonna save this as jigsaw and let's go 3t hoping it's not too big or webflow now that we have that let's go back to mock-ups right so I want to create a website that looks like this and I'm using moq ups mock-ups comm for this is what I want the website would look like now this is a cap table management software and essentially means that it allows people to manage that equity the co-founder share transfers blah blah blah it's not necessary for you to know what this platform does right now and you know this is what I want the menu to look like I want this is what I want the heading to look like I want the image this chick's others we just created I want to be behind the heading but also on the left on have a trusted by section with you know all the different people that are or rather some fake companies right now I'm gonna have a heading I'm gonna have you know few images and then what those images mean like more like oh you know these are the features of our platform I want to show a case study I want to talk about two audiences so they're two kinds of people that will be using this platform this audience one this is audience too now I have something very important to say here typically in a company the designer does only one fraction of this right the web developer or the front-end guy or the front-end person does the other half but there's also the marketing person involved here all of this ad copy on the website the stuff that I've written lorem ipsum in that needs to be scripted by somebody right when you actually build a website and you put content there and that content needs to be easy to read it absorb it needs to get the point across and it needs to trigger a person to click the sign up button right that's our goal that's every businesses goal right to improve conversions and what I'm doing here is actually the job of a designer a developer and a market you're right and if you consider you know triggering somebody to press the signup button of sales role as well as a marketing role and you know I'll obviously talk a little more about this in future episodes of meta startup where I think that you know the sales and marketing roles are getting aligned or rather becoming the same thing I'm doing for roles as one person right now I know it sounds strange you know like a new concept to you but everybody in Avalon or at least you know once the core team at Avalon has started juggling roles about technology as well as sales and marketing right and with these sort of tools with mock-ups and web flow in Photoshop and just having mastery over those tools and having released a few products in the market it is possible for you to run a one-man show in the future right and this is what Avalon this is what gives Avalon its greatest strength speed right any other company right would take at least three to four months to build a website of the type that we want to build right now the reason that I'd be able to build it in an R or a couple of hours obviously maybe you know with some improvements maybe a day or two the reason for that is not because I'm able to do these things faster because of these tools I do have the experience but the advantage I have over all these companies is in those companies there is usually a three or four man team building this and there's a manager on top what I'm doing is putting all of those people into one person so I make my own decisions I don't have to go you know manager and tell him is this the right thing to do right should i redo this or sir do you like this I don't have to ask anybody questions and I don't have to coordinate with anybody else either I manage teams for a living and I know the biggest drawback in a team teams are obviously better than doing anything alone but the biggest drawback is the fact that communication is difficult right there's sometimes there's ego and politics which you know wouldn't happen in small teams but in a small team you have bigger issues like you know somebody does something but it's not in alignment with what the other person wanted or with what the manager wanted so all of that you know it takes if a regular team was doing this just those things going back and forth and you know somebody's not available at the time you want them that just ruins things right which is why other companies take a lot longer than Avalon to build something and Avalon we encourage one person to be able to do multiple different things and then pay that person top of market right that's what we believe in a person also gets a lot of ownership and doesn't have to deal with too much management so they feel empowered to do the things they do on a daily basis I encourage everybody to be able to learn or to try and learn all these skills right in this video I'm not just going to build the website in front of you I'm not just going to design it I'm also going to show you how to write the marketing copy for it cool now on to the website I'm going to open web flow I'm just going to log in do project and let's call this let's just the default template in the beginning it's just there's this default template that they have that I want it's called velocity let's call this a lumen which is the name of the project all right for those of you who aren't familiar with wet flow there's a basics of web flow tutorial that I put up take a look at it the flow is amazing it takes the time that I used to take like a few weeks to build a website now I do it in like a couple of hours maybe a day at maximum her flow allows you to do that I always seem to start with this template and then edit it around because it's just I like this template because it's so it's a basic template right cool so here's what I need to do right now I have this image here in Photoshop that I've created and saved I want to bring it on here I also know that I want to make my website primarily white colored and I know I want to make it look like this coming back right so let's avoid the navigation and stuff for now let's step into the hero section I'm going to start changing things around and obviously I'll I might be quiet during these periods but that doesn't mean that I'm disappeared right I'm just going to delete the default styling let's see let's make this white let's change this text to pink purple for now I'm going to ignore the navigation section I'm what I'm going to do is it inside the hero section I'm going to create a new ### [13:38](https://www.youtube.com/watch?v=90h0ZuLfm68&t=818s) create a new component called columns component called columns alright so I put in two columns what I'm going to do now is I'm going to move the entire section here into column two and so see ya put all in the column to come back to this in a bit there's a container here and I'm just going to delete this container we don't need it right now what I'm going to do to this column is I'm gonna give it some padding maybe 30 pixels on both sides and padding you know pushes things internally rather than externally watch my previous video to understand what all of this means Wow then this is went wrong but hey we'll fix it anyway cool so we have this much let's see we wanna replicate this we've got the headache so what I'm going to do is I'm just gonna move the heading to the left I move this to the left as well this is left alignment and I'm gonna float this to the left again you can't ally in a block this is a block a line a block to the left you have to float it to the left again my previous video has more information on how what that means so this is like a good basic to start with now I want to change a few fonts what I'm going to do is I'm going to go to where is that project settings the fonts and I'm going to upload a ### [15:09](https://www.youtube.com/watch?v=90h0ZuLfm68&t=909s) upload a few fonts to the fonts and I'm going to upload a few fonts let's see so this is a font I paid for a long time ago I'm just going to install it so as to speak it's called cero it's one of my favorite fonts it is right now it's just it's a font that's keeping me on my toes back in the day what I used to do especially when you know I wanted to use a paid font in a test project I always think it's okay to use a paid font and a test project wherever you're getting it from but you know the minute you put it online you should pay for it especially if it's a paid font otherwise its piracy but what I usually do is I look for the font name space github space or TT if you go to google and just sorry type font name space github space ODT you'll find somebody or the other who's put a font on there you will find somebody or the other who's put that font on up on github so you can just download it but that's illegal don't do it it's just what I used to do maybe ten years ago when I didn't know any better how you know whenever github came back or rather came out and I didn't know any better cool so I've uploaded all these fonts I'm going to go back to the designer and again I'm doing all this really fast it might scare some of you but hey if you do enough googling on the side and enough homework you'll get what I'm doing alright I'm back here I want to straightaway go up and use the serif font let's see Sarah and I want to use it when he's old version of it or a black version of it and I want to say get the complete picture now I don't want this to be all caps so I'm just gonna say don't annoy me get the complete picture full stop ah no Purple's the right font but I'm going to take this off this is font spacing it makes it look stupid we'll make this maybe 80 pixels I'm going to give it font height of 80 pixels as well it's on tight line height so I'm sorry I'm going to remove the learn more button and I'm gonna put some lorem ipsum text here if some driver again I'm gonna fix this I'm going to remove the letter spacing I'm gonna make sure it's okay for it to be small letters or rather regular case and I'm gonna make this maybe you know gray is fine now if Purple's the right color but should we go with purple or green let's see I see I know guys I like this color I really like this color you know what color this is but I like this color just gonna test that okay cool let me just try - one for a second here my ministry getting greedy good space okay this is bad really it's fine instead actually - to design is a difficult process and you just saw what that meant right there again gonna move this back - Sarah you know I tend to use the same font in a couple places then use a different font for the signup button so I'm going to use lotto and give it a black color change this to four now black can we look like a designer website I'm going to remove the random margin on the left remove that now to change states click on hover we don't want to be blue when people you know click on it let's make it light gray should be good enough so as you can see it becomes like gravy time I click on it okay so now that we've done that you know I wanna pull our image so I press the plus button I click on image I choose this image that we had in the jigsaw puzzle folder it's called jigsaw 3d let's hope it's doesn't override the size settings come on come on okay I'm not too happy how it looks right now but you know I'll obviously optimize it post this video but right now this is okay now I want this to overlap this at very simple way to do it is to first you know set this so inside this column will create a new division and now there's some advanced stuff but inside the column ### [20:14](https://www.youtube.com/watch?v=90h0ZuLfm68&t=1214s) put the image inside the div block make the division put the image inside the div block and give the div block a position of relative at the minute you do that you can give the image a position or of absolute now this is some strange behavior where you know something can be position: absolute and be referenced directly from these things that is be given you know an absolute position only if it's inside a relative container so yeah you know given it a position: absolute only because I gave the parent if a position: relative cool so images here we're gonna move it around I want to give it a right or maybe Tony sorry this is left he was right okay minus 200 is fine don't give this hero heading again this is you know this is going to need some work in the future but for now it's okay the colors don't match either but no we'll fix that a bit later okay this is starting to shape up now what I'm gonna do is I am going to go back to our mood board or whatever and I want to say free sign up for free now some of you might say you know why don't you make this screen in color because everybody makes a sign-up button green color well those the old days now people just look for contrasting colors they will go click on the most contrasting color on the screen all right so I'm gonna change this gotta make it a little more you wanna get into this and you know call it a loon again let's use our favorite set of font why don't we become set up we are going to black I'm also going to remove the strange formatting on it and change the color to black now as you can see we don't have a logo yet but in the future I'll have a logo to the left of this and I'm gonna start working on this bit before you know I work on anything just gonna click on this change the font again to set up I just you know don't like that font the other one whichever it was to a slightly darker color okay so we have oh we have home yes we did we have product I'm just gonna copy paste this we have four private companies for investors blog support that's how to log in here so one cool thing about web flow is you can look at you know your website in multiple different views and we're going to fix all of this later but any change you make on a big view gets replicated across the smaller views so one thing I don't like is the hover State I don't like this color alright so what I'm gonna do is I'm gonna make it that version of bread what's this color hover this is the color I want and on home would choose the current state nice so that's it so you know we've mapped our entire navigation bar to this color we've made a navigation bar very quickly by all standards maybe I'll change these colors in the future but for now this is starting to take shape this is definitely got to go I'm gonna make something better be in this place the reason I said get the complete picture is because this is a cap table management tool right and the biggest issue for founder's employees and even investors is they don't know what exactly is going on inside the company so the tool technically lets them get the complete picture and here in this section I don't want to use jog and I just want to get straight to the point the simplest way to manage equity in private companies investors founders employees and even countdowns swear by you aliens power and simplicity say we use the word simple twice and there's a particular reason for it I'm just give this space breathing spaces I like to call it all right so you know very simply we got the point across changes to equity and investments because some investors will want to see you know their investments and not just the equity numbers so one thing when a change is by default velocity has some top padding gonna change that it's too far away from the top maybe I'm going to make this seventy right off and I'm gonna want to make this seventy another thing about this is it's got some pure which is going to remove the border we don't need that all right so you know this section starting to look good it's time looks simple and you know I want to add some columns I ### [26:44](https://www.youtube.com/watch?v=90h0ZuLfm68&t=1604s) add some columns want to give this no six slot column add just like this yes okay this is good I want to make the first column let's add a heading in here trusted by and I want to make this I want to give this a name I want to call it I stood under super buy again for classes Co look at my last video because we will be using this class again later just gonna use this again Sarah you might be overusing Sarah so now I'll probably change the fonts in the future but you know trying to get the point across to you guys as quickly as I can it's too big no it's too small 30 maybe gonna give this some padding that it's down Center can also give it a line height but let's get some logos in here what's a good logo to get in I'm just gonna put in some dummy logos right now see image okay this looks like a good image to have let's give it a fixed no 120 years to pick 64 okay let's go to 64 copy paste copy paste make sure we give this a center a lion sorry center element Sarah my certain element aren't we back on track now what I'm gonna do is I'm going to give this a class call that image term will call it image on Bisco trusted it's I'm going to give all these things the same name image on this for trusted genre scope bastard inch underscore trusted trust okay so you know now that we have all of these things with the same class any change I make to one will replicate that change across the other is the first thing I'm gonna do is I'm gonna grow effects drop the opacity because you know it's too jarring and again I'm going to give that central line because I promote that I select the columns here for a second give this a class as well columns underscore trusted gonna give it some top height because why not yeah cheering it's space giving some breathing space like I like to say one thing we can do here at this point is okay no mine so that's cool going back to the mock-ups you know we know it's gonna look like that should I use the color black no I'm gonna use I'm gonna give this another thing section underscore two if I continue to call it section then any change I make here will reflect in this other section now this is called hero section it wouldn't but you know it will effect sections after that so that's not it's called a section to give it a off-white color slightly off-white because I want some separation and I'm not using you know bars so this is good again we have to replace these logos and add links later but for now this is okay let's get rid of this let's call this Sarah and one advantage of this is all of this becomes set up and gonna pull it off big yeah this looks good like this no it's too big sorry just yeah it's a bit too big 70 is good now 80 is good it's just so hard no this is the best way to do this or if this looks the best but let's call this or isn't this the simplest way to manage equity stop get rid of this Mandvi is it 100 which looks better or should I go with a smaller number like maybe 60 decisions [ __ ] it let's go lady good so the sections are bedding let's give some space get some space actually that's kept rid of this section we don't need this we want to have this these things now this is actually a set of columns and I think you're familiar with this but especially if you've seen my old video if you haven't this is gonna be Greek in Latin to all of you so what I'm going to do is I'm going to take this white box or rather this column and this is just this is pure style right collaborative block inside it right here put the white box I inside the do block yes and forgive this that color we had what is name of this color rather what is hex code of this color gonna copy that hex code go back here no man I wanna go with this tip block let's call this diff lock and them who think I don't even know if it's gonna look cool yet but let's hope give it some padding right and then give it a background color okay is it look cool yet nope but what I'm gonna do is give this a position of relative and this is relative take this white box thing call it something else white box and the square it obviously have added a new class on top of this so any edits to this is not going to change this and give this a mission absolute I have no idea if I should be doing this but probably by letting a few CSS principles here but that's okay give this real height of 9 500 now 300 now 250 pixels I know this word that I'd accidentally remove the padding on this not sure why what's padding on this 15 why should I move to 40 this makes a left padding 15 as well cool so take this thing I box please you should do what the other guys do okay so you know we have some sort of progress here now I don't know this is white yes this is white I'm going to delete this text here I'm just going to change this to weight this is hopefully a class no it's not set to underscore heading studio typing and obviously don't want to replicate whatever I did here they're called zero that's more like it let's bring back my favorite font and again i'm overusing sarah and i know i understand for all of you screaming in your chairs yes but let me fix that little later that when I say easycap table management okay and let's use easycap label management or folio view and maybe no model exits gosh this is complex what I'm gonna do now is a magnum I'm actually gonna add some ### [36:59](https://www.youtube.com/watch?v=90h0ZuLfm68&t=2219s) add some text text inside this and I'm gonna give this paragraph a name let's call it sector underscore para and can't get rid of open sans we don't need open science you this is too much text so let me just yeah this is good enough copy this paste it here come on okay this is okay so we have some basics here we just experimenter the drop shadow don't think this look good but this looks okay yeah you know what I'm gonna remove the radius of this I'm just gonna give it a zero radius so they all become square and then I'm going to give this radius of 10 and give this a radius of 10 this just makes it look a little bit cooler well just gives it some accent you know actually I'll make that a little more pronounced 20 and 20 do you have part of it it's beautiful so as you could see it looks a little nicer no it's intended to be nice but just so usually when I work I ramble a lot and that's just it's just a reflex thing now I want to put some background images onto this right let's see let's go back to inverter elements and let's just say bubble it's gone graphics let's click on backgrounds hey this looks good this thing looks good I like the molecules even better just gonna download this it doesn't matter what name you give it but so while that downloads I'm just gonna get this stuff no a slight background image maybe I should make this a little darker after all it's a little unreadable remember our goal is designers and marketers is to just get the point across I'm gonna give this a little bit of bottom padding just you know cuz it needs it and is right after this I'm gonna add an image right and right now the image is not gonna be anything but later on I'm gonna add a mock-up of our platform whatever the platform is right so let's just change this let's do the four and fixit's it will we'll add an actual platform screenshot here or a MacBook you know mock-up like it is on meta startup let's give this a might notice how web Florida Madri gives it a you know a unique class ID whenever I won't call a class area called class whenever you know you make any changes to a particular element right cool so you know so far we've got this alright so I want to get into you know the images okay so Creek I'm gonna delete this grid alright so let's get in the images or rather the icons I'm gonna have columns that's right but instead of any columns ### [41:25](https://www.youtube.com/watch?v=90h0ZuLfm68&t=2485s) put these columns inside the container I'm gonna put these columns inside the container that is definitely a container you're just gonna close everything so you guys can see it see this container bring it inside this container it so that you know you don't leak all the way out I'm gonna give it this some height again you know an automatic class is created can I give this I don't know change these columns let's get six no how many do I need three cool so three here and you know for now let's just me just show you how this is done ### [42:16](https://www.youtube.com/watch?v=90h0ZuLfm68&t=2536s) choose an image choose an image I want an icon I'm just gonna take a random I can from here this is the github I can but for now you know it'll have to do image underscore what's this say do we're in Section two after all copy this sorry still good a padding copy paste you know beautiful again if you want to change the image disperse replace image and you can give it a phone number obviously we need to change these icons later but for now you know want some placeholders so that you get the point of what I'm trying to do right after this you want to have a paragraph and you want to talk about this actually fully equipped lorem ipsum you don't want to keep the paragraphs too long here and we're sector on this compiler good see this is the advantage of using classes you don't have to think about the styles on your own but right before this I actually want to have a heading oh I say awesome one I'm getting old well 35 maybe well I feel like this is too big so let's do 20 and let's give it some okay so now that we have this it's pretty simple to just copy the entire column thing cool so this is good but what I'm going to do is I'm going to get the column section and I'm going to give it some moment like a higher margin sorry a higher margin of course same thing applies to both these so this is good this is really good we're going to change these act icons later for obvious reasons and I probably mentioned that a hundred times so next section so one I have a case study thing here and let's see is this black like my heart what after refresh one second guys I know so if I don't actually click here and change this and then click outside if I just directly click into this it causes all sorts of bugs so I'm going to change this from services to was it sort of case study actually I should be case studies how we help you need a testimonial right now another thing is a marketer we need testimony we need people to know that we are credible and obviously we will have to have a press section in the future but right now needs to be credible how we help or rather how we had say Avalon from now can't think of the name to manage he solves again this is I'm probably going to change this in a while and I'm gonna delete this that what I'm going to do here is see it's a double column thing so it'll delete the column on the right I'm going to change this ### [46:57](https://www.youtube.com/watch?v=90h0ZuLfm68&t=2817s) add a youtube video and add a YouTube video you can just go here and right up okay there it is gonna go here pull this all the way on top so I want a YouTube video here somebody from Avalon talking about you know why it's important to use cap table management software and you know actually right below this section I want to talk about you know kind of case study that we have so I'm gonna call the city block I'm gonna call it downloadable give it some height maybe 150 pixels no it's too much 70 pixels and the background color again you know so many colors on this figure it changed this in the future but for now this is okay give it some whatever think 70 pixels is too big gonna block of text inside this I'm going to say download our latest report on the in the five no Donald our latest white paper that's two white paper sounds smarter then reporter Nadal it is white paper on portfolio management whatever it doesn't have to be no real thing so I think inside this downloadable will need to create columns as well and so to call them but you know we want almost everything to be taken by this thing so this column you know and I want the text block inside first column cool so one thing I want to do is I know that this div here it's downloadable div has a height of 7 or 50 and I want this text block to also have a height of 50 oh no I wanted to have a line height of 50 that brings it to Center but this is the wrong way to do it the reason it's is because on smaller screens if this gets broken down into multiple lines then we're going to be in a little bit of trouble so what's the right way to do this v square oh yeah actually let's go downloadable let's get this little bit of padding this is the like right way to do it is it no it's not should be doing like this is the power button would get pushed down as well so the button I just added it little margin yeah so it looks good where's that color where's that weird color we always keep using so a lot of professionals will you know use a mood board or whatever I just don't have that kind of time in my life but that's also why I create stuff that's not the greatest this looks good this actually looks good and let's go to our favorite font Sarah you probably sick of setup by now but that's okay it's part of life I guess and have everything your way download okay this looks click ready you know by the way the goal of every market your market or whatever it's called is clip bit so don't fall for over trying to make change the world [ __ ] you're trying to get people to click on your stuff and download it so you get paid a higher Commission or you get lauded for doing a better job at marketing double quote okay you know what I'm going to change this wait instead of how we helped Avalon Labs manage is up so I'm going to say huh companies across India are now think with simplicity this is the fifth time using simplicity how we had my Avalon Marge let's see Shashank Roopa cf0 of Avalon Labs talks about what makes a loon thank you that was not good see if these two are linked so I run the school and I just needed to give it a different name so I can edit it differently 25 is good sit maybe 18 and change the color to man you stop doing this they all fight let's change this back to white okay so I remember that thing that I downloaded a while ago let me just extract that so these files are probably big like six seven MB again this is why you should probably know how to use Photoshop yeah like I mentioned it's 12. 5% which means it's huge so we're gonna make it really small this is still not small enough even though it looks small enough the way I do it is I just make on your document paste it in here yeah this is good mmm you know what a grayscale er press ctrl you drop the saturation is zero PNG call it a no all queue okay so go back to this when I add a background image upload our molecule and obviously it ruins everything because you know that's just how everything in the world works so we're gonna add a solid color ### [55:24](https://www.youtube.com/watch?v=90h0ZuLfm68&t=3324s) add a solid color on top of it white on top of it white and what we're going to do is we're going to toggle the opacity until we can see some of the background but not all of it okay which also means we'd have to change this text dude this is not sitting well go back to this image control M save as PNG the reason this is the long video is because there's no to Horsell I'm actually doing it for the first time along with you guys and I'm also doing it live so this is pretty hard to pull off okay so that's cool I'm gonna pull in the molecule here as well that's good and what I'm gonna do this time is I'm actually gonna change the direction so let that be there and that's good because I want to add gonna add a little bit of where the okay I'm white again I know this is really necessary it looked fine without this now you know I want all three designs to look different so I just chose different parts of the molecule image you know what I'm really sorry just this just looks trash so yeah just going to get rid of it instead I'm going to do is I'm going to use the molecule immature that's right I'm gonna add a black it's subtle it's extremely subtle but it's a good kind of cell I'm gonna drop the drop shot of you it's extremely subtle which is good right this is taking shape just going to change this color this looks weird this blue looks kind of off so what I'm going to do is I'm going to take this blue and I'm going to experiment till I find something I'm comfortable with you know maybe I should just make this white all that do okay guess it's fine for now okay back to our mock-ups we want for private investors and for private companies and for investors so she's gonna get rid of this entire thing whatever the hell this was I want he built a loom for now who is doing for hmm what I want right now is I'm actually gonna go with this section copy this bring it into this that's right boys why is okay that's why I'm gonna guard later the columns so quick back to the columns we have column one she's I'm gonna copy this all the way here oh my god now I do not want white box no I don't I just want what's inside white box for this damn it I need the entirety of white box all right so we've got these two things let's say for in you know for private companies or investors now what I'm gonna do is it's just fine this looks fine just gonna give it a bottle I am overusing colors dirty so sorry let's do that gotta get rid of these colors nope and nope No so here's the thing right I made this change and all the way up these this stuff is changed as well so I've gotta get rid of this wait so what I need to do is I need to call this to underscore art keep this a bottle bottom only five pixels no this what's that color we keep using this one all right this looks good what I wanted to pee on this and I didn't kind of talk about it over there is I wanna have a button right after this give it some space in the top give a like good 100 pixels on the left and a hundred pixels on the right central in it and I want to say sign up for free that's right it's free this is what's the for it is a for all the ever rectangles radius of four cool obviously want to change the color you ready yeah let me go back to our font Sara so a lot of this design is still ugly and we're going to fix it in a bit now photo the reason why I didn't actually mention a footer in this was because I always use this things default footer and just change a few things around because footers need links and it this is more for SEO purposes than anything let me show you what this looks like no you know what let's use this janky color just going to call it the janky color and my eyes are bleeding this is really good color well can you pull this off zero make this maybe 2585 no man not feeling this color just not feeling the background-color get rid of this give this a class heading to okay this will confuse a few people but it's okay you're heading to is name of the class not the actual heading this should change everything is all the photo links are linked get it any pixels change the hover state to slightly off-white no where is that chunky color okay can't you find it so just a little bit off yes now this thing at the bottom now info icons just gonna opportunity adversity a little bit that's it guys so this looks terrible I don't like the background so I'm going to change it much better and change the white oh maybe change this to somewhere in above white copy this color BAM and that's it I think you know there's lots more to do there's links to add there's responsive web your kind of fix and you know there's just so much more left but this is a good start we've managed to almost perfectly replicate and even improve on our markup and this is what I wanted to show you today of course if I wanna add a link I'll have to do is press plus and then just click on link block where's the link box and I can just put the link block here put the image structure inside the link block and then that becomes a link block and actually just go to settings and say google. com and that's how you add links open a new tab at which just makes this very very simple but this doesn't need to be a link block so I'm just going to pull this out and that's it I mean you know just check out my other tutorial for more but for this video that's all now I'm just now I'm going to optimize this entire website but you get the hang of things go replicate --- *Источник: https://ekstraktznaniy.ru/video/12885*