Unable to implement a scrollspy with Bootstrap 4. Why? - javascript

I'm trying to implement something as simple as a scrollspy in Bootstrap 4 for my portfolio and it's driving me to despair. I've read the official documentation, I've done my research, and I can't get it to work. No error in console.
Added data-spy = "scroll" data-target = ". Navbar" data-offset = "50" to the body and the anchors of the navigation links are the same as the section ids.
It also added the popper, jquery and other scripts.
I have also tried implementing it with just JavaScript, without success.
I start to think that there is something else in my code that is interfering with this Bootstrap function, but I can't find it. If anyone can take a look at the code and tell me what I'm doing wrong, I appreciate it.
HTML:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="I'm a developer and audiovisual producer. Here I show my evolution, my work and my passion.">
<meta name="author" content="Pablo Herrero">
<title>Pablo Herrero | Developer | pabloherrero.me</title>
<!-- Bootstrap style sheet -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/121886ca53.js" crossorigin="anonymous"></script>
<!-- Touch icons -->
</head>
<body id="top" data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- Navbar -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#top">
<div id="h" class="align-self-center">H</div>
</a>
<button class="navbar-toggler navbar-toggler-right"
type="button" data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#works">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Header -->
<header id="header">
<div class="container d-flex">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<img src="img/pabloHerrero.jpg" alt="Pablo Herrero" id= "headerPhoto">
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<h1>Pablo Herrero</h1>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<h2>lore ipsum</h2>
</div>
</div>
</div>
</header>
<!-- About -->
<section id="about">
<div class="container d-flex">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 align-self-center">
<h2>Hi! I'm a developer and audiovisual producer.</h2>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 align-self-center">
<p>I learned to code in 2019 when I started my studies on development. I'm confortable using Java, SQL, HTML5, CSS3, Bootstrap 4 and GIT, although I'm always digging deep and learning new things. I'm currently working on JDBC, Swing, Android Studio, JavaScript and Python, and will start soon with TypeScript, Node.js and Angular. Here you can take a look at my projects and drop me a line with the contact form if you wish.</p>
</div>
</div>
</div>
</section>
<!-- Works -->
<section id="works">
<div class="container d-flex">
</div>
</section>
<!-- Contact -->
<section id="contact">
<div class="container d-flex">
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container-fluid">
<div class="row d-flex ">
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<small id="copy">© 2020 Pablo Herrero</small>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<div id="social">
<i class="fab fa-twitter"></i>
<i class="fab fa-dev"></i>
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap js -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Popper.js -->
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<!-- Portfolio script -->
<script src="js/app.js"></script>
</body>
</html>
CSS:
/* Fonts */
#font-face {
font-family: 'fira_coderegular';
src: url('fonts/firacode-regular-webfont.woff2') format('woff2'),
url('fonts/firacode-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codebold';
src: url('fonts/firacode-bold-webfont.woff2') format('woff2'),
url('fonts/firacode-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codemedium';
src: url('fonts/firacode-medium-webfont.woff2') format('woff2'),
url('fonts/firacode-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* General */
body {
position: relative;
font-family: 'fira_coderegular';
letter-spacing: normal;
overflow-y: scroll;
background-color:#ffffff;
}
body::-webkit-scrollbar {
display: none;
}
/* Navbar */
#navbar {
min-height: 56px;
background-color: transparent;
border-bottom: none;
}
#navbar .navbar-toggler {
color: #000000;
}
#navbar .navbar-toggler:focus {
outline: none;
}
#h {
font-size: 25px;
font-family: 'fira_codebold';
text-align: center;
color: #000000;
outline: none;
}
#navbar .nav-link {
font-size: 14px;
font-family: 'fira_codemedium';
padding: 1rem 1.5rem;
text-align: center;
color:#ffffff;
background-color: #000000;
outline: none;
}
#navbar .nav-link:hover {
color: #bd93f9;
outline: none;
}
#navbar .nav-link:active {
color: #50fa7b;
outline: none;
}
#navbar #h:hover {
color: #bd93f9;
outline: none;
}
#navbar #h:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
#navbar .nav-link {
font-size: 14px;
padding: 0.5rem 1.5rem 0.5rem;
color:#000000;
background-color: transparent;
}
}
/* Header */
#header {
width: 100%;
height: 100vh;
}
#header .col-lg-12 {
text-align: center;
}
#header #headerPhoto {
margin: 100px 0px 0px 0px;
text-align: center;
max-width: 100%;
}
#header h1 {
margin: 50px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codebold';
font-size: 58px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
#header h2 {
margin: 15px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codemedium';
font-size: 24px;
letter-spacing: 0.05rem;
}
#media (min-width: 992px) {
#header #headerPhoto {
margin: 75px 0px 0px 0px;
max-width: 35%;
}
#header h1 {
margin: 25px 0px 0px 0px;
font-size: 64px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
}
/* About */
#about {
width: 100%;
height: 100vh;
}
#about .container {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
#about .row {
background-color: #000000;
padding: 100px 100px 100px 100px;
}
#about .col-lg-12 {
text-align: center;
align-items: center;
}
#about h2 {
width: 100%;
text-align: left;
margin-bottom: 30px;
font-family: 'fira_codemedium';
font-size: 24px;
color: #ffffff;
letter-spacing: 0.05rem;
}
#about p {
width: 100%;
text-align: left;
font-family: 'fira_coderegular';
font-size: 14px;
color: #ffffff;
}
/* Recent works */
/* Contact */
/* Footer */
footer {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: 5px;
background-color: transparent;
color: #000000;
text-align: center;
}
footer #social a{
font-size: 15px;
color: #000000;
}
footer #social i:hover{
color: #bd93f9;
}
footer #social i:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
footer #copy {
float: left;
}
footer #social a{
font-size: 20px;
float: right;
padding: 0.5rem 2rem 0.5rem 0rem;
}
}


