Problem using an external Style sheet for CSS - html

I'm trying to use an external Style Sheet for putting my CSS code, When I put the CSS on the same file It works, but when the CSS code and is in an external sheet It does nothing,
for testing I create a php file with and input field and use the css for background color of page and style of an Input field called "account_name":
This is my code with css code in the same file:
<!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">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Add Account</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">
<!-- Alertify Librery-->
<link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
<link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
<script src="alertify/alertify.js"></script>
<!-- Modal librery-->
<script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
<script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
<link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
<link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">
<style type="text/css">
body{
color: #fff;
background: #3598dc;
font-family: 'Roboto', sans-serif;
}
.signup-form {
width: 600px;
margin: 0 auto;
padding: 5px 0;
}
.signup-form form {
color: #9ba5a8;
border-radius: 3px;
margin-bottom: 15px;
background: #F0FFF0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
input#account_name {
border-radius: 10px;
border: 1px solid #73AD21;
padding: 5px;
width: 400px;
height: 35px;
float: left;
color: #0000CD;
background-color : #ffee88;
}
</style>
</head>
<body>
</br>
</br>
<div class="signup-form">
<form method="post" id="add_form">
<h2>Add Account</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label>Please Enter Account Name</label>
<input type="text" class="form-control" id="account_name" name="account_name" required="required">
<input type="hidden" name="key" value="addcuenta" >
</div>
</div>
</br>
</br>
</br>
</br>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Accept</button>
</div>
</form>
</div>
</body>
</html>
<script>
//Send Data to Add
$(document).on('submit', '#add_form', function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
//Send Data To add
url: 'processAddAccount.php',
type: 'POST',
dataType: 'json',
data : data,
success: function(data)
{
alert('Account Add');
},
error: function(errorThrown)
{
alert(errorThrown);
}
});
});
</script>
But If I put the css code in a external sheet called: "style.css", the css format makes nothing, these are the php and css file:
php code:
<!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">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Add Account</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">
<!-- Load css style file-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Alertify Librery-->
<link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
<link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
<script src="alertify/alertify.js"></script>
<!-- Modal librery-->
<script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
<script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
<link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
<link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">
</head>
<body>
</br>
</br>
<div class="signup-form">
<form method="post" id="add_form">
<h2>Add Account</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label>Please Enter Account Name</label>
<input type="text" class="form-control" id="account_name" name="account_name" required="required">
<input type="hidden" name="key" value="addcuenta" >
</div>
</div>
</br>
</br>
</br>
</br>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Accept</button>
</div>
</form>
</div>
</body>
</html>
<script>
//Send Data to Add
$(document).on('submit', '#add_form', function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
//Send Data To add
url: 'processAddAccount.php',
type: 'POST',
dataType: 'json',
data : data,
success: function(data)
{
alert('Account Add');
},
error: function(errorThrown)
{
alert(errorThrown);
}
});
});
</script>
The css file style.css:
body{
color: #fff;
background: #3598dc;
font-family: 'Roboto', sans-serif;
}
.signup-form {
width: 600px;
margin: 0 auto;
padding: 5px 0;
}
.signup-form form {
color: #9ba5a8;
border-radius: 3px;
margin-bottom: 15px;
background: #F0FFF0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
input#account_name {
border-radius: 10px;
border: 1px solid #73AD21;
padding: 5px;
width: 400px;
height: 35px;
float: left;
color: #0000CD;
background-color : #ffee88;
}
Please any Ideas?

The problem is you need to link your CSS file just before the closing head tag ! All because of specificity rule of CSS ! Try this
HTML
<!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">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Add Account</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">
<!-- Alertify Librery-->
<link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
<link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
<script src="alertify/alertify.js"></script>
<!-- Modal librery-->
<script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
<script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
<link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
<link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">
<!-- Linking external custom CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body>
<br />
<br />
<div class="signup-form">
<form method="post" id="add_form">
<h2>Add Account</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label>Please Enter Account Name</label>
<input type="text" class="form-control" id="account_name" name="account_name" required="required">
<input type="hidden" name="key" value="addcuenta">
</div>
</div>
<br />
<br />
<br />
<br />
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Accept</button>
</div>
</div>
</form>
</div>
<script>
//Send Data to Add
$(document).on('submit', '#add_form', function(e) {
e.preventDefault();
var data = $(this).serialize();
$.ajax({
//Send Data To add
url: 'processAddAccount.php',
type: 'POST',
dataType: 'json',
data: data,
success: function(data) {
alert('Account Add');
},
error: function(errorThrown) {
alert(errorThrown);
}
});
});
</script>
</body>
</html>
Remember : Your style.css file should be in css folder of root directory .

I'm testing, please, Why for example If I change input ID in the HTML code and then I change my CSS to formar the new input ID, the css style doesn't apply to my Input? Do I have to reset something in the browser?

Related

Removing the empty space top of the page

