0
Hi, I created a website with 2 Paralax effects to practice this feature via bootstrap. As it is a front end site only, I would like to test it by cell phone even (no functions change platform size by browser).
Then I opened, copied the files of this project to my mobile to test the direct functioning on the mobile, but it does not show the images and much less access the style pages and etc. In other words, it shows only the html structure, no css application.
Note: Parallax is CSS only.
Some general doubts:
i need some specific app to compile the bootstrap on cel?
I understand that I need to reorganize the links to make the right local call in the cel files folder, but how?
Remembering that 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>
why don’t you use the Chrome tool to emulate what the mobile layout would look like?
f12afterwardCtrl+Shift+M– Alvaro Alves
It was like I said there in parentheses, the functions for testing platform via Chrome as you suggested I already did, is that the idea is to put the site on mobile to show in an internship interview, so I wanted it to open directly on cell :)
– Felipe Moreira
I think sometimes https://phonegap.com/ can help you. But the best thing would be to put your files in an FTP, even if it is a Gitpages, or in qq other FTP free. Or (I don’t know if it exists). Install a local server like Wamp or Xamp in your Cel and put the files there etc
– hugocsl