Why text block is equal to size of the image?

Why text block is equal to size of the image? - javascript

I've a code that does parallax outline scrolling, so when you scroll the page with a black background, the white text moves horizontally (which is positioned behind the image) along with the red text which is over the image.
This is how it looks like:
I understand the scrolling javascript code but what I don't get is that why the red text is at the boundary of the image? And if it's positioned above the image then why it's only showing the text under the image boundary only and not outside it just like the white one (which is positioned backward)
I'm a backend developer and I'm new to frontend so struggling a bit here. Here's my code...
Index.html :
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 2000px;
overflow-x: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
background: #0f0f0f;
}
.container {
max-width: 600px;
margin: 200px auto;
width: 100%;
padding: 10px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
overflow: hidden;
z-index: 1;
background-image: url("hero-img.jpeg");
background-size: cover;
background-position: center;
}
.text {
color: white;
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -50%;
transform: translateY(-50%);
z-index: 0;
text-transform: uppercase;
white-space: nowrap;
}
.text.text-dark {
color: red;
}
.text span {
position: relative;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax Text On Scroll</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="smooth-scroll-wrapper">
<div class="content">
<div class="container">
<div class="image-container">
<h2 class="text text-dark">
<span class="parallax-title">
the red text here
</span>
</h2>
</div>
<h2 class="text">
<span class="parallax-title">
the white text here
</span>
</h2>
</div>
</div>
</div>
<script>
let atScroll = false;
let parallaxTitle = document.querySelectorAll(".parallax-title");
const scrollProgress = () => {
atScroll = true;
};
const raf = () => {
if (atScroll) {
parallaxTitle.forEach((element, index) => {
element.style.transform = "translateX(" + window.scrollY / 12 + "%)";
});
atScroll = false;
}
requestAnimationFrame(raf);
};
requestAnimationFrame(raf);
window.addEventListener("scroll", scrollProgress);
</script>
</body>
</html>

You need to commented highlight css property on class .image-container{overflow: hidden; z-index: 1;} and increase top:50% to top:70% on class .text.text-dark{top: 70%;}
Note: Check on Full page
let atScroll = false;
let parallaxTitle = document.querySelectorAll(".parallax-title");
const scrollProgress = () => {
atScroll = true;
};
const raf = () => {
if (atScroll) {
parallaxTitle.forEach((element, index) => {
element.style.transform = "translateX(" + window.scrollY / 12 + "%)";
});
atScroll = false;
}
requestAnimationFrame(raf);
};
requestAnimationFrame(raf);
window.addEventListener("scroll", scrollProgress);
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 2000px;
overflow-x: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
background: #0f0f0f;
}
.container {
max-width: 600px;
margin: 200px auto;
width: 100%;
padding: 10px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
/* overflow: hidden; */
/* z-index: 1; */
background-image: url("https://i.stack.imgur.com/fcbpv.jpg?s=48&g=1");
background-size: cover;
background-position: center;
}
.text {
color: white;
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -50%;
transform: translateY(-50%);
z-index: 0;
text-transform: uppercase;
white-space: nowrap;
}
.text.text-dark {
color: red;
top: 70%;
}
.text span {
position: relative;
display: block;
}
<div class="smooth-scroll-wrapper">
<div class="content">
<div class="container">
<div class="image-container">
<h2 class="text text-dark">
<span class="parallax-title">
the red text here
</span>
</h2>
</div>
<h2 class="text">
<span class="parallax-title">
the white text here
</span>
</h2>
</div>
</div>
</div>

Related

Animation in JavaScript style.top value not working as expected

