Save data from form using javascript

Save data from form using javascript - javascript

I have a chat box made in codeigniter that is working fine with static data, but i would like to connect it to database and make it dynamic
My requirement are:
1) when a user enters their name and email address under chatbox__credentials it needs to get saved in database
2) Using the email id, needs to display data in chatbox__body which is related to that email id
3) the entered email id also needs to be linked with the chatbox__message so that what ever message that user sends gets saved under their email id
Code on view page (index.php):
<div class="chatbox chatbox--tray chatbox--empty">
<div class="chatbox__title">
<h5>Customer Service</h5>
<button class="chatbox__title__tray">
<span></span>
</button>
<button class="chatbox__title__close">
<span>
<svg viewBox="0 0 12 12" width="12px" height="12px">
<line stroke="#FFFFFF" x1="11.75" y1="0.25" x2="0.25" y2="11.75"></line>
<line stroke="#FFFFFF" x1="11.75" y1="11.75" x2="0.25" y2="0.25"></line>
</svg>
</span>
</button>
</div>
<div class="chatbox__body">
<div class="chatbox__body__message chatbox__body__message--left">
<img src="#" alt="Picture">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="#" alt="Picture">
<p>Nulla vel turpis vulputate, tincidunt lectus sed, porta arcu.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--left">
<img src="#" alt="Picture">
<p>Curabitur consequat nisl suscipit odio porta, ornare blandit ante maximus.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="#" alt="Picture">
<p>Cras dui massa, placerat vel sapien sed, fringilla molestie justo.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="#" alt="Picture">
<p>Praesent a gravida urna. Mauris eleifend, tellus ac fringilla imperdiet, odio dolor sodales libero, vel mattis elit mauris id erat. Phasellus leo nisi, convallis in euismod at, consectetur commodo urna.</p>
</div>
</div>
<form class="chatbox__credentials">
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" required>
</div>
<div class="form-group">
<label for="inputEmail">Email:</label>
<input type="email" class="form-control" id="inputEmail" required>
</div>
<button type="submit" class="btn btn-success btn-block">Enter Chat</button>
</form>
<textarea class="chatbox__message" placeholder="Write something interesting"></textarea>
</div>
(function($) {
$(document).ready(function() {
var $chatbox = $('.chatbox'),
$chatboxTitle = $('.chatbox__title'),
$chatboxTitleClose = $('.chatbox__title__close'),
$chatboxCredentials = $('.chatbox__credentials');
$chatboxTitle.on('click', function() {
$chatbox.toggleClass('chatbox--tray');
});
$chatboxTitleClose.on('click', function(e) {
e.stopPropagation();
$chatbox.addClass('chatbox--closed');
});
$chatbox.on('transitionend', function() {
if ($chatbox.hasClass('chatbox--closed')) $chatbox.remove();
});
$chatboxCredentials.on('submit', function(e) {
e.preventDefault();
$chatbox.removeClass('chatbox--empty');
});
});
})(jQuery);
my chat box :
(function($) {
$(document).ready(function() {
var $chatbox = $('.chatbox'),
$chatboxTitle = $('.chatbox__title'),
$chatboxTitleClose = $('.chatbox__title__close'),
$chatboxCredentials = $('.chatbox__credentials');
$chatboxTitle.on('click', function() {
$chatbox.toggleClass('chatbox--tray');
});
$chatboxTitleClose.on('click', function(e) {
e.stopPropagation();
$chatbox.addClass('chatbox--closed');
});
$chatbox.on('transitionend', function() {
if ($chatbox.hasClass('chatbox--closed')) $chatbox.remove();
});
$chatboxCredentials.on('submit', function(e) {
e.preventDefault();
$chatbox.removeClass('chatbox--empty');
});
});
})(jQuery);
.chatbox {
position: fixed;
bottom: 0;
right: 30px;
width: 300px;
height: 400px;
background-color: #fff;
font-family: 'Lato', sans-serif;
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.chatbox--tray {
bottom: -350px;
}
.chatbox--closed {
bottom: -400px;
}
.chatbox .form-control:focus {
border-color: #1f2836;
}
.chatbox__title,
.chatbox__body {
border-bottom: none;
}
.chatbox__title {
min-height: 50px;
padding-right: 10px;
background-color: #1f2836;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.chatbox__title h5 {
height: 50px;
margin: 0 0 0 15px;
line-height: 50px;
position: relative;
padding-left: 20px;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.chatbox__title h5 a {
color: #fff;
max-width: 195px;
display: inline-block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chatbox__title h5:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
background: #4CAF50;
border-radius: 6px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.chatbox__title__tray,
.chatbox__title__close {
width: 24px;
height: 24px;
outline: 0;
border: none;
background-color: transparent;
opacity: 0.5;
cursor: pointer;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
.chatbox__title__tray:hover,
.chatbox__title__close:hover {
opacity: 1;
}
.chatbox__title__tray span {
width: 12px;
height: 12px;
display: inline-block;
border-bottom: 2px solid #fff
}
.chatbox__title__close svg {
vertical-align: middle;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.2px;
}
.chatbox__body,
.chatbox__credentials {
padding: 15px;
border-top: 0;
background-color: #f5f5f5;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.chatbox__credentials {
display: none;
}
.chatbox__credentials .form-control {
-webkit-box-shadow: none;
box-shadow: none;
}
.chatbox__body {
overflow-y: auto;
}
.chatbox__body__message {
position: relative;
}
.chatbox__body__message p {
padding: 15px;
border-radius: 4px;
font-size: 14px;
background-color: #fff;
-webkit-box-shadow: 1px 1px rgba(100, 100, 100, 0.1);
box-shadow: 1px 1px rgba(100, 100, 100, 0.1);
}
.chatbox__body__message img {
width: 40px;
height: 40px;
border-radius: 4px;
border: 2px solid #fcfcfc;
position: absolute;
top: 15px;
}
.chatbox__body__message--left p {
margin-left: 15px;
padding-left: 30px;
text-align: left;
}
.chatbox__body__message--left img {
left: -5px;
}
.chatbox__body__message--right p {
margin-right: 15px;
padding-right: 30px;
text-align: right;
}
.chatbox__body__message--right img {
right: -5px;
}
.chatbox__message {
padding: 15px;
min-height: 50px;
outline: 0;
resize: none;
border: none;
font-size: 12px;
border: 1px solid #ddd;
border-bottom: none;
background-color: #fefefe;
}
.chatbox--empty {
height: 262px;
}
.chatbox--empty.chatbox--tray {
bottom: -212px;
}
.chatbox--empty.chatbox--closed {
bottom: -262px;
}
.chatbox--empty .chatbox__body,
.chatbox--empty .chatbox__message {
display: none;
}
.chatbox--empty .chatbox__credentials {
display: block;
}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<div class="chatbox chatbox--tray chatbox--empty">
<div class="chatbox__title">
<h5>Customer Service</h5>
<button class="chatbox__title__tray">
<span></span>
</button>
<button class="chatbox__title__close">
<span>
<svg viewBox="0 0 12 12" width="12px" height="12px">
<line stroke="#FFFFFF" x1="11.75" y1="0.25" x2="0.25" y2="11.75"></line>
<line stroke="#FFFFFF" x1="11.75" y1="11.75" x2="0.25" y2="0.25"></line>
</svg>
</span>
</button>
</div>
<div class="chatbox__body">
<div class="chatbox__body__message chatbox__body__message--left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Picture">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/arashmil/128.jpg" alt="Picture">
<p>Nulla vel turpis vulputate, tincidunt lectus sed, porta arcu.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Picture">
<p>Curabitur consequat nisl suscipit odio porta, ornare blandit ante maximus.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/arashmil/128.jpg" alt="Picture">
<p>Cras dui massa, placerat vel sapien sed, fringilla molestie justo.</p>
</div>
<div class="chatbox__body__message chatbox__body__message--right">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/arashmil/128.jpg" alt="Picture">
<p>Praesent a gravida urna. Mauris eleifend, tellus ac fringilla imperdiet, odio dolor sodales libero, vel mattis elit mauris id erat. Phasellus leo nisi, convallis in euismod at, consectetur commodo urna.</p>
</div>
</div>
<form class="chatbox__credentials">
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" required>
</div>
<div class="form-group">
<label for="inputEmail">Email:</label>
<input type="email" class="form-control" id="inputEmail" required>
</div>
<button type="submit" class="btn btn-success btn-block">Enter Chat</button>
</form>
<textarea class="chatbox__message" placeholder="Write something interesting"></textarea>
</div>

Related

Tooltip partially obscured by outer div

I would like to display a tooltip with item name when user hover over the image item. The items are shown inside a grid with scrollbar (class="itemGrid" and item itself is class="itemOnGrid").
I've tried many solutions over the internet, however I'm learning about CSS now and I could not solve my problem.
HTML
<body>
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a><span class="tooltiptext">Giant Sword</span></div>
</div>
</div>
<div class='sets'></div>
</div>
</center>
<script src='main.js'></script>
</body>
CSS
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.itemOnGrid .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.itemOnGrid .tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.itemOnGrid:hover .tooltiptext {
visibility: visible;
z-index: 1;
}
The items are added by JS, I wrote down 3 examples hard-coded.
Image of tooltip being cutted off:
Thanks in advance!

I am afraid, that in your situation you can not solve it with css alone.
Since overflow:hidden cuts off everything outside of it.
You could probably remove position:relative from itemOnGrid class, but all your tooltips would end up in the same place - I really doubt you want to manually position all of them.
My solution is to use javascript for tooltip location(and also change its text).
I did change the placement of your elements a little, also edited the css accordingly for the new view.
The copies of the elements are just for demonstration purposes.
Now the solution is basically this function prepare where I assign eventListeners to every itemOnGrid. In this eventListener I read the position of the element that has been hovered and move (and change text of) the tooltip. I didn't really care about perfect location of the tooltip here, so you might want to play with it a little.
function prepare(){
let items = document.getElementsByClassName('itemOnGrid');
for(let i = 0; i < items.length; i++){
items[i].addEventListener('mouseover', function(){
let tooltip = document.getElementById('tooltip');
let top = this.offsetTop;
let left = this.offsetLeft;
tooltip.style.top = top-30+'px';
tooltip.style.left = left-35+'px';
tooltip.style.display = 'block';
tooltip.innerText = this.getAttribute('itemName');
});
items[i].addEventListener('mouseout', function(){
let tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
});
}
};
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.tooltiptext {
display:none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
<body onload="prepare()">
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
</div>
<span id='tooltip' class="tooltiptext">Giant Sword</span>
</div>
<div class='sets'></div>
</div>
</center>
</body>

JS is not working in my web page,Explained below,any solution?

I am working on a web project every thing was too good until i decided to add JS, to make my page dynamic but at that point i faced a big problem when i try to access my elements by tagName or by id or class it always returns null and undefined, any solution please , i am new at this ,Thanks in advance,if you are unavle to understand the question you can mail me or reply here but please i need solution
console.log('test1')
window.onload = function() {;
elements.forEach((element) => element.style.color = 'red');
}
/* * {
margin: 0;
} */
}
body {
margin: 0;
box-sizing: border-box;
display: block;
background: #eee;
}
header {
color: white;
background: linear-gradient(to left, #222, black, #222);
box-sizing: border-box;
border-bottom: 2px solid #999;
display: block;
overflow: hidden;
width: 100%;
text-align: center;
padding: 22px;
padding-bottom: 20px;
}
header .page-title {
cursor: pointer;
display: block;
font-size: 25px;
font-variant: small-caps;
transition: color 1s linear, font-size 1s linear;
}
header .page-title:hover {
cursor: pointer;
font-size: 25px;
color: green;
text-shadow: 0 0 7px #004800;
transition: color 1s linear, font-size 1s linear, text-shadow 2s linear;
}
//not working.pagetitle:hover < header {background:black;}
.search {
float: left;
text-decoration: none;
font-size: 15px;
padding: 17.5px;
display: inline-block;
border: none;
border-left: 1px solid white;
box-sizing: border-box;
color: white;
background: black;
width: 88%;
}
.icon {
float: left;
border-right: none;
text-align: : left;
box-sizing: border-box;
background: black;
margin: 0;
display: inline-block;
color: white;
padding: 17.5px;
font-size: 15px;
width: 6%;
}
input:focus {
outline: none;
}
/*input:before{
border:1px solid black:
content:"";
}
//.icon:before{
border:1px solid black;
content:"";
}
*/
.contextBtn {
//box-shadow:inset 0 0 7px white;
border-top: 1px solid white;
font-size: 15px;
padding: 15px;
display: block;
box-sizing: border-box;
text-align: center;
width: 100%;
background: black;
color: white;
}
ul {
list-style-type: none;
padding: 0 0 5px 0;
margin: 0;
box-shadow: 0 0 3px black;
}
li {
width: 100%;
}
li a {
position: relative;
color: #fff;
//background:#333;
background: linear-gradient(to left, black, #222, black);
font-size: 110%;
text-align: center;
text-decoration: none;
box-sizing: border-box;
margin: auto;
//padding:3%;
padding: 20px;
width: 100%;
height: 6%;
display: block;
overflow: hidden;
box-shadow: 0px -1px 1px white;
transition: width 1s, border-radius 2s, padding 1.5s, background 1.5s, font-size 1s, border-left 2s, border-right 2s;
}
li a:hover:not(.active-item) {
box-sizing: border-box;
display: block;
background: linear-gradient(to left, #1B1B1B, black, #1B1B1B);
font-size: 120%;
margin-left: auto 10%;
width: 80%;
height: 6%;
overflow: hidden;
//padding:4%;
padding: 23px;
border-left: 3px solid green;
border-right: 3px solid green;
border-radius: 25px;
box-shadow: 0 0 3px #67FF67;
box-shadow: inset 0 0 7px #69FF69;
transition: width 1.5s, background 3s linear 0.2, border-radius 1s linear, font-size 0.2s linear 0.1s, margin 2s linear 5s, padding 2s, border-right 1s linear 1s, border-left 1s linear 1s, box-shadow 1s linear 2s;
//transition:width 1.5s, background 1.5s,border-radius 1.5s;
}
li a:active {
background-color: red;
}
li a:before {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
left: 50%;
transition: width 2s linear, left 2s linear, height 0.4s linear 0.1s;
}
li a:hover:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 3px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 2px solid green;
box-sizing: border-box;
bottom: 0;
left: 0;
transition: width 1s linear, left 1s linear, height 0.2s linear 0.1s, box-shadow 3s linear 2s;
}
li a:after {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
right: 50%;
transition: width 2s linear, right 2s linear, height 0.4s linear 0.1s;
}
li a:hover:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 2px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 1px solid green;
box-sizing: border-box;
bottom: 0;
right: 0;
transition: width 1s linear, right 1s linear, height 0.2s linear 0.1s;
}
li a.active-item {
//position: relative;
background: green;
padding: 25px;
border-radius: 30px;
border-top: 0.5px solid #989898;
border-bottom: 0.2px solid black;
width: 80%;
margin: auto;
font-size: 22px;
box-shadow: 0 0 5px #3F7D00;
}
li a.active-item:hover {
border: 1px solid green;
box-shadow: 0 0px 5px #3F7D00;
}
article {
//position: relative;
margin: 2px;
padding: 20px 8px;
box-shadow: 0px 0px 5px black;
//font-size:20px;
}
article p {
font-size: 15px;
}
.divider {
text-align: center;
}
footer {
margin: 0 2px 5px 2px;
background: grey;
}
.foot-container {
background: grey;
//position: relative;
box-sizing: border-box;
box-shadow: 0 1px 5px black;
}
.foot-section {
line-height: 25px;
text-align: center;
color: white;
float: left;
margin: 0.1111111111111111%;
width: 33%;
box-sizing: border-box;
box-shadow: 0 0 1px black;
}
/* .foot-section:after{
content"";
display:table;
clear:both;
}*/
.foot-section h4 {
//text-decoration:underline;
display: inline-block;
margin: 6px auto 8px auto;
font-size: 110%;
}
.foot-section a {
color: white;
text-decoration: none;
display: block;
clear: both;
}
.foot-section a:hover {
font-size: 90%;
box-shadow: inset 0 0 7px #2F2F2F;
}
address {
text-decoration: none;
margin: 5px auto;
line-height: 20px;
box-shadow: 0 0 5px black;
text-align: center;
color: white;
}
.social {
width: 100%;
display: block;
box-sizing: border-box;
text-align: center;
//bottom: 0;
}
.social a {
border: 1px solid black;
border-radius: 8.5px;
width: 17px;
height: 17px;
margin: 2px;
padding: 3px;
display: inline-block;
box-shadow: 0 0 5px black;
}
.social a:hover {
color: white;
background: black;
}
#media only screen and (min-width: 500px) {
body {
background: white;
//position: relative;
}
/* .contextBtn {
display: none;
} */
li a {
overflow-y: hidden;
//position: sticky;
width: 25%;
float: left;
top: 0;
transition: none;
}
li a:hover:not(.active-item) {
width: 25%;
padding: 20px;
z-index: 1;
border-radius: 0%;
font-size: initial;
transition: none;
}
li a.active-item {
display: none;
}
article {
margin: 50px 5px 10px 5px;
padding: 50px 5px;
}
.icon {
width: 8%;
}
.search {
width: 92%;
}
}
/* #media only screen and (min-width:350px) {
.contextBtn {
display: none;
}
.search {
width: 90%;
}
.icon {
width: 8%;
}
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0 ">
<title>About Us </title>
<link rel="stylesheet" href="style/mystyles.css">
<script src="https://kit.fontawesome.com/7e25e18c01.js" crossorigin="anonymous"></script>
<!-- https: //cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js -->
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
</head>
<body>
<header>
<h1 class="page-title">About MixHacxTricks &nbsp &nbsp
<i class="fas fa-id-card-alt"></i></h1>
</header>
<nav>
<div>
<ul>
<div class="search-area"><input class="search" type="search" placeholder="Search">
<!--<label class="icon">-->
<span class="icon"> <i class="fas fa-search"></i></span>
<!--</label>-->
</div>
<span class="contextBtn" id="context"> x </span>
<li class="menu">Home &nbsp <i class="fas fa-home"></i></span></li>
<li class="menu">Android &nbsp <i class="fab fa-android"></i></span></li>
<li class="menu">Windows &nbsp <i class="fab fa-windows"></i></span></li>
<li class="menu">Trending &nbsp <i class="fas fa-chart-line"></i></span></li>
<li class="menu">About <i class="fas fa-id-card-alt"></i></span></li>
</ul>
</div>
</nav>
<article>
<div class="article">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium
lectus. Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus
nullam eget felis. Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
<br>
<p>Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque
viverra mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
<!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->
</div>
<div class="social"><a><i class="fa fa-facebook" aria-hidden="true"></i></a><a><i class="fa fa-telegram" aria-hidden="true"></i></a></div>
</article>
<footer>
<div class="foot-container">
<div class="foot-section">
<h4>Android</h4>
Apps
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Windows</h4>
Softwares
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Others</h4>
WebTools
Source Code
O.S.<br>
</div>
<address>
MixHacxTricks<br>
Web Site: Soon Uploaded<br>
Developer:Priyanshu Agrawal<br>
Contact:-<br>Email:<br>priyanshu#mail2expert.com<br>
</address>
</div>
</footer>
</body>
<script src="js/myscript.js"></script>
</html>

The problem is you are loading your js script before rendering elements on the page.
You can use defer attribute for the script tag to launch script after page rendering.
<script src="js/myscript.js" defer>
getElementsByTagName() is returning a HTMLCollection, so here is a working code:
console.log('test1');
let elemens = document.getElementsByTagName('p');
for (let i=0; i < elemens.length; i++) {
elemens[i].style.color = 'red';
}
console.log(elemens);
And by the way, is it a typo with elemens variable up above?

<p class="mp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium
lectus. Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus
nullam eget felis. Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
<br>
<p class="mp">Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque
viverra mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
<!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->
<!-- always place js in footer -->
<!-- method by classname in javascript-->
<script>
var x = document.getElementsByClassName("mp");
x[0].style.color = "red";
x[1].style.color = "blue";
</script>
<!-- method by tag in jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
jQuery("p").css("color", "yellow");
</script>
</body>
</html>

Wrap Javascript code in DOMContentLoaded event
Like
document.addEventListener("DOMContentLoaded", function(event) {
//do work
});
More information
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
document.addEventListener("DOMContentLoaded", function(event) {
console.log('test1')
let elemens = document.getElementsByTagName('p');
for (let i = 0; i < elemens.length; i++) {
elemens[i].style.color = 'red';
}
});
/* * {
margin: 0;
} */
}
body {
margin: 0;
box-sizing: border-box;
display: block;
background: #eee;
}
header {
color: white;
background: linear-gradient(to left, #222, black, #222);
box-sizing: border-box;
border-bottom: 2px solid #999;
display: block;
overflow: hidden;
width: 100%;
text-align: center;
padding: 22px;
padding-bottom: 20px;
}
header .page-title {
cursor: pointer;
display: block;
font-size: 25px;
font-variant: small-caps;
transition: color 1s linear, font-size 1s linear;
}
header .page-title:hover {
cursor: pointer;
font-size: 25px;
color: green;
text-shadow: 0 0 7px #004800;
transition: color 1s linear, font-size 1s linear, text-shadow 2s linear;
}
//not working.pagetitle:hover < header {background:black;}
.search {
float: left;
text-decoration: none;
font-size: 15px;
padding: 17.5px;
display: inline-block;
border: none;
border-left: 1px solid white;
box-sizing: border-box;
color: white;
background: black;
width: 88%;
}
.icon {
float: left;
border-right: none;
text-align: : left;
box-sizing: border-box;
background: black;
margin: 0;
display: inline-block;
color: white;
padding: 17.5px;
font-size: 15px;
width: 6%;
}
input:focus {
outline: none;
}
/*input:before{
border:1px solid black:
content:"";
}
//.icon:before{
border:1px solid black;
content:"";
}
*/
.contextBtn {
//box-shadow:inset 0 0 7px white;
border-top: 1px solid white;
font-size: 15px;
padding: 15px;
display: block;
box-sizing: border-box;
text-align: center;
width: 100%;
background: black;
color: white;
}
ul {
list-style-type: none;
padding: 0 0 5px 0;
margin: 0;
box-shadow: 0 0 3px black;
}
li {
width: 100%;
}
li a {
position: relative;
color: #fff;
//background:#333;
background: linear-gradient(to left, black, #222, black);
font-size: 110%;
text-align: center;
text-decoration: none;
box-sizing: border-box;
margin: auto;
//padding:3%;
padding: 20px;
width: 100%;
height: 6%;
display: block;
overflow: hidden;
box-shadow: 0px -1px 1px white;
transition: width 1s, border-radius 2s, padding 1.5s, background 1.5s, font-size 1s, border-left 2s, border-right 2s;
}
li a:hover:not(.active-item) {
box-sizing: border-box;
display: block;
background: linear-gradient(to left, #1B1B1B, black, #1B1B1B);
font-size: 120%;
margin-left: auto 10%;
width: 80%;
height: 6%;
overflow: hidden;
//padding:4%;
padding: 23px;
border-left: 3px solid green;
border-right: 3px solid green;
border-radius: 25px;
box-shadow: 0 0 3px #67FF67;
box-shadow: inset 0 0 7px #69FF69;
transition: width 1.5s, background 3s linear 0.2, border-radius 1s linear, font-size 0.2s linear 0.1s, margin 2s linear 5s, padding 2s, border-right 1s linear 1s, border-left 1s linear 1s, box-shadow 1s linear 2s;
//transition:width 1.5s, background 1.5s,border-radius 1.5s;
}
li a:active {
background-color: red;
}
li a:before {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
left: 50%;
transition: width 2s linear, left 2s linear, height 0.4s linear 0.1s;
}
li a:hover:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 3px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 2px solid green;
box-sizing: border-box;
bottom: 0;
left: 0;
transition: width 1s linear, left 1s linear, height 0.2s linear 0.1s, box-shadow 3s linear 2s;
}
li a:after {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
right: 50%;
transition: width 2s linear, right 2s linear, height 0.4s linear 0.1s;
}
li a:hover:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 2px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 1px solid green;
box-sizing: border-box;
bottom: 0;
right: 0;
transition: width 1s linear, right 1s linear, height 0.2s linear 0.1s;
}
li a.active-item {
//position: relative;
background: green;
padding: 25px;
border-radius: 30px;
border-top: 0.5px solid #989898;
border-bottom: 0.2px solid black;
width: 80%;
margin: auto;
font-size: 22px;
box-shadow: 0 0 5px #3F7D00;
}
li a.active-item:hover {
border: 1px solid green;
box-shadow: 0 0px 5px #3F7D00;
}
article {
//position: relative;
margin: 2px;
padding: 20px 8px;
box-shadow: 0px 0px 5px black;
//font-size:20px;
}
article p {
font-size: 15px;
}
.divider {
text-align: center;
}
footer {
margin: 0 2px 5px 2px;
background: grey;
}
.foot-container {
background: grey;
//position: relative;
box-sizing: border-box;
box-shadow: 0 1px 5px black;
}
.foot-section {
line-height: 25px;
text-align: center;
color: white;
float: left;
margin: 0.1111111111111111%;
width: 33%;
box-sizing: border-box;
box-shadow: 0 0 1px black;
}
/* .foot-section:after{
content"";
display:table;
clear:both;
}*/
.foot-section h4 {
//text-decoration:underline;
display: inline-block;
margin: 6px auto 8px auto;
font-size: 110%;
}
.foot-section a {
color: white;
text-decoration: none;
display: block;
clear: both;
}
.foot-section a:hover {
font-size: 90%;
box-shadow: inset 0 0 7px #2F2F2F;
}
address {
text-decoration: none;
margin: 5px auto;
line-height: 20px;
box-shadow: 0 0 5px black;
text-align: center;
color: white;
}
.social {
width: 100%;
display: block;
box-sizing: border-box;
text-align: center;
//bottom: 0;
}
.social a {
border: 1px solid black;
border-radius: 8.5px;
width: 17px;
height: 17px;
margin: 2px;
padding: 3px;
display: inline-block;
box-shadow: 0 0 5px black;
}
.social a:hover {
color: white;
background: black;
}
#media only screen and (min-width: 500px) {
body {
background: white;
//position: relative;
}
/* .contextBtn {
display: none;
} */
li a {
overflow-y: hidden;
//position: sticky;
width: 25%;
float: left;
top: 0;
transition: none;
}
li a:hover:not(.active-item) {
width: 25%;
padding: 20px;
z-index: 1;
border-radius: 0%;
font-size: initial;
transition: none;
}
li a.active-item {
display: none;
}
article {
margin: 50px 5px 10px 5px;
padding: 50px 5px;
}
.icon {
width: 8%;
}
.search {
width: 92%;
}
}
/* #media only screen and (min-width:350px) {
.contextBtn {
display: none;
}
.search {
width: 90%;
}
.icon {
width: 8%;
}
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0 ">
<title>About Us </title>
<link rel="stylesheet" href="style/mystyles.css">
<script src="https://kit.fontawesome.com/7e25e18c01.js" crossorigin="anonymous"></script>
<!-- https: //cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js -->
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
</head>
<body>
<header>
<h1 class="page-title">About MixHacxTricks &nbsp &nbsp
<i class="fas fa-id-card-alt"></i></h1>
</header>
<nav>
<div>
<ul>
<div class="search-area"><input class="search" type="search" placeholder="Search">
<!--<label class="icon">-->
<span class="icon"> <i class="fas fa-search"></i></span>
<!--</label>-->
</div>
<span class="contextBtn" id="context"> x </span>
<li class="menu">Home &nbsp <i class="fas fa-home"></i></span></li>
<li class="menu">Android &nbsp <i class="fab fa-android"></i></span></li>
<li class="menu">Windows &nbsp <i class="fab fa-windows"></i></span></li>
<li class="menu">Trending &nbsp <i class="fas fa-chart-line"></i></span></li>
<li class="menu">About <i class="fas fa-id-card-alt"></i></span></li>
</ul>
</div>
</nav>
<article>
<div class="article">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium lectus.
Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus nullam eget felis.
Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
<br>
<p>Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque viverra
mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
<!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->
</div>
<div class="social"><a><i class="fa fa-facebook" aria-hidden="true"></i></a><a><i class="fa fa-telegram" aria-hidden="true"></i></a></div>
</article>
<footer>
<div class="foot-container">
<div class="foot-section">
<h4>Android</h4>
Apps
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Windows</h4>
Softwares
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Others</h4>
WebTools
Source Code
O.S.<br>
</div>
<address>
MixHacxTricks<br>
Web Site: Soon Uploaded<br>
Developer:Priyanshu Agrawal<br>
Contact:-<br>Email:<br>priyanshu#mail2expert.com<br>
</address>
</div>
</footer>
</body>
</html>

You are loading the script tag in the Head without any delay. So when the page loads, it loads JS first then the body of the Page. I will suggest calling it after the body so that the whole page loads first and after that, the JS loads so that it can have access to the DOM otherwise it will not find any object. That is why it is not working. Load it like this:
</body>
<script src="name.js"></script>
</html>
After the body tag and it should work just fine.

This is mostly because your javaScript is loading before the completely loading of DOM.
there is two Way you can Solve this
1st By wrapping you js code with
window.onload = function() {
// Your code
}
2nd By placing your Script tag after body.
</body>
<script src="name.js"></script>
</html>

Can you tell me how to add an image and a text to my html slideshow?

thank you so much for your help in advance. I started coding few days ago, and I have issues with my slider. My text h1 does not appear on top of my slider. I tried the Z-index but it did not work. it seems that the image appear next to my slide and not on it. i tried different things, but it is still the same. Image appears, but next to the sliders,or the text appears under the image.
here is my html and my css file. Hopefully someone can help me to sort it out/
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: #484848;
max-width: 100%;
overflow-x: hidden;
}
p {
font-size: 16px;
margin: 0;
padding: 0;
}
a:link {
font-size: 16px;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
h1,h2,h3,h4,h5,h6,ul,ol,li{
margin: 0;
padding: 0;
}
ul,ol{
list-style-type;
}
::selection {
color: #fff;
background-color: #333;
}
::-moz-selection {
color: #fff;
background-color: #333;
}
/*-----------Top-Nav-------- */
.top-nav {
position: fixed;
width: 100%;
border-bottom: 1px solid #c9c9c9;
float: left;
display: block;
height: 95px;
background: #fff;
z-index: 99999999999;
}
.top-nav .logo{
width: 100%;
float: left;
display: block;
height: 95px;
border-right: 1px solid #e9e9e9;
}
.top-nav .logo img {
width: 100%;
padding: 14px 0;
transition: all .9s;
-webkit-filter: grayscale(0%);
}
.top-nav .logo a:hover img {
-webkit-filter: grayscale(100%);
}
/*-----------Top-Nav-Search-------- */
.top-nav .search-container {
float: left;
width:100%;
display:block;
padding:22px 0;
}
.top-nav form{
position:relative;
display:block;
}
.top-nav input[type="text"] {
width: 100%;
background: #fff;
padding: 10px 12px;
border: 1px solid #e1e1e1;
border-right: none;
color: #888;
font-size: 14px;
height:42px;
}
.top-nav .search-container button {
float: right;
padding: 8px 15px;
background: orange;
font-size: 17px;
height: 42px;
border: none;
cursor: pointer;
position: absolute;
right: 0;
color: #fff;
}
.top-nav .search-container button:hover {
background: #ccc;
}
/*-----------Top-Nav-Navigation-------- */
.navigation{
width: auto;
float: right;
display: block;
}
.top-nav ul {
float: right;
padding: 35px 0;
margin: 0;
width: auto;
display: block;
}
.top-nav ul li {
list-style: none;
margin: 0 34px;
display: inline-block;
}
.top-nav ul li a {
color: #777;
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
letter-spacing: .5px;
transition: all .9s;
}
.top-nav ul li a:hover {
color: orange;
}
/*-----------Slideshow----------- */
.slideshow-container {
width: 100%;
position: relative;
margin: auto;
float: left;
display: block;
margin-top: 94px;
}
.slideshow-container .slider-text{
width:100%;
float:left;
display:block;
background:#008080;
height:510px;
}
.slideshow-container .slider-text h1 {
d
color: #fff;
font-weight: 400;
text-align: center;
width: 667px;
display: block;
margin: 130px auto auto;
font-size: 35px;
font-weight: 600;
}
.slideshow-container .slider-text p {
color: #fff;
font-size: 17px;
text-align: center;
max-width: 700px;
display: block;
margin: 15px auto auto;
font-weight: 400;
letter-spacing: 0.5px;
}
.slideshow-container .prev, .slideshow-container .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 11px 18px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 48px;
height: 48px;
width: 48px;
background: rgba(0,0,0, 0.4);
}
.slideshow-container .next{
right: 16px;
}
.slideshow-container .prev{
left: 16px;
}
.slideshow-container .prev:hover, .slideshow-container .next:hover {
background-color: rgba(0,0,0,1);
text-decoration:none;
}
.slider-image {
display: flex
}
/*-----------Slideshow-dot----------- */
.dot-area{
width:100%;
float:left;
display:block;
padding:20px 0;
background:orange;
}
.dot-area .dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 5px;
background-color: #f9f9f9;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot-area .active, .dot-area .dot:hover {
background-color: #008080;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
/*-----------your-name----------- */
.your-area{
width:100%;
float:left;
display:block;
background:#003333;
}
.your-area h1{
padding:100px 0;
font-size:20px;
color:#fff;
text-align: center;
font-weight:600;
}
.your-area h1 span{
color:white;
font-size:20px;
/*:::::::::::::::::Responsive Media Query:::::::::::::::::::*/
#media only screen and (max-width:1279px){
.top-nav ul li {
margin: 0 20px;
}
}
#media only screen and (max-width:1023px){
}
#media only screen and (max-width:979px){
.top-nav {
height: 70px;
}
.top-nav .logo {
height: 70px;
}
.top-nav .search-container {
padding: 13px 0;
}
.top-nav ul li a {
font-size: 14px;
letter-spacing: 0;
}
.top-nav ul {
padding: 24px 0;
}
.slideshow-container {
margin-top: 68px;
}
.slideshow-container .slider-text h1 {
width: 560px;
font-size: 27px;
}
.slideshow-container .slider-text {
height: 400px;
}
}
#media only screen and (max-width:899px){
.slideshow-container .slider-text p {
max-width: 600px;
}
.top-nav ul li {
margin: 0 15px;
}
.your-area h1 {
font-size: 18px;
}
.your-area h1 span{
font-size: 22px;
}
}
#media only screen and (max-width:799px){
}
#media only screen and (max-width:767px){
.top-nav {
height: auto;
}
.top-nav .logo {
height: auto;
border:0;
}
.top-nav .logo img {
width: 180px;
margin: auto;
display:block;
}
.top-nav .search-container {
padding: 0;
}
.navigation {
float: none;
margin: auto;
}
.top-nav ul {
float: none;
padding: 12px 0;
width: auto;
display: table;
margin: auto;
}
.top-nav input[type="text"] {
height: 38px;
}
.top-nav .search-container button {
height: 38px;
}
.slideshow-container {
margin-top: 170px;
}
.slideshow-container .slider-text h1 {
width: 100%;
padding: 0 90px;
}
.slideshow-container .slider-text p {
max-width: 100%;
padding: 0 90px;
}
}
#media only screen and (max-width:639px){
}
#media only screen and (max-width:599px){
.slideshow-container .slider-text h1 {
margin: 65px auto auto;
}
}
#media only screen and (max-width:479px){
.top-nav ul li {
margin: 0 9px;
}
.slideshow-container .slider-text h1 {
padding: 0 85px;
font-size: 16px;
}
.slideshow-container .slider-text p {
padding: 0 78px;
font-size:12px;
}
.slideshow-container .slider-text {
height: 350px;
}
.slideshow-container .slider-text h1 {
margin: 100px auto auto;
}
.your-area h1 {
font-size: 13px;
}
.your-area h1 span {
font-size: 14px;
}
}
#media only screen and (max-width:359px){
.top-nav ul li {
margin: 0 5px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>ElephantRoom</title>
<meta charset="utf-8" />
<meta name"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
<link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Top-NAV HTML-->
<section class="top-nav">
<div class="col-md-2 col-sm-2 col-xs-12">
<div class="logo">
<img src="logo.png" alt="ElephantRoom"/>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Keywords.." name="search">
<button type="submit">Search</button>
</form>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="navigation">
<ul>
<li>Become a Host</li>
<li>Help</li>
<li>Sign Up</li>
<li>Log In</li>
</ul>
</div>
</div>
</section>
<section class="slideshow-container">
<div class="mySlides fade">
<div class="slider-image">
<img src="image1.jpg" alt="image1"/>
<div class="slider-text">
<h1><span> why book an expensive hotel when you can book a cheap apartment</span></h1>
<p>Lorem ipsum dolor sit amet, consecteur adipiscing
elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class="slider-text">
<h1>We have you covered anywhere you go in Africa</h1>
<p>Lorem ipsum dolor sit amet, consecteur adipiscing
elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
</div>
</div>
<div class="mySlides fade">
<div class="slider-text">
<h1> We believe in a world with no frontier</h1>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</section>
<section class="dot-area" 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>
</section>
<section class="your-area" style="text-align:center">
<h1>Designed by <span>Sangbe Torndou Jean Marc</span></h1>
</section>
<!-- javascript import-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var slideIndex = 1;
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";
}
</script>
</body>
</html>
enter image description here

