CSS TUTORIAL - Coding Help - Codinghelp.in https://codinghelp.in PHP,HTML,CSS,JS,Wordpress,Blogger,Seo Tools,Domain,Hosting And Others Support Sat, 26 Aug 2023 14:56:16 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 table css html template https://codinghelp.in/table-css-html-template/?utm_source=rss&utm_medium=rss&utm_campaign=table-css-html-template https://codinghelp.in/table-css-html-template/#respond Sat, 26 Aug 2023 14:56:16 +0000 https://codinghelp.in/?p=689 1) Rotated Table Headers Demo Image: Rotated Table Headers Column Header Rotation in CSS Tutorial/codes – Demo Author: Chris Coyier Created: MARCH 24, 2014 Made with: HTML, CSS(SCSS) 2) Angular material table Demo Image: Angular material table Angular matarial table is simply directive that allows you with no effort make good looking table in Google Material style. […]

The post table css html template first appeared on Coding Help - Codinghelp.in.

]]>

1) Rotated Table Headers

Rotated Table Headers
Demo Image: Rotated Table Headers

Column Header Rotation in CSS

Tutorial/codes – Demo

Author:
Chris Coyier
Created:
MARCH 24, 2014
Made with:
HTML, CSS(SCSS)

2) Angular material table

Angular material table
Demo Image: Angular material table

Angular matarial table is simply directive that allows you with no effort make good looking table in Google Material style.

Tutorial/codes – Demo

Author:
sntr
Created:
NOVEMBER 02, 2015
Made with:
HTML, CSS and JavaScript

3) Sticky Table Headers & Columns

Sticky Table Headers & Columns
Demo Image: Sticky Table Headers & Columns

A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it addresses the overflowing table problem including adding support for biaxial headers.

Tutorial/codes – Demo

Author:
Mike
Created:
NOVEMBER 04, 2015
Made with:
HTML, CSS(SCSS) and JavaScript

4) HTML / Javascript – Expand and collapse table rows

HTML / Javascript - Expand and collapse table rows
Demo Image: HTML / Javascript – Expand and collapse table rows

HTML / Javascript – Expand and collapse table rows with checkbox

Tutorial/codes – Demo

Author:
Wes Head
Created:
JULY 02, 2013
Made with:
HTML(Slim), CSS(Sass) and JavaScript

5) Data table using jquery datatable in Angularjs

Data table using jquery datatable in Angularjs
Demo Image: Data table using jquery datatable in Angularjs

html table using angularjs and jquery datatable

Tutorial/codes – Demo

Author:
Kurtis
Created:
AUGUST 01, 2016
Made with:
HTML, CSS and JavaScript

6) Responsive Table with DataTables

Responsive Table with DataTables
Demo Image: Responsive Table with DataTables

Responsive Table with DataTables

Tutorial/codes – Demo

Author:
SitePoint
Created:
APRIL 15, 2015
Made with:
HTML, CSS and JavaScript

7) Responsive Table

Responsive Table
Demo Image: Responsive Table

This demo shows how to change the style and layout of a table according to the available space.

Tutorial/codes – Demo

Author:
Iván Villamil
Created:
FEBRUARY 22, 2016
Made with:
HTML, CSS(SCSS)

8) A Better Fluid Responsive Table

A Better Fluid Responsive Table
Demo Image: A Better Fluid Responsive Table

Developed with JavaScript and semantic markup.

Tutorial/codes – Demo

Author:
Dudley Storey
Created:
APRIL 01, 2014
Made with:
HTML, CSS and JavaScript

9) Header Tabel Fix dengan CSS3

Header Tabel Fix dengan CSS3
Demo Image: Header Tabel Fix dengan CSS3

Header Tabel Fix dengan CSS3

Tutorial/codes – Demo

Author:
Dumet_School
Created:
APRIL 08, 2017
Made with:
HTML, CSS

10) Table (Project panel web app)

Tabel (Project panel web app)
Demo Image: Tabel (Project panel web app)

Table (Project panel web app)

Tutorial/codes – Demo

Author:
Varo
Created:
FEBRUARY 15, 2016
Made with:
HTML, CSS

11) Responstable 2.0: a responsive table solution

Responstable 2.0: a responsive table solution
Demo Image: Responstable 2.0: a responsive table solution

Responstable is a CSS solution for responsive tables. It uses the HTML5 attribute data-th and the pseudo :after to create a alternate column header when in mobile view. Because it is designed mobile first you will need the respond.js

Tutorial/codes – Demo

Author:
Jordy van Raaij
Created:
FEBRUARY 18, 2014
Made with:
HTML, CSS and JavaScript

12) Crisp table

Crisp table
Demo Image: Crisp table

Style a Simple Data Table

Tutorial/codes – Demo

Author:
charlie hield
Created:
AUGUST 29, 2012
Made with:
HTML, CSS(SCSS) and JavaScript

PRICING TABLE

13) Animated Pricing Layout (hover over the graphic)

Animated Pricing Layout (hover over the graphic)
Demo Image: Animated Pricing Layout (hover over the graphic)

Designed and developed this pricing module. Thought it would be fun to add some background animation to differentiate between pricing levels.

Tutorial/codes – Demo

Author:
Kara
Created:
DECEMBER 01, 2016
Made with:
HTML, CSS(SCSS)

14) Particle Animation Pricing Table

Particle Animation Pricing Table
Demo Image: Particle Animation Pricing Table

Particle Animation Pricing Table

Tutorial/codes – Demo

Author:
Kingsten Banh
Created:
NOVEMBER 29, 2015
Made with:
HTML, CSS(SCSS) and JavaScript

15) Adaptive Pricing Table

Adaptive Pricing Table
Demo Image: Adaptive Pricing Table

Adaptive Pricing Table

Tutorial/codes – Demo

Author:
Alex
Created:
JULY 29, 2016
Made with:
HTML, CSS(SCSS)

16) Pricing table ui with animation

Pricing table ui with animation
Demo Image: Pricing table ui with animation

Pricing table ui with animation

Tutorial/codes – Demo

Author:
jamal hassonui
Created:
FEBRUARY 14, 2018
Made with:
HTML, CSS

17) Responsive pricing table CSS3

Responsive pricing table CSS3
Demo Image: Responsive pricing table CSS3

Responsive pricing table CSS3

Tutorial/codes – Demo

Author:
Soufiane Abid
Created:
MARCH 15, 2016
Made with:
HTML, CSS

18) Horizontal Pricing table UI

Horizontal Pricing table UI
Demo Image: Horizontal Pricing table UI

Simple pricing tables example using CSS3 transitions.

Tutorial/codes – Demo

Author:
Joseph Victory
Created:
AUGUST 26, 2014
Made with:
HTML, CSS

19) Clip Mask Pricing Table

Clip Mask Pricing Table
Demo Image: Clip Mask Pricing Table

Neat interaction for a pricing table with medal grade descriptors using a clipping-mask effect.

Tutorial/codes – Demo

Author:
Jessica Biggs
Created:
MAY 18, 2016
Made with:
HTML, CSS(SCSS) and JavaScript

20) Monthly plan price tables

Monthly plan price tables
Demo Image: Monthly plan price tables

price tables

Tutorial/codes – Demo

Author:
Melissa Collins
Created:
MARCH 15, 2016
Made with:
HTML, CSS and JavaScript

21) Product Pricing Page Design

Product Pricing Page Design
Demo Image: Product Pricing Page Design

Product page design with bold slanted header and pricing table

Tutorial/codes – Demo

Author:
Lewis Robinson
Created:
APRIL 12, 2016
Made with:
HTML(Pug), CSS(SCSS)

22) Individualistic Pricing Tables

Individualistic Pricing Tables
Demo Image: Individualistic Pricing Tables

Individual uniqueness of each table developed using only HTML5/CSS3.

Tutorial/codes – Demo

Author:
Hassane Fall
Created:
APRIL 02, 2016
Made with:
HTML, CSS(SCSS)

23) Material Design Responsive Pricing Tables

Material Design Responsive Pricing Tables
Demo Image: Material Design Responsive Pricing Tables

UI – Material Design Responsive Pricing Table

Tutorial/codes – Demo

