-
+ Shoppping List(Content Editable)
- 1. Milk diff --git a/data-attribute/index.html b/data-attribute/index.html index dd73d1d..7ad80ca 100644 --- a/data-attribute/index.html +++ b/data-attribute/index.html @@ -21,9 +21,10 @@
-
@@ -67,6 +71,11 @@
HTML5 Feature Tips
Output Tag - To perform a calculation and show the result
+
+ -
Datalist Tag - Allows you to search and add elements
@@ -88,8 +97,15 @@
HTML5 Feature Tips
Dialog - Display a Modal Dialog - + + figure - This is used to mark up a photo. + +
-
+ Tooltip - This trick basically shows the extra information provided by the site creator
when a visitor hovers the mouse pointer over an element. + Lazy Loading - Lazy Load html images natively + -
@@ -97,6 +113,8 @@
HTML5 Feature Tips
+
-
+
-
+ Know data attribute
+
diff --git a/details/index.html b/details/index.html
index e0b5ca2..d299112 100644
--- a/details/index.html
+++ b/details/index.html
@@ -12,9 +12,10 @@
+
-
+
-
+ Datalist Tag
+ +
+
-
+
-
+ Details Tag
Click Here to get the user details
diff --git a/dialog/index.html b/dialog/index.html index 934887a..c0d0a34 100644 --- a/dialog/index.html +++ b/dialog/index.html @@ -12,9 +12,10 @@
+
-
+
HTML Tips and Tricks - Mark Element
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/inputs/index.html b/inputs/index.html index a0263fd..8b35900 100644 --- a/inputs/index.html +++ b/inputs/index.html @@ -19,9 +19,10 @@
-
+ Dialog Tag
diff --git a/figure/figure.html b/figure/figure.html new file mode 100644 index 0000000..b438699 --- /dev/null +++ b/figure/figure.html @@ -0,0 +1,25 @@ + + + + + + +
+
+ 
+ "When in doubt go to the library".
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 953d56c..2946e9f 100644
--- a/index.html
+++ b/index.html
@@ -24,9 +24,12 @@
+
+
+
-
+
+
+
+
+
+
+
+
+ .png)
+ HTML5 Feature Tips
-
+
+
++ \ No newline at end of file diff --git a/inputs/index.html b/inputs/index.html index a0263fd..8b35900 100644 --- a/inputs/index.html +++ b/inputs/index.html @@ -19,9 +19,10 @@
+
-
+
-
+ All about Inputs
Color picker
diff --git a/main.css b/main.css index dd07bb0..481a6e1 100644 --- a/main.css +++ b/main.css @@ -1,11 +1,30 @@ body { - background-color: #000000; - color: #ffffff; - font-family: 'Chilanka', cursive; + background-color: rgb(10, 10, 57); + color: #f4dddd; + font-family: 'Montserrat', sans-serif; + /* font-family: 'Silkscreen', cursive;*/ +} +h1 +{ + font-family: 'Montserrat', sans-serif; + font-family: 'Silkscreen', cursive; +} + +.body { + background-image: url("https://i.pinimg.com/564x/ce/1f/8a/ce1f8a647a8634f7eb59fb3b28130169.jpg"); + background-size: contain; + background-repeat: repeat-y; + color: #f4dddd; + /* font-family: 'Montserrat', sans-serif; + font-family: 'Silkscreen', cursive;*/ +} +.div +{ + margin-top: 70px; } a { - color: #61dafb; + color: #c3b1ec; } table { @@ -64,6 +83,31 @@ li { .demo .range output { font-size: 62px; } +.demoo { + margin: 420px auto 30px auto; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.demoo .list li{ + padding: 10px; +} + +.demoo .content-editable { + border: 1px solid; + border-radius: 5px; + padding: 10px; +} + +.demoo .data-attribute { + padding: 10px; +} + +.demoo .range output { + font-size: 62px; +} dialog::backdrop { background: repeating-linear-gradient( @@ -76,7 +120,33 @@ dialog::backdrop { backdrop-filter: blur(3px); } +.figure { + margin: 10px auto 30px auto; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + figcaption +{ + margin: 10px auto 30px auto; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + +} +figure{ +margin: 10px auto 30px auto; +display: flex; +align-items: center; +justify-content: center; +flex-direction: column; +} + + + .embed-youtube { border: 1px solid #ffffff; -} \ No newline at end of file +} diff --git a/map/index.html b/map/index.html index 2081c81..c488b1e 100644 --- a/map/index.html +++ b/map/index.html @@ -12,9 +12,10 @@
+
-
+
diff --git a/mark/index.html b/mark/index.html
index e7e74d4..fb8a76a 100644
--- a/mark/index.html
+++ b/mark/index.html
@@ -12,9 +12,10 @@
-
+ Map - Image map
diff --git a/mark/index.html b/mark/index.html
index e7e74d4..fb8a76a 100644
--- a/mark/index.html
+++ b/mark/index.html
@@ -12,9 +12,10 @@
+
-
+
diff --git a/meter/index.html b/meter/index.html
index 820075a..5b1710d 100644
--- a/meter/index.html
+++ b/meter/index.html
@@ -12,9 +12,10 @@
-
+ Mark something to Highlight
Did you know, you can "Highlight something interesting" just with a HTML tag?