Have unwanted space in the top of my slider image

Have unwanted space in the top of my slider image - javascript

I implemented a slider on one of my sites but there is a lot of unwanted space above my slider. As you can see the space between the bike image and the menu bar, I was wondering if there was any way to remove this so that the bike image is below the menu bar. I tried looking if it was the height set for the slider but I don't think it is.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="shop-style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="slideshow-container">
<div class="myslides fade">
<div class="numbers">1 / 4</div>
<div class="slider-1"><img class="Fit" src="images/slider-1.jpg"></div>
<div class="caption">Text 1</div>
</div>
<div class="myslides fade">
<div class="numbers">2 / 4</div>
<div class="slider-2"><img src="images/2.jpg"></div>
<div class="caption">Text 2</div>
</div>
<div class="myslides fade">
<div class="numbers">3 / 4</div>
<div><img src="images/3.jpg"></div>
<div class="caption">Text 3</div>
</div>
<div class="myslides fade">
<div class="numbers">4 / 4</div>
<div><img src="images/4.jpg"></div>
<div class="caption">Text 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides");
var dots = document.getElementsByClassName("dots");
if (n > slides.length) { slideIndex = 1};
if (n < 1) { slideIndex = slides.length};
for (i=0;i<slides.length;i++) {
slides[i].style.display = "none";
};
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";
}
</script>
<div class="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
body{
font-family: verdana,sans-serif;
margin: 0;
}
.slideshow-container{
width: 800px;
position: relative;
margin: auto;
}
.numbers{
position: absolute;
top: 0;
color: #f2f2f2;
padding: 8px 12px;
font-size: 12px;
}
.myslides{
display: none;
}
.prev , .next{
position: absolute;
top: 50%;
font-size: 18px;
font-weight: bold;
padding: 16px;
margin-top: -22px;
border-radius: 0 3px 3px 0;
color: #fff;
cursor: pointer;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,.next:hover{
background-color: rgba(0,0,0,0.8);
}
.caption{
text-align: center;
position: absolute;
bottom: 8px;
width: 100%;
color: #f2f2f2;
font-size: 15px;
padding: 8px 22px;
}
.dots{
width: 13px;
height: 13px;
background: gray;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.fade{
animation-name:fade;
animation-duration:1.5s;
}
#keyframes fade{
from {opacity: 0.4;}
to {opacity: 1;}
}
.active, .dot:hover {
background-color: #333;
}
.slider-1 {
display: grid;
height: 100%;
z-index:0;
}
.Fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
z-index:0;
}