Author:
Renan Pupin
Created:
OCTOBER 02, 201
Made with:
HTML, CSS(SCSS)

24) Jumping on the glowing buttons Pricing table

CSS Price Cards
Demo Image: CSS Price Cards

Jumping on the glowing buttons and box shadow band wagon with this one

Tutorial/codes – Demo

Author:
Jamie Coulter
Created:
JANUARY 28, 2016
Made with:
HTML(Haml), CSS(SCSS)

25) Responsive comparison table

Responsive comparison table
Demo Image: Responsive comparison table

Responsive comparison table

Tutorial/codes – Demo

Author:
Adrian Jacob
Created:
SEPTEMBER 16, 2015
Made with:
HTML, CSS and JavaScript

26) Pricing table with css switch toggle

Pricing table with css switch toggle
Demo Image: Pricing table with css switch toggle

Pricing table with css switch toggle

Tutorial/codes – Demo

Author:
Kijan Maharjan
Created:
APRIL 14, 2016
Made with:
HTML, CSS(Less) and JavaScript

27) Responsive price table based on Bootstrap 3 break points

Responsive price table based on Bootstrap 3 break points
Demo Image: Responsive price table based on Bootstrap 3 break points

Simple responsive price table using css3, bootstrap container width. It adapts on four container widths: fluid on mobile, 768px, 992px, 1200px.

Tutorial/codes – Demo

Author:
thingo
Created:
APRIL 27, 2014
Made with:
HTML, CSS

28) Price table – bootstrap

price table - bootstrap
Demo Image: price table – bootstrap

Responsive price table made in bootstrap framework | Ready code for price table you can use easily.

Tutorial/codes – Demo

Author:
Digital Avinash
Created:
JULY 18, 2016
Made with:
HTML, CSS

29) Hover effect Pricing Table

Hover effect Pricing Table
Demo Image: Hover effect Pricing Table

Pricing Table

Tutorial/codes – Demo

Author:
Paulo Ribeiro
Created:
OCTOBER 27, 2018
Made with:
HTML, CSS(SCSS)

30) Material responsive pricing tables

Material responsive pricing tables
Demo Image: Material responsive pricing tables

Material pricing tables

Tutorial/codes – Demo

Author:
Kreso Galic
Created:
JANUARY 13, 2016
Made with:
HTML, CSS(SCSS)

31) CSS only Pricing Table

Pricing Table
Demo Image: Pricing Table

Pricing Table

Tutorial/codes – Demo

Author:
Joanez Andrades
Created:
JUNE 14, 2016
Made with:
HTML, CSS(SCSS)

32) Pricing table UI design

Pricing table UI design
Demo Image: Pricing table UI design

Pricing table UI design

Tutorial/codes – Demo

Author:
Chouaib Blgn
Created:
SEPTEMBER 16, 2017
Made with:
HTML, CSS(SCSS)

33) Flat Pricing Card

Flat Pricing Card
Demo Image: Flat Pricing Card

Flat pricing card / pricing table item with box shadow and gradient effect.

Tutorial/codes – Demo

Author:
LLT
Created:
MAY 18, 2016
Made with:
HTML, CSS(SCSS)

34) Simple Pricing Table

Simple Pricing Table
Demo Image: Simple Pricing Table

Simple Pricing Table

Tutorial/codes – Demo

Author:
John Bowie
Created:
JANUARY 23, 2014
Made with:
HTML, CSS

35) Professional pricing table

Professional pricing table
Demo Image: Professional pricing table

html css pricing table

Tutorial/codes – Demo

Author:
Pali Madra
Created:
AUGUST 13, 2013
Made with:
HTML, CSS

36) Responsive Pricing plan layout using flexbox

Responsive Pricing plan layout using flexbox
Demo Image: Responsive Pricing plan layout using flexbox

Custom pricing tables using flexbox to make it squish oh so good.

Tutorial/codes – Demo

Author:
Eric Thayer
Created:
NOVEMBER 05, 2015
Made with:
HTML, CSS(SCSS)

37) Pricing Tables

Pricing Tables
Demo Image: Pricing Tables

Pricing tables are an essential component on websites where digital services are offered. While there seems to be a common pattern, there are infinite styling possibilities.

Tutorial/codes – Demo

Author:
Gerta Xhepi
Created:
MARCH 09, 2016
Made with:
HTML(Haml), CSS(SCSS)

38) HTML/CSS Pricing table

Pricing Table
Demo Image: Pricing Table

HTML/CSS Pricing table

Tutorial/codes – Demo

Author:
aladin ben sassi
Created:
APRIL 26, 2014
Made with:
HTML, CSS

39) Flat Pricing Table

Flat Pricing Table
Demo Image: Flat Pricing Table

A simple flat pricing table with jQuery that enables the content to slide down onClick.

Tutorial/codes – Demo

Author:
Andy Tran
Created:
SEPTEMBER 01, 2014
Made with:
HTML(Haml), CSS(LESS) and JavaScript

40) Flat CSS price table

CSS Price Table
Demo Image: CSS Price Table

A flat CSS price table

Tutorial/codes – Demo

Author:
Robin Brons
Created:
MAY 10, 2013
Made with:
HTML, CSS

41) Bootstrap Pricing Table

Bootstrap Pricing Table
Demo Image: Bootstrap Pricing Table

Bootstrap Pricing Table

Tutorial/codes – Demo

Author:
Sahar Ali Raza
Created:
MARCH 15, 2016
Made with:
HTML, CSS

42) Just simple pricing table

A just simple pricing table
Demo Image: A just simple pricing table

A just simple pricing table

Tutorial/codes – Demo

Author:
Agustin Ortiz
Created:
OCTOBER 03, 2014
Made with:
HTML, CSS

43) Mystical computing company Pricing Table

Mystical computing company Pricing Table
Demo Image: Mystical computing company Pricing Table

Pricing table comparing 3 different plans for a mystical computing company

Tutorial/codes – Demo

Author:
Travis Williamson
Created:
AUGUST 15, 2017
Made with:
HTML, CSS

44) Flat Pricing Tables Design

Flat Pricing Tables Design
Demo Image: Flat Pricing Tables Design

Flat Pricing Tables Design

Tutorial/codes – Demo

Author:
Mehmet mert
Created:
FEBRUARY 28, 2015
Made with:
HTML, CSS

45) Colorful pricing table

Colorful pricing table
Demo Image: Colorful pricing table

Pricing tables

Tutorial/codes – Demo

Author:
catcod
Created:
AUGUST 14, 2014
Made with:
HTML, CSS

46) Responsive Flip Pricing Table

Responsive Flip Pricing Table
Demo Image: Responsive Flip Pricing Table

Responsive Flip Pricing Table to view month or year price.

Tutorial/codes – Demo

Author:
Shane Heyns
Created:
JANUARY 12, 2015
Made with:
HTML, CSS and JavaScript

47) CSS3 pricing table

CSS3 pricing table
Demo Image: CSS3 pricing table

When designing a pricing table for a product or service, your job as a web designer/developer is to make sure that the table is easy to understand, intuitive and clear. From this demo you’ll learn how to build an awesome CSS3 pricing table, with no images and minimal HTML markup

Tutorial/codes – Demo

Author:
Arkev
Created:
APRIL 24, 2013
Made with:
HTML, CSS

PERIODIC TABLE

48) The Periodic Table Of Elements

The Periodic Table Of Elements
Demo Image: The Periodic Table Of Elements

The periodic table of elements in lovely html and CSS, with some fun CSS3 transitions

Tutorial/codes – Demo

Author:
Brady Sammons
Created:
APRIL 05, 2013
Made with:
HTML, CSS(SCSS) and JavaScript

49) three.js css3d – periodic table info

three.js css3d - periodic table. info.
Demo Image: three.js css3d – periodic table. info.

three.js css3d – periodic table. info.

Tutorial/codes – Demo

Author:
i2801
Created:
JULY 29, 2015
Made with:
HTML, CSS and JavaScript

