Hello, I created a website with 2 Paralax effects to practice this functionality via bootstrap. As it's a front-end site only, I'd like to test it by the same cellphone (no function to change platform size by browser).
So I opened it, copied the files of this project to my cell phone to test the operation on the cell phone, however it does not show the images much less access the style pages and so on. In other words, it shows only the html structure, without applying css.
Home
Note: parallax is only with CSS. Home
Some general questions:
do I need some specific app to compile bootstrap on cel?
I understand that I need to rearrange the links to make the correct local call in the cel files folder, but how?
Remembering I want to open this file directly by cel to test.
<!doctype html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" href="node_modules/bootstrap/compiler/estilo.css">
<title>Parallax</title>
</head>
<body>
<section class="header-site">
<div class="container">
<div class="row">
<div class="col-xl-12">
<h1 class="text-center">BEM-VINDO</h1>
<p class="lead text-center text-dark text-uppercase" style="font-weight:bold;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="text-center">
<a href="#" class="btn btn-dark">Cadastre-se</a>
</p>
</div>
</div>
</div>
</section>
<section class="content-site">
<div class="container">
<div class="row">
<div class="col-xl-12">
<h1 class="text-center">Donec eget consectetur nibh, quis aliquam odio. Ut lobortis luctus sollicitudin.</h1>
<p class="text-center">Quisque malesuada malesuada lorem, a lobortis libero finibus sed. Suspendisse sem nisl, porta tristique leo eu, rhoncus mollis ligula. Integer nunc tellus, condimentum faucibus cursus at, fermentum ut ligula. Donec maximus gravida est, ac elementum felis consectetur pretium. Cras sed luctus massa, et facilisis libero. Etiam tincidunt lacus quis placerat ultrices. </p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<img src="img/01.jpg" class="card-img-top">
<div class="text-center">
<h3>Etiam justo ipsum egestas.</h3>
<p class="card-text" style="height:225px">asellus id metus nec eros mollis tristique. Donec velit quam, congue vitae metus at, ultrices posuere urna. Aenean euismod justo a quam accumsan suscipit. Nam accumsan purus eu tellus pulvinar sodales quis in erat eros.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img src="img/02.jpg" class="card-img-top" style="height:350px">
<div class="text-center">
<h3>Quisque cursus dolor vitae sollicitudin egestas.</h3>
<p class="card-text" style="height:190px">asellus id metus nec eros mollis tristique. Donec velit quam, congue vitae metus at, ultrices posuere urna. Aenean euismod justo a quam accumsan suscipit. Nam accumsan purus eu tellus pulvinar sodales quis in erat.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img src="img/03.jpg" class="card-img-top">
<div class="text-center">
<h3>Pellentesque egestas massa non ultricies tincidunt.</h3>
<p class="card-text" style="height:160px">asellus id metus nec eros mollis tristique. Donec velit quam, congue vitae metus at, ultrices posuere urna. Aenean euismod justo a quam accumsan suscipit. Nam accumsan purus eu tellus pulvinar sodales quis in erat.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<br><br>
<section class="content-2">
<div class="container">
<div class="row">
<div class="col-xl-12">
<h1 class="text-center">Nunc quis sodales turpis.</h1>
<p class="lead text-center" style="font-weight:bold;">Phasellus id metus nec eros mollis tristique. Donec velit quam, congue vitae metus at, ultrices posuere urna. Aenean euismod justo a quam accumsan suscipit. Nam accumsan purus eu tellus pulvinar sodales quis in erat.</p>
</div>
</div>
</div>
</section>
<section class="footer">
<div class="container">
<div class="row">
<div class="col-xl-12">
<p class="text-center">Nullam condimentum, nisi non vehicula malesuada, est est sagittis leo, id dignissim arcu augue sed ligula.</p>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript
jQuery first, then Popper.js, then Bootstrap JS
atenção aqui. se n der o efeito q quero preciso trocar o link-->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
CSS:
.header-site{<br>
background-image:url(file:///E|/Programas%20em%20execucao/wamp/www/aulas/paralaxTeste/img/galaxy-wallpapers-5.jpg);<br>
background-position: center top;<br>
background-repeat:no-repeat;<br>
background-size:cover;<br>
background-attachment:fixed;<br>
color:#fff;<br>
padding-top:300px;<br>
padding-bottom:300px;}<br>
.content-site{<br>
padding-top:200px;<br>
padding-bottom:200px;}<br>
.content-2{<br>
background-image:url(file:///E|/Programas%20em%20execucao/wamp/www/aulas/paralaxTeste/img/Shadow-of-the-Colossus-2-.jpg);<br>
background-position: center top;<br>
background-repeat:no-repeat;<br>
background-size:cover;<br>
background-attachment:fixed;<br>
color:#fff;<br>
padding-top:300px;<br>
padding-bottom:300px;}<br>
.footer{<br>
background-color:#333;<br>
color:#fff;<br>
padding-top:250px;<br>
padding-bottom:250px;}<br>