The problem is, that on you're CSS the header has a height of 100vh...
Just reduce or remove the amount.
header {
width: 100%;
/* height: 100vh; */
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
See here: jsfidde

Related

How to add a website link to HTML website?

I know how to add images to html website but theres one thing i am not sure how to do, even after searching plenty of sites on the internet.
I created a small animation using java script on some other IDE, and I copied the link of my output:
https://g2mjl.csb.app/
I want to paste this link onto my html website but I do not know how to. If i use the regular <img src .... it does not work.
Basically the animation was coded in Java Script and the code for js is as follows:
import Vue from "vue";
import App from "./App.vue";
import TypeIt from "typeit";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
new TypeIt("#inner-demo-2", {
speed: 100,
lifelike: true,
cursor: true,
cursorSpeed: 200,
loop: true
})
.pause(1000)
.type('<span style="font-family: Segoe UI Emoji">👋</span>', {
html: true
})
.type("&nbspHi&nbspthere!&nbspI'm&nbspHussain Omer")
.go();
How can I add this code into my html file?
Also, this is for my personal website and not for school or anything, so answers are much appreciated!
I am fairly new to html too, as I started learning it a week ago, so help is really appreciated!
I want the animation to display at the very top and the width of it should cover basically my whole page but should be at the very top
Heres my html website code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Portfolio site template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Repl.it_logo.svg/220px-Repl.it_logo.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<!--────────────────Header───────────────-->
<header>
<a class="logo" href="#home">
<img src="https://newsletter-images--timmy-i-chen.repl.co/logo-light.png" alt="repl logo" />
</a>
<nav>
<ul class="nav-bar"><div class="bg"></div>
<li><a class="nav-link active" href="#home">Home</a></li>
<li><a class="nav-link" href="#projects">Projects</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<main>
<!--─────────────────Home────────────────-->
<div id="home">
<div class="filter"></div>
<section class="intro">
<p>Short Description.</p>
<p>Something more about yourself.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<!--────social media links─────-->
<div class="social-media">
<i class='fab fa-codepen'></i>
<i class='fab fa-twitter'></i>
<i class='fab fa-github'></i>
<i class='fab fa-linkedin-in'></i>
<i class="fab fa-youtube"></i>
</div>
</section>
</div>
<!--───────────────Projects───────────────-->
<div id="projects">
<h3>My Projects.<hr></h3>
<p>Here are some of my projects, you may like.</p>
<div class="work-box">
<div class="work">
<!--───────────────card───────────────-->
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1518611507436-f9221403cca2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1225&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1462642109801-4ac2971a3a51?ixlib=rb-1.2.1&auto=format&fit=crop&w=1266&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1485815457792-d1a966f9bde0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1517842645767-c639042777db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1535556116002-6281ff3e9f36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=781&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1483546416237-76fd26bbcdd1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
</div>
</div>
</div>
<!--──────────────Contact────────────────-->
<div id="contact">
<!--────social media links─────-->
<h3>Contact.<hr></h3>
<p>Feel free to contact me on my social media.</p>
<div class="social-media">
<i class='fab fa-codepen'></i>
<i class='fab fa-twitter'></i>
<i class='fab fa-github'></i>
<i class='fab fa-linkedin-in'></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</main>
<footer class="copyright">© 2020
Lilykhan.
<!-- be sure to give credit to me :) -->
</footer>
</div>
</body>
</html>
CSS CLASS:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
:root{
--main-background: #0b0c0f;
--main-fonts-color: #fff;
--main-decor-color:#00a9e2;
--main-header-background:#21252e;
--main-font-family: 'Poppins', sans-serif;
}
*{
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
main{
padding: 0;
width: 100%;
height: 100%;
background: var(--main-background);
}
/*──────────────────
header
──────────────────*/
header{
margin: 0 auto;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: transparent;
position: fixed;
top: 0;
transition: 0.3s;
z-index: 5;
}
.nav-show{
opacity: 0;
}
header:hover{
opacity: 1;
background: var(--main-header-background);
}
.logo img{
padding-top: 5px;
height: 50px;
cursor: pointer;
}
.nav-bar{
list-style:none;
position: relative;
display: inline-flex;
}
a.nav-link{
margin: 2px;
padding: 5px 10px;
text-decoration: none;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
text-transform: uppercase;
}
.active{
background: var(--main-decor-color);
}
.nav-link:hover {
color: #000000;
background: var(--main-decor-color);
}
/*──────────────────
home
──────────────────*/
#home{
margin: auto;
height: 100vh;
color: var(--main-fonts-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
#home .filter{
background: url('https://images.unsplash.com/photo-1544099858-75feeb57f01b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80') no-repeat;
background-size: cover;
background-position:center;
position: absolute;
top: 0px;
bottom: 0;
left: 0;
right: 0;
opacity:.20;
}
.intro {
text-align:center;
color: var(--main-fonts-color);
z-index: 1;
margin: auto;
padding: 20px;
}
.intro p{
margin: 5px;
font-size:1.2rem;
font-family: var(--main-font-family);
text-align:center;
}
h3{
padding-bottom: 15px;
letter-spacing: normal;
font-family: var(--main-font-family);
font-style: normal;
font-size: 60px;
color: var(--main-fonts-color);
text-shadow: 0px 0px 40px var(--main-decor-color);
}
/*──────────────────
social media
──────────────────*/
.social-media{
padding: 10px;
display: flex;
position: center;
align-items: space-around;
justify-content:center;
}
.social-media a {
margin: 10px;
font-size: 2rem;
text-align:center;
display: inline-block;
color: var(--main-fonts-color);
}
.social-media a i{
cursor: pointer;
}
.social-media a:hover {
color: var(--main-decor-color);
text-shadow: 0 0 50px var(--main-decor-color);
}
/*──────────────────
projects
──────────────────*/
#projects{
margin-top:100px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align:center;
color: var(--main-fonts-color);
}
#projects h3{
padding-top: 70px;
}
#projects p{
font-family: var(--main-font-family);
font-size:1.2rem;
padding: 10px;
}
.work{
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content:center;
align-items: center;
padding: 20px;
}
.card{
display: flex;
flex-direction: column;
margin: 20px;
width: 200px;
height:250px;
border-radius:12px;
background:var(--main-decor-color);
}
.card img{
width: 100%;
height:70%;
border-radius:10px 10px 0px 0px;
}
.card .work-content{
text-align: center;
padding: 10px 5px;
font-size: 1rem;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
}
.card a{
text-decoration: none;
}
.card .work-content:hover{
color:#202020;
}
.card:hover{
box-shadow: 0 0 1.5rem gray;
}
/*──────────────────
Contact
──────────────────*/
#contact{
margin: auto;
padding-bottom: 20px;
height: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--main-fonts-color);
}
#contact p{
padding:10px;
text-align:center;
font-size:1.2rem;
font-family: var(--main-font-family);
}
/*──────────────────
footer
──────────────────*/
footer {
width: 100%;
height: 100%;
background-color: var(--main-header-background);
}
.copyright {
color: #fff;
font-size: 1.2rem;
line-height: 40px;
text-align: center;
}
.copyright a{
color: #fff;
font-size: 1rem;
letter-spacing: 1px;
text-decoration: none;
font-family: var(--main-font-family);
}
.copyright a:hover{
color: var(--main-decor-color);
}
/*──── hr ─────*/
hr {
background: var(--main-decor-color);
margin: 2px;
height: 3px;
width: 150px;
border-radius:5px;
border: hidden;
margin-inline-start: auto;
margin-inline-end: auto;
}
/*──────────────────
Scrollbar
──────────────────*/
::-webkit-Scrollbar{
width: 5px;
background: rgba(5,5,5,1);
}
::-webkit-Scrollbar-thumb{
border-radius: 10px;
background: var(--main-decor-color);
box-shadow: inset 0 0 20px var(--main-decor-color);
}
::-webkit-Scrollbar-track{
margin-top: 80px;
border-radius: 10px;
}
/*──────────────────
hamburger
──────────────────*/
.hamburger {
display: none;
}
.hamburger div{
width: 30px;
height: 3px;
background: #dbdbdb;
margin: 5px;
transition:all 0.3s ease;
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
#keyframes navLinkFade{
from{
opacity:0;
transform: translatex(50px);
}
to{
opacity: 1;
transform:translatex(0px);
}
}
/*──────────────────
media queries
──────────────────*/
#media only screen and (max-width: 1484px) and (min-width: 1214px) {
.work{
padding:20px 20%;
}
}
#media only screen and (max-width: 1214px) and (min-width: 1000px) {
.work{
padding:20px 12%;
}
}
#media only screen and (max-width: 500px) {
#home, #projects, #contact{
overflow-x: hidden;
}
header{
background-color: var(--main-header-background);
}
.logo{
position:absolute;
top: 2px;
left: 30px;
}
.nav-show{
opacity: 1;
}
.nav-bar{
position:fixed;
top: 0px;
right:0;
width:60%;
height: 100vh;
display:flex;
flex-direction: column;
align-items: center;
justify-content:space-evenly;
background:var(--main-header-background);
transform:translatex(100%);
transition: transform 0.5s ease-in;
z-index: -1;
}
.hamburger{
position:absolute;
top: 17px;
right: 25%;
display: block;
cursor:pointer;
z-index: 5;
}
.nav-bar li{
opacity:0;
}
}
.nav-active{
transform:translatex(0%);
}
JS CLASS:
// header scrolling effect
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('header').addClass('nav-show');
}
else{
$('header').removeClass('nav-show');
}
})
//hamburger
const navSlide = () => {
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav-bar");
const navLinks = document.querySelectorAll(".nav-bar li");
hamburger.onclick = () => {
navbar.classList.toggle("nav-active");
//Animation links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7+1}s`;
}
});
//hamburger animation
hamburger.classList.toggle("toggle");
}
}
window.onload = () => navSlide();
BTW this is a free html website template i got

