Nandini roy

Nandini roy

1629142067

Simple Analog Clock using HTML, CSS and JavaScript

In this article I am going to show you how to make an analog clock using HTML CSS and JavaScript code. I have already designed many types of analog clocks. This watch is made in the shape of a dark neumorphism design. Like a typical analog kite there are three hands to indicate hours minutes and seconds. Here I have used symbols instead of numbers from 1 to 12.

You can watch the live demo to see how this analog clock works. Since I made it with the help of neumorphism design, I have used the same color in the background of the clock and in the background of the page. First of all I made a box with 30 rem width and 30 rem height on a web page. Border-radius 50% has been used to round this box. I have used box-shadow here to implement neumorphism design.

 

Live Demo & Source Code

 

What is GEEK

Buddha Community

Simple Analog Clock using HTML, CSS and JavaScript
anita maity

anita maity

1626351778

Create an Analog Clock using HTML, CSS and JavaScript

We are going to build a real-time analog clock using HTML, CSS, and JavaScript.
We will create three files (HTML file, a CSS file, and JavaScript File), we also have an image of the clock that will be used in the background, and on top of that, we will make an hour, minute, and second hand (using HTML and CSS). These hands will rotate as per the system time (we will use the predefined Date function of JavaScript to calculate the degree of rotations of each hand).

HTML: It is a simple file having the basic structure of the webpage and ID for the clock’s body and for the second, minute, hour hands.
CSS: The CSS is used just for making the clock actually look a bit nicer. We have basically centered our clock in the middle of the webpage.
JavaScript: The JavaScript file will provide the logic behind the rotation of the hands.

Watch Live Demo

#analog clock #simple analog clock #real-time analog clock #javascript #html #css

anita maity

anita maity

1626364803

Simple Analog Clock using HTML, CSS and JavaScript

#html #css #javascript #analog #clock

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

πŸ“ Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

anita maity

anita maity

1623588198

How To Make An Analog Clock With HTML, CSS and JavaScript

Welcome to this interesting tutorial on creating a real-time analog clock with HTML, CSS, and JavaScript. Another interesting part of this tutorial is that no library will be used, we are making it with pure JavaScript. Before we move on, you need to have proficient knowledge of HTML, CSS, and JavaScript, this enables you to understand the step-by-step code as we move one.
At the end of this tutorial, you will be able to build an awesome working analog clock.

Watch Live Demo

#html #css #javascript #clock #analog