Image Upload With Preview Using Javascript and CSS
In this article, I am going to show you how to create a custom image upload and preview design. Image Preview is a great system where you can check before…
Javascript Limit Characters in textbox with HTML & CSS
If you want to make Javascript Limit Characters in the input box then this article will help you. Here I have shown how to create Limit Characters in textbox with…
Simple Profile Card UI Design using HTML and CSS
In this article, you will learn how to create a simple profile card Ui design using HTML and CSS code. In the meantime, I have made a profile card design using bootstrap. Now is the time to create a beautiful profile card using only HTML and CSS.
If you are a beginner and want to create an HTML CSS card design then this article will help you. Here I have made this design for beginners only relying on HTML and CSS. Many times we see such profile designs in different applications or websites. Along with this, various types of information, social media links, etc. are given. This type of CSS profile card design is also used in many blogs or free-lensing websites. PitangoUX is an end-to-end UX/UI service agency.
I have already shared the design of a Responsive Profile Card with you. However, this design is not Responsive it is just to create an idea about your profile card. If you want to create a Responsive Profile Card using HTML and CSS, you can try my previous design.
Below I have given a live demo that will help you to know how this profile works.
See the Pen
Responsive Profile Card UI by Foolish Developer (@fghty)
on CodePen.
As you saw in the demo above here I first designed a web page. I made a small box on it. I have added images, social-media-icons, and various texts to this box. A shadow has been used here which has made this card design a bit brighter than the webpage.
First of all, I used a profile image here then gave the title and some basic description. Then here are the links on various social media for contact and two buttons at the bottom. All in all, it is a very simple and beautiful profile card design. You can easily make this design if you have a basic idea of HTML and CSS relationships.
Responsive Profile Card UI Design using HTML and CSS
Below I have shared the complete tutorial on how I designed this Html profile card. If you are a beginner then you must follow the tutorial below. Use the download button below the article to download the source code.
Step 1: Design the web page
I designed the webpage using a small amount of CSS code below. Originally set the background color of the webpage here # d5e1ef and gave the font family.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #d5e1ef;
}
Step 2: Create the basic structure of the profile card
I have created a box on the web page using the following HTML and CSS code. The width of this box is 340px and the min-height is 100px. Here I have used white as the background color and box-shadow. The box-shadow helped create a black shadow around this card which made it more attractive and brighter.
<main>
</main>
main {
width: 340px;
overflow: hidden;
background-color: #fdfcfc;
font-size: 16px;
line-height: 22px;
color: #000;
border-radius: 7px;
box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.505);
margin: 50px auto;
}
Step 3: Add a profile image to the card (more…)
How to Create Responsive Image Gallery using HTML and CSS
In this article, I am going to show you how to create a Responsive Image Gallery using HTML and CSS code. Earlier I showed you how to create a filterable image…
Responsive Image Slider With Manual Button & Auto-play
I am going to show you how to make a Responsive Image Slider with manual and autoplay. Earlier I shared with you many more types of image sliders using HTML,…
Javascript Analog Clock Tutorial For Beginners
In this article, I am going to show you how to create an analog clock using HTML CSS, and JavaScript code. In the meantime, I have designed many more types of analog and digital clocks. Here I have explained in full detail how I made it. So if you are a beginner then this tutorial will help you completely.
At different times we see JavaScript clocks on websites or applications. This is an important JavaScript project. Which you can easily build if you have an idea about basic HTML, CSS, and JavaScript. In the case of digital clocks, we see time digitally.
However, in the case of analog clocks, there are three hands that indicate the time in hours, minutes, and seconds. Below I have given a live demo of it which will help you to know how it works. Here you will find the required source code which you can copy and use in your own work.
See the Pen
neumorphism analog clock by Raj Template (@RajTemplate)
on CodePen.
Hopefully, the demo above has satisfied you a lot. The time used for this watch is taken from your device. First, it will receive the current time from your device. Then the time will be converted to degrees and the hands will continue to rotate. It will take time from your device once and then update that time every second.
As you can see above I have taken the help of Neumorphism design to make this analog watch here. You can also use this design if you want to make an analog watch of Neumorphism design. Here we have created a circle on everyone’s first web page. Then I made a mark from 1 to 12 using a transparent image here.
Basically, this 1 to 12 sign is very important to indicate time. Here I have used images to make these symbols. But you can make it manually if you want. In the other designs I have already made, I have manually created these symbols or numbers with the help of HTML and CSS code. Since I am making Javascript Analog Clock Tutorial for beginners, I have designed it easily using an image here.
Then I made three hands using HTML and CSS code. Later I implemented these hands with the help of JavaScript. As I said above it does not show the time of any server. It basically takes time for the device to update it.
Javascript Analog Clock Tutorial For Beginners
Below I have shown you in full step by step how you can make this design using HTML CSS and JavaScript. HTML and CSS code was used to design this analog clock, and JavaScript enabled it.
Step 1: Basic design of webpage with CSS
Below I have used some amount of CSS code to design the webpage. Here the background color of the web page I have used is white and the mini-height: 100 vh.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fa;
}
Step 2: Create the basic structure of the analog clock (more…)
Javascript Accordion Menu
Javascript Accordion Menu is used to organize questions and answers on various websites. Here you will find the source code for creating the Accordion section using javascript. Today you will…
Text Typing Animation HTML CSS
In this article, I am going to show you how to create Text Typing Animation using only HTML and CSS. Earlier I made another typewriter where I used JavaScript. We…
Text Typing Animation Effect using Javascript
Text Typing Animation Effect is better known as a typewriter. This type of text typing effect you can easily create with the help of JavaScript. In this tutorial, you will…
Responsive Filterable Image Gallery using HTML, CSS & Javascript
Responsive Filterable Image Gallery is used on various websites to sort images by category. In this article, I am going to show you how to create a Responsive Filterable Image Gallery with the help of HTML CSS, and javascript.
Filterable Image Gallery is a popular web element that is used around various websites. It is a kind of image gallery where a large number of images are neatly arranged together. The notable point is that all the images can be sorted by category here. There is a navigation bar where all the categories are sorted. When clicking on any one of those categories. Then all the images in that category are seen and the rest of the images are hidden. As a result, the user can easily find the images of his choice.
This type of design is mainly used in many websites where a lot of images are put together. However, in this case, I have created this Filterable Image Gallery using Pure JavaScript.
Video Tutorial of Responsive Filterable Image Gallery
If you do not understand what I am saying then you can watch the video tutorial below. This video will help you to know better how I made this design.
Hopefully, you have learned how to make it from the video tutorial above. As you can see above, I first created a navigation bar on a web page. Where I created five-category buttons. Here I have used a total of 9 images. I have used different categories of images here.
You can add many more images with these 9 images if you want. In the category in the navigation bar, you can see the image related to the category you click on. In the same way, when you click on another category, the images of that category will be seen and the rest will be hidden. I made it fully responsive so that it can be used on all devices.
I hope you understand how this Responsive Filterable Image Gallery works. But for better understanding, I have given the live demo below. This live demo will help you get a live experience of this design.
See the Pen
by Foolish Developer (@fghty)
on CodePen.