As others have mentioned, using an iframe would be your best bet if you want to display the actual app on your website.
This is how you would implement the iframe.
<iframe src="https://g2mjl.csb.app/" title="My App"></iframe>
That being said, iframes are tricky. Depending on the website, it's possible that an iframe blocking policy is in place which could prevent you from embedding your app.
More info here and here.
Now, if all you want is a gif, I've gone ahead and done that for you, although, you may want to upload your own with something like giphy.
Here is a link to a gif I've created from your app: https://media.giphy.com/media/U9vs87YlzO1KrlFSaG/giphy.gif
You can also see it by running the snippet below:
<img src="https://media.giphy.com/media/boq1oJ25cQ21rpLRmo/giphy.gif" />
I wrapped the image with an anchor that will lead to your app page but you can just implement it in your img src as you originally attempted like this:
<img src="https://media.giphy.com/media/boq1oJ25cQ21rpLRmo/giphy.gif" />

you can use this code:
<h2>Iframe - Target for a Link</h2>
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p>W3Schools.com</p>
<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>

smooth scrolling with sticky sub-navigation issue

I'm creating a web page with a fixed header and sticky sub-navigation with a smooth scroll on it. My problem is when clicking the sub-nav first link towards its target element, the sticky sub-navigation not showing up. Does anyone knows how to fix this?
Here are the images. To clarify my question.
Here is my code.
https://codepen.io/christine-tine27/full/eYzMgjB
// SMOOTH SCROLL
var $ = jQuery.noConflict();
$(function () {
$(".smoothScroll").click(function () {
if (
location.pathname.replace(/^\//, "") ==
this.pathname.replace(/^\//, "") &&
location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
if (target.length) {
$("html,body").animate(
{
scrollTop: target.offset().top - 200
},
1100
);
return false;
}
}
});
});
// STICKY SUB NAV
$(window).scroll(function(){
var height = $('.content-item.odd').outerHeight();
if($(window).width() < "767"){
if ($(window).scrollTop() >= 200) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}else if($(window).width() < "1024") {
if ($(window).scrollTop() >= 550) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}else if($(window).width() > "2000") {
if ($(window).scrollTop() >= 1000) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}else{
if ($(window).scrollTop() >= 700) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}
});
body {
margin: 0;
padding: 0;
}
body > header {
font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
position: fixed;
*position: absolute;
top: 0;
left: 0;
padding: 0;
color: #FFF;
background-color: #000;
*background-color: rgba(0,0,0,0.75);
width: 100%;
z-index: 20;
}
body > header .wrapper {
padding: 0px 10px;
}
body > header section {
display: block;
position: absolute;
top: 15px;
*left: 50px;
}
body > header nav {
display: block;
font-size: 11px;
font-weight: bold;
line-height: 50px;
text-align: right;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid #000;
}
body > header nav ul li {
display: inline-block;
padding: 0 20px;
transition: padding 0.2s ease;
}
body > header nav ul li a {
display: inline-block;
position: relative;
transition: color 0.3s ease;
padding-top: 40px;
}
body > header a {
color: #FFF;
}
ol, ul {
list-style: none;
margin: 0;
padding: 0;
}
.bgImg {
margin-top: 90px;
}
.bgImg img {
width: 100%;
height: 70vh;
object-fit: cover;
}
.wrapper {
max-width: 1300px;
margin: 0 auto;
padding: 30px 20px 0px 20px;
}
.group {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.group .half {
width: calc(100% / 4);
outline: none;
text-align: center !important;
}
.half .img img {
width: 100%;
}
.content-item.odd {
background: #000;
z-index: 3;
}
.prsub .content-wrap {
max-width: 1300px;
margin: 0 auto;
border-top: 1px solid #c9ced1;
padding-top: 0px;
}
.prsub .group .half {
width: calc(100% / 3);
}
.half .img {
padding: 0px 2px 0px 2px;
}
.the-content {
padding: 20px 0;
}
h4.entry-title {
position: absolute;
margin: 0;
color: #fff;
font-family: 'Abril Fatface';
font-size: 30px;
text-transform: uppercase;
font-weight: bold;
padding: 0;
top: 10px;
letter-spacing: 1px;
text-align: center;
}
.menu {
text-align: right;
}
.menu li {
display: inline-block;
}
.menu li a {
color: #fff;
border-right: 1px solid #fff;
padding: 6px 10px;
}
.content-item.odd {
background: #000;
z-index: 3;
}
.menu {
text-align: right;
}
.content-item.odd .wrapper {
padding-bottom: 0px !important;
}
main {
background-color: #fff;
padding: 0 0 0px 0;
margin-top: -4px;
overflow: hidden;
position: relative;
z-index: 15;
}
.content-item.odd .wrapper {
padding: 0px !important;
}
.prsub .content-wrap {
max-width: 1300px;
margin: 0 auto;
border-top: 1px solid #c9ced1;
padding-top: 0px;
}
main article h2 {
font-family: 'Abril Fatface';
font-size: 30px;
text-transform: uppercase;
color: #000;
font-weight: bold;
margin: 0;
text-align: center;
line-height: 1;
margin-bottom: 20px;
}
main article ul, main article ol {
color: #404041;
display: block;
font-size: 24px;
font-weight: normal;
list-style-type: disc;
}
main article section ul {
font-size: 18px;
}
main article ul li, p {
font-size: 18px;
margin: 10px 0 0;
list-style: none;
text-align: center;
color: #000;
}
.prsub h3 {
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-family: 'Abril Fatface';
color: #000;
padding: 0px;
font-size: 20px;
margin: 0;
font-weight: 100;
}
.prsub article {
padding: 40px 0;
}
<header>
<div class="wrapper">
<section>
<a href="/" class="logo">
<h1>Lorem</h1>
</a>
</section>
<nav>
<div class="navx"></div>
<ul class="ci-plugin">
<li><span>Home</span></li>
<li><span>Menu</span></li>
<li><span>About </span></li>
<li><span>Cook</span></li>
<li><span>Contact </span></li>
<li><span>Careers </span></li>
</ul>
</nav>
</div>
</header>
<section class="title">
<div class="bgImg">
<img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/header-background.jpg" alt="">
</div>
</section>
<main id="main" class="prsub">
<div class="content-container scroll">
<div class="content">
<div class="content-item odd">
<div class="wrapper">
<div class="the-content">
<h4 class="entry-title"><span> About Us</span></h4>
<div class="menu">
<ul >
<li><a class="smoothScroll" href="#intro">INTRO</a></li>
<li><a class="smoothScroll" href="#services">SERVICES</a></li>
<li><a class="smoothScroll" href="#projects">PROJECTS</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="con-container">
<div class="content-wrap">
<article>
<section>
<ul>
<li>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</li>
</ul>
</section>
</article>
</div>
<div class="content-wrap">
<article>
<section id="intro">
<h2>
INTRO
</h2>
<ul>
<li>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</li>
</ul>
</section>
</article>
</div>
<div class="content-wrap">
<article>
<section id="services">
<h2>
SERVICES
</h2>
<h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
</article>
</div>
<div class="content-wrap">
<article>
<section id="projects">
<h2>
PROJECTS
</h2>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</section>
</article>
</div>
</div>
<div class="wrapper">
<div class="group">
<div class="half">
<div class="img"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/intro-office.jpg"></div>
</div>
<div class="half">
<div class="img"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/intro-office.jpg"></div>
</div>
<div class="half">
<div class="img"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/intro-office.jpg"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
Thank you in advance.

How can I make my html slideshow responsive?

I tried making my slideshow responsive using this line of code
<img src="nature.jpg" alt="Nature" class="responsive">
.responsive {
width: 100%;
height: auto;
}
But it made no difference at all. I uploaded my site here: https://acaschoolgpa.000webhostapp.com/
This is my html:
<!DOCTYPE html>
<html>
<header>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ACA NHS</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="favico/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="favico/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="favico/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="favico/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="favico/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="favico/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="favico/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favico/favicon-16.png">
<link rel="apple-touch-icon" href="favico/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="favico/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="favico/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="favico/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="favico/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="favico/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="favico/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="favico/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favico/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="favico/favicon-144.png">
<meta name="msapplication-config" content="favico/browserconfig.xml">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<header>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<img src="logo.png" width="100" height="100" alt="HTML tag">
<p class="bluebackground"> </p>
<nav>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Boys Campus</li>
<li>Girls Campus</li>
<li>GPA Calculator</li>
</ul>
</nav>
<p class="bluebackground"> </p>
<br>
<div class="slideshow-container" class="responsive">
<div class="mySlides fade" style="--background-image: url('homepagepictures/foodtopeopleschool.jpg')"class="responsive">
<div class="numbertext">1 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/onground.jpg')" class="responsive">
<div class="numbertext">2 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/givingwater.jpg')" class="responsive">
<div class="numbertext">3 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/holdingcamera.jpg')" class="responsive">
<div class="numbertext">4 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/studentsgroup.jpg')" class="responsive">
<div class="numbertext">5 / 5</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<script src="slideshow.js"></script>
<br>
<br>
<br>
<br>
<center>
<h1 class="Welcome">WELCOME TO THE ACA NHS WEBSITE!</h1>
<br>
<br>
<br>
<br>
<br>
<br>
</center>
<h2 class="message">Our Message</h2>
<p id="messagetext" align="justify">"Long before National Honor Society was available in the American Creativity Academy, students sought after an opportunity to create, inspire, and open the doors for creativity. With a heritage of respect to individuality and personal interest, the National Honor Society offered a platform for creation and student ingenuity. Today, the dream of a boy who grew up between the blue walls of ACA turned into reality: he can finally create and enjoy creation for a respected audience!</p>
<p id="messagetext" align="justify">The National Honor Society is a community by students within the campus that works towards creating a better school and local environment. We believe that every act of kindness, no matter how insignificant it may seem, has a drastic impact on a person and starts a ripple of kind-hearted acts among the people. The NHS creates opportunities for its members in volunteering within and off the campus and raising awareness for global issues, which makes them more productive, responsible and engaged citizens. We try to make a difference by inspiring and supporting the people around us whenever we can.</p>
<p id="messagetext" align="justify">The NHS team is more than all of its members; although the impact of one person is limited, working as a team allows us to achieve our goal and leave behind a great mark. We envision a kinder society where people are keen on helping others, and will work until that vision is achieved."</p>
<p id="messagetext" align="justify">- By the NHS Team</p>
<footer class="footer-distributed">
<div class="footer-left">
<h3>NHS<span>ACA</span></h3>
<p class="footer-links">Boys Campus:</p>
<p class="footer-links">
<a href="https://www.instagram.com/nhsb.aca/"><i class="fa fa-instagram"></i>
nhsb.aca</a> 
| 
<a href="mailto:nhsb.aca#gmail.com"><i class="fa fa-envelope"></i>
nhsb.aca#gmail.com</a>
</p>
<p class="footer-links">Girls Campus:</p>
<p class="footer-links">
<a href="https://www.instagram.com/aca.nhs/"><i class="fa fa-instagram"></i>
aca.nhs</a> 
| 
<a href="mailto:acanational.hs#gmail.com"><i class="fa fa-envelope"></i>
acanational.hs#gmail.com</a>
</p>
<br>
<p class="footer-company-name">© Mohammad al Nusif</p>
</div>
<div class="footer-center">
<br>
<br>
<br>
<div>
<a href="https://goo.gl/maps/B3vW2nPkNewZUyxW9"><i class="fa fa-map-marker"></i>
<p>Boys Campus map</p></a>
</div>
<div>
<a href="https://goo.gl/maps/uKS7qgy5P6F8csRK7"><i class="fa fa-map-marker"></i>
<p>Girls Campus map</p></a>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<br>
<br>
<br>
<span>Boys Campus:</span>
Advisor's Email - sali.alkhuraishi#aca.edu.kw<br>
President's Email - bahaabed2003#gmail.com<br>
Vice President's Email - azoibi17#gmail.com<br>
<br>
<span>Girls Campus:</span>
Advisor's Email - nicole.depew#aca.edu.kw<br>
President's Email - kayanalghanim#gmail.com<br>
Vice President's Email - skkh03#gmail.com <br>
<br>
<div class="footer-icons">
</div>
</div>
</footer>
</body>
</html>
This is my css:
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
.slideshow-container {
max-width: 1200px;
min-width: 1000px;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0E68C;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #FFD750;
}
.Welcome {
font-family: 'Raleway',sans-serif;
font-size: 62px;
font-weight: 800;
line-height: 45px;
margin: 0 0 24px;
text-align: center;
text-transform: uppercase;
}
.message {
font-family: "Great Vibes";
font-size: 62px;
font-weight: 600;
}
.example_e {
border: none;
width: 759px;
background: #6495ED;
color: Yellow !important;
font-weight: 100;
padding: 20px;
text-transform: uppercase;
border-radius: 6px;
display: inline-block;
transition: all 0.3s ease 0s;
}
.example_e:hover {
color: #404040 !important;
font-weight: 700 !important;
letter-spacing: 3px;
background: none;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.3s ease 0s;
}
a{
text-decoration:none
}
.main {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.girls-message{
color: #F0E68C
}
.mySlides {
height: 80vh;
width: 100%;
margin-bottom: 0.5rem;
background-image: var(--background-image);
background-size: cover;
background-position: center;
}
.mySlides > .numbertext {
background-color: rgba(255, 255, 255, 0.8);
padding: 0.5rem;
}
.bluebackground{
background-color: #4169E1;
margin:0;
}
#messagetext{
margin-left: 20px;
margin-right: 20px
}
#import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700');
/* The footer is fixed to the bottom of the page */
footer{
bottom: 0;
}
#media (max-height:800px){
footer { position: static; }
}
.footer-distributed{
background-color: #2c292f;
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 50px 50px 60px 50px;
margin-top: 80px;
}
.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: 30%;
}
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
/* The company logo */
.footer-distributed .footer-left img{
width: 30%;
}
.footer-distributed h3 span{
color: #e0ac1c;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
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;
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: #e0ac1c;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 30%;
}
.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: 18px;
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;
}
#media (max-width: 880px) {
.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;
}
}
#font-face {
font-family: 'Cookie';
font-style: normal;
font-weight: 400;
src: local('Cookie-Regular'), url(https://fonts.gstatic.com/s/cookie/v12/syky-y18lb0tSbf9kgqS.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
.middlecent{
justify-content: center;
}
.responsive {
width: 100%;
height: auto;
}
This is my javascript:
var slideIndex = 1;
var timeGap = 5000;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
}
setInterval(function() {
showSlides(slideIndex);
slideIndex++
}, timeGap)
My site looks really weird on mobile but looks great on pc. Mostly because of the slideshow