Use css for h1
.slider-text h1 {position:absolute; z-index:9999999}

hey hi here is the solution for u slider with right content:
HTML:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="holder col-sm-8">
<img class="img-responsive" src="http://placehold.it/1000x400" alt="...">
</div>
<div class="col-sm-4">
<div class="carousel-caption">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu
pede mollis pretium.</p>
<button type="button" class="btn btn-default">Default</button>
</div>
</div>
</div>
<div class="item">
<div class="holder col-sm-8">
<img class="img-responsive" src="http://placehold.it/1000x400" alt="...">
</div>
<div class="col-sm-4">
<div class="carousel-caption">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<button type="button" class="btn btn-default">Default</button>
</div>
</div>
</div>
<div class="item">
<div class="holder col-sm-8">
<img class="img-responsive" src="http://placehold.it/1000x400" alt="...">
</div>
<div class="col-sm-4">
<div class="carousel-caption">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<button type="button" class="btn btn-default">Default</button>
</div>
</div>
</div>
</div>
<div class="controllers col-sm-8 col-xs-12">
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
</div>
CSS:
.carousel-caption {
position: relative;
left: 0%;
right: 0%;
bottom: 0px;
z-index: 10;
padding-top: 0px;
padding-bottom: 0px;
color: #000;
text-shadow: none;
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
}
.carousel {
position: relative;
}
.controllers {
position: absolute;
top: 0px;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
JAVASCRIPT:
<SCRIPT>
$(window).bind("load resize slid.bs.carousel", function() {
var imageHeight = $(".active .holder").height();
$(".controllers").height( imageHeight );
console.log("Slid");
});
</SCRIPT>
Try this let me know ...

Onload my website wont load images from gallery but when clicking slider arrows images appear

Website link: https://tomspink.co.uk/portfolio-lovevelo
When clicking on the slider the images will load in, I am not sure why they don't load in on-load. I am using the owl slide: https://owlcarousel2.github.io/OwlCarousel2/
Any help would be great! :)
.owl-carousel .owl-pagination {
text-align: center;
}
.owl-carousel .owl-pagination .owl-page {
border-radius: 8px;
width: 8px;
height: 8px;
display: inline-block;
margin: 0 4px;
position: relative;
background: rgba(255, 255, 255, .7);
display: inline-block;
overflow: hidden;
height: 6px;
width: 6px;
margin: 6px 4px;
text-indent: -200%;
z-index: 1000;
border-radius: 6px;
box-shadow: 0 0 1px rgba(17, 17, 17, .4);
transition: all .3s cubic-bezier(0, 0, .58, 1);
}
.owl-carousel .owl-pagination .owl-page.active {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.image-slider {
position: relative;
}
.image-slider img {
width: 100%;
}
.image-slider.owl-carousel .owl-prev,
.image-slider.owl-carousel .owl-next {
background: rgba(0, 0, 0, .1);
position: absolute;
border-radius: 8px;
height: 50px;
width: 50px;
top: 50%;
margin-top: -25px;
text-align: center;
line-height: 50px;
font-size: 16px;
display: block;
color: #fff;
transition: .2s linear;
}
.image-slider.owl-carousel .owl-prev:hover,
.image-slider.owl-carousel .owl-next:hover {
background: rgba(0, 0, 0, .3);
}
.image-slider.owl-carousel .owl-prev {
left: 15px;
}
.image-slider.owl-carousel .owl-next {
right: 15px;
}
.image-slider .owl-pagination {
margin-top: -28px;
}
.image-slider .owl-dots {
margin-top: 20px;
}
.tms-slides {
text-align: center;
}
.tms-slides .tms-icons h2 {
line-height: 1;
font-size: 32px;
margin: 0 0 20px;
}
.tms-slides blockquote {
border: 0;
line-height: 1.8;
font-size: 22px;
padding: 20px 0;
margin: 0;
}
<section class="module portfolio-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="portfolio-content">
<div class="gallery">
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Intro-Artwork-1920x1280-2.jpg" alt=""></div>
<figcaption class="gallery-caption">KWD Chartered Surveyors</figcaption>
</figure>
</div>
<div class="portfolio-content">
<div class="image-slider owl-carousel fadeOut">
<img src="assets/images/portfolio/LV-carousel-mac-wtr.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-gall.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-404.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-about.jpg" alt="">
</div>
</div>
<div class="gallery gallery-columns-2">
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Letter-card-1920.jpg" alt=""></div>
<figcaption class="gallery-caption">Business card</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Business-card-1920.jpg" alt=""></div>
<figcaption class="gallery-caption">Business Card & Letterhead</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
Aenean vitae bibendum erat. Maecenas lobortis libero sed pellentesque aliquam. Morbi non rhoncus nulla, volutpat bibendum sem. Vestibulum sed justo in lorem vulputate ullamcorper. Sed sollicitudin felis a mi consectetur mattis. Maecenas luctus, ex non vestibulum efficitur, neque urna faucibus justo, in porta massa magna id ex. Duis ac eleifend odio. Pellentesque id metus pharetra, lobortis massa a, porttitor nisi. Aliquam erat volutpat. Nullam nibh nulla, porta ac orci sit amet, accumsan porta sem. Cras pharetra, lectus et semper gravida, ligula sem posuere orci, id tincidunt risus sapien non leo. Quisque ac aliquet nisi. Nam placerat tempus leo, non dictum dui vestibulum vel.

Parallax effect - force text block to behave like background-attachment: fixed

I'm attempting to create a simple parallax effect where each 100vh section scrolls up to reveal the next section (new background color, background image, and text block) while keeping the text block fixed relative to its parent container.
I've put together a static example of what I'm trying to achieve using screenshots of each section: static example. Of course I'd like the content to be dynamic rather than flat images.
Here's a simple version of my code thus far:
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>
The parallax effect is achieved using CSS background-attachment: fixed and works just fine; the trouble is with the text blocks. I'd like to keep them "pinned" in place and centered within their section. If they are set to position: fixed they of course overlap each other and all show up in the first section. If they are set to any other position attribute, they will simply scroll like any other element.
Now, I realize that setting an element's position to fixed means it can no longer be relative to its parent element; it escapes the flow so to speak, but I'm trying to determine if there's a way to achieve the effect with some advanced CSS or even a JS alternative.
I've tried numerous HTML/CSS combinations (wrappers within wrappers, etc.) and I've also attempted various javascript solutions such as rellax, jarallax, and ScrollMagic, but everything I've come across is far too robust for my needs. I've searched around for the better part of the day hoping to find an example of what I'm attempting, but no luck.

In a previous question I did a similar effect with image and using some JS so am going to use the same technique to reproduce this using content as I don't think there is a pure CSS solution. So the idea is to simulate the fixed position by using absolute position and adjusting the top property dynamically on scroll.
Here is an example where I also adjusted some of the CSS to make it easier. I will also rely on CSS variables to make the JS code very light so we can manage everything with CSS.
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll + "px");
}
:root {
--scroll-var: 0px
}
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
overflow: hidden;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
position: relative; /*Mandatory for the overflow effect*/
height: 100vh;
}
section.first {
background: linear-gradient(rgba(74, 180, 220, .85), rgba(74, 180, 220, .85)), url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
/* the first section so top start from 0*/
top: calc((0 * 100vh) + var(--scroll-var));
}
section.second {
background: linear-gradient(rgba(103, 198, 180, .85), rgba(103, 198, 180, .85)), url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
/* the second section so we need to remove the height of top section
to have the same position so -100vh and we do the same for the other sections
*/
top: calc((-1 * 100vh) + var(--scroll-var));
}
section.third {
background: linear-gradient(rgba(5, 123, 188, .85), rgba(5, 123, 188, .85)), url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
top: calc((-2 * 100vh) + var(--scroll-var));
}
section.fourth {
background: linear-gradient(rgba(187, 216, 100, .85), rgba(187, 216, 100, .85)), url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
top: calc((-3 * 100vh) + var(--scroll-var));
}
.content {
position: absolute;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.copy {
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
max-width: 300px;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>

I have put up a little snippet, that works. But you need to figure out the exact math behind positioning yourself. And of course take care of the details
$( document ).ready(function() {
$(document).scroll(function() {
// get the position of my first slide, so I know where did I move
var rect = $(".first")[0].getBoundingClientRect();
// get height of viewport
var screenHeight = $( window ).height();
// setting offset for every .copy element on page, so they share
// the same offset from top (are on top of each other)
// Now you just need to figure out exact math here
$(".copy").offset({ top: screenHeight*1.5-rect.bottom});
});
});
body {
margin: 0;
padding: 0;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
section {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
/* added overflow hidden, so that my boxes don't flow out of the slide */
overflow: hidden;
}
section.first {
background: url(https://picsum.photos/1920/500/?image=1057);
}
section.first .content {
background-color: rgba(74, 180, 220, .85);
}
section.second {
background: url(https://picsum.photos/1920/500/?image=1067);
}
section.second .content {
background-color: rgba(103, 198, 180, .85)
}
section.third {
background: url(https://picsum.photos/1920/500/?image=1033);
}
section.third .content {
background-color: rgba(5, 123, 188, .85);
}
section.fourth {
background: url(https://picsum.photos/1920/500?image=1063);
}
section.fourth .content {
background-color: rgba(187, 216, 100, .85)
}
.content {
position: relative;
height: 100vh;
width: 100%;
padding: 50px 0;
}
.copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 300;
}
.button {
border: 2px solid #fff;
border-radius: 3px;
padding: 15px 25px;
display: inline-block;
width: auto;
font-family: 'Assistant', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease all;
}
.button:hover {
background: #fff;
color: #333;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section class="first">
<div class="content">
<div class="copy">
<h2>Header 1 </h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="second">
<div class="content">
<div class="copy">
<h2>Header 2</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="third">
<div class="content">
<div class="copy">
<h2>Header 3</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</section>
<section class="fourth">
<div class="content">
<div class="copy">
<h2>Call to action</h2>
<a class="button">Button</a>
</div>
</div>
</section>
</body>

We Keep Coding

JavaScript is the programming language of the Web.

Save data from form using javascript - javascript

Related

Tooltip partially obscured by outer div

JS is not working in my web page,Explained below,any solution?

Can you tell me how to add an image and a text to my html slideshow?

Onload my website wont load images from gallery but when clicking slider arrows images appear

Parallax effect - force text block to behave like background-attachment: fixed

Categories

Resources