Safari does not appear the image on my site - html

i don't know what i missing here but it fails to appear entirely in iPhones i think in Safari too. It shows perfectly in Chrome & Edge
!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://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>
</head>
<body>
<center>
<div class="container">
<a href = "https://www.rodoscars.info/?api=casacook"</a>
<img src = "https://drive.google.com/uc?export=view&id=1gEAfmXqpA35AhxhtrIv4lIQphGJ7eTt8" class="img-thumbnail" alt="RODOS CARS" width="304" height="236">
</div>
</center>
</body>
</html>

Related

tailwind css is not working in my threejs website

I am using threejs website with webpack and to style my website I am using Tailwind CSS and I tried to configure it and this not working in my browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="style.css" rel="stylesheet" >
<title>Globe animation</title>
</head>
<body>
<div class="flex">
<div class="w-1/2">
<h1>Globe</h1>
</div>
<div class="w-1/2" id="canvasContainer">
<!-- Threejs canvas globe -->
<canvas class="webgl"></canvas>
</div>
</div>
</body>
</html>

How should I make this website responsive?

So, I've been trying to make the header responsive as it should but it does not seem to work at all.
Any help would be nice.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2>This is just a test page that does not work on three tested devices any help would be nice.</h2>
</body>
</html>
Enusure to add this <meta name="viewport" content="width=device-width, initial-scale=1">
You can use bootstrap head and it will do it for you.
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
Bootstrap is amazing for creating websites: https://www.w3schools.com/bootstrap/default.asp

Foundation 6 columns grid classes not being applied

I am just trying to get a simple project started using foundation 6. My very simple html is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="row">
<div class="large-2 columns">
<h1>test</h1>
</div>
<div class="large-2 columns">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
However, when testing the website, the column classes are not getting applied and the grid is not working as it should be. Is there something I am missing?
Unless you're using < foundation 6, you need to be using the XY-grid because the old float grid was deprecated.
Check this out: https://foundation.zurb.com/sites/docs/xy-grid.html
Your html would look something like this using the XY-grid:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="grid-x">
<div class="cell large-2">
<h1>test</h1>
</div>
<div class="cell large-2">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Just wanted to add that you can still use the float grid in Foundation 6. If you visit the download page, you can select "Float Grid" under "Grid" in the left column and download that custom build. You do not have to use the XY Grid.
If you do that, your existing grid markup will work.

PHP DomXPath - Select html code except header, content and footer

I am using DomXPath for the first time and I don;t know how to select some html code.
For Example I've got:
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
<div class="header">
header content
</div>
<div class="content">
content
</div>
<div class="footer">
footer content
</div>
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<!-- JAVASCRIPTS -->
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script src="layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>
And I need to make 2 selections. First with the code before header div
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
And second with the code after footer div
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<!-- JAVASCRIPTS -->
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script src="layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>
How can I do this? What should I use?
Thank you
Edit: I found out how to delete all divs, but I don't know how to separate the code before header and code after footer.
At the moment I've got this:
$html = file_get_contents('..');
$doc = new \DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTML($html);
$finder = new \DomXPath($doc);
foreach ($finder->evaluate('//div') as $node) {
$node->parentNode->removeChild($node);
}
which gives me the code in one variable. How can I split it?
So I'm not completely sure if you still need help on this problem but I have a regex that will match everything before your "header" <div>:
^<[\w\n\s="<>\/\-,.#!m]+(?=<div)
The pattern above would match this chunk of your HTML:
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
As for the tail end of you HTML, it is a bit too tricky to get everything after your <div class="footer"> tag, but if you switch it from div to footer, you can accomplish this easily. Below is an example of using footer:
<footer class="footer">
footer content
</footer>
The following will match everything from </footer> all the way until the closing </html> tag:
(<\/footer>)[\w\n\s="<>\/\-,.#!m]+<\/html>
Please Note: above regex includes </footer>. Hope this helps!

My code is not showing columns horizontally

My code is not working, it is not showing horizontal columns. I tried everything, using sublime text 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col1</div>
<div class="col-xs-6">col2</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In your browser, right click on the page and View Page Source. Click on the link to css/bootstrap.min.css and see if it successfully loads the bootstrap styles. I'm wondering if this path needs correcting.
Your code works for me when I use the bootstrap CDN: http://jsfiddle.net/t2rbyj38/