Firstly remove your min-width: 1000px; in your slideshow-container. Never ever specify min-width more than 400px, if you need your site to be responsive.
Secondly, always adjust your container not the image width or height. Try not to go over the image height as it looks stretched. Try to use background-size: 100% 100%; to display the whole image.
.slideshow-container {
min-width: unset;
min-height: 400px;
}
.mySlides {
height: 100%;
min-height: 400px;
max-width: 100%;
}
Thirdly, do not specify class attribute two times on a single element. Use same attribute and add multiple classes in that.
class="slideshow-container responsive"

particles.js conflicting with fullpage.js, blocking text and not fully covering page

I have tried to add particles.js into my website which is currently using fullpage.js. I have added the two scripts(particles.js and app.js) into my html file, and also have added in each of the sections of my fullpage.js page. The issue that I am currently encountering is that when I test the page, the particles would take up most of the page and move my title upwards. If I scroll down into the second section of the page, the particles would disappear. I have tried fixing this by adding:
body{
margin: 0;
font-size: 18px;
font-family: 'montserrat', sans-serif;
text-align: center;
color: #37675D;
}
h{
font-size: 80px;
margin: 0 0 30px;
}
h1{
font-size: 80px;
margin: 0 0 30px;
font-size: 80px;
text-align: left;
margin-left: auto;
margin-right: auto;
list-style-type: none;
padding: 0;
}
.section{
background: #ABF0D1;
}
p{
margin: 0;
text-align: left;
margin-left: auto;
margin-right: auto;
list-style-type: none;
padding: 0;
}
.container{
max-width: 1000px;
margin: 0 auto;
max-height: 100%;
overflow; auto;
padding-right: 15px;
}
#fp-nav.fp-right{
right: 10px;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{
background: #37675D;
}
.responsive {
width: 100%;
height: auto;
}
#header{
position:fixed;
height: 50px;
display:block;
width: 100%;
background: rgba(255,255,255,0);
z-index:9;
text-align:center;
color: #FFF;
padding: 20px 0 0 0;
top:0px;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.funnycontainer {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.zigzag{
border: none;
margin: auto;
margin-top: 5%;
margin-bottom: 5%;
height: 40px;
background: linear-gradient(135deg, #ABF0D1 25%, transparent 25%) -20px 0,
linear-gradient(225deg, #ABF0D1 25%, transparent 25%) -20px 0,
linear-gradient(315deg, #ABF0D1 25%, transparent 25%),
linear-gradient(45deg, #ABF0D1 25%, transparent 25%);
background-size: 40px 40px;
background-color: #37675D;
}
#particle {
background-color: #b61924;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:0;
}
#overlay {
position: relative;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/fullpage.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="myNav" class="overlay">
×
<div class="overlay-content">
Home
submenu1
submenu2
submenu3
</div>
</div>
<span style = "float: left; padding-left: 20px; font-size: 50px; color: #37675D" onclick="openNav()">☰</span>
<img style = "float: right; padding-right: 20px;" src="images/img1.png" alt="img" width="100" height="120" class="img">
</div>
<div id="fullpage">
<div class="section section1">
<div id="particles-js">
<div class="container">
<h><strong>Title</strong></h>
</div>
</div>
</div>
<div class="section section2">
<div class="container">
<h1>Title</h1>
<hr class="zigzag">
<p>All areas of design including, interior designers, product design, architecture, web and programme design, advertising, fashion design, stage and set design. All aspects of engineering, from mechanical to civil, and all levels of trades technicians. All aspects of the automotive industry, mechanics, sales representatives, warrant assessors, welders, auto electricians, auto-body repair specialists, finishers etc. All the electrical and electronics trades, including electronics engineers, computer engineers, computer engineers, electrical engineer, for building and construction, all the related trades including foundation construction through to roofer, glazier, plumber, jib fixers and finishers, painter, landscaper etc, also related to this is the boat building industry which would include Naval architect, boat builder, rigger, boat fitter etc. In the food and catering industries careers include butcher, cake decorator, catering manager, childcare worker, confectioners maker, diet supervisor, dietician / nutritionist, early childhood teacher, flight attendant, food packer, food technologist, food bar assistant, hospital aide, hotel housekeeper, hotel / motel manager, kitchen hand, pastry cook, quality controller, small goods manager, teacher, waiter, waitress. From fabrics dressmaker, machinist / cutter, personal presentation, sale assistant / clothing / furniture, tailor, teacher, textile designer, theatre costume designer, pattern designer, pattern cutter. ICT is used in all aspects of industrial and business life and the training in and efficient use of all computer related skills is an essential of 21st century life.</p>
</div>
</div>
<div class="section section3">
<div class="slide"><img src="images/img1.jpg" alt="img1" class="responsive"></div>
<div class="slide"><img src="images/img2.jpg" alt="img2" class="responsive"></div>
<div class="slide"><img src="images/img3.jpg" alt="img3" class="responsive"></div>
<div class="slide"><img src="images/img3.jpg" alt="img3" class="responsive"></div>
</div>
<div class="section section4">
<div class="container">
<footer>
<h2>text</h2>
<h2>text</h2>
</footer>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/jquery.fullpage.extensions.min.js"></script>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true,
navigation: true,
controlArrows: false
});
});
</script>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>
<!-- end snippet -->
Image of error:
[![An image of the error that I am having.][1]][1]
[1]: https://i.stack.imgur.com/0lg67.png

