back to all posts

Profile Card Glassmorphism Using HTML CSS

by Jitendra Kumar / August 23rd, 2021

#beginners #css #webdev

Today we will build Profile Card Using Html Css.

First create folder in our system.

Profile SiteProfile Site

Next Right Click on folder and Click on Open with Vs Code. our project will open in VsCode Editor.For creating html or css file. First Click on plus icon and give your file name.like below picture.

Profile SiteProfile Site

Next we will link Css File or fontawesome link in our html file.

Profile SiteProfile Site

Next we will create div inside this div tag we create nested two div .in first div we display image and in second nested div we display information.

Profile SiteProfile Site

Next we will display description .this information will be display below name.

Profile SiteProfile Site

Next we will design our html code using Css in style.css file. firs we design our body and .glass div.glass div will display like blur.

Profile SiteProfile Site

Next we design our image and heading and paragraph and information also. Profile SiteProfile Site

Next we design our button using css.button will display in the right side of image.

Profile SiteProfile Site

Next we design circle that circle will display on top of glass div.

Profile SiteProfile Site

Now our profile Card has designed completelly. go to index.html and right click on hmtl file and click on open with live server. so our project index.html will open in browser automatically.

Profile SiteProfile Site

You can download source code from this github repository.

Jitendra Kumar