Hello readers. I hope you guys are doing great. My name is Vaibhav, and I’m a web development enthusiast.
Today we’re going to create a simple yet minimal UI Card Design which will make your website look professional and modern. This simple design is easy to make. Moreover, you guys are most welcome to add a few more modifications to it to suit your taste.
Firstly, create a folder/directory at your preferred location in your machine to store the HTML and CSS files. I’m going to name mine as UI Card Design. You can choose whatever name you like.
Now create two files, namely, index.html and style.css, inside this folder. We’ll link the HTML file to the CSS file to apply styling to the elements, which is obvious.
To write code, you need a text editor. I’ll leave this job on you to select a text editor to write code. Still, if you need some suggestions, you can go with Visual Studio Code, Sublime Text, Atom, Notepad, or any other text editor.
Open index.html and write the following HTML code inside it.
In the head tag, we are importing two fonts, namely, Fjalla One and Cabin, from Google Fonts which we’ll use for the text inside the Card. Also, we are linking the style.css.
In the body tag, there is a div with the class Cards-Space which will hold all the cards.
Here comes the main part. A div represents a card with the class Card. Inside this div, two more divs hold the display image and the textual content. The div that holds the image has the class Card-Image-Space, and the div that holds the textual content has the class Card-Content.
The elements inside these divs also have classes to style them.
Note that the source (src) attribute of the image tag (img) has a url which is pointing to the Unsplash Source. This is an Unsplash API which is used to embed images inside web pages. This url will embed a random image based on the tag mentioned at the end of the url. Whenever the page is refreshed the image will change. To learn more about this API head over to this link.
Great! We are done with the HTML part. Let’s move on to the CSS part. Note that I won’t explain every property inside the CSS code. I’ll only talk about some important properties.
Now open style.css and write the following CSS code inside it.
By default, we are setting the margin and the padding to 0px.
For the Card class, we’re setting a fixed width of 400px, a soft box-shadow, background to #FFFFFF (White), and border-radius to 15px.
Now here comes the tricky part. The embedded image has a size of 1920x1080. To fit this image inside the card, we’ll use the div that has the class Card-Image-Space as a container for our image. And, we’ll position our image relative to this div.
Note that the parent div has the position property set to relative and the child, which is the actual image, has the position property set to absolute.
The image has an object-fit property that is set to cover. This property is used to specify how the image should be resized to fit its container. There are a few more other options to choose from, namely, fill, contain, scale-down, cover, and none.
The rest of the content is pretty basic and easy to understand because all it’s doing is assigning fonts, adding margin and padding, and setting font sizes.
If you’ll hover over the image, you’ll see that a transition is defined for the image. It’s a scaling transition which triggers when someone hovers over the image.
It everything went right, you should have cards on the web page looking like this.
That’s it. You have successfully created a Card with simple and minimal UI Design using only HTML and CSS.
Now you can further modify this card according to your taste, and that’s something I encourage a lot because if we won’t get our hands dirty with code, we won’t explore new possibilities and challenges, and learn to frame new ideas and get things done.
If you have any doubts or queries, you can always comment, and I’ll try my best to solve them.
If you enjoyed this post, I’d be very grateful if you’d spread a word it. Also, I’d like to see what you guys have created by modifying this creation. So don’t forget to share your creations with me. Thank you!