Failed to load resource: net::ERR_FILE_NOT_FOUND in HTML - html

I'm using some libs
In Visual Studio Code, with the Live Server extension it doesn't give this error, but when opening the file without using the extension, I have these errors in the console
`
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de E-mail HTML</title>
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
`My head in HTML

Related

Photobox insert in Bootstrap

When I run my code on Xampp (localhost), it runs normally. When I go to the server-side to run the same code, it doesn't work with Photobox.
What should I do now? My thought is to combine the two. I am thinking of copying from the Photobox archives into Bootstraps. No idea why it's not working.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/mychess.css" rel="stylesheet">
<script src="bootstrap/jquery-3.2.1.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/mychess.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
<link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet">
<meta name="description" content="Project">
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" href="demo/styles.css">
<link rel="stylesheet" href="photobox/photobox.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='photobox/jquery.photobox.js'></script>

How do I add an HTML favicon (mine isn't working)?

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 rel="icon" type="image/png" href="favicon.png"/> <!-- Here -->
<title>TITLE</title>
<script src="https://use.fontawesome.com/5aaf8b7460.js"></script>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="dist/css/style.css">
<script src="https://unpkg.com/animejs#3.0.1/lib/anime.min.js"></script>
<script src="https://unpkg.com/scrollreveal#4.0.0/dist/scrollreveal.min.js"></script>
My favicon is in the same directory as index.html
However it just shows the favicon as a white page - not working.
How do I fix this?
try this
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
See the full url instead only image name :
Source and more info about :
This is not mandatory, but it may affect on older browser, check this https://www.w3.org/2005/10/howto-favicon

CSS won't render on IE11

I'm trying to see why our CSS won't render on IE. I'm thinking maybe it is something to do with linking the stylesheet? This is hosted on Salesforce Marketing Cloud if it matters. I've included everything in the header below:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><link rel="icon" type="image/ico" href="contents/ui/theme/i/favicon.ico">
<meta name="robots" content="noindex,follow"><link rel="dns-prefetch" href=""><link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="stylesheet" id="them-style-css" href="https://xx.com/b2c-general-css" type="text/css" media="all">
<link rel="stylesheet" id="g-font-css" href="//fonts.googleapis.com/css?family=Roboto%3A300%2C500%2C700&ver=4.9.8" type="text/css" media="all">
<script type="text/javascript" src="%%=CloudPagesURL(XX)=%%"></script>
<script type="text/javascript" src="%%=CloudPagesURL(XX)=%%"></script>
use the meta in head
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Webcomponent doesn't load in IE11 with Polymer

I've build an webcomponent with Polymer, and it works on all browsers except for IE11.
I've tried everything but can't figure out why it doesn't work.
Attached is the code, could you help me figure out why?
It remains at the loading.
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial scale=1, user-scalable=yes">
<title>wc test</title>
<link rel="manifest" href="/manifest.json">
<script src="/node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script>if(!window.customElements){document.write("<!--")}</script>
<script type="text/javascript" src="/node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!-- do not remove -->
<script src="/node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="/src/klantenvertellen-app/klantenvertellen-app.js"></script>
</head>
<body>
<klantenvertellen-app>Loading...</klantenvertellen-app>
</body>
</html>

CSS stylesheet not added on localhost, bootstrap, XAMPP

when i open http://localhost/Website/home.html my css stylesheet is not showing up. Maybe it is something with the bootstrap css? I am new to both bootstrap and XML. Here is my home.html head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>****</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
My style.css is located in the same folder as my home.html
EDIT: some of my css are now showing, but not all. Strange..
EDIT 2: Apparently the bootstrap CSS did something fishy, it works if i changed the order to this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />