Robot/html-tips-tricks
1
0
Fork 0
mirror of https://github.com/atapas/html-tips-tricks.git synced 2024-11-16 00:38:26 +01:00
Code Issues Projects Releases Packages Wiki Activity

Added Home icon

Browse source
This commit is contained in:
Tapas Adhikary 2020-08-14 10:30:23 +05:30
parent f6922145d4
commit 086bf84e7d
12 changed files with 39 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
content-editable/index.html
View file

@ -12,6 +12,9 @@
<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h2> Shoppping List(Content Editable) </h2>
<ul class="content-editable" contenteditable="true">
<li> 1. Milk </li>

3
data-attribute/index.html
View file

@ -21,6 +21,9 @@
<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h2> Know data attribute </h2>
<div class="data-attribute" id="data-attr" data-custom-attr="You are just Awesome!"> I have a hidden secret!
</div>

3
datalist/index.html
View file

@ -12,6 +12,9 @@
<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h1>Datalist Tag</h1>
<form action="" method="get">
<label for="fruit">Choose your fruit from the list:</label>

3
details/index.html
View file

@ -12,6 +12,9 @@
<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h1>Details Tag</h1>
<details>
<summary>Click Here to get the user details</summary>

1
home.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
Side by side

After

Width:  |  Height:  |  Size: 327 B

3
inputs/index.html
View file

@ -19,6 +19,9 @@
<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h1>All about Inputs</h1>
<h2>Color picker</h2>

8
main.css
View file

@ -24,6 +24,14 @@ li {
list-style: none;
}
.home {
text-decoration: none;
}
.home span {
font-size: 25px;;
}
.box {
border: 1px dotted;
border-radius: 5px;

3
map/index.html
View file

@ -12,6 +12,9 @@
<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h2> Map - Image map </h2>
<div>
<img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">

3
mark/index.html
View file

@ -12,6 +12,9 @@
<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h1>Mark something to Highlight</h1>
<p> Did you know, you can <mark>"Highlight something interesting"</mark> just with a HTML tag? </p>
</div>

3
meter/index.html
View file

@ -12,6 +12,9 @@
<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h2> Meter </h2>
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="8" min="0" max="10">2 out of 10</meter><br>

3
output/index.html
View file

@ -12,6 +12,9 @@
<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h2> Let's see the Output </h2>
<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="0">

3
range/index.html
View file

@ -21,6 +21,9 @@
<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h1>Slider</h1>
<form method="post">
<input