The post table css html template first appeared on Coding Help - Codinghelp.in.

]]> https://codinghelp.in/table-css-html-template/feed/ 0 Async and Defer difference || How to use Async and Defer || How to load JS and CSS before and after https://codinghelp.in/async-and-defer-difference-how-to-use-async-and-defer-how-to-load-js-and-css-before-and-after/?utm_source=rss&utm_medium=rss&utm_campaign=async-and-defer-difference-how-to-use-async-and-defer-how-to-load-js-and-css-before-and-after https://codinghelp.in/async-and-defer-difference-how-to-use-async-and-defer-how-to-load-js-and-css-before-and-after/#respond Mon, 08 May 2023 12:38:15 +0000 https://codinghelp.in/?p=513 Async and Defer difference || How to use Async and Defer || How to load JS and CSS before and after   Async and Defer difference ? If you’re working with JavaScript, it’s important to understand the difference between Async and defer attributes. Async allows your script to run as soon as it’s loaded, without […]

The post Async and Defer difference || How to use Async and Defer || How to load JS and CSS before and after first appeared on Coding Help - Codinghelp.in.

]]> Async and Defer difference || How to use Async and Defer || How to load JS and CSS before and after

 

Async and Defer difference ?

If you’re working with JavaScript, it’s important to understand the difference between Async and defer attributes. Async allows your script to run as soon as it’s loaded, without blocking other elements on the page. Defer means your script will only execute after the page has finished loading.

What is async and defer in HTML?

If async is present: The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes) If defer is present (and not async ): The script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.

How to load JS and CSS before and after

For this, you should use Async and Defer in your script, both of these help you to load the script before and after

Async is more useful when you really don’t care when the script loads and nothing else that is user dependent depends upon that script loading. The most often cited example for using async is an analytics script like Google Analytics that you don’t want anything to wait for and it’s not urgent to run soon and it stands alone so nothing else depends upon it.

In general the jquery library is not a good candidate for async as other scripts depend on it and you want to install event handlers so that your page can start responding to user events and you need to do something to establish the initial state May need to run jQuery-based initialization code of the page. It can be used as async, but other scripts will have to be coded so that they don’t execute until jQuery is loaded.

How to use Async and Defer ?

Use async for the external scripts that don’t perform DOM manipulations. The async doesn’t guarantee the page rendering interruption when the script executes. Use defer for all the scripts that perform DOM manipulations. The scripts with the defer attribute execute in sequence at the end of the page load.

With respects to site load speed

  1. Is there any advantage in adding async to the two scripts I have at the bottom of the page?
  2. Would there be any advantage in adding the async option to the two scripts and putting them at the top of the page in the <head>?
  3. Would this mean they download as the page loads?
  4. I assume this would cause delays for HTML4 browsers, but would it speed up page load for HTML5 browsers?

Using <script defer  src="https://example.com/long.js?speed=1"></script>

  1. Would loading the two scripts inside <head> with the attribute defer the same affect as having the scripts before </body>?
  2. Once again I assume this would slow up HTML4 browsers.

Using <script async  src="https://example.com/long.js?speed=1"></script>

<link rel="stylesheet" href="example/style.min.css?ver=6.0.3" async>

<link rel="stylesheet" href="example.com/path/to/my.css" media="print" onload="this.media='all'">


If I have two scripts with async enabled

  1. Would they download at the same time?
  2. Or one at a time with the rest of the page?
  3. Does the order of scripts then become a problem? For example one script depends on the other so if one downloads faster, the second one might not execute correctly etc.

Finally am I best to leave things as they are until HTML5 is more commonly used?

How to use Async and Defer

If your second script depends on the first script (eg your second script uses the jquery loaded in the first script), you cannot make them async without additional code to control the execution order, But you can defer them because the defer scripts will still be executed out of order, not until after the document has been parsed. If you have that code and don’t need the scripts to run immediately, you can make them async or defer.

You can put the scripts in the <head> tag and set them to defer and the loading of the scripts will be deferred until the DOM has been parsed and which allows for fast page display in newer browsers. will do which supports defer, but it won’t help you at all in older browsers and it’s not really faster than putting the script right before </body> which works in all browsers. So, you can see why it’s best to put them right in front of </body> .

 

The post Async and Defer difference || How to use Async and Defer || How to load JS and CSS before and after first appeared on Coding Help - Codinghelp.in.

]]> https://codinghelp.in/async-and-defer-difference-how-to-use-async-and-defer-how-to-load-js-and-css-before-and-after/feed/ 0 +20 Free login page design using html and css https://codinghelp.in/20-free-login-page-design-using-html-and-css/?utm_source=rss&utm_medium=rss&utm_campaign=20-free-login-page-design-using-html-and-css https://codinghelp.in/20-free-login-page-design-using-html-and-css/#respond Sun, 11 Dec 2022 15:30:14 +0000 https://codinghelp.in/?p=371 There are a lot of great HTML login form page templates out there. But which one is the right one for you? Here are some things to consider when making your decision: – How easy is the template to use? You don’t want to spend hours trying to figure out how to make it work. […]

The post +20 Free login page design using html and css first appeared on Coding Help - Codinghelp.in.

]]> There are a lot of great HTML login form page templates out there. But which one is the right one for you? Here are some things to consider when making your decision:
– How easy is the template to use? You don’t want to spend hours trying to figure out how to make it work.
– How customizable is the template? Can you change the colors, font, and layout to match your brand?
– Is the template responsive?

 

Neumorphism Login Form

Dark White 3d Design Login page HTML CSS Page

More info / Download Get Hosting

login modal

Popup Login Page html css

More info / Download Get Hosting

Portal Login CSS

Simple Login Page white and background seen sign in page

More info / Download Get Hosting

Facebook Login Page

Facebook copy login page new design sing in page with html css

More info / Download Get Hosting

CSS Login Page

Best Desgin Login Page html css

More info / Download Get Hosting

Css / html Login form

UI Login Page best login source code html css

More info / Download Get Hosting

Pure CSS3 Login Form

Example of simple csc3 login form with SVG icon. In future it will add tabs functionality to switch from sign in to sign up and back.

More info / Download Get Hosting

Login and Signup Form HTML5 CSS3

This free css3 login page design template with Facebook and Twitter integration includes css, html5, and js templates. Social networking signup is also accessible with password show/hide options to facilitate password entry on-screen.

More info / Download Get Hosting

Clean login form

Black Color Login or Sign In Page html css

More info / Download Get Hosting

CSS3 HTML5 login panel

Username and password login page html csss

More info / Download Get Hosting

Day 001 Login Form

Login Page city background seen best login page.

More info / Download Get Hosting

Bootstrap Login Page

admin login section login page html css

More info / Download Get Hosting

Animated login form CSS3

very simple login page html css

More info / Download Get Hosting

Wavy login form

Cute CSS login form with vertical wave animation.

More info / Download Get Hosting

Web Chat Layout Login Page

More info / Download Get Hosting

Double slider Sign in/up Form

Normal Login Page Best Login Page HTML Css

More info / Download Get Hosting

Calm breeze login screen

Green Background with login page light color.

More info / Download Get Hosting

Login/Logout animation concept

Mobile Friendly Login page with background seen

More info / Download Get Hosting

Login Box Concept

Login page with black color light colors.

More info / Download Get Hosting

Responsive Login Form

Sunrise Color Background Login Page and Sing up Page

More info / Download Get Hosting

Bootstrap Snippet: Login Form

Simple White Color Login Page.

More info / Download Get Hosting

Popup Login & Signup with jQuery

Facebook and Google with login and sign in and sign up page, This Modal Window Popup login and Signup box is created with HTML5, CSS3 and leanModal.js plugin.

More info / Download Get Hosting

Random Login Form

Login Page with Background seen

More info / Download Get Hosting

Responsive Login Modal Window

Sign in Page and New Account Page

More info / Download Get Hosting

Material Compact Login Animation Login Google

More info / Download Get Hosting

Login & Sign Up Form Page html css

Sign In & Sign Up Form concept, click login and Sign Up to change language and observe the effect.

More info / Download Get Hosting

Absolute Center Login Page with Bootstrap

username password, term and condition forgot password Support

More info / Download Get Hosting

