Hi
Can anyone make a html web page and post here with meta variablejs. Web page contains buttons,grids and table etc with styles.
I am using without variablejs. I think that without variablejs my webscreens were not giving satisfaction to me .
Below is mine without variablejs. I want to use it with variablejs. Is anyone can make a file and post here . Every time when changing values writing values to files. I am feeling bored.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>html,body{
background: linear-gradient(hsl(159.1,100%,50%),hsl(290.2,67%,61.1%),#613ee7);
background-attachment: fixed;
background-repeat: no-repeat;
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
width:100%;
}
h3{
background-color: hsla(73.9,78.3%,44%,0.944);
color: hsl(13.9,79.9%,46.2%);
margin-left:40px;
margin-top:-45px;
text-align: center;
font-family: Georgia;
font-weight: 800;
height: 45px;
width:88%;
}
h3::first-letter{
font-size: 32px;
color:indigo;
font-family: Segoe UI;
}
.reminder{
position:relative;
text-align:center;
color:hsl(198,20%,92%);
font-family: Segoe UI;
font-weight: 800;
width: 98%;
height: 90px;
z-index: 1;
position: relative;
top: 1px;
}
.top{
position:absolute;
top:4px;
left:6px;
}
.right{
position:absolute;
top:4px;
right:6px;
}
.bottom {
position:absolute;
bottom:4px;
left:6px
}
ul{
margin: 0;
padding: 0;
list-style: none;
z-index:3;
}
a{
margin: 0;
text-align: center;
padding: 20px 22px 20px 22px;
background: #5F6975;
color: white;
display: block;
text-decoration: none;
}
.mainMenu>li{
display: inline-block;
margin-left: -5px;
margin-top: 1px;
background-color:blue;;
font-color:green;
}
li:hover>a{
background: #4B545F;
cursor: pointer;
}
.subMenu{
position: absolute;
display: none;
}
.subMenu li{
border-top: 1px solid #575F6A;
border-bottom: 1px solid #6B727C;
position: relative;
}
.mainMenu>li:hover .subMenu{
display: block;
}
.SuperSubMenu{
position: absolute;
top: 0;
right: 0;
-ms-transform: translate(100%,0);
-webkit-transform: translate(100%,0);
transform:translate(100%,0);
display: none;
}
.subMenu li:hover>.SuperSubMenu{
display: block;
}
#bar
{
width: 84%;
height: 62px;
background: #D361F5;
font-size: 18px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: 2px dotted #FFC311;
border-radius: 20px;
float: right;
position: absolute;
left:58px;
top:1px;
z-index: 3;
}
#barb{
font-style: 25px;
background: hsl(90,82%,71%);
color: hsl(20,63%,49%);
padding: 16px 20px 16px 20px;
border: 2px solid green;
font-size: 18px;
border-radius: 18px;
display: inline-block;
}
#barb:hover{
background: linear-gradient(90deg, transparent, hsl(80,98%,51%), hsl(83,56%,57%), transparent);
}
#search_text{
background: lightcyan;
width: 50%;
height: 12px;
padding: 8px 12px 8px 12px;
color: orangered;
size:23px;
font-family: 'Times New Roman', Times, serif;
font-weight: 800;
border-radius:14px;
border: 6px dotted mistyrose;
}
#note{
background: lightseagreen;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
width: 99%;
border: 2px solid darkred;
margin: 1px;
}</style>
<body>
<nav>
<ul class="mainMenu">
<li><a href="#">☰</a>
<ul class="subMenu">
<ul><li><a href ="autotoolscommand://tasks=:=Reset">Reset</a></li><li><a href ="autotoolscommand://tasks=:=Edit list">Edit list</a></li><li><a href ="autotoolscommand://tasks=:=Alert">Alert</a></li><li><a href ="autotoolscommand://tasks=:=Bookmarks">Bookmarks</a></li><li><a href ="autotoolscommand://tasks=:=Clipboard">Clipboard</a></li><li><a href ="autotoolscommand://tasks=:=Counts">Counts</a></li><li><a href ="autotoolscommand://tasks=:=Earth wallpaper">Earth wallpaper</a></li><li><a href ="autotoolscommand://tasks=:=Emojis">Emojis</a></li><li><a href ="autotoolscommand://tasks=:=Html">Html</a></li><li><a href ="autotoolscommand://tasks=:=Notes">Notes</a></li><li><a href ="autotoolscommand://tasks=:=Start Watch">Start Watch</a></li><li><a href ="autotoolscommand://tasks=:=Toggle Gestures">Toggle Gestures</a></li><li><a href ="autotoolscommand://tasks=:=Up Time">Up Time</a></li><li><a href ="autotoolscommand://tasks=:=View Images">View Images</a></li><li><a href ="autotoolscommand://tasks=:=Youtube Videos">Youtube Videos</a></li></ul>
<li><a href="#">Timeout</a>
<ul class="SuperSubMenu">
<li><a href ="autotoolscommand://30">30 Seconds</a></li>
<li><a href ="autotoolscommand://1">1 Minutes</a></li>
<li><a href ="autotoolscommand://2">2 Minutes</a></li>
<li><a href ="autotoolscommand://5">5 Minutes</a></li>
</ul>
</li> </ul>
</ul>
</ul>
</nav>
<hr />
<div id="bar">
<button type="button" id="barb">☰</button>
<button type="button" id="barb">☰</button>
<button type="button" id="barb">☮</button>
<button type="button" id="barb">⚠</button>
</div>
</hr>
<!--search -->
<form action="autotoolscommand://search">
<input type="search" id="search_text" name="find" placeholder="Enter Task Name">
<button for="search_text">OK</button>
</form>
<!--notes-->
<form id="note">
<textarea name="note title" cols="37" rows="1" id="title" placeholder="Enter title"></textarea>
<textarea name="note body" cols="37" rows="8" id="note" placeholder="Enter note"></textarea>
<button type="submit" onclick=="myNote()">Save</button>
</form>
<hr />
<div class ="reminder"><img src="/storage/emulated/0/Documents/Html/road-g679fd28d8_1280.jpg" height="100px" width="100%">
<div class ="top"> Take peas and maida</div>
<a href ="autotoolscommand://tasks=:=Event Options">
<div class ="right";
onclick="AutoTools.sendCommand('tasks=:=Event Options')";>👆 Daily</div></a>
<div class ="bottom">18-Mar-2022 04:00 PM</div>
</div><hr /><div class ="reminder"><img src="/storage/emulated/0/Documents/Html/road-g679fd28d8_1280.jpg" height="100px" width="100%">
<div class ="top"> Save amount</div>
<a href ="autotoolscommand://tasks=:=Event Options">
<div class ="right";
onclick="AutoTools.sendCommand('tasks=:=Event Options')";>👆 Daily</div></a>
<div class ="bottom">18-Mar-2022 07:30 PM</div>
</div><hr /><div class ="reminder"><img src="/storage/emulated/0/Documents/Html/road-g679fd28d8_1280.jpg" height="100px" width="100%">
<div class ="top"> Dip peas in water</div>
<a href ="autotoolscommand://tasks=:=Event Options">
<div class ="right";
onclick="AutoTools.sendCommand('tasks=:=Event Options')";>👆 Daily</div></a>
<div class ="bottom">19-Mar-2022 03:45 AM</div>
</div><hr /><div class ="reminder"><img src="/storage/emulated/0/Documents/Html/road-g679fd28d8_1280.jpg" height="100px" width="100%">
<div class ="top"> Good morning Mahammad Rafi</div>
<a href ="autotoolscommand://tasks=:=Event Options">
<div class ="right";
onclick="AutoTools.sendCommand('tasks=:=Event Options')";>👆 Daily</div></a>
<div class ="bottom">19-Mar-2022 05:55 AM</div>
</div><hr /><div class ="reminder"><img src="/storage/emulated/0/Documents/Html/road-g679fd28d8_1280.jpg" height="100px" width="100%">
<div class ="top"> Scan device for protection</div>
<a href ="autotoolscommand://tasks=:=Event Options">
<div class ="right";
onclick="AutoTools.sendCommand('tasks=:=Event Options')";>👆 2 Days</div></a>
<div class ="bottom">19-Mar-2022 01:06 PM</div>
</div><hr /><div class ="reminder"><img src="/storage/emulated/0/Documents/Html/road-g679fd28d8_1280.jpg" height="100px" width="100%">
<div class ="top"> Restart device</div>
<a href ="autotoolscommand://tasks=:=Event Options">
<div class ="right";
onclick="AutoTools.sendCommand('tasks=:=Event Options')";>👆 2 Days</div></a>
<div class ="bottom">20-Mar-2022 05:00 AM</div>
</div><hr /><div class ="reminder"><img src="/storage/emulated/0/Documents/Html/road-g679fd28d8_1280.jpg" height="100px" width="100%">
<div class ="top"> Pay electricity bill</div>
<a href ="autotoolscommand://tasks=:=Event Options">
<div class ="right";
onclick="AutoTools.sendCommand('tasks=:=Event Options')";>👆 Monthly</div></a>
<div class ="bottom">14-Apr-2022 06:25 AM</div>
</div><hr /><div class ="reminder"><img src="/storage/emulated/0/Documents/Html/road-g679fd28d8_1280.jpg" height="100px" width="100%">
<div class ="top"> Recharge on 3rd may</div>
<a href ="autotoolscommand://tasks=:=Event Options">
<div class ="right";
onclick="AutoTools.sendCommand('tasks=:=Event Options')";>👆 One time</div></a>
<div class ="bottom">01-May-2022 06:30 AM</div>
</div><hr />
<!-- Project -->
<script src="main.js"></script>
</body>
</html>
Thanks in advance from Mahammad Rafi.