For_Beginners - FoolishDeveloper

How to Create Automatic Image Slider in HTML and CSS

Post author:Foolish Developer
Post published:August 20, 2021
Post category:3d_Slider css For_Beginners hs1 html image_sideshow image_slider

In this article, I will show you how to create an automatic image slider using HTML and CSS code. Earlier I designed many more types of image sliders and 3D image slideshows. I did not use any javascript code in this design. In this case, this automatic image slider has been created using only pure HTML and CSS code.

the image gallery is used in many places on the website. The slider is mainly used on the homepage of the website. The normal image slider has a rectangular box and the images can be changed automatically or manually.

But in the case of this design, all the images here are kept in a circular shape. Here I have used 9 images and created a circle of 360 by adding each image to one another. This slider rotates at certain intervals.

In this case, there is no place to change the image manually. It tends to change the image automatically. I have already created one more such image gallery. In that case, I made two buttons to change the image manually. You can see the design if you want to change the images manually.

Simple Automatic Image Slideshow [Live Demo]

If you do not understand what I am saying then you can use the demo below to get a live experience of how it works.

See the Pen
3d automatic image slider by Foolish Developer (@fghty)
on CodePen.

If you want the required source code, you can download the required source code using the download button at the bottom of the article.

As you can see in the video above, here are 9 pictures arranged neatly on a home page. Each image is arranged at a 40-degree angle with the other. As a result, 9 images are joined together to form a 360 circle.

(more…)

Responsive Our Team Section Using HTML, CSS and Bootstrap

Post author:Foolish Developer
Post published:August 18, 2021
Post category:Bootstrap css For_Beginners hs1 html Our_Team_Section Profile_Card

Responsive Our Team Section is used in various business and personal websites. Team Section you can easily create with the help of HTML and CSS code. This will increase the quality of your website as well as attract users. Here you can sort some information including profile images of important people of your company or business.

In this article, I will show you how to Create a responsive team section using HTML, CSS, and Bootstrap. Before that, I made many more types of profile cards and team sections.

Here I have used three profile images you can increase or decrease the amount if you want. I have shared in the tutorial below how to increase this amount. It’s a completely responsive team section bootstrap which I used bootstrap programming code to make it responsive. HTML and CSS are mainly used here to design it.

I have used social media icons for each profile image. Under normal circumstances, these icons are completely hidden. These icons appear when you click on the profile box. All in all, it is a beautiful and simple Responsive Our Team Section design.

Responsive Our Team Section (more…)

Neumorphism Login Form using HTML & CSS

Post author:Foolish Developer
Post published:August 12, 2021
Post category:css For_Beginners html login_form login_page neumorphism

Neumorphism Login Form is much more interesting than other login designs. CSS Neumorphism Login Form You can easily create with HTML and CSS. In this article, I am going to show you how to create a Neumorphism login form using only HTML and CSS code. Earlier I made login form in many more designs.

We all know that the login form is a very important element of a website. This type of login form is used to access accounts on various websites. There are different types of login forms that I have already created. Neumorphism is a very important UI trend. This design is much simpler and much more interesting to look at than the general design.

Neumorphism All these elements are made by a single color in the case of login design. In this case, the element and the background of the web page are completely the same. The size of the element is determined here using only the shadow of the CSS code.

Video Tutorial of Neumorphism Login Form

You can watch the video below to know the complete tutorial on how I made this CSS Neumorphism login page.

Hopefully, you have learned how to make it from the video tutorial above. Everything here is like a normal login form.

In the case of Neumorphism design, the background color of the webpage and the background color of the element is the same. In that case, the shape of the element is created using the shadow (box-shadow) of CSS.

First of all, I used a profile image. This image is slightly above the login form, meaning that half of the image is inside the Neomorphism Login Form Design and the other half is outside the login form. Which looks much more interesting and beautiful to look at. Below that, I used a title. I used email ID and password input space to log in. I have used one icon for each input. Then there is a login button.

Normally the button rises slightly upwards. When you click on it, the button will move slightly inwards. I have used some text below everyone. All in all, it is a very simple CSS Neumorphism login form design.

Below I have given a live demo that will help you know how it works. Below you will find the required source code which you can copy and use for any of your own purposes. Also at the bottom of the article, I have given the download button to download the source code. But if you are a beginner then you must follow the tutorial below.

(more…)

Simple Analog Clock using HTML, CSS and JavaScript

Post author:Foolish Developer
Post published:July 15, 2021
Post category:html analog_clock Best_JavaScript clock css For_Beginners javascript Simple

If you want to make an analog clock using JavaScript then this article will help you. We all know that there are two types of watches, one analog and the…

Neumorphism Sidebar Menu Using HTML and CSS

Post author:Foolish Developer
Post published:June 30, 2021
Post category:Best_JavaScript css For_Beginners html sidebar_menu

In this article, you will learn how to create sidebar menus of Neumorphism design using HTML and CSS programming code. Earlier I designed many more types of sidebar menus using…

Navigation Menu Bar Design Using HTML and CSS

Post author:Foolish Developer
Post published:June 28, 2021
Post category:css For_Beginners html Menubar nav_css Navigation_Menu

Learn how to create a navigation menu bar using Html and CSS. The nav menu bar is found on almost all websites which enhances the quality of the website. Earlier…

Sidebar Menu Using HTML, CSS & JavaScript

Post author:Foolish Developer
Post published:June 20, 2021
Post category:Best_JavaScript css For_Beginners html javascript Menubar rank sidebar_menu sidemenu

In this article, you will learn how to create sidebar menus using HTML, CSS, and JavaScript programming code. I have designed many more sidebar menus before. Hope you like these sidebar menus like those designs.

In this case, I have used HTML to build and CSS programming code to design. In this case, a small amount of JavaScript has been used to activate the menu button. If you want to create a sidebar menu without JavaScript programming code, you can see the other designs I made. Clicking on the menu button here will hide the entire menu bar.

When you click on that button again, the full menu bar will appear. This sidebar menu is designed in a modern way and has everything you need to make a sidebar beautiful and attractive.

Sidebar Menu Using HTML CSS JavaScript

First of all, here I used a profile image. Below that is a place to give names and descriptions. Below that, I have added many menu items here. I added icons to each menu item. Adding icons makes menu items look more beautiful and attractive.

If you want, you can change these menu items to your liking. Here in the background, I have used blue color(background: rgb(5, 68, 104);) and added a hover color effect on menu items. The icons will change the background when you hover or click on the menu items. The sidebar menu is a very simple and simple design that you can undoubtedly learn to make very easily.

If you want to see a live demo of this structure, you can see the demo section below. You can also copy the required source code from there and use it for your own purposes.

See the Pen
side bar menu by shantanu jana (@fghty)
on CodePen.

(more…)

How to Create Automatic Image Slider in HTML and CSS

Simple Automatic Image Slideshow [Live Demo]

Responsive Our Team Section Using HTML, CSS and Bootstrap

Responsive Our Team Section (more…)

Neumorphism Login Form using HTML & CSS

Video Tutorial of Neumorphism Login Form

Simple Analog Clock using HTML, CSS and JavaScript

Neumorphism Sidebar Menu Using HTML and CSS

Navigation Menu Bar Design Using HTML and CSS

Sidebar Menu Using HTML, CSS & JavaScript

Sidebar Menu Using HTML CSS JavaScript

Navigate

All Coding Handwritten Notes

Browse Handwritten Notes