I'm creating a single page mock gym website and i'm using a scroll down function on the nav bar buttons to the relevant sections. I'm also trying to use it on a link in the 'classes' section of the page to scroll down to the contact section of the page. However, when after putting in the js code it takes me to the top of the page instead. the error i'm getting in the console is : Cannot read property 'addEventListener' of null but i don't understand how to fix the problem from similar issues on stackoverflow. Below is the code and the section i'm talking about is the first card in the classes title 'spin' which a 'call or email to book now' link. I would be greatful for any help :)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>FITT GYM</title>
</head>
<body>
<!--nav bar-->
<header>
<div class="logo-text">
<h1 class="logo-text"><span>FITT GYM</span></h1>
</div>
<i class="fa fa-bars menu-toggle"></i>
<ul class="nav">
<li> Home</li>
<li> About</li>
<li> Classes</li>
<li> PT</li>
<li> Contact</li>
</ul>
</header>
<!--nav bar-->
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/woman-lifting-barbell-1552249.jpg" class="d-block w-100" alt="barbell">
</div>
<div class="carousel-item">
<img src="img/adult-athlete-body-bodybuilding-414029.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/photo-of-woman-jumping-on-box-2294403.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
<br>
<!--about-->
<div class="about-section">
<h2 class="about-header">About FITT GYM</h2>
<p class="about-para"><i>FITT Gym is a berkshire based gym designed to help individuals achieve their fittness goals.
Founded in 2014, FITT gym has been recognized as one of the top UK gym brands for it's high intensity workouts,
results driven personal trainers and for being one of the most socialable gyms to go to. With a state of the art facility
FITT gym makes your workout experince a comfortable one as well as endless equipment to train with.</i>
</p>
</div>
<br>
<div class="classes-section">
<h1 class="classes-header">Classes</h1>
<p class="classes-about"><i>The most popular reason why people become come to FITT gym is our classes! see what's on below:</i></p>
<body>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/athlete-bike-black-and-white-cycle-260409.jpg" alt="Card image cap">
<h4 class="card-title">Spin</h4>
<p class="card-text p-y-1" id="spin-card-text">The ride of your life to ensure you can ride mountains.</p>
<ul>
<li>Call or Email to Book Now</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-in-blue-shorts-carrying-brown-exercise-equipments-116079.jpg" alt="Card image cap">
<h4 class="card-title">Kettle Bells</h4>
<p class="card-text p-y-1">Russian style kettle bell workout to make you tougher than ever.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/there-women-in-a-yoga-session-917732.jpg" alt="Card image cap">
<h4 class="card-title">Yoga</h4>
<p class="card-text p-y-1">An experince that will clean your mind and keep you healthy.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/people-boxing-inside-gym-1862785.jpg" alt="Card image cap">
<h4 class="card-title">Boxing</h4>
<p class="card-text p-y-1">Fight your way through this tough workout with our experienced trainers.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/person-holding-barbell-841130.jpg" alt="Card image cap">
<h4 class="card-title">Crossfit</h4>
<p class="card-text p-y-1">Increase your power in our crossfit bootcamp and you'll be as strong as the hulk</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-working-out-2294361.jpg" alt="Card image cap">
<h4 class="card-title">Core Conditioning</h4>
<p class="card-text p-y-1">The core conditioning class will shake up your abs.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="pt-section">
<h2 class = "pt-header">Personal Training</h2>
<p class="pt-about"><i>If you feel you need a 1:1 personal training session, then our trainers here at FITT can offer sessions that a personally designed for your personal goals and needs.
Whether you want to build muscle, lose weight, or just feel better, we can help achieve that with our experienced trainers.
Click below to book a session:</i></p>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/action-active-adult-body-416754.jpg" alt="Card image cap">
<h4 class="card-title">1:1 Session</h4>
<p class="card-text p-y-1" id="spin-card-text">A serious workout that will direct you towards your goals. Prepare for intensity and achievement!</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<br>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-and-woman-holding-battle-ropes-1552242.jpg" alt="Card image cap">
<h4 class="card-title">2:1 Session</h4>
<p class="card-text p-y-1">A workout for you and a friend or family member to get FITT together. Achieveing goals together forms bonds that last forever! </p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-and-woman-doing-yoga-1882004.jpg" alt="Card image cap">
<h4 class="card-title">1:1 Meditation</h4>
<p class="card-text p-y-1">Learn to focus, clear thoughts and feel mentally stronger. Have a 1 to 1 session with a meditation master and reach enlightenment.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
</div>
</section>
<br>
<section class="contact-section">
<h1 class="contact-header">Contact</h1>
<footer class="footer-distributed">
<div class="footer-left">
<h3>FITT GYM</h3>
<p class="footer-links">
Home
About
Classes
PT
Contact
</p>
<p class="footer-company-name">FITT Gym © 2020</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>Epic Road</span> Windsor, <br> Berkshire, <br> United Kingdom, <br> SL8 8QE</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>01344 865467677</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p>info#fittgym.com</p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About FITT Gym</span>
FITT Gym is a berkshire based gym designed to help individuals achieve their fittness goals.
</p>
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
</div>
</div>
</footer>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
* {
box-sizing: border-box;
list-style: none;
}
body {
padding: 0px;
margin: 0px;
height: 100%;
background-color: #0c0c0c;
font-family: 'Poppins', sans-serif;
min-height: 100vh;
}
#carouselExampleSlidesOnly{
z-index: -5;
}
#classes-heading{
text-align: center;
}
.grid-container {
display: grid;
}
.card-text {
color: #0c0c0c;
}
.btn-btn-primary {
align-items: center;
}
#classes-header {
color: white;
}
header{
background: #0c0c0c;
height: 66px;
}
header * {
color: white;
}
.header .logo {
float: left;
height: inherit;
margin-left: 7em;
}
header .logo-text {
margin: 8px;
}
header ul{
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
}
header ul li a {
display: block;
padding: 21px;
font-size: 1.1em;
text-decoration: none;
}
header ul li a:hover{
background: #3c3b3d83
}
header .menu-toggle{
display: none;
}
.page-wrapper{
min-height: 100%;
}
.about-header {
text-align: center;
color: white;
}
.about-para {
font-size: 1.3em;
color:white ;
text-align: center;
}
.classes-header {
text-align: center;
color:white ;
}
.classes-about {
font-size: 1.3em;
color:white ;
text-align: center;
}
.pt-header {
text-align: center;
color: white;
}
.pt-about {
font-size: 1.3em;
color: white;
text-align: center;
}
.footer-distributed{
background: #666;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 55px 50px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
}
/* The company logo */
.footer-distributed h3{
color: #ffffff;
margin: 0;
}
.footer-distributed h3 span{
color: rgb(31, 66, 163);
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
font-weight:400;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #222;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
font-weight:400;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: rgb(32, 59, 178);
text-decoration: none;;
}
.footer-distributed .footer-links a:before {
content: "|";
font-weight:300;
font-size: 20px;
left: 0;
color: #fff;
display: inline-block;
padding-right: 5px;
}
.footer-distributed .footer-links .link-1:before {
content: none;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
/* If you don't want the footer to be responsive, remove these media queries */
#media (max-width: 880px) {
.footer-distributed{
font: bold 14px sans-serif;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}
.contact-header{
text-align: center;
color: white;
}
function smoothScroll(target,duration){
var target = document.querySelector(target);
var targetPosition = target.getBoundingClientRect().top;
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var startTime = null;
function animation(currentTime){
if(startTime === null) startTime = currentTime;
var timeElapsed = currentTime - startTime;
var run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0,run);
if(timeElapsed < duration) requestAnimationFrame(animation);
console.log('timeElapsed : ' + timeElapsed + 'duration: ' + duration);
}
function ease(t, b, c, d) {
t /=d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t *(t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
var aboutBtn = document.querySelector('.about-button');
var aboutSection = document.querySelector('.about-section');
var classesBtn = document.querySelector('.classes-button');
var classesHeading = document.querySelector('.classes-header');
var ptBtn = document.querySelector('.pt-button');
var ptSection = document.querySelector('.pt-section');
var contactBtn = document.querySelector('.contact-button');
var contactSection = document.querySelector('.contact-section');
var cobBtn = document.querySelector('contactBtn');
aboutBtn.addEventListener('click', function(){
smoothScroll('.about-section', 1000);
});
aboutSection.addEventListener('click', function(){
smoothScroll('.about-button', 1000);
});
classesBtn.addEventListener('click', function(){
smoothScroll('.classes-header', 1000);
});
classesHeading.addEventListener('click', function(){
smoothScroll('.classes-button', 1000);
});
ptBtn.addEventListener('click', function(){
smoothScroll('.pt-section', 1000);
});
ptSection.addEventListener('click', function(){
smoothScroll('.pt-button', 1000);
});
contactBtn.addEventListener('click', function(){
smoothScroll('.contact-section', 1000);
});
contactSection.addEventListener('click', function(){
smoothScroll('.contact-button', 1000);
});
cobBtn.addEventListener('click', function(){
smoothScroll('.contact-section', 1000);
});
var cobBtn = document.querySelector('contactBtn');
should be
var cobBtn = document.querySelector('.contactBtn');
because "contactBtn" is a class name, I don't know about your code but I think you then add an event listener to that codeBtn element, which was returning null
in your case because it can't find an element with the tag name "contactBtn"
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
MDN
Related
I want to make 4 buttons that do the same thing. When you click on the button the heart is filled and when you click again the heart is empty. But only the first button works. When I click on the other three button the first button goes off. I don't really understand what I need to do. How can I make all 4 buttons to work?
var btn = document.getElementById('btn');
function Toggle() {
if (btn.classList.contains("far")) {
btn.classList.remove("far");
btn.classList.add("fas");
}else{
btn.classList.remove("fas");
btn.classList.add("far");
}
}
document.querySelectorAll('button').forEach((btn) => btn.addEventListener('click', Toggle, (e) => { console.log('hello'); }))
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;400;700;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght#300;400;600;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title {
text-align: center;
padding: 1.8rem;
font-size: 2rem;
color: black;
font-family: 'Lexend Mega', sans-serif;
}
.populair-movies {
justify-content: center;
display: flex;
}
.populair-movies h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 1.2rem;
padding-top: 0.2rem;
padding-bottom: 0.7rem;
}
.populair-movies p {
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
.stars {
padding-bottom: 0.3rem;
}
.populair-movies .card-container .card {
height: 300px;
width: 200px;
margin: 0.5rem;
}
.populair-movies .card-container .card img {
height: 100%;
width: 100%;
}
.styling-btn {
margin-top: 1rem;
padding: 0.5rem 1.1rem 0.5rem 0.5rem;
background: blue;
font-size: 1rem;
font-family: 'Open Sans', sans-serif;
border: none;
color: #e8efff;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.styling-btn i {
margin-right: 0.7rem;
margin-left: 0.3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populair Movies</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<!-- css file -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h2 class="title">POPULAIR MOVIES</h2>
<section class="populair-movies">
<div class="card-container">
<div class="card">
<img src="https://www.moviemeter.nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky">
<div class="info">
<h3>The Midnight Sky</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,6
</p>
</div>
<p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk#._V1_.jpg" alt="Escape from Pretoria">
<div class="info">
<h3>Escape from Pretoria</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
6,8
</p>
</div>
<p>2020 ‧ Drama/Thriller ‧ 1 u 46 m
</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BMWU0MzQwNjMtZGRiMC00M2UzLWE1YmItMWU3M2E0NmNkMDQ2XkEyXkFqcGdeQXVyNjEwNTM2Mzc#._V1_.jpg" alt="Kadaver">
<div class="info">
<h3>Kadaver</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,1
</p>
</div>
<p>2020 ‧ Drama/Horror ‧ 1 u 26 m
</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BY2RmZmI0NDMtMGQzOC00YWU3LTkwYWUtMDRkNDBjZDg3YTkyXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" alt="The Dig">
<div class="info">
<h3>The Dig</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
7,2
</p>
</div>
<p>2021 ‧ Drama/Geschiedenis ‧ 1 u 52 m
</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
</section>
<script src="js/script.js"></script>
</body></html>
You're using the same id in all the icons. JavaScript is only getting the element with the first id.
function toggle(index) {
const icon = document.querySelectorAll("button i")[index];
icon.classList.toggle("far");
icon.classList.toggle("fas");
}
document.querySelectorAll('button').forEach((btn, index) => btn.addEventListener('click', function() {
toggle(index);
}));
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;400;700;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght#300;400;600;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title {
text-align: center;
padding: 1.8rem;
font-size: 2rem;
color: black;
font-family: 'Lexend Mega', sans-serif;
}
.populair-movies {
justify-content: center;
display: flex;
}
.populair-movies h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 1.2rem;
padding-top: 0.2rem;
padding-bottom: 0.7rem;
}
.populair-movies p {
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
.stars {
padding-bottom: 0.3rem;
}
.populair-movies .card-container .card {
height: 300px;
width: 200px;
margin: 0.5rem;
}
.populair-movies .card-container .card img {
height: 100%;
width: 100%;
}
.styling-btn {
margin-top: 1rem;
padding: 0.5rem 1.1rem 0.5rem 0.5rem;
background: blue;
font-size: 1rem;
font-family: 'Open Sans', sans-serif;
border: none;
color: #e8efff;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.styling-btn i {
margin-right: 0.7rem;
margin-left: 0.3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populair Movies</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<!-- css file -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h2 class="title">POPULAIR MOVIES</h2>
<section class="populair-movies">
<div class="card-container">
<div class="card">
<img src="https://www.moviemeter.nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky">
<div class="info">
<h3>The Midnight Sky</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,6
</p>
</div>
<p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk#._V1_.jpg" alt="Escape from Pretoria">
<div class="info">
<h3>Escape from Pretoria</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
6,8
</p>
</div>
<p>2020 ‧ Drama/Thriller ‧ 1 u 46 m
</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BMWU0MzQwNjMtZGRiMC00M2UzLWE1YmItMWU3M2E0NmNkMDQ2XkEyXkFqcGdeQXVyNjEwNTM2Mzc#._V1_.jpg" alt="Kadaver">
<div class="info">
<h3>Kadaver</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,1
</p>
</div>
<p>2020 ‧ Drama/Horror ‧ 1 u 26 m
</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BY2RmZmI0NDMtMGQzOC00YWU3LTkwYWUtMDRkNDBjZDg3YTkyXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" alt="The Dig">
<div class="info">
<h3>The Dig</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
7,2
</p>
</div>
<p>2021 ‧ Drama/Geschiedenis ‧ 1 u 52 m
</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
</section>
<script src="js/script.js"></script>
</body></html>
enter image description hereenter image description hereI created a webpage by using html css and javascript. In home page, I added a pop up contact button and form, it is working but pop up window is opened at the top of page. Home page is like one page you scroll. I added the button to the footer but form is opened close to header. I want to it to open while user see the end of the page. I hope I can clear the problem.
https://github.com/ipeksaygut/website in this link there are HTML- CSS-JS files of only home page.
I am really beginner, I really do not understand the problem. Thanks for helps!
-If something need let me know to sahre to clear problem!
Window is seen as the picture but ı want to see it at the end of page I added photo of window how it is seen and where ı want to see it.
Hi Ipek Saygut!
I put together this code that will give you an idea of what was going on with your css. I have modified the .popUp class in order to fix this issue. Please be aware that you will need to read more on HTML and CSS best practices. Please have a look at this article to get you started in the amazing world of HTML and CSS, don't worry, it takes practice but you will master it soon. HTML & CSS Best Practices.
I certainly hope this code helps, have a good time coding, fellow!
let btn = document.querySelector("button");
let cont = document.querySelector(".popUp");
btn.addEventListener('click', function(){
cont.id = "show";
});
cont.addEventListener('click', function(e){
if(e.target == this){
this.id = "hidden";}
e.preventDefault;
});
body {
font-family: 'Red Hat Display', sans-serif;
}
.footer {
border-top: 5px solid #00acc8;
height: 200px;
background-color: #000;
padding: 50px;
margin: auto;
}
.container {
justify-items: left;
align-items: bottom;
z-index: 2;
padding-top: 55px;
padding-left: 18px;
}
button {
width: 140px;
height: 60px;
font-size: 16px;
font-weight: bold;
color: #2e9ca5;
border: 2px solid #2e9ca5;
border-radius: 5px;
background: white;
transition: all 0.5s ease;
cursor: pointer;
}
button:hover {
background: #2e9ca5;
color: white;
}
#show {
visibility: visible;
animation: pop 0.5s ease-in;
}
#keyframes pop {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
#hidden {
animation: out 0.5s ease-out;
}
#keyframes out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.popUp::before {
content: "x";
font-size: 30px;
color: #8FC1C1;
position: fixed;
right: -35px;
top: 4px;
}
.popUp {
display: block;
margin-top: 5% !important;
background: rgba(0, 0, 0, 0);
width: 50%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%);
justify-items: center;
align-items: center;
visibility: hidden;
}
form {
display: flex;
flex-direction: column;
width:85%;
margin:0 auto;
grid-template-columns: 150px;
grid-template-rows: repeat(10, 30px);
grid-row-gap: 10px;
background: white;
padding: 30px;
border-radius: 5px;
border: 1px solid #2e9ca5;
}
input,
textarea {
border-radius: 3px;
border: 1px solid #f2f2f2;
padding: 0 6px;
}
input[type=text],
input[type=email] {
height: 30px;
}
input[type=textarea] {}
input[type=submit] {
height: 30px;
background: #2e9ca5;
color: white;
font-weight: bold;
transition: background 0.3s ease;
border: 0;
border-radius: 5px;
}
input[type=submit]:hover {
background: white;
color: #2e9ca5;
}
.remove {
justify-content: end;
align-items: end;
}
label {
color: #b3b3b3;
}
<!DOCTYPE html>
<html>
<head>
<title>Discover To Istanbul</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto&display=swap'>
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#400;900;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu-bar">
<div class="menu-banner">istanbul</div>
<div class="menu-button">
<ul>
<li>HOME</li>
<li>DESTINATIONS</li>
<li>GALLERY</li>
</ul>
</div>
</div>
<script src="js/main.js" type="text/javascript" defer></script>
<div class="main-header">
<center>
<div class="header-tab">
<h1>İSTANBUL</h1>
<div class="header-alt">Let's Go On The Adventure with us !</div>
<div class="header-alt2"> EXPLORE ISTANBUL </div>
</div>
<div class="header-tab-video">
<header>
<video autoplay="" style="filter:contrast(1.099) brightness(0.92)" preload="none" muted="" loop="" width="780" height="560">
<source src="image/video.mp4" type="video/mp4">
</video>
<div id="overlay">
<p>Istanbul is <span class="typed-text" ></span></p>
</div>
</header>
</div>
</center>
</div>
<a name="anc2">
<div name="#anc2" class="places" id="sacred">
</a>
<h1>sacred places</h1>
<h5>explore most impressive sacred places with us.</h5>
<h6> discover more</h6>
</div>
<div class="places" id="palaces">
<h1 id="flt-rght"> palaces</h1>
<h5 id="flt-rght">explore most attractive palaces with us.</h5>
<a href="html/palaces/palaces.html">
<h6>discover more</h6>
</a>
</div>
<div class= "places" id="oldbuildings">
<h1>old buildings</h1>
<h5>Explore breathtaking and beautiful buildings with us.</h5>
<a href="html/oldbuildings/oldbuildings.html">
<h6>discover more</h6>
</a>
</div>
<div class="galeri">
<h1><a name="anc3" style="text-decoration:none;">#discoverTurkey</a></h1>
<h2>VIDEO <font color=red>|</font> PHOTO </h2>
<div class="galeri-alt">
<div class="galeri-ic" id="galeri1"></div>
<div class="galeri-ic" id="galeri2"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri3"></div>
<div class="galeri-ic" id="galeri4"></div>
<div class="galeri-ic" id="galeri5"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri6"></div>
</div>
</div>
<div class="kayangörseller"
<center><p style="font-size:60px""font-family:Calluna;">Social Media</p></center>
<div class="images">
<marquee direction="right" scrollamount="7">
<a href="https://www.instagram.com/p/CI3iV5yr416/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/galata.jpg" style="width:400px;height:400px;"> </a>
<a href="https://www.instagram.com/p/CI3huz5LGDw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/c.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3h9xCLXPy/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/ayasofya.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iMZXLZy9/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/fenerrum.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iaZlLn-N/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/kapalicarsi.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iikbrmdw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/sultanahmet.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3isMKLXrS/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/taksimanit.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i9RALySO/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/yerebatan.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3xiRiryIn/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/a.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i1EWrZQr/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/t.jpg" style="width:400px;height:400px;">
</marquee>
</div>
</div>
<div class="map">
<center>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1D66DY_D1-yifqdWfN4_k4mrj_S_JukO6" width="640" height="480" ></iframe>
</center>
</div>
<footer>
<div class="footer">
<div class="social">
<img src="image/instagram.png"><img src="image/youtube.png"><img src="image/twitter.png"><img src="image/facebook.png">
<div class="container">
<button>Contact Us</button>
</div>
<div class="popUp">
<form>
<label for="fn">First Name</label>
<input type="text" name="fn">
<label for="ln">Last Name</label>
<input type="text" name="ln">
<label for="email">Email</label>
<input type="email" name="email">
<label for="notes">Comments</label>
<textarea name="notes" rows="5" cols="5"></textarea>
<input id='submit' type="submit" value="Submit">
<p style="color:#b3b3b3;"> Pop-Up Facts, Recommendations,Interesting Routes... More For Istanbul! </p>
</form>
</div>
</div>
<div class="social" style="width:300px;">
<p>This website prepared for web design course by Kadir Has University students.</p>
<p>Ayça Çiçekdağ</p>
<p>Emre Karağaç</p>
<p>Hilal Pelin Akyüz</p>
<p>İpek Saygut</p>
<p>Sude Arslan</p>
</div>
<div class="social" style="width:180px;" id="logoalt"></div>
</div>
</footer>
<div class="kayanyazi">
<marquee direction=right bgColor="#2e9ca5" text-color="white">FIND ISTANBUL-EXPLORE ISTANBUL WITH US ! | by Ayça Çiçekdağ , Emre Karağaç,Hilal Pelin Akyüz
İpek Saygut,Sude Arslan
</marquee>
</div>
</body>
</html>
I have a side navigation menu for bigger screens in this file. I want to create a navigation bar for mobile phones and smaller screens below 1024px width. I have tried making the mobile navbar hidden for bigger screens and it just acts up. I need some here is a link to my page
I will want it to look like this
I got the inspiration of the page from link and they were able to make it responsive.
var slideIndex = 0;
var slides = document.getElementsByClassName("home-page-slides");
showSlides();
function showSlides() {
var slideLength = slides.length;
// Fade in the slide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.add("fadeIn");
}, 10);
//Fade out the SLide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.remove("fadeIn");
}, 3980);
slideIndex++;
setTimeout(showSlides, 4000);
}
/*----------------------------------------------------
#Navigation menu
-----------------------------------------------------*/
.logo {
padding: 8px;
margin: 20px 0;
}
.navbar {
height: 100%;
width: 300px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.navbar a {
display: block;
text-decoration: none;
font-family: 'Nunito Sans', sans-serif;
font-size: 13px;
padding: 9px;
}
ul {
padding-left: 0px;
margin-left: 0px;
}
ul li {
list-style: none;
padding-left: 0px;
margin-left: 0px;
}
.navbarFooter {
position: relative;
right: 0;
left: 0;
text-align: center;
}
.divider {
width: 16%;
text-align: center;
position: relative;
display: inline-block;
vertical-align: middle;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.navFContent {
position: relative;
margin-top: 50px;
}
/*----------------------------------------------------
#Home Page
-----------------------------------------------------*/
.slideshow-container,
.main {
width: calc(100%-300px);
height: 100vh;
min-height: 100vh;
}
.desc-container {
position: absolute;
bottom: 40px;
margin-left: 315px;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.home-page-slides {
width: 100%;
height: 100vh;
min-height: 100vh;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.home-page {
height: 100vh;
min-height: 100vh;
width: 100%;
}
.home-page-slides img {
height: 100vh;
min-height: 100vh;
width: 100%;
background-position: top;
}
<base href="https://happy-kepler-414939.netlify.app/" /> <!-- insert by SO editor -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght#0,200;0,300;0,400;1,200&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="" href="logos/favicon2.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/event.css">
<link rel="stylesheet" href="css/restaurant.css">
<link rel="stylesheet" href="css/memorial.css">
<link rel="stylesheet" href="css/venue.css">
<link rel="stylesheet" href="css/portfolio.css">
<link rel="stylesheet" href="css/responsive.css">
<div class="navbar whitebg" id="navbar">
<div id="banner" class="mobile-banner">
<div class="mobile-logo"></div>
<div id="mobile" class="mobile-menu">
<a onClick="openNav()">
<div class="open">
<div id="burger" class="burger">
<div class="bun01"></div>
<div class="patty"></div>
<div class="bun02"></div>
</div>
</div>
</a>
</div>
</div>
<div class="main-nav">
<nav class="menu centertext fontlight">
<ul>
<img class="logo" src="logos/mainLogo.png" alt="">
<li><a class="blacktxt" href="index.html">HOME</a></li>
<li><a class="blacktxt" href="#services">SERVICES</a></li>
<li><a class="blacktxt" href="html/about.html">ABOUT</a></li>
<li><a class="blacktxt" href="#testimonials">TESTIMONIALS</a></li>
<li><a class="blacktxt" href="html/portfolio.html">OUR PORTFOLIO</a></li>
<li><a class="blacktxt" href="html/venue.html">EXCLUSIVE VENUES</a></li>
<li><a class="blacktxt" href="#contact">CONTACT</a></li>
</ul>
</nav>
<div class="navbarFooter blacktxt fontlight">
<div class="divider"></div>
<div class="navFContent">
<p>
+1 (646) 580-7740
</p>
<p>
info#hillandboyd.com
</p>
<p>
New York, USA.
</p>
</div>
</div>
</div>
</div>
<!-- HOME PAGE CONTENT-->
<section id="home-page">
<div class="main">
<div class="home-page">
<div class="slideshow-container">
<div class="home-page-slides">
<img src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Luxury Events</h6>
<h2 class="blacktxt f18">WE CREATE BEAUTIFUL EVENTS</h2>
<p class="greytxt f15 fontlight">Join us for a “No Question too Small, Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at night.
</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/restaurantbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Creating Impact</h6>
<h2 class="blacktxt f18"> STRATEGY AND SALES</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/memorialbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Lasting Memories</h6>
<h2 class="blacktxt f18">SERVING WITH LOVE</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
To hide the navigation panel & make the site responsive in mobile view use media query in css
#media only screen and (max-width: 736px) { /* css property for phone */ }
To animate and view side navigation
https://www.w3schools.com/howto/howto_js_sidenav.asp
I am trying to create a product category container with a slick right & left carousel. However, using the slick js function my images get smaller in sizeenter image description hereenter image description here. I am using Bootstrap for classes (container-fluid, row, col-md-3 etc) everything looks good in shape but once I add the slick function (second slider) my product category images get smaller. I was trying to figure it out what is the issue but could not... any help will be appreciated
/*banner slider*/
$('.slider-one')
.not(".slick-intialized")
.slick({
autoplay: false,
autoplaySpeed: 3000,
dots: true,
prevArrow: ".site-slider .slider-btn .prev",
nextArrow: ".site-slider .slider-btn .next",
});
/*second slider*/
$('.slider-two')
.not(".slick-intialized")
.slick({
prevArrow: ".site-slider-two .prev",
nextArrow: ".site-slider-two .next",
slidesToShow:5,
slidesToScroll:1,
autoplaySpeed:3000
});
/*root varialbe*/
:root{
--light-gray: #2b3032a1;
--primary-color: #45ccb8;
--border: #2b303218;
--text-color: #ff686b;
--roboto: "Roboto", sans-serif;
--gugi: "Gugi", cursive;
--sofia: "Sofia", cursive;
}
/*Global css classes*/
.primary-color{
color: var(--primary-color);
}
.bg-primary-color{
background-color: var(--primary-color) !important;
}
.text-color{
color: var(--text-color);
}
.font-roboto{
font-family: var(--roboto);
}
.lightblue{
color: lightblue;
}
/*header*/
header{
background-color: var(--primary-color);
font-family: var(--roboto);
}
header .site-title{
font-family: var(--gugi);
}
.container .dropdown-toggle,
.container .dropdown-item{
font-size: 0.7em;
}
.header-links a{
font-size: 0.9em;
text-decoration: none;
color: white;
}
/*Slider one */
.site-slider{
position: relative;
}
.position-top{
position: absolute;
top: 50%;
}
.site-slider .slider-btn .prev,
.site-slider .slider-btn .next{
background-color: var(--primary-color);
padding: 1rem 1.5rem;
border-radius: 10rem;
color: white;
margin: 0 1rem;
opacity: 0;
transition: opacity 1s ease;
}
.site-slider:hover .slider-btn .prev,
.site-slider:hover .slider-btn .next{
opacity: 1;
}
.right-0{
right: 0;
}
/*slide dotd*/
.slick-dots li{
color: white;
}
.slick-dots li.slick-active{
transition: scale(2.5);
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.205);
background-color: white;
border-radius: 100%;
}
/*slider two*/
.site-slider-two{
position: relative;
height: 30%;
}
.site-slider-two .product{
height: 25rem;
position: relative;
overflow: hidden;
}
.site-slider-two .product img{
width: 90%;
margin: auto;
}
.site-btn.btn-span{
padding: 0.8rem 1.9rem;
border-radius: 4rem;
border: 1px solid var(--primary-color);
background-color: white;
color: var(--light-gray);
}
.slider-two .slick-track .product:hover span{
background-color: var(--primary-color);
}
/*slider wrapper test*/
.post-slider{
border: 1px black solid;
position: relative;
}
.post-slider .post-wrapper{
width: 84%;
height: 350px;
margin: 0 auto;
border: 1px red dotted;
}
.post-slider .post-wrapper .post{
width: 300px;
height: 350px;
display: inline-block;
}
.post-slider .slider-title{
text-align: center;
margin: 30px auto;
}
.post-slider .post img{
text-align: center;
margin: 0 10px;
width: 480px;
height: 340px;
}
.post-slider .prev{
position: absolute;
top: 50%;
}
.post-slider .next{
position: absolute;
top: 50%;
}
.right-0{
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Store</title>
<!--Bootstrap CND-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Font Awesome CND-->
<script src="https://kit.fontawesome.com/36eac67c14.js" crossorigin="anonymous"></script>
<!--slick Slider-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<!--animate css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<!--Google fonts-->
<link
href="https://fonts.googleapis.com/css2?family=Anton&family=Gugi&family=Lato&family=Roboto&family=Sofia&display=swap"
rel="stylesheet">
<!--Custom Stylesheet-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--header-->
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12">
<div class="btn-group">
<button class="btn border border-dark dropdown-toggle my-md-4 my-2 " data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
USD
</button>
<div class="dropdown-menu">
ERU-Euro
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center">
<h2 class="my-md-3 site-title text-white">Online Shopping</h2>
</div>
<div class="col-md-4 col-12 text-right">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>
<!--/header-->
<main>
<!--banner slider-->
<div class="container-fluid p-0">
<div class="site-slider">
<div class="slider-one">
<div>
<img src="./assets/item-1.jpg" class="img-fluid" alt="Banner-1" />
</div>
<div>
<img src="./assets/item-2.jpg" class="img-fluid" alt="Banner-2" />
</div>
<div>
<img src="./assets/item-3.jpg" class="img-fluid" alt="Banner-3" />
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right"></i></span>
</div>
</div>
</div>
<!--banner slider-->
<!--Second slider-->
<div class="container-fluid">
<div class="site-slider-two px-md-4">
<div class="row slider-two text-center">
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-1.jpg" class="img-fluid" alt="product 1">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-2.jpg" class="img-fluid" alt="product 2">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-3.jpg" class="img-fluid" alt="product 3">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-4.jpg" class="img-fluid" alt="product 4">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-5.jpg" class="img-fluid" alt="product 5">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-3.jpg" class="img-fluid" alt="product 5">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left fa-2x text-secondary"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right fa-2x text-secondary"></i></span>
</div>
</div>
</div>
<!--Second slider-->
</main>
<footer></footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!--slick slider-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!--custom js-->
<script src="./js/main.js"></script>
</body>
</html>
you got col-md-2 (bootstrap CSS) class on your .slider-two > .product items. which gives the columns a low width setting and conflicts with the behaviour of the slick slider.
when removed it shall work better.
thats messed up. if possible clean up there.
I have two versions of a single page site that scroll using JS .animate function. One site will not scroll and the other site does. I can not find the error in my code on the "broken" site.
Any help would be greatly appreciated.
Other "helpful" comments welcome as well.
Thank You in Advance.
Working Site
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav a").click(function (tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
//alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 20px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: black;
background-color: hsla(0, 0%, 0%, 0.50);
/* Set nav bar on top of all elements */
z-index: 99;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px;
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subsection {
height: 100%;
background-color: bisque;
}
.navSpace {
margin-top: 90px;
margin-left: 0;
height: 100%;
border-radius:6px;
}
#homeSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
color:black;
color: hsl(240, 0%, 30%);
}
#productSect {
/*Place Holder*/
background-color: bisque;
}
#servicesSect {
background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg');
}
#portfolioSect {
/*Place Holder*/
background-color: bisque;
}
#contactSect {
background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg');
}
html, body {
height: 100%;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<nav>
<a id="home" href="#homeSect">HOME</a>
<a id="product" href="#productSect">PRODUCT</a>
<a id="services" href="#servicesSect">SERVICES</a>
<a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
<a id="contact" href="#contactSect">CONTACT</a>
</nav>
<div class="sect" id="homeSect">
<div class="container">
<div class="jumbotron">
<div class="row text-center">
<div class="col-xs-12">
<h1>Frank's Promo Page</h1>
</div>
</div>
<p class="text-center">This is where I want to talk about my company and why we are great.</p>
</div>
</div>
</div>
<div class="subsection" id="productSect">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Data Analyses</h2>
<h4 class="lead">
Find the answers to complex questions hidden inside your own proprietary data
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Front End Web Design</h2>
<h4 class="lead">
Build a professional clean design for your company<br />
Maintain and refine your current website.
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Visual Basic for Applications Programming</h2>
<h4 class="lead">
Design and maintian custom built applicaton for:<br />
Word, Excel, Access, Outlook, Power Point, etc.
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="sect" id="servicesSect"></div>
<div class="subsection" id="portfolioSect"></div>
<div class="sect" id="contactSect"></div>
Broken Site
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav a").click(function(tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
//alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 20px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: black;
background-color: hsla(0, 0%, 0%, 0.50);
/* Set nav bar on top of all elements */
z-index: 99;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subsection {
height: 100%;
background-color: bisque;
}
.navSpace {
margin-top: 90px;
margin-left: 0;
height: 100%;
border-radius: 6px;
}
#homeSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
color: black;
color: hsl(240, 0%, 30%);
}
#aboutSect {
/*Place Holder*/
background-color: bisque;
}
#portfolioSect {
/*Place Holder*/
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg);
}
#contactSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg);
}
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frank Promo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="Content/StyleSheet.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/JavaScript.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
<!--style="margin:0 5px";-->
<nav>
<a id="home" href="#homeSect">HOME</a>
<a id="about" href="#aboutSect">ABOUT</a>
<a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
<a id="contact" href="#contactSect">CONTACT</a>
</nav>
<div class="sect" id="homeSect">
<div class="container-fluid">
<div class="jumbotron navSpace">
<div class="row text-center">
<div class="col-xs-12">
<h1>Frank's Promo Page</h1>
</div>
</div>
<p class="text-center">This is where I want to talk about my company and why we are great.</p>
</div>
</div>
</div>
<div class="subsection" id="aboutSect">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Data Analyses</h2>
<h4 class="lead">
Find the answers to complex questions hidden inside your own proprietary data
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Front End Web Design</h2>
<h4 class="lead">
Build a professional clean design for your company<br />
Maintain and refine your current website.
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Visual Basic for Applications Programming</h2>
<h4 class="lead">
Design and maintian custom built applicaton for:<br />
Word, Excel, Access, Outlook, Power Point, etc.
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="sect" id="portfolioSect"></div>
<div class="sect" id="contactSect"></div>
</body>
</html>