Title not staying at the top left when hamburguer buttons shows up

Don't really know why this is happening my title "Roberto Salas" it's not staying in place when I change the window size, also doesn't stay in place when I open it on my cellphone
title not in right position
Title not in right position when the hmb button drops
I would like that the title stay in the top left heres my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Roberto Salas</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div id="Title" class="name">Roberto Salas</div>
<div class="Monse">
<ul >
<li><a href="#" class="submenu2" >Home</a></li>
<li><a href="#" class="submenu2" >About</a></li>
<li><a href="#" class="submenu2" >Blog</a></li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
$('#Title').addClass('name2');
$('a').css('color','white');
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
$('#Title').addClass('name2');
$('a').css('color','white');
}
else {
$('nav').removeClass('black');
$('#Title').removeClass('name2');
$('a').css('color','black');
}
})
</script>
</body>
</html>
Here is my style sheet
html, body {
margin: 0;
padding: 0;
width: 100%;
}
.Monse{
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(img/bosqueaves.jpg) no-repeat center;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.name{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: black;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.name2{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: white;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.smenu{
text-decoration: none;
font-size: 16px;
color: white;
}
.submenu2{
text-decoration: none;
font-size: 16px;
color: black;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
text-decoration: none;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: white;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
text-decoration: none;
}
.menu-icon {
display: block;
}
}
you can also check the website at https://gonzaloalcala.github.io/ProyectoR/index.html

You may add top: 0 on class .name. Then, set color: white in the media query.
.name{
line-height: 60px;
position: fixed;
top: 0; /* Add top to align */
float: left;
margin: 16px 46px;
color: black;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
#media(max-width: 786px) {
/* Change the color to white */
.name {
color: white;
}
}

Put the div with name:
<div id="Title" class="name">
Roberto Salas
</div>
above the <div class="menu-icon> in code.
Remember to change color of name on breakpoint as it is black as the navbar.
like:
#media(max-width: 786px) {
.name {
color: pink;
}
}
https://jsfiddle.net/e98fxyzg/3/

add to your css nav{display:flex; flex-direction:column;}
`
nav{display:flex;
flex-direction:column;}
Here is my style sheet
html, body {
margin: 0;
padding: 0;
width: 100%;
}
.Monse{
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(img/bosqueaves.jpg) no-repeat center;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.name{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: black;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.name2{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: white;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.smenu{
text-decoration: none;
font-size: 16px;
color: white;
}
.submenu2{
text-decoration: none;
font-size: 16px;
color: black;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
text-decoration: none;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: white;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
text-decoration: none;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Roberto Salas</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div id="Title" class="name color">
Roberto Salas
</div>
<div class="Monse">
<ul >
<li><a href="#" class="submenu2" >Home</a></li>
<li><a href="#" class="submenu2" >About</a></li>
<li><a href="#" class="submenu2" >Blog</a></li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
$('a').css('color','white');
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
$('#Title').addClass('name2');
$('a').css('color','white');
}
else {
$('nav').removeClass('black');
$('#Title').removeClass('name2');
$('a').css('color','black');
}
})
</script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Have unwanted space in the top of my slider image - javascript

The problem is, that on you're CSS the header has a height of 100vh... Just reduce or remove the amount. header { width: 100%; /* height: 100vh; */ background: url(hero.jpg) no-repeat 50% 50%; background-size: cover; } See here: jsfidde

Related

How to add a website link to HTML website?

smooth scrolling with sticky sub-navigation issue

How can I make my html slideshow responsive?

particles.js conflicting with fullpage.js, blocking text and not fully covering page

Title not staying at the top left when hamburguer buttons shows up

Categories

Resources