The post +20 Free login page design using html and css first appeared on Coding Help - Codinghelp.in.

]]> https://codinghelp.in/20-free-login-page-design-using-html-and-css/feed/ 0 Select tag with input tag display none or block | How can I show a hidden div when a select option is selected? https://codinghelp.in/select-tag-with-input-tag-display-none-or-block-how-can-i-show-a-hidden-div-when-a-select-option-is-selected/?utm_source=rss&utm_medium=rss&utm_campaign=select-tag-with-input-tag-display-none-or-block-how-can-i-show-a-hidden-div-when-a-select-option-is-selected https://codinghelp.in/select-tag-with-input-tag-display-none-or-block-how-can-i-show-a-hidden-div-when-a-select-option-is-selected/#respond Tue, 29 Mar 2022 09:28:54 +0000 https://codefind.in/?p=256 Select tag with input tag display none or block <!DOCTYPE html> <html> <head> <style> #hidden_input { display: none; } </style> </head> <body> <select id=”test” name=”form_select” onchange=”showDiv(‘hidden_input’, this)”> <option value=”0″>Hide</option> <option value=”1″>Show</option> </select> <br> <input id=”hidden_input” type=”email” placeholder=”Email” required=””> <script> function showDiv(divId, element) { document.getElementById(divId).style.display = element.value == 1 ? ‘block’ : ‘none’; } </script> </body> […]

The post Select tag with input tag display none or block | How can I show a hidden div when a select option is selected? first appeared on Coding Help - Codinghelp.in.

]]> Select tag with input tag display none or block

<!DOCTYPE html>
<html>
<head>
<style>
#hidden_input {
display: none;
}

</style>
</head>
<body>
<select id=”test” name=”form_select” onchange=”showDiv(‘hidden_input’, this)”>
<option value=”0″>Hide</option>
<option value=”1″>Show</option>
</select>
<br>
<input id=”hidden_input” type=”email” placeholder=”Email” required=””>
<script>
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? ‘block’ : ‘none’;
}

</script>
</body>
</html>

 

How can I show a hidden div when a select option is selected?

<!DOCTYPE html>
<html>
<head>
<style>
#hidden_div {
display: none;
}

</style>
</head>
<body>
<select id=”test” name=”form_select” onchange=”showDiv(‘hidden_div’, this)”>
<option value=”0″>No</option>
<option value=”1″>Yes</option>
</select>
<div id=”hidden_div”>This is a hidden div</div>
<script>
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? ‘block’ : ‘none’;
}

</script>
</body>
</html>

 

The post Select tag with input tag display none or block | How can I show a hidden div when a select option is selected? first appeared on Coding Help - Codinghelp.in.

]]> https://codinghelp.in/select-tag-with-input-tag-display-none-or-block-how-can-i-show-a-hidden-div-when-a-select-option-is-selected/feed/ 0 Contact us page design in html and css with source code https://codinghelp.in/contact-us-page-design-in-html-and-css-with-source-code/?utm_source=rss&utm_medium=rss&utm_campaign=contact-us-page-design-in-html-and-css-with-source-code https://codinghelp.in/contact-us-page-design-in-html-and-css-with-source-code/#respond Tue, 29 Mar 2022 09:05:55 +0000 https://codefind.in/?p=250 Contact us page design in html and css with source code Most importantly, we are familiar the code in html of this enrollment structure. We have taken a div inside the body whose class name is warpper. One more div is taken inside this div, whose class name is given principle. First inside this class […]

The post Contact us page design in html and css with source code first appeared on Coding Help - Codinghelp.in.

]]> Contact us page design in html and css with source code

Most importantly, we are familiar the code in html of this enrollment structure. We have taken a div inside the body whose class name is warpper. One more div is taken inside this div, whose class name is given principle. First inside this class A h1 tag is taken. The h1 tag is known as the biggest heading tag. This tag is utilized for heading something.

A structure tag is taken under h1 whose technique = “POST” is taken inside this structure Six p tag is taken inside everything p label input tag is taken and inside three info type = “text” is given. Also, three is given sort = “email” two is given sort = “secret word” and every one of these p labels are named class named intpt

A div is taken under the p tag, whose two p labels are taken inside the class name bott in div. The p tag is utilized for passages. This is a square component. Input is additionally taken inside this tag, in which one Type submit and another is type reset and the class name is given inside both these data sources.

After this, presently we are familiar the style of css, as usual, this time likewise the page edge: 0; cushioning: 0; box-measuring: line box; After this, the class warpper has been given width tallness and foundation tone with shading on the whole page, after which any remaining labels are additionally planned like a structure giving comparable style.

This structure isn’t planned accordingly, to plan it accordingly, you can style it by utilizing the @ media screen to give the size of the gadget that this structure can be utilized accordingly. In the event that you know about JavaScript or Python, you can involve this structure in your site.

In the event that you are having inconvenience in understanding this enlistment structure, you can comprehend by watching the video of this enrollment structure which is given beneath video instructional exercise, you can undoubtedly click it.

Download Now

The post Contact us page design in html and css with source code first appeared on Coding Help - Codinghelp.in.

]]> https://codinghelp.in/contact-us-page-design-in-html-and-css-with-source-code/feed/ 0 Registration form design in html and css with code https://codinghelp.in/registration-form-design-in-html-and-css-with-code/?utm_source=rss&utm_medium=rss&utm_campaign=registration-form-design-in-html-and-css-with-code https://codinghelp.in/registration-form-design-in-html-and-css-with-code/#respond Tue, 29 Mar 2022 08:48:08 +0000 https://codefind.in/?p=246 Registration form design in html and css with code Most importantly, we are familiar the code in html of this enrollment structure. We have taken a div inside the body whose class name is warpper. One more div is taken inside this div, whose class name is given principle. First inside this class A h1 […]

The post Registration form design in html and css with code first appeared on Coding Help - Codinghelp.in.

]]> Registration form design in html and css with code

Most importantly, we are familiar the code in html of this enrollment structure. We have taken a div inside the body whose class name is warpper. One more div is taken inside this div, whose class name is given principle. First inside this class A h1 tag is taken. The h1 tag is known as the biggest heading tag. This tag is utilized for heading something.

A structure tag is taken under h1 whose technique = “POST” is taken inside this structure Six p tag is taken inside everything p label input tag is taken and inside three info type = “text” is given. Also, three is given sort = “email” two is given sort = “secret word” and every one of these p labels are named class named intpt

A div is taken under the p tag, whose two p labels are taken inside the class name bott in div. The p tag is utilized for passages. This is a square component. Input is additionally taken inside this tag, in which one Type submit and another is type reset and the class name is given inside both these data sources.

After this, presently we are familiar the style of css, as usual, this time likewise the page edge: 0; cushioning: 0; box-measuring: line box; After this, the class warpper has been given width tallness and foundation tone with shading on the whole page, after which any remaining labels are additionally planned like a structure giving comparable style.

This structure isn’t planned accordingly, to plan it accordingly, you can style it by utilizing the @ media screen to give the size of the gadget that this structure can be utilized accordingly. In the event that you know about JavaScript or Python, you can involve this structure in your site.

In the event that you are having inconvenience in understanding this enlistment structure, you can comprehend by watching the video of this enrollment structure which is given beneath video instructional exercise, you can undoubtedly click it.

  Download Now

 