I am trying to achieve parallax effect where I have almost done but I have problem in Heading tag <h1 id="text">Merry Chrismas</h1> which is not animating. <h1 id="text">Merry Chrismas</h1> goes to top when scrolling.
let text = document.getElementById('text');
let moon = document.getElementById('moon');
let snow = document.getElementById('snow');
let leftMountain = document.getElementById('left-mountain');
let rightMountain = document.getElementById('right-mountain');
let btn = document.getElementById('btn');
window.addEventListener('scroll', function() {
let value = window.scrollY;
text.style.top = value * -0.5 + '%';
moon.style.top = value * -0.5 + '%';
snow.style.top = value * 1 + 'px';
leftMountain.style.left = value * -0.5 + 'px';
rightMountain.style.left = value * 0.5 + 'px';
btn.style.marginTop = value * 2 + 'px';
})
/* To reset all margin and padding */
* {
margin: 0;
padding: 0;
}
/* Now To remove horizontal scroll bar we have to use box sizing properties */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'lato', sans-serif;
/* min-height: 100vh; */
background: #fff;
transition: all 0.2s linear;
color: #000;
overflow-x: hidden;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
/* position: relative;
z-index: 1000; */
}
.logo {
font-size: 2rem;
}
header a {
text-decoration: none;
padding: 10px 20px;
position: relative;
z-index: 1000;
}
header a:hover {
color: #ff556e;
}
header a.active {
border: 0.125rem solid #ff556e;
border-radius: 2rem;
color: #ff556e;
}
.hero-section {
/* position: relative; */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
.hero-section h1 {
font: italic bold 4rem lato, sans-serif;
position: absolute;
}
.hero-section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none;
}
#base {
transform: translateY(200px);
}
.btn {
position: absolute;
display: inline-block;
text-decoration: none;
background: #ff0;
padding: 6px 15px;
border-radius: 20px;
font-size: 1.2rem;
font-weight: bold;
transform: translateY(50px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header id="header">
Chrismas
<nav id="navigation">
Home
Description
Features
Contact Us
</nav>
</header>
<section id="heroSection" class="hero-section">
<img src="https://i.ibb.co/R605wLx/bg.png" alt="bg" id="bg">
<img src="https://i.ibb.co/LZpM2k2/moon.png" alt="moon" id="moon">
<img src="https://i.ibb.co/QnPgdXG/snow.png" alt="snow" id="snow">
<img src="https://i.ibb.co/mGgD2s7/back-mountain.png" alt="back-mountain" id="back-mountain">
<h1 id="text">Merry Chrismas</h1>
<img src="https://i.ibb.co/wCx7SMd/left-mountain.png" alt="left-mountain" id="left-mountain">
<img src="https://i.ibb.co/4YnDZTM/right-mountain.png" alt="right-mountain" id="right-mountain">
Explore
<img src="https://i.ibb.co/3kdcSVZ/base.png" alt="base" id="base">
</section>
</body>
</html>
[JSBIN Demo]

Try modifying to this:
text.style.top = value * -0.2 + '%';
#text {
position: fixed;
top: 0;
}
You can adjust to the speed that you need

I'm trying to build a testimony slider with a fade out transition when switching from one testimony to the next using opacity

The slider works fine; the testimonial changes with a click of the left or right chevron arrow buttons. But I want to make it so that when I click the right or left arrow, it does a fade-out into a fade-in transition into the next testimonial by means of opacity. As you can see that is what I attempted to do on the second script, but it didn't work. I'm not sure why it is not working, any help would be appreciated.
.testimonial {
position: relative;
top: 0px;
max-width: 800px;
max-height: 800px;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
text-align: center;
line-height: 2;
}
.testimonial span {
font-weight: 500;
font-size: 25px;
color: #fff;
}
.testimonial q {
font-size: 22px;
color: #fff;
}
.testimonial img {
padding-right: 10px;
padding-left: 10px;
width: 100px;
border-radius: 50%;
}
.left {
position: absolute;
cursor: pointer;
bottom: 120px;
right: 370px;
width: 30px;
height: 30px;
}
.right {
cursor: pointer;
position: absolute;
width: 30px;
height: 30px;
bottom: 120px;
left: 370px;
}
.testimonials h1 {
position: relative;
font-size: 35px;
text-align: center;
top: 90px;
color: #fff;
}
.testimonials {
position: relative;
background-image: url('https://get.wallhere.com/photo/nature-mountain-top-Mount-Everest-landscape-1420401.jpg');
background-size: cover;
font-size: 10px;
color: #000;
}
.testimonials::before {
content: "";
background-image: linear-gradient(35deg, darkgrey, darkslategrey);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.8;
}
.testimonialImg img {
position: relative;
text-align: center;
max-width: 140px;
top: 0px;
left: 160px;
}
.testimonialImg h1 {
position: relative;
top: 0px;
}
.chevron img {
filter: invert(1);
}
.testimonial4 img {
background: white;
border-radius: 50%;
padding-top: 20px;
padding-bottom: 20px;
}
.testimonial1 img {
padding: 0px;
background: white;
border-radius: 50%;
}
.testimonial3 img {
padding: 0px;
}
.testimonial2 img {
padding: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="testimonials">
<div class="testimonialImg">
<h1>Testimonials</h1>
<img src="https://www.clker.com/cliparts/H/d/M/E/8/M/white-underline-hi.png">
</div>
<div class="testimonial testimonial1">
<img src="https://i.pinimg.com/originals/a1/c9/af/a1c9af575b575995647b6deeb431387a.jpg"><br>
<span>Albert Einstein</span> <br>
<q>We cannot solve our problems with the same thinking we used when we created them.</q>
</div>
<div class="testimonial testimonial2">
<img src="https://i.pinimg.com/236x/56/e3/8f/56e38fe68b8b26d9ecf6bee9850a524e--nelson-mandela-line-drawings.jpg"><br>
<span>Nelson Mandela</span> <br>
<q>I learned that courage was not the absence of fear, but the triumph over it. The brave man is not he who does not feel afraid, but he who conquers that fear.</q>
</div>
<div class="testimonial testimonial3">
<img src="https://www.prosportstickers.com/product_images/g/abe_lincoln_decal__43877.jpg"> <br>
<span>Abraham Lincoln</span> <br>
<q>You cannot escape the responsibility of tomorrow by evading it today.</q>
</div>
<div class="testimonial testimonial4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Martin_Luther_King%2C_Jr_.svg/860px-Martin_Luther_King%2C_Jr_.svg.png"><br>
<span>Martin Luther King Jr</span> <br>
<q>Faith is taking the first step even when you don't see the whole staircase.</q>
</div>
<div class="chevron">
<img src="https://pp.netclipart.com/pp/s/336-3364252_rounded-arrow-png-rounded-left-arrow-icon.png" class="left" onclick="nextSlide(-1);" onclick="navClickTransition(0);">
<img src="https://n6-img-fp.akamaized.net/free-icon/right-black-arrow_318-33109.jpg?size=338c&ext=jpg" class="right" onclick="nextSlide(1);" ; onclick="navClickTransition(0);">
</div>
</div>
<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);
function nextSlide(n) {
displaySlides(slide_index += n);
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("testimonial");
if (n > slides.length) {
slide_index = 1
}
if (n < 1) {
slide_index = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display = "block";
}
</script>
<script type="text/javascript">
function navClickTransition() {
const navClick = document.getElementsByClassName("testimonial");
navClick.style.opacity = 1;
}
</script>
</html>

It was quite alright, however you missed a couple of steps in the animation process, here is a modified version of your code, I explained everything in comments.
Edited version whit fade out and fade in animations:
.testimonial {
position: relative;
top: 0px;
max-width: 800px;
max-height: 800px;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
text-align: center;
line-height: 2;
}
.active{
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.inactive{
opacity: 0;
animation-name: fadeOut;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.testimonial span {
font-weight: 500;
font-size: 25px;
color: #fff;
}
.testimonial q {
font-size: 22px;
color: #fff;
}
.testimonial img {
padding-right: 10px;
padding-left: 10px;
width: 100px;
border-radius: 50%;
}
.left {
position: absolute;
cursor: pointer;
bottom: 120px;
right: 370px;
width: 30px;
height: 30px;
}
.right {
cursor: pointer;
position: absolute;
width: 30px;
height: 30px;
bottom: 120px;
left: 370px;
}
.testimonials h1 {
position: relative;
font-size: 35px;
text-align: center;
top: 90px;
color: #fff;
}
.testimonials {
position: relative;
background-image: url('https://get.wallhere.com/photo/nature-mountain-top-Mount-Everest-landscape-1420401.jpg');
background-size: cover;
font-size: 10px;
color: #000;
}
.testimonials::before {
content: "";
background-image: linear-gradient(35deg, darkgrey, darkslategrey);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.8;
}
.testimonialImg img {
position: relative;
text-align: center;
max-width: 140px;
top: 0px;
left: 160px;
}
.testimonialImg h1 {
position: relative;
top: 0px;
}
.chevron img {
filter: invert(1);
}
.testimonial4 img {
background: white;
border-radius: 50%;
padding-top: 20px;
padding-bottom: 20px;
}
.testimonial1 img {
padding: 0px;
background: white;
border-radius: 50%;
}
.testimonial3 img {
padding: 0px;
}
.testimonial2 img {
padding: 0px;
}
#keyframes fadeIn {
from{opacity: 0}
to{opacity: 1}
}
#keyframes fadeOut {
from{opacity: 1}
from:{opacity: 0}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="testimonials">
<div class="testimonialImg">
<h1>Testimonials</h1>
<img src="https://www.clker.com/cliparts/H/d/M/E/8/M/white-underline-hi.png">
</div>
<div class="testimonial testimonial1">
<img src="https://i.pinimg.com/originals/a1/c9/af/a1c9af575b575995647b6deeb431387a.jpg"><br>
<span>Albert Einstein</span> <br>
<q>We cannot solve our problems with the same thinking we used when we created them.</q>
</div>
<div class="testimonial testimonial2">
<img src="https://i.pinimg.com/236x/56/e3/8f/56e38fe68b8b26d9ecf6bee9850a524e--nelson-mandela-line-drawings.jpg"><br>
<span>Nelson Mandela</span> <br>
<q>I learned that courage was not the absence of fear, but the triumph over it. The brave man is not he who does not feel afraid, but he who conquers that fear.</q>
</div>
<div class="testimonial testimonial3">
<img src="https://www.prosportstickers.com/product_images/g/abe_lincoln_decal__43877.jpg"> <br>
<span>Abraham Lincoln</span> <br>
<q>You cannot escape the responsibility of tomorrow by evading it today.</q>
</div>
<div class="testimonial testimonial4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Martin_Luther_King%2C_Jr_.svg/860px-Martin_Luther_King%2C_Jr_.svg.png"><br>
<span>Martin Luther King Jr</span> <br>
<q>Faith is taking the first step even when you don't see the whole staircase.</q>
</div>
<div class="chevron">
<!-- you cant really have two onclick listeners, call the transition in the nextSlide instead -->
<img src="https://pp.netclipart.com/pp/s/336-3364252_rounded-arrow-png-rounded-left-arrow-icon.png" class="left" onclick="nextSlide(-1);">
<img src="https://n6-img-fp.akamaized.net/free-icon/right-black-arrow_318-33109.jpg?size=338c&ext=jpg" class="right" onclick="nextSlide(1);">
</div>
</div>
<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);
function nextSlide(n) {
displaySlides(slide_index += n);
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
// you can pass the testemonial index to shorten your array
// tip: I would really use an id for the index not a class hece you wont have another testemonial w/ the same index
function navClickTransition(index) {
const navClick = document.getElementsByClassName("testimonial"+index);
// navClick is an array it does not have a style property
//navClick.style.opacity = 1;
// this is more like it, however you still not animating the stuff just setting the opacity to 1
for (let i = 0; i < navClick.length; i++){
navClick[i].style.opacity = 0;
}
}
// in the end you don't even need this function
// for the animation I would use a css animation whit a separate class that you can add to the testemonals on demand
function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("testimonial");
var current;
for (i = 0; i < slides.length; i++) {
if (slides[i].style.display != "none")
current = slides[i];
}
if (n > slides.length) {
slide_index = 1
}
if (n < 1) {
slide_index = slides.length
}
// switches the animation classes you'll find inactive under active in the css
current.classList.remove("active");
current.classList.add("inactive");
// waits for a sec to let the animation finish before loading the next testemonial
setTimeout(() => {
for (i = 0; i < slides.length; i++) {
// you'll find the active class under the testemonial calss and the kexframes at the end of the css
slides[i].classList.remove("active", "inactive");
slides[i].style.display = "none";
}
slides[slide_index - 1].classList.remove("inactive");
slides[slide_index - 1].style.display = "block";
slides[slide_index - 1].classList.add("active");
}, 1000) // 1s is the animation hence we time out for 1000 mils
}
</script>
</body>
</html>

My slideshows are not working with node in localhost

As you can see I have positioned my divs properly position: relative; for slideshow and position: absolute; for containers
I have looked at similar questions that others posted and tried to fix the issue. It is still not working. Everything else works except slideshows. Slideshow shows only the last image. Does not change. My side panels work perfectly.
previously I had not added $(document).ready(function ()... In hopes of fixing issue I tried it but something else seems to be the problem. Any help would be appreciated, Thank you!
here are my files
//jshint esversion:6
$(document).ready(function (){
$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="/images/IMG_E2670.JPG">
</div>
<div class ="container">
<img src="/images/IMG_E2668.JPG">
</div>
<div class="container">
<img src="/images/IMG_E2665.JPG">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

I made some modifications in $(document).ready() and replaced the images with inline data to visualize the fade in / fade out and the images get replaced now.
Looks like the fadeOut function returns immediately and not after the fading is finished. I created a callback function which gets called once fadeOut, see https://api.jquery.com/fadeOut/ which seems to do the trick.
//jshint esversion:6
$(document).ready(function (){
//$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000, "linear", function() { $('#slideshow > div:first').appendTo('#slideshow'); });
$('#slideshow > div:first').next().fadeIn(1000);
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="data:image/png;base64,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">
</div>
<div class ="container">
<img src="data:image/png;base64,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">
</div>
<div class="container">
<img src="data:image/png;base64,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">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

showing the information with mouse hover

I'm trying to create an application that lets the user place an order from the menu. My problem is When the user hovers the mouse over one of the images in the menu, another image should be displayed with the description and price of the item. The id attribute of each image identifies the image to be displayed when it’s rolled over. I tired to manged the first image to flip and show the description and price but the problem is when you click on the first image it does not show the price on the order box and the image is not showing either
$(function(){
//declare prices and varaibles
var item1 = $("#item1");
item1.val(7.99);
var item2 = $("#item2");
item2.val(1.99);
var item3 = $("#item3");
item3.val(9.99);
var item4 = $("#item4");
item4.val(12.99);
var item5 = $("#item5");
item5.val(17.99);
var item6 = $("#item6");
item6.val(3.99);
var Total = $("#Total");
var Amount = 0;
//onclick
var item = $(".item");
var txtArea = $("#txtArea");
var orderList = "";
//Events
item.click(function(event){
Amount+=parseFloat($(event.target).val());
orderList+=parseFloat($(event.target).val())+"$ -"+event.target.id +"\n";
txtArea.val(orderList);
Total.html("Total: "+Amount.toFixed(2)+"$");
});
//Events
item.hover(function(){
$(event.target).text($(event.target).val()+"$");
$(event.target).addClass("dark");
}, function(){
$(event.target).text("");
$(event.target).removeClass("dark");
});
//Clear Button
var ClearOrder = $("#ClearOrder");
//Events
ClearOrder.click(function(){
Amount = 0;
Total.html("Total: "+Amount.toFixed(2));
orderList ="";
txtArea.val(orderList);
});
})
* {
box-sizing: border-box;
font-family: "san-serif";
}
body{
margin:0px;
padding:0px;
}
.Outside-Container{
margin:10px;
position:absolute;
border:2px solid black;
border-radius:5%;
width:60%;
height:auto;
left:20%;
overflow:hidden;
}
.container{
position:relative;
width:70%;
height:auto;
left:15%;
overflow:hidden;
}
.top-logo-holder{
width:100%;
height:auto;
}
.logo-img{
width: 31%;
display: block;
margin: 0 auto;
}
.line{
height:2px;
width:100%;
position:relative;
background:teal;
border-radius:25%;
}
.main-section{
width:100%;
position:relative;
height:auto;
}
.row1{
display:flex;
flex-wrap:no-wrap;
flex-direction: row;
}
.row2{
display:flex;
flex-wrap:no-wrap;
flex-direction: row;
transition:0.8s;
}
.item{
width:300px;
height:17vh;
background:pink;
margin:5px;
color:#fff;
transition:0.3s;
font-size:20px;
cursor:pointer;
}
.row1 .item:nth-child(1){
background:url("https://i.postimg.cc/2yCtXwNn/img1.jpg");
background-size:cover;
}
.row1 .item:nth-child(2){
background:url("https://i.postimg.cc/vTXKRVGk/img2.jpg");
background-size:cover;
}
.row1 .item:nth-child(3){
background:url("https://i.postimg.cc/J7QvH9jx/img3.jpg");
background-size:cover;
}
.row2 .item:nth-child(1){
background:url("[img4.jpg](https://postimg.cc/hh6pg86y)");
background-size:cover;
}
.row2 .item:nth-child(2){
background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size:cover;
}
.row2 .item:nth-child(3){
background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size:cover;
}
#txtArea{
width:60%;
height:150px;
}
.last-footer-line{
width:100%;
height:auto;
margin-bottom:20px;
}
.dark{
filter:brightness(0.7);
text-align:center;
font-size:20px;
line-height: 5em;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
<script src="js/tabs.js"></script>
<head>
<title>Test</title>
</head>
<body>
<div class="Outside-Container">
<div class = "container">
<div class="top-logo-holder">
<img src ="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img"/>
<div class="line"></div>
</div>
<div class="main-section">
<div class ="row1">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Coffee</h1>
<h1>7.22$</h1>
</div>
</div>
</div>
<div class="item" id="item2"></div>
<div class="item" id="item3"></div>
</div>
<div class ="row2">
<div class="item" id="item4"></div>
<div class="item" id="item5"></div>
<div class="item" id="item6"></div>
</div>
<div class="line"></div>
<p>Your Order:</p>
<textarea name="message" id="txtArea"></textarea>
<p id="Total">Total: </p>
</div>
<div class="last-footer-line">
<button id="PlaceOrder">Place Order</button>
<button id="ClearOrder">Clear Order</button>
<div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/tabs.js"></script>
</body>
</html>

$(function() {
//declare prices and varaibles
var item1 = $("#item1");
item1.val(7.99);
var item2 = $("#item2");
item2.val(1.99);
var item3 = $("#item3");
item3.val(9.99);
var item4 = $("#item4");
item4.val(12.99);
var item5 = $("#item5");
item5.val(17.99);
var item6 = $("#item6");
item6.val(3.99);
var Total = $("#Total");
var Amount = 0;
//onclick
var item = $(".item");
var txtArea = $("#txtArea");
var orderList = "";
//Events
$('.flip-card-back').click(function() {
var price = $('.flip-card-back .Item1_price').text().slice(0, -1);
Amount += parseFloat(price);
orderList += parseFloat(price) + "$ -item1 \n";
txtArea.val(orderList);
Total.html("Total: " + Amount.toFixed(2) + "$");
});
item.click(function(event) {
Amount += parseFloat($(event.target).val());
orderList += parseFloat($(event.target).val()) + "$ -" + event.target.id + "\n";
txtArea.val(orderList);
Total.html("Total: " + Amount.toFixed(2) + "$");
});
//Events
item.hover(function() {
$(event.target).text($(event.target).val() + "$");
$(event.target).addClass("dark");
}, function() {
$(event.target).text("");
$(event.target).removeClass("dark");
});
//Clear Button
var ClearOrder = $("#ClearOrder");
//Events
ClearOrder.click(function() {
Amount = 0;
Total.html("Total: " + Amount.toFixed(2));
orderList = "";
txtArea.val(orderList);
});
})
* {
box-sizing: border-box;
font-family: "san-serif";
}
body {
margin: 0px;
padding: 0px;
}
.Outside-Container {
margin: 10px;
position: absolute;
border: 2px solid black;
border-radius: 5%;
width: 60%;
height: auto;
left: 20%;
overflow: hidden;
}
.container {
position: relative;
width: 70%;
height: auto;
left: 15%;
overflow: hidden;
}
.top-logo-holder {
width: 100%;
height: auto;
}
.logo-img {
width: 31%;
display: block;
margin: 0 auto;
}
.line {
height: 2px;
width: 100%;
position: relative;
background: teal;
border-radius: 25%;
}
.main-section {
width: 100%;
position: relative;
height: auto;
}
.row1 {
display: flex;
flex-wrap: no-wrap;
flex-direction: row;
}
.row2 {
display: flex;
flex-wrap: no-wrap;
flex-direction: row;
transition: 0.8s;
}
.item {
width: 300px;
height: 17vh;
background: pink;
margin: 5px;
color: #fff;
transition: 0.3s;
font-size: 20px;
cursor: pointer;
}
.row1 .item:nth-child(1) {
background: url("https://i.postimg.cc/2yCtXwNn/img1.jpg");
background-size: cover;
}
.row1 .item:nth-child(2) {
background: url("https://i.postimg.cc/vTXKRVGk/img2.jpg");
background-size: cover;
}
.row1 .item:nth-child(3) {
background: url("https://i.postimg.cc/J7QvH9jx/img3.jpg");
background-size: cover;
}
.row2 .item:nth-child(1) {
background: url("[img4.jpg](https://postimg.cc/hh6pg86y)");
background-size: cover;
}
.row2 .item:nth-child(2) {
background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size: cover;
}
.row2 .item:nth-child(3) {
background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size: cover;
}
#txtArea {
width: 60%;
height: 150px;
}
.last-footer-line {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.dark {
filter: brightness(0.7);
text-align: center;
font-size: 20px;
line-height: 5em;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script src="js/tabs.js"></script>
<head>
<title>Test</title>
</head>
<body>
<div class="Outside-Container">
<div class="container">
<div class="top-logo-holder">
<img src="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img" />
<div class="line"></div>
</div>
<div class="main-section">
<div class="row1">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Coffee</h1>
<h1 class='Item1_price'>7.22$</h1>
</div>
</div>
</div>
<div class="item" id="item2"></div>
<div class="item" id="item3"></div>
</div>
<div class="row2">
<div class="item" id="item4"></div>
<div class="item" id="item5"></div>
<div class="item" id="item6"></div>
</div>
<div class="line"></div>
<p>Your Order:</p>
<textarea name="message" id="txtArea"></textarea>
<p id="Total">Total: </p>
</div>
<div class="last-footer-line">
<button id="PlaceOrder">Place Order</button>
<button id="ClearOrder">Clear Order</button>
<div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/tabs.js"></script>
</body>
</html>

i added rotate card on hover for any item & set item1 as first item
item.mouseleave(function() {
$('.flip-card-inner').removeClass('flipcard');
});
$('.flip-card-inner').addClass('flipcard');
added css class.flipcard {
transform: rotateY(180deg);
}
also added img & price onhover event using$('.flip-card-back').html($(event.target).val()+'$');
$('.flip-card-back').css('background', $(event.target).css('background'));
.
is this what you want😘
$(function() {
//declare prices and varaibles
var item1 = $("#item1");
item1.val(7.99);
var item2 = $("#item2");
item2.val(1.99);
var item3 = $("#item3");
item3.val(9.99);
var item4 = $("#item4");
item4.val(12.99);
var item5 = $("#item5");
item5.val(17.99);
var item6 = $("#item6");
item6.val(3.99);
var Total = $("#Total");
var Amount = 0;
//onclick
var item = $(".item");
var txtArea = $("#txtArea");
var orderList = "";
//Events
item.hover(function(event) {
$('.flip-card-back').html($(event.target).val() + '$');
$('.flip-card-back').css('background', $(event.target).css('background'));
$('.flip-card-inner').addClass('flipcard');
}, function() {
$('.flip-card-inner').removeClass('flipcard');
});
item.click(function(event) {
Amount += parseFloat($(event.target).val());
orderList += parseFloat($(event.target).val()) + "$ -" + event.target.id + "\n";
txtArea.val(orderList);
Total.html("Total: " + Amount.toFixed(2) + "$");
});
//Events
item.hover(function() {
$(event.target).text($(event.target).val() + "$");
$(event.target).addClass("dark");
}, function() {
$(event.target).text("");
$(event.target).removeClass("dark");
});
//Clear Button
var ClearOrder = $("#ClearOrder");
//Events
ClearOrder.click(function() {
Amount = 0;
Total.html("Total: " + Amount.toFixed(2));
orderList = "";
txtArea.val(orderList);
});
})
* {
box-sizing: border-box;
font-family: "san-serif";
}
body {
margin: 0px;
padding: 0px;
}
.Outside-Container {
margin: 10px;
position: absolute;
border: 2px solid black;
border-radius: 5%;
width: 60%;
height: auto;
left: 20%;
overflow: hidden;
}
.container {
position: relative;
width: 70%;
height: auto;
left: 15%;
overflow: hidden;
}
.top-logo-holder {
width: 100%;
height: auto;
}
.logo-img {
width: 31%;
display: block;
margin: 0 auto;
}
.line {
height: 2px;
width: 100%;
position: relative;
background: teal;
border-radius: 25%;
}
.main-section {
width: 100%;
position: relative;
height: auto;
}
.row1 {
display: flex;
flex-wrap: no-wrap;
flex-direction: row;
}
.row2 {
display: flex;
flex-wrap: no-wrap;
flex-direction: row;
transition: 0.8s;
}
.item {
width: 300px;
height: 17vh;
background: pink;
margin: 5px;
color: #fff;
transition: 0.3s;
font-size: 20px;
cursor: pointer;
}
.row1 .item:nth-child(1) {
background: url("https://i.postimg.cc/2yCtXwNn/img1.jpg");
background-size: cover;
}
.row1 .item:nth-child(2) {
background: url("https://i.postimg.cc/vTXKRVGk/img2.jpg");
background-size: cover;
}
.row1 .item:nth-child(3) {
background: url("https://i.postimg.cc/J7QvH9jx/img3.jpg");
background-size: cover;
}
.row2 .item:nth-child(1) {
background: url("https://www.gourmesso.co.uk/blog/wp-content/uploads/sites/4/2017/03/Tiramisu-Coffee-in-a-Glass-Recipe-Italian-dessert-speciality.jpg");
background-size: cover;
}
.row2 .item:nth-child(2) {
background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size: cover;
}
.row2 .item:nth-child(3) {
background: url("http://hopecoffeeco.com/wp-content/uploads/2017/01/Grid-home-item-show-img.jpg");
background-size: cover;
}
#txtArea {
width: 60%;
height: 150px;
}
.last-footer-line {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.dark {
filter: brightness(0.7);
text-align: center;
font-size: 20px;
line-height: 5em;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flipcard {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script src="js/tabs.js"></script>
<head>
<title>Test</title>
</head>
<body>
<div class="Outside-Container">
<div class="container">
<div class="top-logo-holder">
<img src="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img" />
<div class="line"></div>
</div>
<div class="main-section">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="row1">
<div class="item" id="item1"></div>
<div class="item" id="item2"></div>
<div class="item" id="item3"></div>
</div>
<div class="row2">
<div class="item" id="item4"></div>
<div class="item" id="item5"></div>
<div class="item" id="item6"></div>
</div>
<div class="line"></div>
<p>Your Order:</p>
<textarea name="message" id="txtArea"></textarea>
<p id="Total">Total: </p>
</div>
<div class="last-footer-line">
<button id="PlaceOrder">Place Order</button>
<button id="ClearOrder">Clear Order</button>
<div>
</div>
</div>
</div>
<script src="js/tabs.js"></script>
</body>
</html>

How can I make my website stay when window is resized

Right now when I resize my webpage it messes up my entire website. I have looked up solutions but they have not worked for me. I read that it might be because I have some positions set to absolute, I tried setting them to relative but that did not work. Any help is appreciated :)
Website: http://al-saba.net/
#import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400);
* {margin: 0; padding: 0;}
html {
background-color: black;
opacity: .9;
min-height:100%;
width: 100%;
height: 100%;
background-repeat: no-repeat;
z-index: 2000;
}
h1 {
position: absolute;
font-family: 'Passion One';
font-size: 200px;
color: blue;
letter-spacing: 1.6rem;
top: calc(62% - 200px);
text-align: center;
text-shadow: 2px 4px 3px rgba(0,0,0,0.6);
opacity: .8;
width: 100%;
z-index: 2001;
}
h2 {
position: absolute;
font-family: 'Open Sans', monospace;
font-size: 26px;
color: #6EBEDC;
letter-spacing: .4rem ;
top: calc(64% - 30px);
text-align: center;
opacity: .68 ;
width: 100%;
z-index: 2002;
}
h3 {
position: absolute;
font-family: 'Open Sans', monospace;
font-size: 24px;
color: #6EBEDC;
letter-spacing: .4rem ;
top: calc(38% - 30px);
text-align: center;
opacity: .68 ;
width: 100%;
z-index: 2003;
}
body {
}
footer {
position: absolute;
bottom: calc(22% - 100px);
right: calc(16% - 125px);
letter-spacing: .6rem;
z-index: 2002;
}
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
height: 106%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .filter {
z-index: 100;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 102%;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
a {text-decoration: none;}
/* This class is added on scroll */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
/* Navigation Settings */
nav {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background: #5B5B5B;
opacity: .8;
font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
}
nav:hover {
opacity: .9;
}
nav li {
display: inline-block;
padding: 24px 24px;
}
nav li a:hover {
color: black;
}
nav li a{
color: white;
text-transform: uppercase;
}
section {
height: 100vh;
}
/* Screens Settings */
#screen1 {
background: #1061E5;
text-align: center;
}
#screen1 p {
padding-top: 200px;
text-align: center;
}
#screen2 {
background: white;
text-align: center;
}
#screen3 {
background: black;
text-align: center;
}
#media only screen and (max-width: 520px) {
nav li {
padding: 24px 4px;
}
nav li a {
font-size: 16px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale=1">
<script src = "jquery-3.1.1.min.js"></script>
<script src = "script.js"></script>
<link rel = "stylesheet" href="style.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Passion+One|Source+Code+Pro" rel="stylesheet">
<title> AL-SABA.net </title>
</head>
<body>
<header>
<h3> Design • Code • Programs </h3>
<h1> AL-SABA </h1>
<h2> Personal Website </h2>
</header>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel = 'stylesheet' type = 'text/css'>
<div class = "homepage-hero-module">
<div class = "video-container">
<div class = "filter"></div>
<video autoplay loop class = "fillWidth">
<source src="coding.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="Love-Coding.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
</div>
<section id="screen1">
<p>Scroll down</p>
<nav class = "bar">
<ul>
<li class = "bar-home">Home</li>
<li class = "bar-about">About</li>
<li class = "bar-projects">Projects</li>
<li class = "bar-contact">Contact</li>
</ul>
</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section>
<footer>
</footer>
</body>
</html>

It looks like everything is okay except for the "Al-Saba" h1. You can declare the font size using relative values that consider the viewport width.
Change your h1 CSS. Make this: font-size:200px; something like font-size:15vw.
The "Design • Code • Programs" and "Personal Website" overlap "Al-Saba" because you have them all in the same div. Try this instead:
<header>
<div> <h3> Design • Code • Programs </h3></div>
<div> <h1> AL-SABA </h1></div>
<div> <h2> Personal Website </h2></div>
</header>

You can adjust the position.
For example try adjusting the heading element position. You can see a big different.
h1,h2,h3 {
position:static;
}

Just remove this metatag
<meta name = "viewport" content = "width = device-width, initial-scale=1">

Develop Reference

JavaScript is the programming language of the Web.

Why text block is equal to size of the image? - javascript

Related

Animation in JavaScript style.top value not working as expected

I'm trying to build a testimony slider with a fade out transition when switching from one testimony to the next using opacity

My slideshows are not working with node in localhost

showing the information with mouse hover

How can I make my website stay when window is resized

Categories

Resources