Simple Product Card with HTML & CSS

hi everyone my name is t and welcome to front end fanatic thank you for joining me today today i'm going to show you how to make this really simple product card with a hover state on the button so without further ado let's get into it okay so i've already got my folder open i'm going to add their index.html file then i'm going to add the stylesheet and i'm going to go back to my index i'm going to pull up the boilerplate using emmett then i'm going to link my style sheet right and i'm going to give it a title as well product card so i'm going to go in between my body tag and i'm going to create a div of the class of container so i'm going to do it using emmett to make my life a bit easier and then i'm going to put an image tag and i'm going to go ahead and get my image from this website i'm going to right click go to copy link address and then i'm going to paste it in the source and i'll give it an alt saying a picture pick picture of plants like that and i've done that so now the next thing i'm going to do is i'm going to create another div and i'm going to give it the class of text and then i'm going to give it h1 and inside the h1 it's going to say the plant life then i'm going to go ahead and make an h2 which is a bit smaller than the h1 it's just going to say an online exclusive then i'm going to use a p tag and insert some dummy text so i'm just going to write lorem uh 18 yeah and then hit enter that gives me a bit of dummy latin i don't really know what i want to write there then i'm going to insert a button element with shot now inside it like that and hit save okay and that's pretty much all we need for our html okay that's done so next thing i'm going to do now is start styling it right so in order to start styling i want to import a font so i'm going to go to google fonts and as you can see i've already pre-selected my styles i've gone for light 300 in montserrat and 400 regular in font weight and in order to import this into my css file i'm just gonna copy this little import link here save so that's control c okay don't take the style bits unless you're planning to insert that into your actual html document but we're using css so um it's a control c and then i'm going to just import it right at the top of the style sheet like that next thing i'm going to do is i'm going to select all the elements on the page and i'm going to do that using the asterisk okay because i want to give everything a margin of zero and i want a box sizing border box and then i also want the font family to be monster out like we just did go back to the page if you like or you can type it but it's right here in the bottom right hand corner just copy this paste that there and then hit save so we've sorted out the font now i'm going to center all the elements within the body so i'm going to target the body way that i target everything is display flex justify content center and align items center and then i'm going to give it a minimum height or 100 viewport height so that's going to be right in the center of the page and then i'm going to give the body a background color of zero two five a eleven it's a lovely green color and i'm gonna save that next thing i'm gonna do is target the container the container is just this thing here it holds all of our content so we're going to container and i'm going to give it a width or 550 pixels and then i'm going to give it display flex because i want the elements to be side by side then i'm going to select a property called flex flow and what flex flow does is you have to insert two values and one is flex direction in this case i want it to be sorry a row and then you have to select the flex wrap value and in this case i want it to be no wrap so if we was to change the size of the window the elements won't move out of place okay so i'm gonna save that and then i'm going to move on to give it a background color or sort of a light gray so that's f4 f4 then i'm going to give it a box shadow so it's going to have the card itself is going to have a shadow that's going to be two pixels two two pixels six pixels and an rgba value of it's gonna be like a sort of um black like a opaque black so that's gonna be zero zero 0 and then the value is going to be 0.5 because i don't want it to be you know solid black i want it to be opaque slightly so that's how we achieve that and then i'm going to give the whole container a border radius or five pixels because i want the edges to be sort of rounded off slightly next i'm going to actually move on to style the image so the image is right here is the second thing here that we need to style so i will do that is image tag right and what i want to do is change the size of the um image because i don't know if i've shown you just yet let me just open this in live server right the image is here but it is quite big and so at the moment you won't be able to see any of the other styling that i've applied to it because of how big the image is so we're going to change the size of that right now and i'm going to change the width to about roughly 45 and i'm gonna hit save let's go back and see what that's done there you go just like that it's changed how big the picture was and now we can actually see what i'm working on so now that we've done that i want the image to fit its container so i'm going to select object fit property hit cover save and then i'm going to change the borders now as i was saying before if i just zoom in slightly you can actually see that these borders are sort of rounded off slightly they're not sharp but on this side on the actual left hand side you can see that they're actually still quite sharp and the reason it's like that is because the border radius hasn't been set yet on the image and so it's still sort of in its original forms but we want it to just match this so we're going to go and target that now so that's going to be border top left radius right is going to be inherit because we're inheriting it from its container and then i'm just going to copy this and i'm going to save it well sorry i'm going to paste it there and then i'm going to change that to bottom because we want the top and the bottom left radius right to change so i've saved that let's go ahead and look at it now and now you can see it actually matches the other side that's exactly what we want so the next thing we are going to do is we are going to target the text container and that is pretty much all of this okay so it's going to be all of the elements within this text div okay so we're going to do that by obviously text and what i want is general styling to apply to all the elements inside the text div so i'm going to give all the elements padding of 2.5 rem top and bottom and 2 2 rem left and right then i'm going to give every element a letter spacing of one pixel just so that it's not too cramped together and it's easy to read hit save and now let's go and look at all that's done and there you have it it's giving us let me zoom out now because i think you guys get it right so you can see it's given us padding all around the edges or exactly what we wanted and now i'm just going to target this bit here okay the h1 i'm gonna target that so since it's inside the container okay so right here we're going to target it like this so it's going to be text h1 okay and i'm going to give it a font weight for 400. save and then i'm going to change the color to a sort of dark green color like a more plant looking color just to sort of fit in with the theme so that's going to be 1 2 3 6 0 c and then save that let's go and look at that there it is this is it and then i'm going to move on to the text h2 if you remember there was a h2 it's this part here okay so let's target that and we're going to give it a padding top two pixels because you don't want it to be too squashed into like the um first heading here we don't want it to be too close to it so we're just going to give a little space in between that's what we've done there so save and then i'm going to change the font weight to 300 to make it a little less heavy to make it lighter than the actual um top heading the h1 heading and save that and then i'm going to give it font size of 10 pixels i want it to be small and hit save let's go and look at that there you go there it is it's gone really small now it's right there and the font weights change this can't really see it that well but they're going to sort of make it a bit more bold by giving it a letter spacing or four pixels okay so spread quite wide and then we're going to change the text sorry to uppercase and then we're going to set that to uppercase it's saved let's go and look at that again there it is just change before our eyes and it should look like this so it's a lot more um noticeable in that way okay so now that we've done that my next step is to go and style the p tag within the text div okay so we're going to target that now so that's going to be text p and let's move up slightly i'm going to give the padding of the p little bit more space as you can see this is all sort of you know scrunched together we don't really want that and so i want to give some space at the top of the paragraph and at the bottom so it's sort of its own section so let's go and do that now so that's going to be padding 1.4 1.5 rem top and bottom and zero left and right we're going to give it a line height of 1.5 save that let's go and look at the line height there you go you can see there's some space in between each sentence so it's quite easy to read spaced out and then we are going to give it a font size 14 pixels and save that again there we are lovely and then we are going to target the next thing which is the button which is here okay so let's go and target the button so that's text then button and the first thing i'm going to do is apply some padding to the button so the padding is going to be 10 pixels top and bottom and 45 pixels left and right and let's save that and go look at it now so you can see there we are you can see that it's um a lot bigger now okay but it doesn't really align with all the text so what i'm gonna do is make it a hundred percent of this text container and so let's go and do that now so that's wits 100 save it let's go back and look again there you go so it's 100 of the text container right and now i'm just going to change the border to 2 pixels solid and we want the color to be the same color as the um the h1 so that's one two three there we are then i'm going to change the border radius to match the border radius of everything else which is 5 pixels right and then i'm going to change the color of the text in the button to the same color as the h1 then i'm going to change the font size to 16 pixels and it actually you know fits the button properly and then i'm going to transform the text so text transform to uppercase and then i'm going to give the button a transition because we're going to add a hover state and we don't want the um the transition to be too harsh we want it to sort of smoothly transition when you hover over it with your mouse so we're going to write transition duration and that's 0.5 seconds it's going to be nice and smooth and let's save that let's go and look at our button now okay and this is what we've got so far it's looking a lot better isn't it and the last thing we're going to do is just add a hover state to our button like i said so text button and a pseudo class of hover and then what we want to do is when you hover it the background color changes so background color will be the same color as the h1 keep it nice and consistent and the color of the text is going to be white okay and then we're going to change the cursor to a pointer every time it sort of goes over the um button so let's save all that and let's go and look at our work here's our button so let's now hover over it like so and it should look like this and i don't if you can see that transition but it's very smooth if it wasn't there wouldn't be so smooth it'd be very sharp yeah so this is pretty much it this is our product card very simple very easy but you could easily build off of this this is just sort of a foundation type product card you can easily just change things add elements it's all up to you but i just wanted to give you guys sort of like the blueprint and you can you know do whatever you want with it from there but anyway i hope you enjoyed this tutorial thank you for watching and please don't forget to like comment and subscribe and i'll be back with more videos like this bye

Channel: Frontend Fanatic!

Views: 1,482

Keywords: simple product card with html & css, product card html css, css card hover effects, product card html/css, cards css, css card tutorial, css tutorial for beginners, css beginners tutorial, web development tutorial for beginners, product card css, best product card html css, product card html css codepen, css card ui design, product card, product card design, product card design html css, E-commerce Product Card, Product card UI in pure CSS., css cards

Id: IJWyH0H1RnI

Length: 16min 17sec (977 seconds)

Published: Sun Oct 17 2021