Web Page Registration Source Code Free Download

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
.fl{float: left;}
.fr{float: right;}
.warpper{
width: 100%;
height: 100vh;
background-color: #e0e5ec;
}
.main{
height :600px;
width :40%;
background-color: #e0e5ec;
overflow :hidden;
border-radius:15px;
margin-top:50px;
margin-left: 30%;
box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6),
-9px -9px 16px rgba(255, 255, 255, 0.5);
}
h1{
color:#4c4b71;
text-align:center;
margin: 30px 0;
letter-spacing:1px;
font-size:30px;
}
.intpt{
display: block;
width: 65%;
margin: 20px auto;
background-color: #e0e5ec;
box-shadow:9px 9px 16px #a3b1c699,
-9px -9px 16px #ffffff80 ;
border: 1px solid #e0e5ec;
color: #456990;
font-size: 16px;
font-weight: bold;
padding: 15px 30px;
border-radius: 5px;
outline: none;
}
.intpt:hover{
box-shadow: inset -10px -10px 30px 0 #ffffffb3,
inset 10px 10px 30px 0 #00000033;
}
.intpt::placeholder{
font-size: 16px;
font-weight: bold;
color: #4a8383;
}
.intpt:focus::-webkit-input-placeholder
{
color: #1abc9c;
font-size: 16px;
font-weight: bold;
-webkit-transform: translateY(-15px);
transform: translateY(-15px);

}
.bott{
width: 65%;
margin: auto;
}
.btn{
width: 45%;
padding: 15px 10px;
background: rgb(214, 214, 214);
border: none;
border-radius: 25px;
color: #EB5758;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
box-shadow: -7px -7px 20px 0 #ffffffb3,
7px 7px 20px 0 #00000033;
}
.btn:hover {
box-shadow: inset -7px -7px 20px 0 #ffffffb3,
inset 7px 7px 20px 0 #00000033;
}
@media screen and (max-width: 600px) {
div.main{
width :95%;
margin-left: 2%;
margin-top: 10%;
background-color: #e0e5ec;
border-radius:10px;

}
}
</style>
<title>Document</title>
</head>
<body>
<div class=”warpper fl”>
<div class=”main”>
<h1>
Create Account</h1>
<form method=”POST”>
<p>
<input type=”text” name=”fname” placeholder=” First Name” class=”intpt” ></p>
<p>
<input type=”text” name=”lname” placeholder=” Last Name”class=”intpt” ></p>
<p>
<input type=”text” name=”lname” placeholder=”Username” class=”intpt”></p>
<p>
<input type=”email” name=”uid” placeholder=”✉ Email” class=”intpt”></p>
<p>
<input type=”password” name=”pass” placeholder=” password” class=”intpt” ></p>
<p>
<input type=”password” name=”rpass” placeholder=” Confirm password” class=”intpt”></p>
<div class=”bott”>
<p>
<input type=”submit” type=”sub” value=”Register” class=”btn fl sub”></p>
<p>
<input type=”reset” type=”sub” value=”Reset” class=”btn fr res”></p>
</div>
</form>
</div>
</div>
</body>
</html>

 

The post Registration form design in html and css with code first appeared on Coding Help - Codinghelp.in.

]]> https://codinghelp.in/registration-form-design-in-html-and-css-with-code/feed/ 0 Mobile friendly registration form html code with css https://codinghelp.in/mobile-friendly-registration-form-html-code-with-css/?utm_source=rss&utm_medium=rss&utm_campaign=mobile-friendly-registration-form-html-code-with-css https://codinghelp.in/mobile-friendly-registration-form-html-code-with-css/#respond Tue, 29 Mar 2022 08:17:59 +0000 https://codefind.in/?p=237 Mobile friendly registration form html code with css First we should be aware of the html code of responsive enlistment structure. We have taken a div inside the body label whose class name is covering and inside this class name is a h2 tag and a div. The class name of the div is structure […]

The post Mobile friendly registration form html code with css first appeared on Coding Help - Codinghelp.in.

]]> Mobile friendly registration form html code with css

First we should be aware of the html code of responsive enlistment structure. We have taken a div inside the body label whose class name is covering and inside this class name is a h2 tag and a div. The class name of the div is structure conteniar h2. A structure tag is taken inside the class structure – conteniar called heading tag

Nine div is taken inside the structure tag and the class name of the layer div is input-name. The primary I tag is taken inside the first div. The I tag is utilized to interface the text style symbol inside that textual style. Is connected by giving the class name after which the information tag is taken under the I label whose type text and class name is named

A range tag is utilized underneath this info, whose class name is given last. The range tag is known as the inline component. An I tag and one more info tag are taken inside this tag. The I tag is named class name fa-client The sort of lock and information is named text class name.

The class name input-name inside another div I label whose class name is fa-envelope shows the mail symbol in the text style symbol. An info tag is taken inside this I label whose type is email and class. The name is given text-name

In the third and fourth div of the info name, the tag is required like the second div, in the div fifth, the main information tag is taken, which has the sort radio and the class name radio-button and id is named ravi. In which info is connected to class names orientation and for ravi, accordingly any remaining labels are written similarly.

Presently let us in on something about the css style of the responsive enrollment structure. Like us, this time additionally focused the edge cushioning to the structure’s page and boxed the case size, trailed by the body tag with the textual style family: Verdana, Geneva, sans-serif; And has given foundation tone

After this tag, we planned the page of the structure by giving the foundation covering property of foundation shading width cushioning edge line top and box-shadow, and planned a responsive structure by planning the wide range of various labels on it.