I want to remove the empty space above the login page. I have no idea which place to come to this space. I add a login page in my mvc project and by default have empty space on the top of the page. I want to remove that empty space on top of the page.
See this reference:
checkLogin.cshtml
#{
ViewBag.Title = "checkLogin";
}
#using (Html.BeginForm("checkLogin", "Home", FormMethod.Post))
{
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-26">
kosmoanuaf
</span>
<span class="login100-form-title p-b-48">
<i class="zmdi zmdi-eye"></i>
</span>
<div class="wrap-input100 validate-input" data-validate="Valid email is: a#b.c">
<span class="btn-show-pass">
<i class="glyphicon glyphicon-envelope"></i>
</span>
<input class="input100" type="text" name="username" required/>
<span class="focus-input100" data-placeholder="Email"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Enter password">
<span class="btn-show-pass">
<i class="zmdi zmdi-eye"></i>
</span>
<input class="input100" type="password" name="password" required/>
<span class="focus-input100" data-placeholder="Password"></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">
Login
</button>
</div>
</div>
</form>
</div>
</div>
</div>
}
_Layout.cshtml (master page)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/custom.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link href="~/Content/Site.css" rel="stylesheet" type='text/css' />
#*login page*#
<link rel="icon" type="image/png" href="images/icons/favicon.ico" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="~/fonts/iconic/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/animate/animate.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/animsition/css/animsition.min.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/daterangepicker/daterangepicker.css" type="text/css" rel="stylesheet" />
<link href="~/vendor/select2/select2.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/util.css" rel="stylesheet" type="text/css" />
<link href="~/Content/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.metisMenu.js"></script>
<script src="~/Scripts/custom.js"></script>
#RenderBody()
#*login page*#
<div id="dropDownSelect1"></div>
<script src="~/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="~/vendor/animsition/js/animsition.min.js"></script>
<script src="~/vendor/bootstrap/js/popper.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/vendor/select2/select2.min.js"></script>
<script src="~/vendor/daterangepicker/moment.min.js"></script>
<script src="~/vendor/daterangepicker/daterangepicker.js"></script>
<script src="~/vendor/countdowntime/countdowntime.js"></script>
<script src="~/Scripts/main.js"></script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
site.css
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
How to remove the empty space top of the page? Which place do I need to do correction?
I think here is the issue that I can see in css of body.
try it:
body {
padding-top: 0;
padding-bottom: 20px;
}
set padding-top to 0 for body or simply remove it.

How can I open a file into Ace text editor?

How can I use Ace text editor to open local files with extensions such as HTML, CSS, and js? I imagine there is a way to set up a button that opens your file selector, you can open one, and it opens the file for you to edit. Here is the code I use right now for Ace.
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
// editor.setTheme("ace/theme/themeHere")
// editor.session.setmode("ace/mode/languageHere")
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<!-- Put editor language e.g.: Ace HTML Editor -->
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
<!-- Defines character set -->
<link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shorcut icon" href="../Other/html5favicon.ico">
<!-- Favicon -->
<script type="text/javascript" src="../JavaScript/index.js"></script>
<!-- JavaScript Index -->
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="button" id="openbtn" onclick="openCode()" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<input type="button" id="togglebtn2" onclick="toggleVisibility2()" value="Toggle">
<div id="editor"><!DOCTYPE html>
<html>
<head lang="">
<meta charset="">
<link type="text/css" rel="stylesheet" href="">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="">
<!-- Favicon -->
<title></title>
</head>
<body>
<p>Ace HTML Editor</p>
</body>
</html></div>
<!-- In this div, put filler text -->
<!-- use < for < -->
<script src="../Other/Ace/ace-builds-master/src/ace.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
You can use the file input element as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 3em;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="file" id="openbtn" onchange="openCode(this.files)" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<div id="editor"></div>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor", {
theme: "ace/theme/monokai",
mode: "ace/mode/html",
placeholder: "choose file to edit"
});
function openCode(files) {
var file = files[0]
if (!file) return;
var modelist = ace.require("ace/ext/modelist")
var modeName = modelist.getModeForPath(file.name).mode
editor.session.setMode(modeName)
reader = new FileReader();
reader.onload = function() {
editor.session.setValue(reader.result)
}
reader.readAsText(file)
}
</script>
</body>
</html>

Bootstrap toggle buttons dont work following the recommended documentation