It seems to be working fine, but the correct CSS selector for showing the active nav-link is...
#navbar .nav-link.active {
color: #50fa7b;
outline: none;
}
https://codeply.com/p/1hcQLKYm19
Also note, the sections need height (or a lot of content) to see the menu changing between each section.


Probably you have just forgotten to include bootstrap script like
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
if you want to do it with pure js just add event listener for the scroll event
window.addEventListener("load", function(){
window.addEventListener('scroll', function(e) {
// your handler
console.log(window.scrollY);
});
});

Related

Firebase and ExpressJS serving static resources gives CSS MIME type error

I have some issues with my firebase web project. I'm trying to hook up my firebase hosting site to functions, so that I can covert it into a more dynamic application and use the caching features, that functions provide.
But everytime I try to serve my app my window keeps loading - almost like it's stuck or pulling a large file. Then after a while it comes with an error message for my stylesheets (Bootstrap and a custom sheet)
Here is a screenshot from Chrome
It's the first console message i'm worried about..
My code looks like this
Please note that I'm using handlebars with express. I'm basically following the Firebase own guide for setup: https://www.youtube.com/watch?v=LOeioOKUKI8&feature=emb_logo
const functions = require('firebase-functions');
const firebase = require('firebase-admin');
const express = require('express');
const engines = require('consolidate');
const hbs = require('handlebars');
const firebaseApp = firebase.initializeApp(
functions.config().firebase
);
// App settings
const app = express();
app.use(express.static('Misophonia_web/public/public'))
app.engine('hbs', engines.handlebars);
app.set('views','./views');
app.set('view engine', 'hbs');
// Routes
app.get('/', (request, response) => {
response.set('Cache-Control', 'public, max-age=300, s-max-age=600');
response.render('index.hbs');
});
// Firebase export
exports.app = functions.https.onRequest(app);
/* Overall static elements and styles */
html {
height: 100%;
}
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
/* Misophonia colors */
--main-blue-color: #1B508E;
--miso-white: #fefefe;
--miso-black: #1b2128;
--miso-pink: #dbd3d6;
--miso-dark-blue: #132647;
--miso-grey: #a2a3a3;
/* Other colors for designs */
--main-blue-color: #1B508E;
}
h1 {
font-family: 'Ramabhadra', sans-serif;
font-size: 115px;
font-weight: bold;
}
h2 {
font-family: 'Ramabhadra', sans-serif;
font-size: 75px;
font-weight: bold;
color: var(--miso-dark-blue);
}
h3 {
font-family: 'Ramabhadra', sans-serif;
font-size: 36px;
font-weight: bold;
}
h4 {
font-family: 'Ramabhadra', sans-serif;
font-size: 29px;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 25px;
font-weight: 300;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* Cookie banner */
#cookie {
z-index: 2;
}
#cookie-banner {
background: var(--miso-dark-blue);
color: var(--miso-white);
font-size: 16px;
position: absolute;
bottom: 0px;
width: 100%;
height : 100px;
padding-top: 10px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
transition: 500ms;
}
#cookie-banner p {
font-size: 16px;
}
.cookie-button {
color: var(--miso-white);
font-size: 15px;
background-color: var(--miso-dark-blue);
border: 2px solid var(--miso-dark-blue);
width: 200px;
transition: 500ms;
}
.cookie-button:hover {
opacity: 75%;
}
/* Misophonia front page title styles */
.misophonia {
color: var(--miso-white);
transition: 1.5s;
font-weight: bold;
transition-timing-function: ease-in-out;
}
.misophonia:hover {
color: var(--miso-dark-blue);
transition: 1.5s;
font-weight: bold;
}
#cover-image {
background-image: url('../imgs/miso-1.png');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
max-height: 1200px;
transition: 1s;
transition-delay: 500ms;
transition-timing-function: ease-in-out;
z-index: 1;
}
#cover-image:hover {
background-image: url('../imgs/miso-cover.png');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
max-height: 1200px;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
/* Text area */
#intro {
margin-top: 150px;
margin-bottom: 150px;
}
#welcome-header {
margin-bottom: 100px;
text-align: justify;
}
.welcome-text {
font-size: 60px;
font-weight: bold;
color: var(--miso-dark-blue);
}
.welcome-text-bottom {
font-size: 60px;
font-weight: bold;
color: var(--miso-dark-blue);
padding-top: 150px;
}
/* Table of content area */
#tabel-of-content-header h2 {
font-family: 'Ramabhadra', sans-serif;
font-size: 65px;
font-weight: bold;
color: var(--miso-white);
}
#table-of-content {
background-image: url('../imgs/miso-3.png');
background-size: cover;
margin-top: 100px;
padding-bottom: 100px;
padding-top: 50px;
transition: 1s;
transition-delay: 500ms;
transition-timing-function: ease-in-out;
}
.content-area {
background-color: var(--miso-white);
color: var(--miso-black);
padding: 15px 25px 10px 25px;
border: 5px solid var(--miso-dark-blue);
border-radius: 10px;
margin-left: 12px;
margin-right: 12px;
box-shadow: 0px 0px 20px var(--miso-dark-blue);
}
.content-area p {
font-size: 20px;
}
/* Chapter styles */
#chapter-1 {
background-image: url('../imgs/Noise/noise-hover.png');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-2 {
background-image: url('../imgs/the-london-heart/IMG_6444.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-3 {
background-image: url('../imgs/i-hide/i-hide-gif-1.gif');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-4 {
background-image: url('../imgs/BLAA/img1.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-5 {
background-image: url('../imgs/nights/IMG_6507.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-6 {
background-image: url('../imgs/today/today.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-7 {
background-image: url('../imgs/cover/IMG_5307.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
.chapter-btn {
color: var(--miso-white);
font-size: 30px;
background-color: var(--miso-dark-blue);
border: 3px solid var(--miso-dark-blue);
width: 200px;
box-shadow: 0px 0px 5px var(--miso-dark-blue);
transition: 500ms;
font-size: 20px;
margin-top: 25px;
margin-bottom: 15px;
}
.chapter-btn:hover {
opacity: 85%;
}
/* Next button */
.next-button {
color: var(--miso-white);
font-size: 30px;
background-color: var(--miso-dark-blue);
border: 3px solid var(--miso-dark-blue);
width: 275px;
box-shadow: 0px 0px 5px var(--miso-white);
transition: 500ms;
margin-top: 25px;
margin-bottom: 25px;
}
.next-button:hover {
color: var(--miso-white);
font-size: 30px;
background-color: var(--miso-dark-blue);
border: 3px solid var(--miso-dark-blue);
transition: 1s;
box-shadow: 0px 0px 20px var(--miso-dark-blue);
}
/* Footer section */
#footer {
margin-top: 25px;
margin-bottom: 25px;
color: var(--miso-black);
}
#footer a {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
text-transform: uppercase;
color: var(--miso-black);
padding-top: 20px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 25px;
transition: 1s;
}
#footer a:hover {
background-color: var(--miso-dark-blue);
color: white;
}
/* Media queries */
#media only screen and (max-width: 600px) {
h1 {
font-size: 45px;
}
h2 {
font-size: 27px;
}
h3 {
font-size: 25px;
}
h4 {
font-size: 25px;
}
p {
font-size: 15px;
}
.welcome-text {
font-size: 25px;
}
.welcome-text-bottom {
font-size: 25px;
}
#tabel-of-content-header {
font-size: 27px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
{{!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-145407129-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-145407129-2');
</script> --}}
<!-- Boilerplate -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap link -->
<link rel="stylesheet" type="text/css" href="./css/library/bootstrap.min.css">
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="/Misophonia_web/public/index.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Ramabhadra|Roboto:400,900&display=swap" rel="stylesheet">
<!-- AOS scroll -->
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css"/>
<!-- Page begins -->
<title>misophonia • misophonia, a visual experience • GO BY LUCK</title>
</head>
<body>
<section id="cookie">
<div id="cookie-banner">
<p>'misophonia, a visual experience' only uses cookies for analytics purposes. If you wish to learn more, then you can read our cookie policy.</p>
<button class="cookie-button">READ COOKIE POLICY</button>
<button id="close-cookie-banner" class="cookie-button">THAT'S OK WITH ME!</button>
</div>
</section>
<section id="cover-image" data-aos="fade-in">
<div class="d-flex justify-content-center vertical-center">
<h1 class="misophonia">misophonia</h1>
</div>
</section>
<section id="intro">
<div class="container-fluid">
<div class="row mb-3" data-aos="fade-in">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="d-flex justify-content-center">
<h1 id="welcome-header">misophonia, <br> a visual experience</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid" data-aos="fade-in">
<div class="row d-flex justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-10 col-xl-10">
<div>
<p class="welcome-text">
If you’re reading this, it means that misophonia has officially been released from its digital cage and is now living in the world around us.
</p>
<p class="welcome-text">
It’s been 3 years since I first sat down in my small bedroom in East London and started recording what has now grown to become a full-length hour-long album, ‘misophonia’. It’s been a long, fragile, powerful but extremely inspiring process to make this record. I hope you find that it sounds unique and personal.
</p>
<p class="welcome-text">
With ‘misophonia’ the idea was always to experiment a lot, especially with creating different universes and sonic worlds, from old home-recorded samples, vocals as well as hard (and soft) synthesizers. I would like to believe that misophonia is a pretty vivid and texturized album full of perfect imperfections.
</p>
<p class="welcome-text">
The point of this website is to be a hyperzine. A place that acts as a 'behind-the-scenes' and tells the story of ‘misophonia'.
</p>
<p class="welcome-text">
Thank you for your time and for listening to ‘misophonia’.
</p>
<p class="welcome-text">
Yours sincerely, <br>
Gustav <br>
GO BY LUCK <br>
</p>
<p class="welcome-text-bottom">
Ps. <br> This site is best experienced on a full-scale browser. Should you visit it on your phone, then please try not to go too far and use a full-scale browser instead. <br> I promise it will be worth it.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="table-of-content">
<div class="container-fluid">
<div class="row mt-4">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 mt-3 mb-2" id="tabel-of-content-header">
<div class="d-flex justify-content-center">
<h2>TABLE OF CONTENTS</h2>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-outline-primary next-button mb-5">Start Chapter I</button>
</div>
<div class="row mt-4 d-flex justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-1">
<h3>Chapter I</h3>
<h4>misophonia is noise</h4>
<p>Noise is everything in misophonia</p>
<button class="chapter-btn">GO TO CHAPTER</button>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-2">
<h3>Chapter II</h3>
<h4>The heart of London</h4>
<p>London: throwback</p>
<button class="chapter-btn">GO TO CHAPTER</button>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-3">
<h3>Chapter III</h3>
<h4>'I hide'</h4>
<p>'I hide' <br> (the super secret long version)</p>
<button class="chapter-btn">GO TO CHAPTER</button>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-4">
<h3>Chapter IV</h3>
<h4>BLAA, BLUE, Blå</h4>
<p>Blue photos</p>
<button class="chapter-btn">GO TO CHAPTER</button>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-5">
<h3>Chapter V</h3>
<h4>the night I wrote 'Point & Shoot'</h4>
<p>All night I wrote</p>
<button class="chapter-btn">GO TO CHAPTER</button>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-6">
<h3>Chapter VI</h3>
<h4>Today, tomorrow</h4>
<p>It's not time to say goodbye</p>
<button class="chapter-btn">GO TO CHAPTER</button>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-7">
<h3>Chapter VII</h3>
<h3>Sleeve notes</h3>
<p>Thank you!<br> and bye-bye!</p>
<button class="chapter-btn">GO TO CHAPTER</button>
</div>
</div>
</div>
</section>
<section id="footer">
<div class="d-flex justify-content-left">
Cookie & privacy policy
</div>
</section>
<!-- Scripts -->
<script src="../js/mobile/mobile-detection.js"></script>
<script src="../js/cookie-banner.js"></script>
<!-- Obligatory bootstrap code -->
<script src="../js/library/bootstrap.min.js"></script>
<!-- AOS Scroll -->
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
I hope someone can help me! Thanks in advance!

Responsive Slider positioning

I'm building a responsive website but i'm struggling with the dots of the slideshow as you see in the picture below which is when I toggle to the device toolbar they change their place i have tried everything that comes in my mind from the relative units to the absolute ones but nothing worked please I need help with that, i searched around in google and so on but i didn't find anything helpful.
when I toggle to the device toolbar:
as you notice the position of the dots changes i don't want this behaviour.
this is my code:
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>EatManger</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="query.css">
</head>
<body style="background-color:purple">
<div class="container">
<div class="logo-box">
<img src="images/logo.png" class="logo" alt="logo">
</div>
<i class="fas fa-bars hamburger-btn"></i>
<ul class="main-nav">
<li class="main-nav-item"><a class="main-nav-link" href="#">services</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">reservation</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">menu</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">our chefs</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">events</a></li>
</ul>
</div>
<div class="slideshow-container">
<div class="mySlides fade-zz">
<img src="images/food3.png" class="imgSlide">
</div>
<div class="mySlides fade-zz">
<img src="images/pizza.png" class="imgSlide" >
</div>
<div class="mySlides fade-zz">
<img src="images/hamburger2.png" class="imgSlide">
</div>
<div class="dotz">
<span class="dot" onclick="currentSlide(1-1)"></span>
<span class="dot" onclick="currentSlide(2-1)"></span>
<span class="dot" onclick="currentSlide(3-1)"></span>
</div>
</div>
<div class="contact-box">
<div class="adress">
<i class="fas fa-map-marker-alt conbox"></i>
<h3 class="contact-title">Address</h3>
<p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
</div>
<div class="phone">
<i class="fas fa-phone-volume conbox"></i>
<h3 class="contact-title">Phone</h3>
<p class="contact-description">636-399-9776 <br> 573-225-7350</p>
</div>
<div class="opening-time">
<i class="far fa-clock conbox"></i>
<h3 class="contact-title">Opening time</h3>
<p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
</div>
</div>
<section class="about-us">
<i class="fas fa-utensils abicon"></i>
<h1 class="title">About us</h1>
<p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un
imprimeur
anonyme assembla </p>
</section>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 4rem;
background-color: red;
transition: height .1s;
}
.container-add{
height: 20rem;
}
.hamburger-btn {
position: absolute;
margin-top: 5px;
right: 4px;
font-size: 40px;
color: white;
}
.logo-box {
display: inline-block;
}
.logo {
width: 100px;
}
.main-nav {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 15.62rem;
align-items: center;
visibility: hidden;
}
.main-nav-hide{
visibility:visible;
}
.main-nav-item {
list-style: none;
color: white;
font-family: Roboto;
text-transform: uppercase;
font-weight: 700;
/* display: none; */
}
.main-nav-link {
text-decoration: none;
color: inherit;
padding-left: 20px;
}
.slideshow-container{
margin: auto;
max-width: 980px;
width: 100vw;
}
.imgSlide{
width: 100%;
}
.imgSlide-show{
display: block;
}
.dotz{
text-align: center;
position: absolute;
top: 35%;
left: 50vw
}
.dot{
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background-color: #ddd
}
.active{
background-color: #ff9900;
}
.active:hover,.dot:hover{
cursor: pointer;
}
.fade-zz{
animation-name: fade;
animation-duration: 1.4s;
transition:.4s
}
#keyframes fade {
from{
opacity: .4;
}
to{
opacity: 1
}
}
.contact-box{
background-color: red;
position: relative;
top: -1.39rem;
height: 380px;
}
.conbox{
color: white;
display: block;
text-align: center;
font-size: 2rem;
/* margin-top: .8rem; */
}
.adress{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: 3rem;
position: relative;
top: .5rem;
}
.phone{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: .8rem;
}
.opening-time{
color: white;
text-align: center;
font-family: roboto;
margin-top: 2rem;
}
.about-us{
color: white;
}
.title{
text-align: center;
font-family: roboto;
}
.abicon{
text-align: center;
display: block;
padding-right: 7rem;
margin-top: 1rem;
font-size: 2rem;
position: relative;
top: 2%;
}
.title-description{
display: block;
margin: auto;
}
JavaScript
//HAMBURGER BUTTON
var hamBtn=document.querySelector(".hamburger-btn");
hamBtn.addEventListener("click",function(){
document.querySelector(".main-nav").classList.toggle("main-nav-hide");
document.querySelector(".container").classList.toggle("container-add");
});
//SLIDESHOW
slideIndex=0;
function currentSlide(n){
slideIndex=n;
showSlide(slideIndex);
}
function showSlide(n){
var i;
var slides=document.getElementsByClassName("mySlides");
console.log(slides);
var dots=document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display="none";
}
slideIndex++;
if (slideIndex>slides.length) {
slideIndex=1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
setTimeout(showSlide,50)
setInterval(showSlide,6000)
sorry about the question title i couldn't come up with a better one describing my situation any suggestion for a better title would be accepted to help other people who are struggling from the same problem find the solution and thank youu in advance.

just add to ".dotz" the following
.dotz{
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
}
To center any block has position:absolute you just need to left, right to 0 and margin to auto and for sure the parent div has to have position:relative

White vertical line on left side of screen

I'm creating a website, and when adding a background image to my CSS there appears to be a random white vertical line on the left side of the screen. I've checked this in both Chrome and Safari browsers. Would anyone be able to help fix this and also explain how it originated?
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

The white line is because of the blockquote element, you can disable the white border by adding
blockquote {
border-left: none;
}

If I understand, it's the default border on blockquote from bootstrap. Just set border-left: none on an element you want to disable that. In this case, blockquote.construction
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

You are getting the unwanted border from Blockquote tag.
In your Css for of Blockquote class replace with below:
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
Note : Also I observed the white border is present in the slogan blockquote as well. The reason it is not visible as the background color there is white. But if you will inspect the element, you will see it there.
I will recommend to add a common class to all blockquote with
border-left: none;

add task working incorrect

Problem: when adding the task of "to do" by pressing enter in safari than the collapsible is the "Week" tab duplicated. And added any task.
I do not know where it goes wrong
Who can help me?
The HTML
<!DOCTYPE html>
<html>
<head>
<title>planIt</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="https://use.fontawesome.com/e886da0b59.js"></script>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- jquery custom -->
<script type="text/javascript" src="js/script.js"></script>
<!-- jquery mobile -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- jquery ui -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- touch -->
<script src="js/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div data-role="page" id="pagedag">
<div id="header" data-role="header" style="overflow:hidden;">
<div class="logo"></div>
<i class="fa fa-bars" aria-hidden="true"></i>
</div><!-- /header -->
<div data-role="panel" id="overlayPanel" data-display="overlay">
<div class="logo"></div>
<p>Dag</p>
<p>Week</p>
</div>
<div data-role="tabs" id="tabs">
<div data-role="navbar" class="custom-navbar">
<ul>
<li>dag</li>
<li>week</li>
</ul>
</div>
<!--- dag --->
<div id="dag" class="ui-body-d ui-content">
<h1>Tijdlijn...</h1>
<div data-role="collapsible">
<h4>To Do</h4>
<p>Hoi</p>
<form name="toDoList">
<input type="text" name="ListItem"/>
</form>
<button id="button" class="ui-btn">Add</button>
</div>
<div data-role="collapsible">
<h4>Progress</h4>
<p>Hoi2</p>
<div id="progress">
<ol id="sortableProgress"></ol>
</div>
</div>
<div data-role="collapsible">
<h4>Done</h4>
<p>Hoi3</p>
<div id="done">
<ol id="sortableDone"></ol>
</div>
</div>
</div>
<!--- einde dag --->
<!--- week --->
<div id="week" class="ui-body-d ui-content">
<h1>Tijdlijn...</h1>
<div data-role="collapsible">
<h4>To do</h4>
<p>Hoi</p>
<form name="toDoList">
<input type="text" name="ListItem"/>
</form>
<button id="button" class="ui-btn">Add</button>
</div>
<div data-role="collapsible">
<h4>Progress</h4>
<p>Hoi2</p>
<div id="progress">
<ol id="sortableProgress"></ol>
</div>
</div>
<div data-role="collapsible">
<h4>Done</h4>
<p>Hoi3</p>
<div id="done">
<ol id="sortableDone"></ol>
</div>
</div>
</div>
<!--- einde week --->
</div>
<div id="header" data-role="header" style="overflow:hidden;">
<p>© planIT</p>
</div><!-- /footer -->
</div>
</body>
</html>
The CSS
header, section {
display: block;
color: #fff;
}
body{
margin: 0px;
padding: 0px;
background: #1abc9c;
font-family: 'Lato',sans-serif;
}
h1{
color: #000;
text-align: center;
margin-top: 20px;
}
.logo{
content: url(assets/planit.png);
height: 80px;
width: auto;
margin: auto;
padding: 8px;
}
/* header */
#header {
background-color: #fff;
}
/* button dag/week */
.custom-navbar ul li a {
background: #eee; /* Old browsers */
background: -moz-linear-gradient( #eee, #eee ) !important; /* FF3.6+ */
background: -webkit-linear-gradient( #eee, #eee ) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient( #eee, #eee ) !important; /* Opera 11.10+ */
background: -ms-linear-gradient( #eee, #eee ) !important; /* IE10+ */
border: none;
letter-spacing: 1px;
font-weight: normal;
}
.custom-navbar ul li a.ui-btn-active {
background: #57cb98; /* Old browsers */
background: -moz-linear-gradient( #57cb98, #57cb98 ) !important; /* FF3.6+ */
background: -webkit-linear-gradient( #57cb98, #57cb98 ) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient( #57cb98, #57cb98 ) !important; /* Opera 11.10+ */
background: -ms-linear-gradient( #57cb98, #57cb98 ) !important; /* IE10+ */
border: none;
letter-spacing: 1px;
font-weight: normal;
}
/* collapse */
.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
border-right-width: 1px;
border-left-width: 1px;
background-color: #57cb98;
color: #fff;
letter-spacing: 1px;
font-weight: normal;
}
.ui-collapsible-inset .ui-collapsible-heading .ui-btn:hover {
border-right-width: 1px;
border-left-width: 1px;
background-color: #38b77f;
color: #fff;
letter-spacing: 1px;
font-weight: normal;
}
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400);
body {
font: normal normal 13px/16px "Open Sans", sans-serif;
background: #ccc;
}
.container{
padding: 20px;
width: 300px;
margin: 0 auto;
margin-top: 40px;
background: white;
border-radius: 5px;}
form {
display: inline-block;
}
input{
padding: 4px 15px 4px 5px;
}
#button{
display: inline-block;
background-color:#fc999b;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
padding: 5px 15px;
}
#button:hover{
cursor: pointer;
opacity: .8;}
ol {padding-left: 20px;}
ol li {padding: 5px;color:#000;}
ol li:nth-child(even){background: #dfdfdf;}
.strike{text-decoration: line-through;}
li:hover{
cursor: pointer;
}
jQuery
$(document).ready(
function(){
$('#button').click(
function(){
var toAdd = $('input[name=ListItem]').val();
$('#sortableProgress').append('<li>' + toAdd + '</li>');
});
$("input[name=ListItem]").keyup(function(event){
if(event.keyCode == 13){
$("#button").click();
}
});
$(document).on('dblclick','li', function(){
$(this).toggleClass('strike').fadeOut('slow');
});
$('input').focus(function() {
$(this).val('');
});
$('#sortableProgress').sortable();
}
);

When you attach the click handler to your buttons, you're using the id $('#button'). This will only attach the handler to the first button with the id of 'button'.
So when you click the button for 'Week' nothing is happening because no function has been assigned to its click event.
Also, when you attach a new item to you list, your encountering the same issue. There are two lists with the id sortableProgress but when you do the following:
$('#sortableProgress').append('<li>' + toAdd + '</li>')
You are again only interacting with the first element that appears on the page with an id of 'sortableProgress'.
If you prepend your IDs with dag- and week- then this will solve your problem.
Here is an example fiddle with these changes: https://jsfiddle.net/2kjc55f3/

Center image in the middle of list with 50% overhang

I am trying to get my image to center in the middle of my four list items (2 either side), however when trying to get it to work the list items just go below the image! I want the image to be responsive so if the page gets smaller then say 1000px it will simply move into the right place (i understand that will need to be done with different media screens.
Note: I am using CoolKitten One Page website framework as I have no understanding of Javascript
Live Demo
JSFiddle
HTML Code:
<!DOCTYPE HTML>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<title>Brand New Club</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<!-- <link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen"> -->
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="menu">
<div class="container clearfix">
<div id="nav" class="grid_9 omega">
<ul class="navigation">
<li data-slide="1">Home</li>
<li data-slide="2">About Us</li>
<div id="logo">
<img src="http://www.brandnewclub.com/images/brand-new-club-logo-final.png">
</div>
<li data-slide="3">Services</li>
<li data-slide="4">Contact</li>
</ul>
</div>
</div>
</div>
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_7">
<h1>Top Slide</h1>
<h2>Get ready to make magic!</h2>
<p>Remember that this is a BETA version. This is my first framework so if you see any issue please let me know it. </p>
<p>Don't forget to follow me!</p>
<p><img src="images/twitter.png"> <img src="images/dribbble.png"></p>
</div>
<div id="decorative" class="grid_5 omega">
<img src="images/decorative.png">
</div>
</div>
</div>
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_12">
<h1>Parallax Scrolling</h1>
<h2>What you've seen its called parallax scrolling</h2>
</div>
</div>
</div>
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_12">
<h1>Grid</h1>
<h2>See how the grid changes when you resize your screen</h2>
</div>
<div id="test" class="grid_1">1</div> <div id="test" class="grid_11 omega">11</div>
<div id="test" class="grid_2">2</div> <div id="test" class="grid_10 omega">10</div>
<div id="test" class="grid_3">3</div> <div id="test" class="grid_9 omega">9</div>
<div id="test" class="grid_4">4</div> <div id="test" class="grid_8 omega">8</div>
<div id="test" class="grid_5">5</div> <div id="test" class="grid_7 omega">7</div>
<div id="test" class="grid_6">6</div> <div id="test" class="grid_6 omega">6</div>
<div id="test" class="grid_7">7</div> <div id="test" class="grid_5 omega">5</div>
<div id="test" class="grid_8">8</div> <div id="test" class="grid_4 omega">4</div>
<div id="test" class="grid_9">9</div> <div id="test" class="grid_3 omega">3</div>
<div id="test" class="grid_10">10</div> <div id="test" class="grid_2 omega">2</div>
<div id="test" class="grid_11">11</div> <div id="test" class="grid_1 omega">1</div>
<div id="test" class="grid_12">12</div>
</div>
</div>
<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_12">
<h1>Credits</h1>
<h2>Cool Kitten was made by Jalxob.</h2>
<p>Don't forget to follow me!</p>
<p><img src="images/twitter.png"> <img src="images/dribbble.png"></p>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!-- <script type="text/javascript" src="js/scripts.min.js"></script> -->
</body>
</html>
CSS Code:
/* Global */
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1em;
color: #8a8683;
background-color:#ffffff;
}
img {
max-width: 100%;
}
a:link {
color: #f68f67;
text-decoration: none;
}
a:hover {
color: #bde2df;
text-decoration: none;
}
a:visited {
color: #f68f67;
text-decoration: none;
}
/* Navigation */
.menu {
position:fixed;
top:0px;
width:100%;
height:auto;
background-color:#bbb;
z-index:100;
}
#logo {
padding: 10px;
}
#logo img {
width: 300px;
}
#nav {
text-align: center;
height: 100px;
margin: 30px auto;
min-width: 1100px;
}
.navigation{
list-style: none;
text-align: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: 100px;
line-height: 200px;
}
.navigation li{
padding:0 0 0 50px;
float: left;
display: inline;
}
.navigation li:hover{
cursor:pointer;
color: #a9d3d0;
}
.navigation .active{
cursor:pointer;
color: #f68f67;
font-weight:bold;
}
/* General Slides */
.slide{
background-attachment: fixed;
width:100%;
height:auto;
position: relative;
padding:140px 0;
}
/* Slide 1 */
#slide1{
background-color:#156;
}
#slide1 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#8a8683;
font-weight: 700;
}
#slide1 h2 {
font-size: 2em;
color: #8a8683;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
/* Slide 2 */
#slide2{
background-image:url('../images/footprints.png');
background-color:#f68f67;
color:#ffffff;
}
#slide2 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#ffffff;
font-weight: 700;
}
#slide2 h2 {
font-size: 2em;
color: #ffffff;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
/* Slide 3 */
#slide3{
background-color:#ffffff;
}
#slide3 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#8a8683;
font-weight: 700;
}
#slide3 h2 {
font-size: 2em;
color: #8a8683;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
#test{
background-color:#bde2df;
color:#ffffff;
text-align:center;
font-size: 2em;
font-weight: 400;
}
/* Slide 4 */
#slide4{
background-image:url('../images/sunglasses.png');
background-color:#8a8683;
color:#ffffff;
}
#slide4 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#ffffff;
font-weight: 700;
}
#slide4 h2 {
font-size: 2em;
color: #ffffff;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
/* Tablet */
#media screen and (max-width: 1024px) {
#logo {
width: 100%;
text-align: center;
}
#nav {
width:100%;
text-align:center;
margin:10px 0;
}
.navigation{
width: 100%;
float: center;
list-style: none;
margin: 0;
padding:0;
}
.navigation li{
float: left;
width:25%;
padding:0;
}
.slide{
background-attachment: fixed;
width:100%;
position: relative;
padding:150px 0;
}
#decorative {
display:none;
}
#content {
text-align:center;
width:100%;
}
#slide1 h1 {
line-height: 1em;
}
#slide1 h2 {
line-height: 1em;
}
#slide2 h1 {
line-height: 1em;
}
#slide2 h2 {
line-height: 1em;
}
#slide3 h1 {
line-height: 1em;
}
#slide3 h2 {
line-height: 1em;
}
#slide4 h1 {
line-height: 1em;
}
#slide4 h2 {
line-height: 1em;
}
}
/* Mobile */
#media screen and (max-width: 480px) {
#logo {
width: 100%;
text-align: center;
}
#nav {
width:100%;
margin:5px 0;
}
.navigation{
width: 100%;
float: left;
list-style: none;
margin: 0;
padding:0;
}
.navigation li{
float: left;
width:25%;
}
.slide{
background-attachment: fixed;
width:100%;
position: relative;
padding:150px 0;
}
#slide1 h1 {
line-height: 1em;
}
#slide1 h2 {
line-height: 1em;
}
#slide2 h1 {
line-height: 1em;
}
#slide2 h2 {
line-height: 1em;
}
#slide3 h1 {
line-height: 1em;
}
#slide3 h2 {
line-height: 1em;
}
#slide4 h1 {
line-height: 1em;
}
#slide4 h2 {
line-height: 1em;
}
}
Any tips and advice would be much appreciated!
Thanks in advance!

I have got it working for you using only CSS and not tables.
The way I saw best to do it was to split the lists and give one the property of float:left and the other float:right. I have to admit it is not the cleanest way of doing it but it works and for me that is the main thing.
JSFiddle
*Note: This will work on the larger screens better then smaller, I would suggest using media screen {} in your CSS for this to work *
Hope this helps!

I go for table in this context. Please find a sample.
<table width="100%" border="1" style="height:100%; padding:0px; margin:0px;">
<tr><td>Home</td><td></td><td>About Us</td></tr>
<tr><td rowspan="1"></td><td style="background:url(deep-forest.jpg) no-repeat; background-size:100%;width:400px;"></td><td rowspan="1"></td></tr>
<tr><td>Services</td><td></td><td>Contact</td></tr>
</table>
Image:
Let me know of any corrections.

You could done this that way :
#logo {
width: 100%;
text-align: center;
position: relative;
}
#logo img {
width: 300px;
height: auto;
margin-left: -150px;
position: absolute;
left: 50%;
}
Everything is explained here

Categories