On the off chance that you rush to comprehend this structure, you can without much of a stretch get it by checking out at the instructional exercises of this structure. In this instructional exercise, we have made sense of about the structure in a simple manner, which you will get the code of this structure.

 

                                                Download this Source

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
background: #f2f2f2;
}
.wrapper {
background-color: #fff;
width:500px;
padding: 25px;
margin: 50px auto 0;
border-top: 5px solid #f5ba1a;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);

}
.wrapper h2{
font-size: 24px;
line-height: 24px;
padding-bottom: 30px;
text-align: center;
}
.input-name{
width: 90%;
position: relative;
margin: 20px auto;

}
.lock{
padding:8px 11px;
}
.name{
width: 45%;
padding:8px 0 8px 40px;
}
.input-name span{
margin-left: 35px;
}
.text-name{
width: 100%;
padding:8px 0 8px 40px;
}
.input-name i{
position: absolute;
font-size: 18px;
border-right: 1px solid #cccccc;
}
.email{
padding: 8px;
}
.text-name, .name{
border: 1px solid #cccccc;
outline: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
.text-name:hover, .name:hover{
background-color: #fafafa;
}
.text-name:focus, .name:focus{
-webkit-box-shadow: 0 0 2px 1px rgba(255, 169, 0, 0.5);
-moz-box-shadow: 0 0 2px 1px rgba(255, 169, 0, 0.5);
box-shadow: 0 0 2px 1px rgba(255, 169, 0, 0.5);
border: 1px solid #f5ba1a;
background: #fafafa;
}
.radio-button{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.gender {
margin-right: 1em;
}
.gender:before {
content: “”;
display: inline-block;
width: 0.5em;
height: 0.5em;
margin-right: 0.5em;
border-radius: 100%;
vertical-align: -3px;
border: 2px solid #cccccc;
padding: 0.15em;
background-color: transparent;
background-clip: content-box;
transition: all 0.2s ease;
}

.radio-button:hover + .gender:before {
border-color: #000;
}
.radio-button:checked + .gender:before {
background-color:#000;
border-color: #000;
}

.country{
display: inline-block;
width: 100%;
height: 35px;
padding: 0px 15px;
cursor: pointer;
color: #7b7b7b;
border: 1px solid #cccccc;
border-radius: 0;
background: #fff;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
transition: all 0.2s ease;
}
.country::-ms-expand{
display: none;
}
.country:hover, .country:focus{
color: #000;
background: #fafafa;
border-color: #000;
outline: none;
}
.arrow {
position: absolute;
top: calc(50% – 4px);
right: 15px;
width: 0;
height: 0;
pointer-events: none;
border-width: 8px 5px 0 5px;
border-style: solid;
border-color: #7b7b7b transparent transparent transparent;
}

.country:hover +.arrow, .country:focus +.arrow{
border-top-color: #000;
}
.chack{
margin-right: 1em;
position: relative;
}
.chack::before{
content: “”;
display: inline-block;
width: 0.5em;
height: 0.5em;
margin-right: 0.5em;
vertical-align: -2px;
border: 2px solid #cccccc;
padding: 0.12em;
background-color: transparent;
background-clip: content-box;
transition: all 0.2s ease;
}
.chack::after{
border-right: 2px solid #000;
border-top: 2px solid #0000;
content: “”;
height: 20px;
left: 2px;
position: absolute;
top: 7px;
transform: scaleX(-1) rotate(135deg);
transform-origin: left top;
width: 7px;
display: none;
}
.chack-button{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.chack-button:hover +.chack::before{
border-color: #000;
}
.chack-button:checked +.chack::before{
border-color: #000;
}
.chack-button:checked +.chack::after{
-moz-animation: check 0.8s ease 0s running;
-webkit-animation: check 0.8s ease 0s running;
animation: check 0.8s ease 0s running;
display: block;
width: 7px;
height: 20px;
border-color: #000;
}
@-webkit-keyframes check {
0% { height: 0; width: 0; }
25% { height: 0; width: 7px; }
50% { height: 20px; width: 7px; }
}

@keyframes check {
0% { height: 0; width: 0; }
25% { height: 0; width: 7px; }
50% { height: 20px; width: 7px; }
}
.button{
background:#f5ba1a;
height: 35px;
line-height: 35px;
width: 100%;
border: none;
outline: none;
cursor: pointer;
color: #fff;
font-size: 18px;
margin-bottom: 10px;

}
.button:hover{
background-color: #f8c22e;
}
.button:hover{
background-color: #f8c22e;
}

 

@media (max-width: 480px) {
.wrapper{
width: 100%;
}
.input-name{
margin-bottom: -10px;
}
.name{
width: 100%;
padding:8px 0 8px 40px;
margin-bottom: 10px;
}
.input-name span{
padding: 0;
margin:0;
}
}

 

</style>
<link href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet” integrity=”sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=”anonymous”>
</head>
<body>
<div class=”wrapper”>
<h2>
Mobile Friendly Registration Form</h2>
<div class=”form-conteniar”>
<form>
<div class=”input-name”>
<i class=”fa fa-user lock”></i>
<input type=”text” placeholder=”First Name” class=”name”>
<span class=”last”>
<i class=”fa fa-user lock”></i>
<input type=”text” placeholder=”Last Name” class=”name”>
</span>
</div>
<div class=”input-name”>
<i class=”fa fa-envelope email”></i>
<input type=”email” placeholder=”Email” required class=”text-name”>
</div>
<div class=”input-name”>
<i class=”fa fa-lock lock”></i>
<input type=”password” placeholder=”Password” class=”text-name”>
</div>
<div class=”input-name”>
<i class=”fa fa-lock lock”></i>
<input type=”password” placeholder=”Re-type Password” class=”text-name”>
</div>
<div class=”input-name”>
<input type=”radio” name=”radiogroup1″ id=”ravi”class=”radio-button”>
<label for=”ravi” class=”gender”>Male</label>
<input type=”radio” name=”radiogroup1″ id=”ravi1″ class=”radio-button”>
<label for=”ravi1″ class=”gender”>Female</label>
</div>
<div class=”input-name”>
<select class=”country”>
<option>Select a country</option>
<option>India</option>
<option>United States</option>
<option>Pakistan</option>
<option>Australia</option>
</select>
<div class=”arrow”>
</div>
</div>
<div class=”input-name”>
<input type=”checkbox” id=”cb1″ class=”chack-button”>
<label for=”cb1″ class=”chack”>I agree with terms and conditions</label>
</div>
<div class=”input-name”>
<input type=”checkbox” id=”cb2″class=”chack-button”>
<label for=”cb2″ class=”chack”>I agree with terms and conditions</label>
</div>
<div class=”input-name”>
<input class=”button” type=”submit” value=”Register” />
</div>
</form>
</div>
</div>
</body>
</html>

 

The post Mobile friendly registration form html code with css first appeared on Coding Help - Codinghelp.in.

]]> https://codinghelp.in/mobile-friendly-registration-form-html-code-with-css/feed/ 0 how to use sweet alert in php or html | Sweet alert in php echo | How to edit a JavaScript alert box title? | alert box css style https://codinghelp.in/how-to-use-sweet-alert-in-php-or-html-sweet-alert-in-php-echo-how-to-edit-a-javascript-alert-box-title-alert-box-css-style/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-use-sweet-alert-in-php-or-html-sweet-alert-in-php-echo-how-to-edit-a-javascript-alert-box-title-alert-box-css-style https://codinghelp.in/how-to-use-sweet-alert-in-php-or-html-sweet-alert-in-php-echo-how-to-edit-a-javascript-alert-box-title-alert-box-css-style/#respond Thu, 24 Mar 2022 08:57:27 +0000 https://codefind.in/?p=224 how to use sweet alert in php or html | Sweet alert in php echo | How to edit a JavaScript alert box title | alert box css style The answer to all the questions given above will be seen below. How to edit a JavaScript alert box title? If you want to set or […]

The post how to use sweet alert in php or html | Sweet alert in php echo | How to edit a JavaScript alert box title? | alert box css style first appeared on Coding Help - Codinghelp.in.

]]> how to use sweet alert in php or html | Sweet alert in php echo | How to edit a JavaScript alert box title | alert box css style

The answer to all the questions given above will be seen below.

How to edit a JavaScript alert box title?

If you want to set or change the name of the title that appears in the alert box, then how can you do it?

<script>alert("Hello");</script>

This code does not set any type of title

If you want to show the title in the above code, then you cannot show it, with this code, you have given below code for this, the title will be displayed in them without any css.

 

Alert box css style

You can see the sample of how to do css of alert box is given below, also you can use this source code of alert box, if you want to show alert in professional mode without css then more code below will get

<!DOCTYPE html> <html> <head> <script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”> </script> <script> function geeks(msg, gfg) { var confirmBox = $(“#container”); /* Trace message to display */ confirmBox.find(“.message”).text(msg); /* Calling function */ confirmBox.find(“.yes”).unbind().click(function() { confirmBox.hide(); }); confirmBox.find(“.yes”).click(gfg); confirmBox.show(); } </script> <style> /* Body alignment */ body { text-align: center; } /* Color for h1 tag */ h1 { color: green; } /* Designing dialog box */ #container { display: none; background-color: purple; color: white; position: absolute; width: 350px; border-radius: 5px; left: 50%; margin-left: -160px; padding: 16px 8px 8px; box-sizing: border-box; } /* Designing dialog box’s okay button */ #container button { background-color: yellow; display: inline-block; border-radius: 5px; border: 2px solid gray; padding: 5px; text-align: center; width: 60px; } /* Dialog box message decorating */ #container .message { text-align: left; padding: 10px 30px; } </style> </head> <body onload=”geeks();”> <h1>CODING FOR BEGINNERS</h1> <b>Designing the alert box with css</b> <br><br> <div id=”container”> <div class=”message”> Thanks for Subscription<br>Enjoy all service</div> <button class=”yes”>okay</button> </div> <input type=”button” value=”Subscribe”/> </body> </html>

Output this alert box :

HTML

 

How to use sweet alert in php or html

If you also want to use Sweet Alert in your website, then follow the steps given below.

<script src=“https://unpkg.com/sweetalert/dist/sweetalert.min.js“></script>

OR

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

To use the Sweet Alert method on your site, paste the above code into the head of your website.

It is necessary to add this script to your website without it it will not work

<script> swal(“Here’s the title!“, “…and here’s the text!“); </script>

<script>

swal(“Good job!“, “You clicked the button!“, “success“);

</script>

and with a third argument, you can add an icon to your alert! There are 4 predefined ones: "warning", "error", "success" and "info".

<script>

swal({
  title: “Are you sure?“,
  text: “Once deleted, you will not be able to recover this imaginary file!“,
  icon: “warning“,
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal(“Poof! Your imaginary file has been deleted!“, {
      icon: “success“,
    });
  } else {
    swal(“Your imaginary file is safe!“);
  }
});

</script>

 

<?php $app_no = “63256454545”;
if ($app_no ==false) {
echo ‘<script>
swal({ title: “Something Wrong”, text: “Your Mobile Number or Date of Birth is Wrong!”, icon: “error”, button: “Try Again”, }); </script>’;
}else{
echo ‘<script> swal({ title: “Congratulations”, text: “Your Application Number is ‘.$app_no.'”, icon: “success“, button: “Ok”, }); </script>’;
}; ?>
HTML

The modal’s text. It can either be added as a configuration under the key text (as in the example below), or passed as the first and only parameter (e.g. swal("Hello world!")), or the second one if you have multiple string parameters (e.g. swal("A title", "Hello world!"))…read more

The post how to use sweet alert in php or html | Sweet alert in php echo | How to edit a JavaScript alert box title? | alert box css style first appeared on Coding Help - Codinghelp.in.

]]> https://codinghelp.in/how-to-use-sweet-alert-in-php-or-html-sweet-alert-in-php-echo-how-to-edit-a-javascript-alert-box-title-alert-box-css-style/feed/ 0 Font style in CSS | HTML font family list | how to change font style in html https://codinghelp.in/font-style-in-css-html-font-family-list-how-to-change-font-style-in-html/?utm_source=rss&utm_medium=rss&utm_campaign=font-style-in-css-html-font-family-list-how-to-change-font-style-in-html https://codinghelp.in/font-style-in-css-html-font-family-list-how-to-change-font-style-in-html/#respond Sun, 20 Mar 2022 10:38:24 +0000 https://codefind.in/?p=210 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> And in the stylesheet body { font-family: 'Roboto', sans-serif; } In any case the desired font must be available when the client displays the page. You can host your own or use a free service like mentioned above. @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700'); body { font-family: 'Roboto', sans-serif; } put it in your CSS file, […]

The post Font style in CSS | HTML font family list | how to change font style in html first appeared on Coding Help - Codinghelp.in.

]]> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

