AmitDiwan has Published 11364 Articles

How to create a "fixed" menu with CSS?

AmitDiwan

AmitDiwan

Updated on 17-Nov-2023 10:38:18

561 Views

To create a fixed menu on a web page, use the position property and set the value fixed. Set the width to 100% using the width property. Set the Navigation Menu Use the element to create the navigation menu on a web page. The links are set using the ... Read More

How to create a "coupon" with CSS?

AmitDiwan

AmitDiwan

Updated on 17-Nov-2023 10:32:34

591 Views

We will see how to create a coupon with CSS. For that, we need to set the company name on the top, an image below, After that comes with coupon code and a text representing when the coupon will expire. Set the Parent Container for the Coupon We gave set the parent ... Read More

How to create a "coming soon page" with CSS and JavaScript?

AmitDiwan

AmitDiwan

Updated on 17-Nov-2023 10:29:16

182 Views

We will create a coming soon page with a timer. The timer is set using the setInterval() function. The time is fetched using the getTime() function. Set the div We have set the image as a div class. Rest, the coming soon text and the timer is placed within it − ... Read More

How to create a "card" with CSS?

AmitDiwan

AmitDiwan

Updated on 17-Nov-2023 10:25:09

262 Views

On a web page, we can easily create a card like you must have seen on a Team’s page. The employee name, and designation is visible with a thumbnail image. With CSS, we can easily a card and also set the hover style using the :hover selector. Set the Card ... Read More

How to create a "button group" with CSS?

AmitDiwan

AmitDiwan

Updated on 17-Nov-2023 10:22:33

389 Views

On a web page, we can easily create a button group. We will create a single div for all the buttons in a button group. They will be set with display inline-block. Also, the hover effect will be set. Create a Button Group on a web Page In a ... Read More

How to create "notes" with CSS?

AmitDiwan

AmitDiwan

Updated on 17-Nov-2023 09:54:18

346 Views

To create a design like notes, we need to style it according with CSS on a web page. Consider the sticky notes provided by Google Keep. It provided different color label options. Let us see how to create some notes. Set Different Divs for Notes Here, we are creating three ... Read More

How to create "next" and "previous" buttons with CSS?

AmitDiwan

AmitDiwan

Updated on 17-Nov-2023 09:50:24

4K+ Views

The next and previous buttons are links that are represented like the next and previous page. Also, the role of hover is set on a web page using the :hover selector. Set the Links for the Next and Previous Buttons First, set the links using the element and it’s href attribute. ... Read More

How to copy text to the clipboard with JavaScript?

AmitDiwan

AmitDiwan

Updated on 17-Nov-2023 09:46:14

388 Views

To copy text to the clipboard, we will use the HTMLInputElement methods, select() and setSelectionRange(). With that, we have also used the document execCommand() method to copy. Create an Input Text We will create an input text. This will the text that we will copy to the clipboard ... Read More

How to clear floats with the "clearfix" hack with CSS?

AmitDiwan

AmitDiwan

Updated on 16-Nov-2023 16:17:10

115 Views

The floats in CSS defines how an element should float. Let’s say, an element is taller than the element containing it. If it is floated, it will overflow outside of its container. Therefore, it’s hack is to use the overflow property and set the value auto. Without Clearfix Let us understand the ... Read More

How to clear an input field on focus with CSS?

AmitDiwan

AmitDiwan

Updated on 16-Nov-2023 15:34:07

938 Views

To clear an input field, first create an input filed. To clear, use the onfocus attribute. Let us see with two examples. Create an Input Field First, use the input type to create an input field in a form on a web page − Clear the Input Field on Focus To clear the input ... Read More

Advertisements