Build Glass Website with HTML and CSS Tutorial

this t-shirt is so tight hey there my gorgeous friends of the internet it's it's actually morning for once so thank goodness i'm wearing no pants i'm all ready to get going you guys asked for me like tens and thousands of comments that's a lie it was like five comments of building out last week's web design of the glass of the glass website so i thought that we're gonna do it right now i'm not sure why it's pretty simple but why not so let's get going we're gonna head straight into the codes here so i'm actually gonna link a github so you can get the images that i use there and and this is how the folder is gonna look okay so we're gonna have an index.html just like that we're gonna have a style.css which is empty we just remove the margins and the paddings on everything and we have some images that i acquired of the internet and that's it so go down to the github right now get it all right then check out my courses as well okay plug and let's get going so i'm gonna give you some time to do that three two one tons of okay so let's get going let's open up live server open live server we have nothing this is what we're going for all right so this is the finished one i'm not going to focus too much on like aligning things perfectly because that's not the point of it we just want to make this glass design and we also want to have that blur in the background and everything when we put things in the background and stuff like that okay so if this is not perfectly pixel aligned then screw you okay just to keep things simple i think i'm only gonna do like the basic glass thing and then we're gonna code out the content inside just to keep it simple okay so what i want to do is actually style up this section here all right so the background so for that we're gonna create a main section like that and that's gonna be the background and then we're gonna have a section called glass all right so a section with a class of glass that's weird to say um which is this okay so this whole glass here all right this whole section right there okay and after that so in here we're also gonna have the dashboard parts and we're gonna have the active games part so this part here but we're gonna keep it simple like this just so we can do the glass thing style it up and then we're gonna add the content what else i'm gonna do actually before we move on is outside of the main here actually i can add it inside here as well or outside doesn't really matter let's go outside i'm just gonna add these circles so i'm gonna say circle one i'm gonna copy paste it and say circle two okay so these circles right here so we get that effect nice and pretty okay let's head over to our style.css so it's actually quite simple um we can grab the main here like that just like that i'm going to add the minimum height to this of 100 vh like that all right so that basically means that it should take up the full space of the monitor right here then what we're gonna do is add a background all right i'm gonna say linear gradient so we're mixing up two colors i'm gonna say two right top which means we go in diagonal all right so two right would mean that we go from this part all the way here but to right top means from down here all the way up there i think that's the way it is hopefully i'm not wrong okay so the colors i'm going to add is hashtag 65 dfc9 i have it written on the other monitor and the other one is 6 cd from baby all right those are the two colors i picked so if we go here we have this beautiful thing fantastic okay and i think that's gonna be it here we can start with the glass so let's go back here we can grab the glass so let's see glass first of all i'm going to add a background of white to this i'm going to add a minimum height of 80vh all right so again it's going to take up 80 of the screen just like that so this is the 20 left and then i'm going to add the width because i don't want this to be stretched all the way out i'm going to say 60 just like that what i'm i'm gonna do is actually center it right here in the middle so to do that what you can do is just use these three properties to say display flex and then you can see align item center that's gonna align it vertically and then justify content center is going to do it horizontally like that all right so now these two don't work if you don't add display flex so make sure you flex everything okay now this still doesn't look that good it doesn't look too glassy to me so what we need to do is add a background and we're going to say linear gradient again now here's the magic here's the magikaroo we can add rgb a and what rgb a allows us to do is to control the opacity of a color okay so i'm gonna say two right bottom on this one and i'm gonna say rgba we're gonna pick white so 255 255 255 that's white but the third property here is actually the opacity which goes from zero to one so if i say 0.7 here that's going to be 70 percent opacity add that mother loving comma after it and say rgba we're going to say 255 255 255 0.3 all right so 30 luck 50 skill okay there we go so now if we take a look look at that we have 70 there and 30 there wow people get excited about this for some reason um yeah there we go so it looks pretty good you can experiment with this make it look the way you want you can add also a border to this to add that more that little line that white line i don't i'm not a big fan of it actually so i'm just going to keep it simple like this what i can do is also add a border radius to make this nice and round i'm going to say 2 ram and basically ram is a certain amount of pixels so you can just go here and see like 20 pixels that still works fine i'm gonna use ram for fun i'm gonna see two ram and there we go now it's all rounded and good looking okay so next up we're gonna add our lovely circles i'm gonna say circle one circle two now these basically have the same properties as the glass so what i'm going to do is just copy things over from up here first of all we need the background white so i'm going to copy that over we're going to need the gradient i'm going to copy that over and here actually we can add the intensity a bit bigger i can say something like 0.9 to 0.1 just change it up a bit for fun i'm going to add a fixed height to this 20 ram and a width of 20 ram and if if i save right now uh it's here but you cannot see it but to see it i'm going to add a position absolute and when you add the position absolute now you can move this around wherever you want so if i say something like um actually what i'm going to do is just yeah let me just show you just go here and say top five percent so there it is right there all right so it's five percent from the top portion of the screen if i add something like left ten percent well it's going to be pushed ten percent from the left side the thing is though that both circle 1 and circle 2 are together here and i do not want that so i'm going to copy i'm going to add the position absolute here however i'm going to select circle 1 separately here so circle one and circle two i'm just gonna modify this i'm gonna get the top and left cut paste down here and i'm just gonna change this to right i'm gonna say 15 percent all right so i position it there and i can get the other circle so circle two and move it somewhere else i can say bottom so let's put this five percent down here and left ten percent all right so just messing around with this moving them around for fun and that should do the trick okay now the problem is is that these are actually on top of our main glass and what i want to do is actually put it behind it all right so if i go down here and just add a background color of red you're gonna see that this is actually oh that's that hurts my eyes it's actually on top of the glass i want to put it behind the glass so the way we can do that is i can go here to the glass and add a z index all right and the bigger the number the more forward that that thing is going to be all right so if glass has a z index of 3 for example like that then it's going to be pushed ahead so if this has a z index the circles have a z index of two they're gonna be in the background all right if i add five well then it's going to be forward again because it's a higher number than this okay so i just need to add a z index of three here i think i can go to two because the default is one so that's fine all right so it's behind our glass which is good now how do i add that blur effect super simple we just need to go to our glass and just say background filter let's say blur and just add a number here so i'm going to see two ram and it's not working why you do this why do this refresh no i messed it up oh it's not back background backdrop my apologies backdrop filter and blur and there we go now the higher you go here the more intense the effect is going to be so if you go ten thousand hundred thousand look at that you cannot even see the background anymore so let's just do something small like two ram i think that looks pretty cool two red hit save there we go we got the effect and now we can get rid of this red because i do not want it there lovely now actually i'm gonna raise up the intensity of this i'm going to say 1 here on the circles and 0.5 or something all right because i want that effect to kind of pop up there more intensely now i also want to make these circles so what you can do is you can go to the circles here and just add a border radius of 50 percent and there we go now they're perfectly round lovely um actually i'm going to lower the intensity here but it's too it's too strong 0.8 0.3 let's see yeah that's fine that's good it's good like that i'm happy so a lot of people mess this up and they're like ed my border radius is not a circle and i added 50 well be careful because it's not gonna work if your height and width are different so if my my width is like 50 ram and the height is 20 ram you're gonna get this weird shape all right so you you need to make sure that your height and width are the same so the border radius 50 is gonna work all right or if you're smarter than me you can just download the svg and just import it as an image and not try to do it with this but whatever dude okay so we are done we have our little glass and we have our circles as well we can go back to our index.html and start coding it up a little bit so again what i want to do is add the dashboard here so this part and this part okay so let's go here okay so inside the class here what i want to do is add a dashboard div just like that and here in the dashboard we're gonna have three things we're gonna have the user section so this we're gonna have the links and we're gonna have this um i don't know pro join to become a pro section so three sections so we're gonna create three divs okay so let's go and create three tips we're gonna create the user section and in here we can navigate to image and we're gonna go to images and we need to get the avatar okay that's a picture of me included for free you're well you're welcome i'm gonna write my name here also make sure you join my only fans link in the description we're gonna add a paragraph to see pro member like that lovely all right so after the user we're gonna have the links so i'm gonna create a links section links like that and in here we have multiple links i'm going to say linkedif and in the sling div we have an image all right i'm going to just drop random images let's do the twitch i'm going to add the h2 that says streams i'm just gonna copy this three more times so this whole link copy paste it paste it paste it and we're just gonna modify uh the text here so streams that's the first one then we have games then we have new and then we have library okay and then we're gonna just modify the images so i'm gonna go here grab twitch and say steam this one i'm gonna change it to upcoming and this one i'm gonna change to library and hit save all right so there we go that's what we have that's good and finally after this whole link section so go here up where you have links and click on it that's going to give you a good indication of where that div ends so click on links and here it ends so i can go after it and just add and the pro pro button pro here i'm gonna just say join pro for free games okay image and i'm just gonna add the controller here like that okay and last up what we have is the section right here so we just have basically a title i mean i added like a search bar here uh but it's super simple to do i guess we're gonna throw up a super simple example and the cards all right so it's super super easy okay let me see where i am so after the pro ends here if i click on this one this is the whole dashboard okay so after the dashboard right here right above this section we're gonna create a games div and here we have the status all right so status being this part and then we're just going to add the cards so i'm going to add the h1 sync after active games i'm going to add the input which is going to be our search input like that and after this we're going to create the cards so cards like that and here we have multiple cards again so card image i'm going to grab the let's do the assassin's creed like that and inside here so we have our image let's take a look so we have the card we have the image right here but we also have kind of imagine splitting this up into into three more sections okay so the card contains the image uh the text and the progress bar and the percentage okay so the image i'm going to create a section for the card info basically so another div h2 assassins creed valhalla terrible game by the way i played like like five hours of it and it's incredibly boring i eventually ended up playing sag boy great adventure which is a fantastic game i don't know what i don't know what people are doing with assassin's creed man it's like oh go get me my sword i got the sword i beat like 10 people super boring i have to travel with the horse oh thank you for giving me the sword here's 10 shekels quest completed wow that was boring okay so in here we also have a progress bar progress like that just a super simple empty div now after the card info we have a percentage so let's do h2 i'm gonna give it a class of percentage i'm going to say 60 percent like that okay so this this part here okay and that's we are pretty much done i think we just need to copy and paste this card multiple times and we're good so grab the card click on the card div just grab this whole thing and copy it two more times one two now we can change the text and everything and the images eventually but we're good for now all right so this is what we have wow okay before we jump into the css you know what they say we need to take a break because we need to stand up sitting too much is unhealthy so tune the music i feel much better let's continue i apologize okay where are we let's see let's see okay so we have our dashboard now if you take a look at this dashboard it's still pretty much the same class design all right it's still glass so we just need to kind of duplicate it before we do that i want to have this dashboard on left side and the games on the right side so how do we do that well we can use flex again so basically again what flex does is it basically takes the content that you have and puts it all horizontally alright so if we have our dashboard then we have our games sitting like like this one beneath each other adding flex is going to put everything work vertically so all the child elements are going to be put vertically okay so we're going to see that in just a bit so all we need to do is go back here to the glass and just add a display flex and hit save okay so let's see so as you can see it just takes the two divs and puts them vertically okay so now that we have that we can have additional fun so how do i allocate space as well maybe i want this to be smaller than this section well we can use flex so i can go here and just grab the dashboard and if you use the flex 1 property that basically takes up all the available space left so it's going to take up all the space left now it cannot take up all the space here because the other content starts but it just takes up the available space if you add flex 1 to the games as well so if i go here and say games and say flex one now the space is going to be split equally all right so both of them are going to have kind of like with 50 and width 50 now what if i want this to be twice as big as this well then i can add flex 2 to the games and now this one has twice the amount of space is this okay that makes no no sense okay so let's go here to the dashboard and again i'm going to add a display flex to this again as you can see as soon as i display flex it just puts all the content there horizontally but i do not want that so i'm i can actually change the flex direction to column which is going to put it back okay so why did we do that though like isn't this a waste of code why did i add display flex to put it horizontally and then just flex direction column to put it back the way it was well we do this because otherwise we don't have we cannot use align items and justify content those two properties do not work if you don't add display flex all right so now i can say align items center like that and look at that it centers it perfectly i can also add justify content i can add space evenly and boom boom all the content is nicely placed in a super easy way okay next up i want to also align the text here to the center so i'm going to say text align center like that all right just aligns it nicely there okay that's good let's see what else i also want to add the linear gradient that we used here so go up to the glass and copy the linear gradient and paste it to the dashboard look at that there we go we can also add the border radius to ram and perfect lovely and i think that's it that's it right here next up we can grab the link i can add display flex to this again just like that i'm just gonna add a bit of margin to rem zero ram all right just paste these out a bit a bit of padding one ram five ram like that i'm going to add an align items to center there we go next up i'm going to grab the link h2 and just add a bit of padding again padding 0 ram and 2 ram all right just paste these out a bit okay super cool all right then we have our games with the flex 2 so that's fine we need to kind of fix up this section right here so i'm going to say pro i'm going to add a background of white actually i don't need the background of white we can just copy over the linear gradient that we used up here on the main so copy that over paste it down here there we go we can add our border radius again border radius to rim like that the color of the text is gonna be white like that i'm gonna add a bit of padding to it padding one rim just like that um we can mess around with this again we can do like display flex if you want to want to do it that way um yeah you can kind of mess around with this and position it the way you want i'm going to leave it simple like this but that kind of looks bad i think this looks better here all right we're gonna mess around with this i'm just gonna leave it like this for now actually you know what what we can do is i'm just gonna do this really quickly i'm just gonna i'm just gonna grab the image pro image i'm gonna add a position absolute to this and place it the way i want it exactly so as you can see when you have position absolute it kind of jumps out of this thing um and if i add something like top minus ten percent and write ten percent to it and it's not going to behave based on this div so if you want it to be relative to the box in here you just go up to the pro div and add position relative so as you can see now it's top minus 10 from this div okay okay that's good let's see what else we're gonna do oh what i want to do is actually kind of collapse this text because it's on one line so i'm gonna just grab the pro h2 and just add a width of like 40 to it there we go so it kind of stretches it out a bit more vertically okay now this is not gonna look good but we're gonna add let's actually just go up here and just change up the fonts and everything uh because everything looks so ugly yeah let's just go all the way up here let's actually head over to google fonts i forgot to copy this over we need the poppins i believe we used poppins i'm gonna grab um regular i'm gonna grab medium and bold as well i'm not sure which one i'm gonna use so i'm just gonna copy this over and paste it up here like that hit save and now up here in the style we can just grab the h1 style this up a bit against a color let's do four two six six six what is this 69 six nice okay there we go the font weight 600 i just picked out everything that we did in figma basically the colors the sizes and everything so font size 3 ram and we actually did a the opacity of 0.8 so it's not that intense because i feel like just removing a bit of the opacity on this glass design makes it look a bit better because glass is also um [Music] you know it's not fully solid you can see through it it's opaque um so i feel like it works better with removing the opacity a bit h3 i think we have the same color here same font weight i'm gonna copy it over and the same opacity there we go i'm just not gonna change the font size here now let's do h2 as well up here keep everything a bit organized color here i'm actually going to pick a less intense one 68 65 8 ec6 all right the font weight is going to be 500 again i'm going to do the opacity trick all right i'm going to basically just add a comma here and also add the paragraph and that should be good lastly i'm going to copy over the font family in the main here and just add pop-ins okay so there we go looks much much much better now here the text is still scuffed so let's go here to the pro h2 we're going to change the color to white color white like that and the font weight to 600 like that and that looks much better okay now let's get this going this section here the game section um click click click all right i'm gonna leave a note here so you know this is the games section just like that so we're going to grab our status i'm going to add the margin to it margin bottom 3 ram push the content down a bit now i'm going to grab the status input all right and i'm going to add a glass look to it again so scroll back up grab this background from the glass paste it down here save there we go now there's that stupid border that we need to remove some border none there we go i'm gonna stretch out the width to like 50 and there we go i'm going to add a bit of padding to it 0.5 rim all right make it thicker and border radius is gonna be two ram just to make it round and nice looking just like that okay we're gonna grab the whole game section so again the game section here contains this section and the card section so if we grab this and add display flex again it's gonna put everything horizontally right but we don't want this so we're gonna say flex direction column so it's back but what we can do is just add justify content space evenly like that all right so now it spaces this evenly with this okay am i missing something here let's add a margin to this five ram all right there we go can kind of separate it from this part of the screen here okay let's do the cards so i'm going to grab the card display flex again there we go the background we're going to add a linear gradient again and i'm going to do kind of the same thing to left top comma rgba 255 255 255 i'm going to do one here comma rgba 255 255 255 0.8 all right so i'm going to do a almost a perfectly white colored card i'm just going to have a slight opacity to it towards the top here all right so i'm gonna show you why i do this i'm gonna add a border radius first of one ram to round it up uh also a bit of margin so two ram top zero ram left and right like that a bit of padding too so two ram so you can see it all right so as you can see here it's a bit opaque but here it's fully white so the reason why i do this is because for this class design i like to add a bit of drop shadow on the cards which gives it a kind of like a 3d effect like it pops out so let me just show you what i mean i'm going to say box shadow here i'm going to say 6 pixels 6 pixels 20 pixels so 6 pixels basically represents the xy position um of the shadow so where do you want it to be so down here up here left here etc the 20 pixels represents the amount of blur all right so if you want it to be more blurry you add more right here so i'm just going to pick a grayish color with a 0.2 opacity so as you can see we just kind of add a pop effect to the card now if we would pick a super glassy look here so 0.2 and like 0.5 the opacity on the card it would look super weird actually that doesn't look too bad nevermind that doesn't look too horrible um i guess i mean let's just do it but not that intense so anyway what i want to do though the shadow is more here on the right side right so right bottom side so that's where i want more white to be so kind of hides this weird grayish look because if i raise up the opacity of this as you can see it starts looking very weird underneath the card you get that weird gray looking card whereas where it's more white basically it doesn't pass through so i guess we can do it i just want the white to be down here so i'm gonna raise this up to 0.8 and i guess we can lower this to 0.5 or something like that so let's bring the opacity down to like 0.2 [Music] so something like that and look at that we have this nice interesting card popping out effect okay fantastic uh what else do we want to do here let's see card did we add display flex we did where's my percentages i don't see them i don't see my percentages did we not add them let's see yes we did card percentage 60 where is you okay let me remove the display flex to see okay it's there so i guess oh here it is i'm stupid never mind okay so what else i want to do is just add a justify content of space between like that all right so it just gives a bit of space between all of the elements there we go next up what we want to do is create the progress bar progress i'm just going to basically add the linear gradient again copy paste all right and then we're going to add a width of 100 and a bit of height to it let's do 25 percent all right so we just have a nice little progress bar here i'm gonna add it with a border radius let's do one rem there we go perfect so now what i want to do is actually add a bar here so it doesn't look like it's fully filled up so how do we do that well what we can do is do a little life hack we can say progress after like this so this is a pseudo element that we can use and we can basically generate some additional styling um to add on this input so what i can do is just say content like that and just add an empty pair of codes and you basically need to do this every time you create a progress bar all right and not every time you create the progress bar what am i talking about every time you add the after or before pseudo element otherwise it's not going to work so again what we can do is just generate a new div kind of like that um so i can just add a width of 100 a height of 100 here a background i'm gonna pick a gray color rgb like that two three six two three six okay add a position absolute to this wait let me see if we can see it so there it is all right so we just basically generated a div out of thin air so i added position absolute to this so i can go up here and add a position relative all right so it fills up the whole section right there so what i can do now is just move it left sixty percent all right so left sixty percent and there we go actually i think it's the other way i need to do it left 40 actually i think right 60 i don't know i i never get these right i just mess around until it looks okay no that's not okay it should be left 60. like that well that's that doesn't look filled up oh okay so as you can see the it's correct it's just the the gray bar kind of goes uh kind of leaves this section right so if i add 200 here right that kind of leaves this div but what i want to do is actually add overflow hidden to the progress and now it disappears so it's only going to show up in here right so if i add left 60 now as you can see the additional content is clipping now so it doesn't leave the section all right so now it shows correctly 60 okay that's good it's getting long we are 41 minutes fantastic all right let's grab the card info and finish this up we can add the display flex flex direction column and justify content space between all right just give a bit of spacing between these so everything is nicely aligned up all right and then we can mess around with the percentage if we want to for fun and we are done percentage i'm gonna add a font weight of bold like that so it's nice and big i guess we can copy over the linear gradient here and then it's not gonna work because linear gradient doesn't work with css lovely there we go so how do i clip this so it shows up on the percentage there well you just add the background linear gradient like that and then you go down here and say webkit background clip text alright so now it clips the background to the text and finally what you need to do so basically we have the text now that's blue but behind it we have the linear gradient background so now all we need to do is say webkit text fill color and we just add transparent to the text so now only the background shows up with the linear gradient and there we go we have linear gradient on our text and that's it that's kind of the whole shebang did i miss anything i hope hopefully not i guess we can go here and change the images so assassin's creed we can go here and say sight boy we can go here and say spider-man let's change this to spider-man miles morales and we can change this to sagboy a great adventure like that and yeah should be good there we go you can change up the percentages if you want have fun mess around with these crafts and that's kind of the whole idea behind this long episode why do i look so dark we going to heaven is this good content okay there we go thank you so much for watching hope you enjoyed this episode um next episode i actually want to do a workout routine i know it's kind of weird perfect skin tone there we go um i'm still struggling with my i don't want to say injury with my chronic pain so i want to do like a whole workout based on keeping good posture and helping people that sit a lot on the chair and stuff like that let me know if you want to see that because i feel like it's helping me and i developed a whole routine already a few months ago that i feel like it's it's helping so anyway what am i talking about thank you so much for watching hope you enjoyed and until next time kiss your mom for me

Channel: Dev Ed

Views: 598,026

Rating: 4.9671493 out of 5

Keywords: html5, css3, build website, website, web design, glass design, glass website, dev ed, developedbyed

Id: O7WbVj5apxU

Length: 43min 51sec (2631 seconds)

Published: Fri Jan 15 2021