And in the stylesheet

body {
   font-family: 'Roboto', sans-serif;
}

In any case the desired font must be available when the client displays the page. You can host your own or use a free service like mentioned above.

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

body {
  font-family: 'Roboto', sans-serif;
}

put it in your CSS file, I hope it will work.

 

<html>
<head>
<style>
p.a {
font-style: normal;
}p.b {
font-style: italic;
}p.c {
font-style: oblique;
}
</style>
</head>
<body>
<h1>The font-style Property</h1><p class=”a”>This is a paragraph, normal.</p>
<p class=”b”>This is a paragraph, italic.</p>
<p class=”c”>This is a paragraph, oblique.</p></body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: “Lucida Handwriting”;
}.p2 {
font-family: Arial;
}.p3 {
font-family: Papyrus;
}
</style>
</head>
<body><h1>CSS font-family</h1>
<p class=”p1″>This is a paragraph, shown in the Times New Roman font.</p>
<p class=”p2″>This is a paragraph, shown in the Arial font.</p>
<p class=”p3″>This is a paragraph, shown in the Lucida Console font.</p></body>
</html>

Font Size html style

h1 {
font-size: 40px;
}h2 {
font-size: 30px;
}p {
font-size: 14px;
}

Some Font Examples

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)
Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

Font Pairing Rules

<style>
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
</style>

 

FONT FAMILY APPEARANCE
Abadi MT Condensed Light

Abadi MT Condensed Light
Aharoni

Aharoni
Aharoni Bold

Aharoni Bold
Aldhabi

Aldhabi
AlternateGothic2 BT

AlternateGothic2 BT
Andale Mono

Andale Mono
Andalus

Andalus
Angsana New

Angsana New
AngsanaUPC

AngsanaUPC
Aparajita

Aparajita
Apple Chancery

Apple Chancery
Arabic Typesetting

Arabic Typesetting
Arial

Arial
Arial Black

Arial Black
Arial narrow

Arial narrow
Arial Nova

Arial Nova
Arial Rounded MT Bold

Arial Rounded MT Bold
Arnoldboecklin

Arnoldboecklin
Avanta Garde

Avanta Garde
Bahnschrift

Bahnschrift
Bahnschrift Light

Bahnschrift Light
Bahnschrift SemiBold

Bahnschrift SemiBold
Bahnschrift SemiLight

Bahnschrift SemiLight
Baskerville

Baskerville
Batang

Batang
BatangChe

BatangChe
Big Caslon

Big Caslon
BIZ UDGothic

BIZ UDGothic
BIZ UDMincho Medium

BIZ UDMincho Medium
Blippo

Blippo
Bodoni MT

Bodoni MT
Book Antiqua

Book Antiqua
Book Antiqua

Book Antiqua
Bookman

Bookman
Bradley Hand

Bradley Hand
Browallia New

Browallia New
BrowalliaUPC

BrowalliaUPC
Brush Script MT

Brush Script MT
Brush Script Std

Brush Script Std
Brushstroke

Brushstroke
Calibri

Calibri
Calibri Light

Calibri Light
Calisto MT

Calisto MT
Cambodian

Cambodian
Cambria

Cambria
Cambria Math

Cambria Math
Candara

Candara
Century Gothic

Century Gothic
Chalkduster

Chalkduster
Cherokee

Cherokee
Comic Sans

Comic Sans
Comic Sans MS

Comic Sans MS
Consolas

Consolas
Constantia

Constantia
Copperplate

Copperplate
Copperplate Gothic Light

Copperplate Gothic Light
Copperplate Gothic Bold

Copperplate Gothic Bold
Corbel

Corbel
Cordia New

Cordia New
CordiaUPC

CordiaUPC
Coronetscript

Coronetscript
Courier

Courier
Courier New

Courier New
DaunPenh

DaunPenh
David

David
DengXian

DengXian
DFKai-SB

DFKai-SB
Didot

Didot
DilleniaUPC

DilleniaUPC
DokChampa

DokChampa
Dotum

Dotum
DotumChe

DotumChe
Ebrima

Ebrima
Estrangelo Edessa

Estrangelo Edessa
EucrosiaUPC

EucrosiaUPC
Euphemia

Euphemia
FangSong

FangSong
Florence

Florence
Franklin Gothic Medium

Franklin Gothic Medium
FrankRuehl

FrankRuehl
FreesiaUPC

FreesiaUPC
Futara

Futara
Gabriola

Gabriola
Gadugi

Gadugi
Garamond

Garamond
Gautami

Gautami
Geneva

Geneva
Georgia

Georgia
Georgia Pro

Georgia Pro
Gill Sans

Gill Sans
Gill Sans Nova

Gill Sans Nova
Gisha

Gisha
Goudy Old Style

Goudy Old Style
Gulim

Gulim
GulimChe

GulimChe
Gungsuh

Gungsuh
GungsuhChe

GungsuhChe
Hebrew

Hebrew
Hoefler Text

Hoefler Text
HoloLens MDL2 Assets

HoloLens MDL2 Assets
Impact

Impact
Ink Free

Ink Free
IrisUPC

IrisUPC
Iskoola Pota

Iskoola Pota
Japanese

Japanese
JasmineUPC

JasmineUPC
Javanese Text

Javanese Text
Jazz LET

Jazz LET
KaiTi

KaiTi
Kalinga

Kalinga
Kartika

Kartika
Khmer UI

Khmer UI
KodchiangUPC

KodchiangUPC
Kokila

Kokila
Korean

Korean
Lao

Lao
Lao UI

Lao UI
Latha

Latha
Leelawadee

Leelawadee
Leelawadee UI

Leelawadee UI
Leelawadee UI Semilight

Leelawadee UI Semilight
Levenim MT

Levenim MT
LilyUPC

LilyUPC
Lucida Bright

Lucida Bright
Lucida Console

Lucida Console
Lucida Handwriting

Lucida Handwriting
Lucida Sans

Lucida Sans
Lucida Sans Typewriter

Lucida Sans Typewriter
Lucida Sans Unicode

Lucida Sans Unicode
Lucidatypewriter

Lucidatypewriter
Luminari

Luminari
Malgun Gothic

Malgun Gothic
Malgun Gothic Semilight

Malgun Gothic Semilight
Mangal

Mangal
Marker Felt

Marker Felt
Marlett

Marlett
Meiryo

Meiryo
Meiryo UI

Meiryo UI
Microsoft Himalaya

Microsoft Himalaya
Microsoft JhengHei

Microsoft JhengHei
Microsoft JhengHei UI

Microsoft JhengHei UI
Microsoft New Tai Lue

Microsoft New Tai Lue
Microsoft PhagsPa

Microsoft PhagsPa
Microsoft Sans Serif

Microsoft Sans Serif
Microsoft Tai Le

Microsoft Tai Le
Microsoft Uighur

Microsoft Uighur
Microsoft YaHei

Microsoft YaHei
Microsoft YaHei UI

Microsoft YaHei UI
Microsoft Yi Baiti

Microsoft Yi Baiti
MingLiU

MingLiU
MingLiU_HKSCS

MingLiU_HKSCS
MingLiU_HKSCS-ExtB

MingLiU_HKSCS-ExtB
MingLiU-ExtB

MingLiU-ExtB
Miriam