I use Bootstrap 4 and following the documentation i implemented a toggle button group like this:
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
The toggle is supposed to change the buttons active state so i added the following css to change the buttons color and background-color when toggled:
.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
The problem is that the button doesnt toggle. It doesnt switch to the active state when clicked.
Then i found this working stackblitz. It doesnt use data-toggle="buttons",but it adds ng-bootstraps ngbButtonLabel and ngbButton to the label and input.
By following that example of the stackblitz and applying it to my code the toggle button functionality works correctly:
<div class="btn-group btn-group-toggle">
<label class="btn btn-secondary" ngbButtonLabel>
<input type="checkbox" ngbButton>Test
</label>
</div>
I would like to know, why doesnt the way i tried to implement it the first time following bootstraps documentaiton work?
this is just the selector problem. apply css by selecting particular element with its parent class. not need to apply any css using !important.
see the below snippet
.btn-group label.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn-group label.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
</body>
</html>
I suggest you read this article about CSS Specificity.
If you are using bootstrap events (in this case you are using a button which toggles a css class) remember to import the optional JavaScript file.
body {
padding: 2rem;
}
.btn.btn-secondary,
.btn.btn-secondary:hover {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div>
May it will help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
</style>
</head>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
</body>
</html>

How make this modal responsive ? (IF i use tablet or other smartphone)

If I open it through a pc browser it will be responsive but when I change it to a tablet or smartphone view it does not become responsive, instead it becomes zoom (should zoom in if view). how to solve it?
Here its my code :
.modal-dialog{
padding-top: 100px;
border-radius:0;
}
.modal-header{
background-color: #F47321;
}
.modal-title{
color: white;
}
.modal-footer{
background-color: #FFFFFF;
margin-top: 0;
}
.modal-body{
background-color: #FFFFFF;
color: black;
}
.orange{
background-color: #F47321;
}
.grey{
background-color: #807874;
}
.title-header{
background-color: #F47321;
}
.body {
background-color: #807874;
}
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="modal.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/pencarian2.css">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Regular.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Medium.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Bold.otf">
<style>
#font-face {
font-family:'Elivio',sans-serif;
font-size:100px;
div{
font-family:Elivio;
}
</style>
<title>Selamat Datang</title>
<body class="body">
<div class="content">
<div class="container">
<br>
<div class="modal-header">
<h4 class="modal-title" style="text-align: left; font-family: MavenPro-Bold"> SYARAT & KETENTUAN</h4>
</div>
<div class="modal-body">
<p style="font-family:MavenPro-Regular;"><strong></strong><strong>SYARAT DAN KETENTUAN</strong></p>
<p> </p>
</div>
<div class="modal-footer">
<div align="left">
<label class="checkbox-inline">
<input type="checkbox" id="check" title="Please agree to our policy!" name="checkbox" style="font-family:MavenPro-Regular;" />Saya setuju dengan syarat & ketentuan
</label>
<br>
<p ><label class="label label-danger">*Silahkan ceklis setuju untuk melanjutkan</label></p>
</div>
<form method="POST" action="pengajuan" align="">
<input type="submit" name="btncheck" class="btn btn-success" id="btncheck" value="Lanjutkan" />
</form>
</div>
<p align="center"><font color="white">© Rumah Zakat 2018</font></p>
</html>
let me know if there is a wrong code, because men are always wrong whoops ...
You need to add the viewport <meta> tag to your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
...Note that you'll also need to add the <head> section itself (you appear to have omitted it):
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="modal.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/pencarian2.css">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Regular.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Medium.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Bold.otf">
<style>
#font-face {
font-family: 'Elivio', sans-serif;
font-size: 100px;
div {
font-family: Elivio;
}
</style>
<title>Selamat Datang</title>
</head>
<body class="body"> ... </body>
</html>

Tizen Wearable app buttons not clickable

I have created two href's which act like buttons, in a comic game. I am following this tutorial . The issue i have is the links are not clickable. They dont respond to touch, nothing happens when clicked.
Here is the project structure:
here is my styles.css:
* {
font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
margin: 0px auto;
background-color:#0a3003;
}
img {
margin:0px;
padding:0px;
border:0px;
width:100%;
height:auto;
display:block;
float:left;
}
.btn {
display: inline-block;
padding: 15px 4% 15px 4%;
margin-left: 1%;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 5px;
font-size: 30px;
text-align: center;
vertical-align: middle;
border: 0;
color: #ffffff;
background-color: #4b4237;
width: 40%;
height: 80px;
text-decoration: none;
}
and now i'll show you the index.html where the button is not clickable from :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div>
<img src="images/coverpage.png" alt="Cover Page"/>
</div>
<div>
<a href="#" class="btn" ><<</a>
<a href="comic/page1.html" class="btn" >>></a>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
When i load the program onto the tizen wearable emulator it looks like this but nothing is clickable:
In my opinion,
if you want to move between pages with tau.js library, you need to follow their rule. Here is some reference guide.
https://developer.tizen.org/development/ui-practices/web-application/tau/hello-world#fill_content
Maybe this issue was appeared because you didn't define "page" of TAU.
It is very simple. Just insert class="ui-page" in root <div> tag.
I tested on my desktop with Tizen IDE. In your index.html,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="images/coverpage.png" alt="Cover Page"/>
<div>
<<
>>
</div>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
And on every other pages(comic/page1.html, page2.html... etc)
<!DOCTYPE html>
<html>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="../images/page1.png" alt="Page 1" />
<div>
<a href="../index.html" class="btn" ><<</a>
<a href="page2.html" class="btn" >>></a>
</div>
</div>
</div>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
</body>
</html>
Please try again with above my example.
I checked that project runs well now :)