I am setting a div to be hidden by default. When the page loads, I am trying to hide it with jQuery.
I am also using bootstrap
I am pretty new to jquery, so i really appreciate your help
Here is the div in the html file
<!--POP-UP-->
<div class="container hidden d-flex justify-content-center align-items-center" id="prod-pop-up" >
<div class="row pop-up position-fixed">
<div class="circle position-absolute"></div>
<div class="col-5 d-flex align-items-end justify-content-end product-img">
<img class="" src="img/OM Chicharon.png" alt="">
<div class="variants d-flex flex-column">
<button class="btn active">80g</button>
<button class="btn">40g</button>
</div>
</div>
<div class="col-7 d-flex flex-column justify-content-between product-details">
<div class="up d-flex flex-column align-items-end">
<img id="close-pop-up" src="imgs/pop-up-close.svg" alt="">
<div class="product-name d-flex flex-column align-items-end">
<h4>oyster mushroom</h5>
<h1>Chicharon</h1>
</div>
<h3 class="price"><span>PHP</span>119.00</h3>
</div>
<div class="down d-flex flex-column align-items-end">
<p class="text-right prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor condimentum nunc vel euismod. Nam eget risus tortor. Proin a quam at enim tincidunt blandit ac eget justo. </p>
<button class="btn rounded-pill buy-now">BUY NOW</button>
</div>
</div>
</div>
</div>
and heres the js file
$(document).ready(function(){
$("#close-pop-up").click(function(){
$('#toggle').hide();
});});
$(document).ready(function(){
$("#close-pop-up").click(function(){
$('#prod-pop-up').hide();
});});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--POP-UP-->
<div class="container hidden d-flex justify-content-center align-items-center" id="prod-pop-up" >
<div class="row pop-up position-fixed">
<div class="circle position-absolute"></div>
<div class="col-5 d-flex align-items-end justify-content-end product-img">
<img class="" src="img/OM Chicharon.png" alt="No image">
<div class="variants d-flex flex-column">
<button class="btn active">80g</button>
<button class="btn">40g</button>
</div>
</div>
<div class="col-7 d-flex flex-column justify-content-between product-details">
<div class="up d-flex flex-column align-items-end">
<img id="close-pop-up" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="">
<div class="product-name d-flex flex-column align-items-end">
<h4>oyster mushroom</h5>
<h1>Chicharon</h1>
</div>
<h3 class="price"><span>PHP</span>119.00</h3>
</div>
<div class="down d-flex flex-column align-items-end">
<p class="text-right prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor condimentum nunc vel euismod. Nam eget risus tortor. Proin a quam at enim tincidunt blandit ac eget justo. </p>
<button class="btn rounded-pill buy-now">BUY NOW</button>
</div>
</div>
</div>
</div>
it seems to be working just make sure that your image path is correct,that is image src is actually referring to an image on your machine.
I think you should try in this way, may be it will work
$(document).ready(function(){
$("#close-pop-up").click(function(){
$('#prod-pop-up').css("display", "none");;
});
});
use css("display", "block"); for showing content and css("display", "none"); for hiding the content..
Inside the "click" function, you should choose the right element to hide.
I think the best decision would be the root-div with id "prod-pop-up".
So maybe try:
$(document).ready(function(){
$("#close-pop-up").click(function(){
$('#prod-pop-up').hide();
});
});
I have solved my problem. I have removed the d-flex class. I just put the whole div inside a section so that I can still keep the d-flex class because it ruins the layout without it.
Related
I am trying to close a div by clicking a button with SlideUp function.
But when I click on button it opens as expected and closes other divs. But doesn't close it re-opens itself.
Here is my html code
<div class="row all-row">
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="img.png" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Ipsunlore</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
Find
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="image.jpg" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Mister: Ipsun</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
From
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
</div>
and here is the Jquery codes:
<script>
$(".opener").click(function(){
$(".all-row").find(".card-wrapper").slideUp();
$(this).closest(".card-wrapper").slideToggle();
})
</script>
You use .closest(), which finds the closest matching parent. But what you need is .prev() because the element you want to target is the previous sibling... Not it's parent.
Additionnaly, you should remove this targeted element form the "all" .card-wrapper collection, using .not()
$(".opener").click(function() {
// The card previous to the clicked .card-opener anchor
var this_card = $(this).prev(".card-wrapper")
// Make sure all cards closes EXCEPT this one
$(".all-row").find(".card-wrapper").not(this_card).slideUp();
// Toggle this one
this_card.slideToggle();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row all-row">
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="img.png" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Ipsunlore</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
Find
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="image.jpg" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Mister: Ipsun</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
From
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
</div>
I am a newbie in Bootstrap. In Bootstrap, when I reduced browser screen to the small device size, the rows I used in separate containers are overlapping. Screenshots of the screens have given along with this post. Can anyone explain to me how containers are used without overlapping one another?
Overlapping rows
<!doctype HTML>
<html lang="en">
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" type="text/css">
<title>WeGo</title>
</head>
<body>
<div class=".container-fluid shadow-sm">
<nav class="navbar sticky-top navbar-expand-lg navbar-light">
<a class="navbar-brand h4 pl-3 logo-txt">WeGo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHam" aria-controls="navbarHam"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHam">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Contact</a>
<a class="nav-item nav-link" href="#"><b class="sign-up-text">Sign up</b></a>
</div>
</div>
</nav>
</div>
<div class="container-fluid cover-bg cover-style">
<div class="row">
<div class="col-sm-12 col-lg-6 col-md-6 cover-style">
<div class="cover-col1-style">
<h1 class="display-4 text-white">Your personal </br> travel assistant</h1>
<button type="button" class="btn btn-outline-light btn-lg">Explore</button>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-md-6 cover-style">
<form class="bg-white cover-form-style shadow">
<h1 class="h4 text-center" style="padding-top: 1.3em;margin-bottom: 2em; font-weight: 600;">Sign in</h1>
<div class="form-group">
<input type="email" class="form-control cover-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email address">
</div>
<div class="form-group">
<input type="password" class="form-control cover-input" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check" style="padding-left: 43px;">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember me</label>
</div>
<button type="submit" class="btn btn-primary" style="width: 110px;height: 50px; border-radius: 30px;margin-left: 9em;margin-top: 25px;">Submit</button>
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h4 class="display-5 text-center pt-4">Features</h4>
</div>
<div class="col-lg-4 col-sm-4 col-md-4">
<div class="card card-margin" style="width: 18rem;">
<img class="card-img-top feature-icon" src="./images/icons/location.svg" height="90px" width="90px" alt="Card image cap">
<div class="card-body">
<p class="card-text feature-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit iaculis dapibus. Sed convallis convallis justo,
id lobortis enim vehicula elementum.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4">
<div class="card card-margin" style="width: 18rem;">
<img class="card-img-top feature-icon" src="./images/icons/food.svg" height="90px" width="90px" alt="Card image cap">
<div class="card-body">
<p class="card-text feature-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit iaculis dapibus. Sed convallis convallis justo,
id lobortis enim vehicula elementum.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4">
<div class="card card-margin" style="width: 18rem;">
<img class="card-img-top feature-icon" src="./images/icons/hotel.svg" height="90px" width="90px" alt="Card image cap">
<div class="card-body">
<p class="card-text feature-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit iaculis dapibus. Sed convallis convallis justo,
id lobortis enim vehicula elementum.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
I found out the solution. The issue was I used two different containers which caused the overlapping of containers. Instead of two different containers, I used a container and two different rows inside that container which solved the issue caused before. Now the code looks like this.
<!doctype HTML>
<html lang="en">
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRe3js3W69CrGF8kKXvvmYtT4zNGqicXRjvuAnmmbvPZXc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" type="text/css">
<title>WeGo</title>
</head>
<body>
<div class=".container-fluid shadow-sm">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand h4 pl-3 logo-txt">WeGo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHam" aria-controls="navbarHam"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHam">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Contact</a>
<a class="nav-item nav-link" href="#"><b class="sign-up-text">Sign up</b></a>
</div>
</div>
</nav>
</div>
<div class="container-fluid cover-bg cover-style">
<div class="row">
<div class="col-sm-6 cover-style">
<div class="cover-col1-style">
<h1 class="display-4 text-white">Your personal </br> travel assistant</h1>
<button type="button" class="btn btn-outline-light btn-lg">Explore</button>
</div>
</div>
<div class="col-sm-6 cover-style">
<form class="bg-white cover-form-style shadow">
<h1 class="h4 text-center" style="padding-top: 1.3em;margin-bottom: 2em; font-weight: 600;">Sign in</h1>
<div class="form-group">
<input type="email" class="form-control cover-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email address">
</div>
<div class="form-group">
<input type="password" class="form-control cover-input" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check" style="padding-left: 43px;">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember me</label>
</div>
<button type="submit" class="btn btn-primary" style="width: 110px;height: 50px; border-radius: 30px;margin-left: 9em;margin-top: 25px;">Submit</button>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h4 class="display-5 text-center pt-4">Features</h4>
</div>
<div class="col-sm-4">
<div class="card card-margin shadow-sm" style="width: 18rem;">
<img class="card-img-top feature-icon" src="./images/icons/location.svg" height="90px" width="90px" alt="Card image cap">
<div class="card-body">
<p class="card-text feature-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit iaculis dapibus. Sed convallis convallis justo,
id lobortis enim vehicula elementum.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card card-margin shadow-sm" style="width: 18rem;">
<img class="card-img-top feature-icon" src="./images/icons/food.svg" height="90px" width="90px" alt="Card image cap">
<div class="card-body">
<p class="card-text feature-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit iaculis dapibus. Sed convallis convallis justo,
id lobortis enim vehicula elementum.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card card-margin shadow-sm" style="width: 18rem;">
<img class="card-img-top feature-icon" src="./images/icons/hotel.svg" height="90px" width="90px" alt="Card image cap">
<div class="card-body">
<p class="card-text feature-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit iaculis dapibus. Sed convallis convallis justo,
id lobortis enim vehicula elementum.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEQenPMJNuqUwhg5W8UMFs66YBXrBVhhZzMFyRJVAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
I am using Rails and did a navbar. The navbar folds into a burger after the certain width has been reached. I am able to click on the burger-sign without defining any event listener in JS. I just added this into the head of my application.html.erb
<meta>
<%= javascript_include_tag 'application' %>
<%= yield :js %>
<meta>
After adding, the click worked perfectly, but my home link, root_path was broken. It constantly lead to the #index page, but would display only "2019"on the blank page, not the actual #index page layout. I fixed the links adding the get method ty my link, like this:
<li><%= link_to 'Home', root_path, method: :get %></li>
What still doensn't work, is my browser back button, this still leads to this weird blank page with the 2019 printed on it. Can someone explain what is happening and how do I get to the previous page by clicking on the browser back button? Thanks!
P.S. This is the sourse html
<!DOCTYPE html>
<html>
<head>
<title>Neigbornow</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="RST7jzlY6IftapnMzEI9BkObFqh4B8EaX4cnX7PavwQq7ziZ5PKkVtgnExe8oShZxl56m40/UBgYG0OacVrWbg==" />
<meta>
<script src="/assets/jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1"></script>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/bootstrap/affix.self-b2bd74404ab3c627c5129dcdd3bdc2fc0a9d4bff4e1b6f1bae96412f9a1e9723.js?body=1"></script>
<script src="/assets/bootstrap/alert.self-7c7aa23778284da0e4aa395a0a6d858c7efd891c9312fe71908b28292654ac0c.js?body=1"></script>
<script src="/assets/bootstrap/button.self-b7a8ce9f47662b97ab74ef3dd416e93d3a4f644b252307a28231976a0149feef.js?body=1"></script>
<script src="/assets/bootstrap/carousel.self-c2c0ad2347d3fdd8447abd9d5792efed40ad5afadc5e0de3001e34904a6f68ce.js?body=1"></script>
<script src="/assets/bootstrap/collapse.self-4db094cc14a1aafa93e51e6f298115323037bb9e24c060dd0de52f27446f6227.js?body=1"></script>
<script src="/assets/bootstrap/dropdown.self-7efa4aa654357ae664a98ec52151c25cd4927eacd1fabe038d068d9344b62cbd.js?body=1"></script>
<script src="/assets/bootstrap/modal.self-4ca048907279f4bb9187ba2541ae5d03296917d5c42e8fef0b58ec31c8902f0f.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy.self-e62629e47ba5fe8b7faaa745f2fef2ccdb1bfd56ffb4f95615684ef40c74bcc4.js?body=1"></script>
<script src="/assets/bootstrap/tab.self-7fbfa844201ceeb4b896e4d185a33df19a284fe461281b7c0f78dbea2ef6da5a.js?body=1"></script>
<script src="/assets/bootstrap/transition.self-3c74f1999fcbf39cfb240b67c9a9e900863859f82f53fb27e5a388fe5e1a1c5c.js?body=1"></script>
<script src="/assets/bootstrap/tooltip.self-82858d5843f55bfed321ea59fc5b180f3d2a8afc498ebc4d665561110b807875.js?body=1"></script>
<script src="/assets/bootstrap/popover.self-a1e6d4555fb912f0405099135eaddbe8273ba8f08323477a471d34419d57b446.js?body=1"></script>
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1"></script>
<script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1"></script>
<script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1"></script>
<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/profile.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/reviews.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/user_steps.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/application.self-813dac1f9eb54ab17313987648014af35d74ebeb15c2265509c52491183d3dcc.js?body=1"></script>
<meta>
<link rel="stylesheet" media="all" href="/assets/style.self-67cdb30c3f83239515cab5c4f35c9f7533c426bd77b8d75c40e8ff613eb658ec.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-fe639f1da8d2570340060e10dc6bf2430bb27ff5e40357dce724cbc8efb24584.css?body=1" data-turbolinks-track="reload" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand pull-left" href="#">
<img src="/assets/logo_transparent-ad9441c50046e461177bad078050d5345754d0413d7ef8a7f549aa5bf35e466e.png" width="147" height="70" class="d-inline-block align-left mr-2">
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li><a data-method="get" href="/">Home</a></li>
<li><a>About</a></li>
<li><a>Search</a></li>
<li><a>Contact</a>
<li>
<div class="log-in-btn"><button class="btn" type="submit">Log in</button></div>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
</div>
<head>
<title>Neignbornow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="empty-space"> </div>
<div class="site-blocks-cover overlay" style="background-image: url(https://images.unsplash.com/photo-1464082354059-27db6ce50048?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80);" data-aos="fade" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row align-items-center justify-content-end text-center">
<div class="row justify-content-center mb-4">
<div class="col-md-8 text-left">
<div class="site-intro">
<h1>Home is about personal connections, not just neighbors.</h1>
<p>Recconect with your neighbors, by sharing things and experiences. Now.</p>
<button class="btn register" type="submit">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header -->
<!-- About section -->
<div class="site-section bg-light">
<div class="container">
<div class="col-12">
<h2>About Neighborheart</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
</p>
</div>
</div>
</div>
<!-- About section -->
<!-- Testimonials -->
<div class="site-section bg-white">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Testimonials</h2>
</div>
</div>
<div class="slide-one-item home-slider owl-carousel">
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_3.jpg" alt="Image" class="img-fluid mb-3">
<p>John Smith</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_2.jpg" alt="Image" class="img-fluid mb-3">
<p>Christine Aguilar</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_4.jpg" alt="Image" class="img-fluid mb-3">
<p>Robert Spears</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_5.jpg" alt="Image" class="img-fluid mb-3">
<p>Bruce Rogers</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<!-- Search section and show map -->
<div class="site-section bg-light">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="h5 mb-4 text-black">Search for items in your neighborhood</h2>
<!-- Serach bar -->
<div class="form-search-wrap mb-3" data-aos="fade-up" data-aos-delay="200">
<form method="post">
<div class="row align-items-center">
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-4">
<input type="text" class="form-control rounded" placeholder="What are you looking for?">
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="wrap-icon">
<span class="icon icon-room"></span>
<input type="text" class="form-control rounded" placeholder="Location">
</div>
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="select-wrap">
<span class="icon"><span class="icon-keyboard_arrow_down"></span></span>
<select class="form-control rounded" name="" id="">
<option value="">All Categories</option>
<option value="">Real Estate</option>
<option value="">Books & Magazines</option>
<option value="">Furniture</option>
<option value="">Electronics</option>
<option value="">Cars & Vehicles</option>
<option value="">Others</option>
</select>
</div>
</div>
<div class="col-lg-12 col-xl-2 ml-auto text-right">
<input type="submit" class="btn btn-primary btn-block rounded" value="Search">
</div>
</div>
</form>
</div>
<!-- Search bar -->
<!-- Map -->
<!-- Map -->
</div>
</div>
</div>
</div>
<!-- Search section Search section and show map -->
<!-- Cathegories -->
<div class="site-section" data-aos="fade">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Popular Categories</h2>
<p class="color-black-opacity-5">Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
<div class="overlap-category mb-5">
<div class="row align-items-stretch no-gutters">
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-car"></span></span>
<span class="caption mb-2 d-block">Services</span>
<span class="number">1,921</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-closet"></span></span>
<span class="caption mb-2 d-block">Events</span>
<span class="number">2,339</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-home"></span></span>
<span class="caption mb-2 d-block">Household</span>
<span class="number">4,398</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-open-book"></span></span>
<span class="caption mb-2 d-block">Books & Magazines</span>
<span class="number">3,298</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-tv"></span></span>
<span class="caption mb-2 d-block">Electronics</span>
<span class="number">2,932</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-pizza"></span></span>
<span class="caption mb-2 d-block">Beverages</span>
<span class="number">183</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Cathegories -->
<div class="newsletter bg-primary py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2>Newsletter</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col-md-6">
<form class="d-flex">
<input type="text" class="form-control" placeholder="Email">
<input type="submit" value="Subscribe" class="btn btn-white">
</form>
</div>
</div>
</div>
</div>
</body>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<h2 class="footer-heading mb-4">About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident rerum unde possimus molestias dolorem fuga, illo quis fugiat!</p>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Navigations</h2>
<ul class="list-unstyled">
<li>About Us</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Follow Us</h2>
<span class="icon-facebook"></span>
<span class="icon-twitter"></span>
<span class="icon-instagram"></span>
<span class="icon-linkedin"></span>
</div>
</div>
</div>
<div class="col-md-3">
<form action="#" method="post">
<div class="input-group mb-3">
<input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Search products..." aria-label="Enter Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary text-white" type="button" id="button-addon2">Search</button>
</div>
</div>
</form>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>
document.write(new Date().getFullYear());
</script> All rights reserved | This template is made with <i class="icon-heart" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
I'm trying to port HTML template to .vue files. I know there's known problem with deeply nested DOM like in this question, but my vue.config.js already looks like that:
module.exports = {
chainWebpack: (config) => {
const vueRule = config.module.rule('vue');
vueRule.uses.clear();
const vueLoader = vueRule.use('vue-loader').loader('vue-loader');
vueLoader.options({
prettify: false,
});
},
};
npm run serve hangs on 22% forever and it looks like that:
> vue-cli-service serve
INFO Starting development server...
22% building 106/110 modules 4 active ...bout.vue?vue&type=template&id=039c5b43&
While NODE_ENV=production npm run serve runs just fine.
Here's my whole About.vue file which hangs on render:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About us</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Destino project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="styles/about_styles.css">
<link rel="stylesheet" type="text/css" href="styles/about_responsive.css">
</head>
<body>
<div class="super_container">
<!-- Header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_container d-flex flex-row align-items-center justify-content-start">
<!-- Logo -->
<div class="logo_container">
<div class="logo">
<div>destino</div>
<div>travel agency</div>
<div class="logo_image"><img src="images/logo.png" alt=""></div>
</div>
</div>
<!-- Main Navigation -->
<nav class="main_nav ml-auto">
<ul class="main_nav_list">
<li class="main_nav_item">Home</li>
<li class="main_nav_item active">About us</li>
<li class="main_nav_item">Offers</li>
<li class="main_nav_item">News</li>
<li class="main_nav_item">Contact</li>
</ul>
</nav>
<!-- Search -->
<div class="search">
<form action="#" class="search_form">
<input type="search" name="search_input" class="search_input ctrl_class" required="required" placeholder="Keyword">
<button type="submit" class="search_button ml-auto ctrl_class"><img src="images/search.png" alt=""></button>
</form>
</div>
<!-- Hamburger -->
<div class="hamburger ml-auto"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
</header>
<!-- Menu -->
<div class="menu_container menu_mm">
<!-- Menu Close Button -->
<div class="menu_close_container">
<div class="menu_close"></div>
</div>
<!-- Menu Items -->
<div class="menu_inner menu_mm">
<div class="menu menu_mm">
<div class="menu_search_form_container">
<form action="#" id="menu_search_form">
<input type="search" class="menu_search_input menu_mm">
<button id="menu_search_submit" class="menu_search_submit" type="submit"><img src="images/search_2.png" alt=""></button>
</form>
</div>
<ul class="menu_list menu_mm">
<li class="menu_item menu_mm">Home</li>
<li class="menu_item menu_mm">About us</li>
<li class="menu_item menu_mm">Offers</li>
<li class="menu_item menu_mm">News</li>
<li class="menu_item menu_mm">Contact</li>
</ul>
<!-- Menu Social -->
<div class="menu_social_container menu_mm">
<ul class="menu_social menu_mm">
<li class="menu_social_item menu_mm"><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-linkedin" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-twitter" aria-hidden="true"></i></li>
</ul>
</div>
<div class="menu_copyright menu_mm">Colorlib All rights reserved</div>
</div>
</div>
</div>
<!-- Home -->
<div class="home">
<!-- Image by https://unsplash.com/#peecho -->
<div class="home_background parallax-window" data-parallax="scroll" data-image-src="images/about_background.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_content_inner">
<div class="home_title">About us</div>
<div class="home_breadcrumbs">
<ul class="home_breadcrumbs_list">
<li class="home_breadcrumb">Home</li>
<li class="home_breadcrumb">About us</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Find Form -->
<div class="find">
<!-- Image by https://unsplash.com/#garciasaldana_ -->
<div class="find_background_container prlx_parent">
<div class="find_background prlx" style="background-image:url(images/find.jpg)"></div>
</div>
<!-- <div class="find_background parallax-window" data-parallax="scroll" data-image-src="images/find.jpg" data-speed="0.8"></div> -->
<div class="container">
<div class="row">
<div class="col-12">
<div class="find_title text-center">Find the Adventure of a lifetime</div>
</div>
<div class="col-12">
<div class="find_form_container">
<form action="#" id="find_form" class="find_form d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-between justify-content-start flex-wrap">
<div class="find_item">
<div>Destination:</div>
<input type="text" class="destination find_input" required="required" placeholder="Keyword here">
</div>
<div class="find_item">
<div>Adventure type:</div>
<select name="adventure" id="adventure" class="dropdown_item_select find_input">
<option>Categories</option>
<option>Categories</option>
<option>Categories</option>
</select>
</div>
<div class="find_item">
<div>Min price</div>
<select name="min_price" id="min_price" class="dropdown_item_select find_input">
<option> </option>
<option>Price</option>
<option>Price</option>
</select>
</div>
<div class="find_item">
<div>Max price</div>
<select name="max_price" id="max_price" class="dropdown_item_select find_input">
<option> </option>
<option>Price</option>
<option>Price</option>
</select>
</div>
<button class="button find_button">Find</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- About -->
<div class="about">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>We are an award winning Agency</h2>
<div>take a look at our story</div>
</div>
</div>
</div>
<div class="row about_row">
<div class="col-lg-6 about_col order-lg-1 order-2">
<div class="about_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis. Quisque vel est id justo faucibus dapibus id a nibh. Aenean suscipit consequat lacus, sit amet mollis nulla. Morbi sagittis orci id lacus convallis tempus eget sit amet metus. Sed finibus, magna at euismod aliquet, enim justo vulputate lorem, sit amet elementum dolor eros sollicitudin dui. Sed ac magna mauris. Nullam lectus odio, viverra vel mi id, interdum imperdiet nulla. </p>
<div class="button about_button">Read More</div>
</div>
</div>
<div class="col-lg-6 about_col order-lg-2 order-1">
<div class="about_image">
<img src="images/about.jpg" alt="https://unsplash.com/#sanfrancisco">
</div>
</div>
</div>
</div>
</div>
<!-- Milestones -->
<div class="milestones">
<div class="milestones_background parallax-window" data-parallax="scroll" data-image-src="images/fact_background.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>Fun facts about our Agency</h2>
<div>take a look</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="milestones_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis. Quisque vel est id justo faucibus dapibus id a nibh</p>
</div>
</div>
</div>
<div class="row milestones_container">
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_1.svg" alt=""></div>
<div class="milestone_counter" data-end-value="17">0</div>
<div class="milestone_text">Mountains Climbed</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_2.svg" alt=""></div>
<div class="milestone_counter" data-end-value="213">0</div>
<div class="milestone_text">Islands Visited</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_3.svg" alt=""></div>
<div class="milestone_counter" data-end-value="11923">0</div>
<div class="milestone_text">Photos Taken</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_4.svg" alt=""></div>
<div class="milestone_counter" data-end-value="15">0</div>
<div class="milestone_text">Cruises Organized</div>
</div>
</div>
</div>
</div>
</div>
<!-- Services -->
<div class="services">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>Popular services that we offer</h2>
<div>take a look at these offers</div>
</div>
</div>
</div>
<div class="row icon_box_container">
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_1.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Weekend trips</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_2.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Fun leisure trips</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_3.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Plane tickets</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="newsletter">
<!-- Image by https://unsplash.com/#garciasaldana_ -->
<div class="newsletter_background" style="background-image:url(images/newsletter.jpg)"></div>
<div class="container">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<div class="newsletter_content">
<div class="newsletter_title text-center">Subscribe to our Newsletter</div>
<div class="newsletter_form_container">
<form action="#" id="newsletter_form" class="newsletter_form">
<div class="d-flex flex-md-row flex-column align-content-center justify-content-between">
<input type="email" id="newsletter_input" class="newsletter_input" placeholder="Your E-mail Address">
<button type="submit" id="newsletter_button" class="newsletter_button">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="footer_about">
<!-- Logo -->
<div class="logo_container">
<div class="logo">
<div>destino</div>
<div>travel agency</div>
<div class="logo_image"><img src="images/logo.png" alt=""></div>
</div>
</div>
<div class="footer_about_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar sed mauris eget tincidunt. Sed lectus nulla, tempor vel eleifend quis, tempus rut rum metus. Pellentesque ultricies enim eu quam fermentum hendrerit.</div>
<div class="copyright"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></div>
</div>
</div>
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="footer_latest">
<div class="footer_title">Latest News</div>
<div class="footer_latest_content">
<!-- Footer Latest Post -->
<div class="footer_latest_item">
<div class="footer_latest_image"><img src="images/latest_1.jpg" alt="https://unsplash.com/#peecho"></div>
<div class="footer_latest_item_content">
<div class="footer_latest_item_title">Brazil Summer</div>
<div class="footer_latest_item_date">Jan 09, 2018</div>
</div>
</div>
<!-- Footer Latest Post -->
<div class="footer_latest_item">
<div class="footer_latest_image"><img src="images/latest_2.jpg" alt="https://unsplash.com/#sanfrancisco"></div>
<div class="footer_latest_item_content">
<div class="footer_latest_item_title">A perfect vacation</div>
<div class="footer_latest_item_date">Jan 09, 2018</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="tags footer_tags">
<div class="footer_title">Tags</div>
<ul class="tags_content d-flex flex-row flex-wrap align-items-start justify-content-start">
<li class="tag">travel</li>
<li class="tag">summer</li>
<li class="tag">cruise</li>
<li class="tag">beach</li>
<li class="tag">offer</li>
<li class="tag">vacation</li>
<li class="tag">trip</li>
<li class="tag">city break</li>
<li class="tag">adventure</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="styles/bootstrap4/popper.js"></script>
<script src="styles/bootstrap4/bootstrap.min.js"></script>
<script src="plugins/greensock/TweenMax.min.js"></script>
<script src="plugins/greensock/TimelineMax.min.js"></script>
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="plugins/greensock/animation.gsap.min.js"></script>
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="plugins/parallax-js-master/parallax.min.js"></script>
<script src="js/about_custom.js"></script>
</body>
</html>
</template>
<script>
export default {
name: 'About',
}
</script>
Have you any idea why it runs fine in production mode while in development it can't? I've googled it very intensive, but I only know the issue with prettify which seems to be prevented in my case.
I am using slick slider for a page.Everything works great except one thing: When I drag the slide sometimes the image or text bounces and that's look really bad. What can I do to avoid that problem?
Here is my code
<section class="portfolio" id="portfolio">
<div class="container" style="height:100px">
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
<div id="portfolio_slider">
<div id="item">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 text-right">
<div id="project_name">
PROJECT<br />
NAME
</div>
<div id="project-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor erat,
laoreet ut ullamcorper vel, fermentum vel ex. Donec convallis leo sit amet auctor
rutrum. Nullam accumsan risus at quam porttitor ec tortor erat, laoreet ut
ullamcorper vel, fermentum vel tristique.
</div>
<div id="read_more">Read More...</div>
</div>
<div class="col-lg-7 col-lg-offset-1" id="project_image">
<img class="img-responsive shadow" src="http://i.imgur.com/35Lun7R.jpg" />
</div>
<div class=" col-lg-1 col-md-1 social_buttons">
<div class="centered">
<div class="flex-item" style="padding-bottom: 50px;">
<i class="fa fa-facebook"></i>
</div>
<div class="flex-item" style="padding-bottom: 50px;">
<i class="fa fa-twitter"></i>
</div>
<div class="flex-item">
<i class="fa fa-instagram"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
in the code pen, in CSS, there is one class, #portfolio_slider #item with margin: top 20px remove it.