Miriam
Monaco

Monaco
Mongolian Baiti

Mongolian Baiti
MoolBoran

MoolBoran
MS Gothic

MS Gothic
MS Mincho

MS Mincho
MS PGothic

MS PGothic
MS PMincho

MS PMincho
MS UI Gothic

MS UI Gothic
MV Boli

MV Boli
Myanmar Text

Myanmar Text
Narkisim

Narkisim
Neue Haas Grotesk Text Pro

Neue Haas Grotesk Text Pro
New Century Schoolbook

New Century Schoolbook
News Gothic MT

News Gothic MT
Nirmala UI

Nirmala UI
No automatic language associations

No automatic language associations
Noto

Noto
NSimSun

NSimSun
Nyala

Nyala
Oldtown

Oldtown
Optima

Optima
Palatino

Palatino
Palatino Linotype

Palatino Linotype
papyrus

papyrus
Parkavenue

Parkavenue
Perpetua

Perpetua
Plantagenet Cherokee

Plantagenet Cherokee
PMingLiU

PMingLiU
Raavi

Raavi
Rockwell

Rockwell
Rockwell Extra Bold

Rockwell Extra Bold
Rockwell Nova

Rockwell Nova
Rockwell Nova Cond

Rockwell Nova Cond
Rockwell Nova Extra Bold

Rockwell Nova Extra Bold
Rod

Rod
Sakkal Majalla

Sakkal Majalla
Sanskrit Text

Sanskrit Text
Segoe MDL2 Assets

Segoe MDL2 Assets
Segoe Print

Segoe Print
Segoe Script

Segoe Script
Segoe UI

Segoe UI
Segoe UI Emoji

Segoe UI Emoji
Segoe UI Historic

Segoe UI Historic
Segoe UI Symbol

Segoe UI Symbol
Shonar Bangla

Shonar Bangla
Shruti

Shruti
SimHei

SimHei
SimKai

SimKai
Simplified Arabic

Simplified Arabic
Simplified Chinese

Simplified Chinese
SimSun

SimSun
SimSun-ExtB

SimSun-ExtB
Sitka

Sitka
Snell Roundhan

Snell Roundhan
Stencil Std

Stencil Std
Sylfaen

Sylfaen
Symbol

Symbol
Tahoma

Tahoma
Thai

Thai
Times New Roman

Times New Roman
Traditional Arabic

Traditional Arabic
Traditional Chinese

Traditional Chinese
Trattatello

Trattatello
Trebuchet MS

Trebuchet MS
Tunga

Tunga
UD Digi Kyokasho

UD Digi Kyokasho
UD Digi KyoKasho NK-R

UD Digi KyoKasho NK-R
UD Digi KyoKasho NP-R

UD Digi KyoKasho NP-R
UD Digi KyoKasho N-R

UD Digi KyoKasho N-R
Urdu Typesetting

Urdu Typesetting
URW Chancery

URW Chancery
Utsaah

Utsaah
Vani

Vani
Verdana

Verdana
Verdana Pro

Verdana Pro
Vijaya

Vijaya
Vrinda

Vrinda
Webdings

Webdings
Westminster

Westminster
Wingdings

Wingdings
Yu Gothic

Yu Gothic
Yu Gothic UI

Yu Gothic UI
Yu Mincho

Yu Mincho
Zapf Chancery

Zapf Chancery

 

The post Font style in CSS | HTML font family list | how to change font style in html first appeared on Coding Help - Codinghelp.in.

]]> https://codinghelp.in/font-style-in-css-html-font-family-list-how-to-change-font-style-in-html/feed/ 0 @media only screen desktop css | How to use media query for mobile |How to target desktop, tablet and mobile using Media Query https://codinghelp.in/media-only-screen-desktop-css-how-to-use-media-query-for-mobile-how-to-target-desktop-tablet-and-mobile-using-media-query/?utm_source=rss&utm_medium=rss&utm_campaign=media-only-screen-desktop-css-how-to-use-media-query-for-mobile-how-to-target-desktop-tablet-and-mobile-using-media-query https://codinghelp.in/media-only-screen-desktop-css-how-to-use-media-query-for-mobile-how-to-target-desktop-tablet-and-mobile-using-media-query/#respond Sun, 20 Mar 2022 10:08:05 +0000 https://codefind.in/?p=202 The media attribute specifies what media or device the linked document is optimized for. This attribute is used to specify that the target URL is designed for special devices (like iPhone), speech or print media. This attribute can accept several values. Only used if the href attribute is present. The @media rule is used in media […]

The post @media only screen desktop css | How to use media query for mobile |How to target desktop, tablet and mobile using Media Query first appeared on Coding Help - Codinghelp.in.

]]> The media attribute specifies what media or device the linked document is optimized for. This attribute is used to specify that the target URL is designed for special devices (like iPhone), speech or print media. This attribute can accept several values. Only used if the href attribute is present.

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution

Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
</style>
</head>
<body>

<h2>Typical Media Query Breakpoints</h2>
<p class=”example”>Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>

</body>
</html>

 

 

You can also have different stylesheets for different media, like this: See All Example

@media screen and (max-width: 600px) {
  .topnav a {
float: none;
width: 100%;
}
}
body {
background-color: lightblue;
}@media screen and (min-width: 400px) {
  body {
background-color: lightgreen;
}
}@media screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
@media screen and (max-width: 600px) {
  div.example {
display: none;
}
}
<link rel=”stylesheet” media=”screen and (min-width: 900px)” href=”widescreen.css”>
<link rel=”stylesheet” media=”screen and (max-width: 600px)” href=”smallscreen.css”>
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
width: 50%;
}
}/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
width: 100%;
}
}
<!DOCTYPE html>
<html><head>
<title>Media Query</title><style>/* Media Query for Mobile Devices */
@media (max-width: 480px) {
body {
background-color: red;
}
}/* Media Query for low resolution Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
body {
background-color: yellow;
}
}/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px){
body {
background-color: blue;
}
}

/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
body {
background-color: green;
}
}

/* Media Query for Large screens */
@media (min-width: 1281px) {
body {
background-color: white;
}
}
</style>
</head>

<body style = “text-align:center;”>
<h1>CODING FOR BEGINNERS</h1>
<h2>Media Query</h2>
</body>

</html>

/* At the top level of your code */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}/* Nested within another conditional at-rule */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}

Media Types

Value Description
all Default. Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that “reads” the page out loud

Media Features

Value Description
any-hover Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
any-pointer Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
aspect-ratio The ratio between the width and the height of the viewport
color The number of bits per color component for the output device
color-gamut The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4)
color-index The number of colors the device can display
grid Whether the device is a grid or bitmap
height The viewport height
hover Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
inverted-colors Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)
light-level Current ambient light level (added in Media Queries Level 4)
max-aspect-ratio The maximum ratio between the width and the height of the display area
max-color The maximum number of bits per color component for the output device
max-color-index The maximum number of colors the device can display
max-height The maximum height of the display area, such as a browser window
max-monochrome The maximum number of bits per “color” on a monochrome (greyscale) device
max-resolution The maximum resolution of the device, using dpi or dpcm
max-width The maximum width of the display area, such as a browser window
min-aspect-ratio The minimum ratio between the width and the height of the display area
min-color The minimum number of bits per color component for the output device
min-color-index The minimum number of colors the device can display
min-height The minimum height of the display area, such as a browser window
min-monochrome The minimum number of bits per “color” on a monochrome (greyscale) device
min-resolution The minimum resolution of the device, using dpi or dpcm
min-width The minimum width of the display area, such as a browser window
monochrome The number of bits per “color” on a monochrome (greyscale) device
orientation The orientation of the viewport (landscape or portrait mode)
overflow-block How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
overflow-inline Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
pointer Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
resolution The resolution of the output device, using dpi or dpcm
scan The scanning process of the output device
scripting Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)
update How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
width The viewport width

The post @media only screen desktop css | How to use media query for mobile |How to target desktop, tablet and mobile using Media Query first appeared on Coding Help - Codinghelp.in.

]]> https://codinghelp.in/media-only-screen-desktop-css-how-to-use-media-query-for-mobile-how-to-target-desktop-tablet-and-mobile-using-media-query/feed/ 0