We Keep Coding

Links in footer wont display inline

I'm trying to put some links in a footer next to each other, separated by the character "|". But I have a navbar whose styles interferes with the footer's links.
I need something like this :
This is my code (it doesn't display perfectly, but you get the gist):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
As you can see the links aren't displaying inline. How can I fix this?

Wrap the links in a div with a class (I gave it footer-links) and give it the following styles:
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>

How can I create modal popup effect, If I'm using separate html/css pages?

I want to create a Modal Popup effect every time I click on "Login" on my index page.
The only thing is, I have created separate HTML/CSS pages (for example, index.html/css, login.html/css, etc..).
I'm confused, how to use JavaScript to make this happen.
As I have separate pages. I know how to apply modal popup effect, on single html/css page using JavaScript.
But I don't know how to make this happen if I'm using several different pages. My code looks messed up a bit. All my pages are linked to each other properly but without any effect.
Below is my index.html code and login.html code along with the css code.
index.html code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<link href="login.html">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>MyWeb</title>
</head>
<body>
<div class="header">
<h1> <i class="fas fa-music"></i>Spotify</h1>
<div class="searchbox">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<div class="siderbarMenuInner">
<li> <div class="show-login-button"> <i class="fas fa-sign-in-alt"></i> login</div></li>
<li> <i class="fas fa-home"></i> Home </li>
<li> <i class="fas fa-search"></i> browse </li>
<li> <i class="fab fa-itunes-note"></i> My Playlist</li>
<li> About </li>
</ul>
<div class="Instagram">
<i class="fab fa-instagram"></i>
</div>
<div class="Twitter">
<i class="fab fa-twitter"></i>
</div>
<div class="Facebook">
<i class="fab fa-facebook-f"></i>
</div>
</div>
</body>
</html>
index.css code:-
body {
overflow-x: hidden;
height: 100%;
background-color: white;
}
body {
font-family: tahoma;
margin: 0;
padding: 0;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #fc466b;
position: fixed;
height: 50px !important;
overflow: hidden;
z-index: 10;
}
h1 {
margin: 1px;
top: 13%;
color: #2f3640;
text-decoration: none;
position: absolute;
left: 3%;
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
h1:hover {
color: white;
}
h1 i {
font-size: 20px;
letter-spacing: 8px;
}
.searchbox {
position: absolute;
border-radius: 40px;
right: 2%;
background: #2f3640;
height: 40px;
top: 6%;
padding: 0.1%;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
.search-btn {
color: #fc466b;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
align-items: center;
justify-content: center;
transition: 0.4s;
text-decoration: none;
}
.searchbox:hover>.search-txt {
width: 500px;
padding: 0 6px;
}
.searchbox:hover>.search-btn {
background: white;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 50px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 50px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #fc466b, #3f5efb);
}
.siderbarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.siderbarMenuInner li {
list-style: none;
color: #2f3640;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
padding: 30px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
text-decoration: none;
text-align: center;
transition: 0.4s;
}
.siderbarMenuInner li:hover {
color: white;
}
.siderbarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
text-decoration: none !important;
color: inherit;
}
.sidebarMenuInner li a {
color: white;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
a {
text-decoration: none !important;
color: inherit;
}
.Instagram {
top: 90%;
left: 16%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Instagram:hover {
color: black;
}
.Twitter {
text-align: center;
top: 90%;
left: 45%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Twitter:hover {
color: black;
}
.Facebook {
text-align: center;
top: 90%;
left: 75%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Facebook:hover {
color: black;
}
login.html code:-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animated Login Form</title>
<link rel="stylesheet" href="login.css">
<link rel="" href="index.html">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
>
<div class="login-form">
<form class="login-box" action="index.html" method="post">
<h1>Login</h1>
<input class="txtb" type="text" name="" placeholder="Username">
<input class="txtb" type="password" name="" placeholder="Password">
<input class="login-btn" type="submit" name="" value="Login">
</form>
</div>
</body>
</html>
login.css code:-
* {
font-family: "Monteserrat", sans-serif;
}
body {
margin: 0;
padding: 0;
}
.login-form{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #fc466b, #3f5efb);
transition: 0.4s;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.login-box h1 {
font-weight: 400;
text-transform: uppercase;
margin-top: 0;
}
.txtb {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #1c2830;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.txtb:focus {
width: 280px;
border-color: #000000;
}
.login-btn {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #000000;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.login-btn:hover {
background: #000000;
}
JS code for modal on single HTML page:-
// GetElements
const modal = document.querySelector('#modal');
const modal_btn = document.querySelector('#modal-btn');
const close_btn = document.querySelector('.close');
//Event_Listener
modal_Btn.addEventListener('click', openModal);
close_Btn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
//Open & Close
function openModal() {
modal.style.display = 'block';
}
function closeModal() {
modal.style.display = 'none';
}

If I'm understand correctly, you are trying to use a separate HTML file as a modal, right? If that correct, try to watch this answer :
Open Modal (bootstrap) from other html-file

GetAjax gets the remote file and load_modal is just a shorthand function that calls getajax and loads the modal.
function getAjax(url, success) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
};
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send();
return xhr;
}
function load_modal(url){
getAjax(url, function(data){
modal.innerHTML = data;
modal.style.display = 'block';
});
}

Profile card going outside of the browser window

I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.
it is coming this way
I need it this way
here is the code
<div class="popover__wrapper">
<a>Cyril</a>
<div class="push popover__content">
<div class="contact-card-user">
<div class="left-side">
<img src="../assets/img/profiles/male-user.jpg" alt="">
</div>
<div class="right-side">
<div class="details-wrapper">
<h3>Full Name </h3>
<div class="privilege">Administrator</div>
<div class="designation">Designer</div>
<div class="description">+973 1234 5678</div>
<div class="description">info#company.com</div>
</div>
</div>
</div>
</div>
<style>
.popover__wrapper {
position: relative;
margin-top: 0;
display: block;
cursor: pointer;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 40px;
bottom: -90px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: -20px;
bottom: 100px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #a5053d;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.contact-card-user {
background: #fff;
display: flex;
width: max-content;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
margin-right: 20px;
width: 100%;
max-width: 200px;
}
.contact-card-user .left-side img {
width: 100%;
height: auto;
}
.contact-card-user .right-side {
padding-left: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
width: 100%;
max-width: 260px;
}
.contact-card-user .details-wrapper {
text-align: left;
}
.contact-card-user .details-wrapper h3 {
color: #333;
font-size: 16px;
white-space: pre-wrap;
overflow: hidden;
margin-bottom: 1px;
line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
display: inline-block;
color: #a5053c;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.7px;
margin-bottom: 13px;
margin-top: 6px;
border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
color: #333;
margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
</style>
I think may be javascript can solve. Any help?
Thank you

Javascript to reveal hidden DIV

I have been working on a code to display more details when an item is clicked. So far I have come up with this.
HTML:
<script>
$(document).ready(function(){
$('.toggleTarget').hide();
$(".products-item")
.click(function() {
var id = $(this).attr('data-number');
var toggleTargetId = $(this).attr('data-target');
var toggleTarget = $(document.getElementById(toggleTargetId));
if ( id.val() === "0" ) {
toggleTarget.show("slow", "swing");
id.val(1)
} else {
toggleTarget.hide("slow", "swing");
id.val(0)
}
});
});
</script>
<div id="info-1-btn" class="products-item" data-target="info-1" data-number="0">
<div class="products-item-img buoy-1"></div><br />
<div class="products-item-text">Sign Float</div>
<div class="products-item-details">
<div id="info-1" class="products-item-details toggleTarget">
<table class="products-item-details-table" cellpadding="15px">
<tr>
<th>Sizes:</th>
<th>Material:</th>
</tr>
<tr>
<td>500mm</td>
<td>*MATERIAL*</td>
</tr>
</table>
</div>
</div>
</div>
CSS:
.products-item {
height: auto;
width: 300px;
display: inline-block;
margin: 10px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border: solid 2px #f5f5f5;
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.products-item-img {
height: auto;
width: auto;
display: inline-block;
border-radius: 140px;
transition: all 0.25s ease-in-out;
z-index: 10;
}
.products-item-text {
width: auto;
height: auto;
bottom: 0px;
left: 0px;
margin: 10px;
padding: 15px;
display: inline-block;
font-family: Comfortaa;
font-size: 14px;
text-align: center;
border-radius: 5px;
color: #333;
background-color: transparent;
transition: all 0.25s ease-in-out;
}
.products-item:hover {
background-color: #bae9ff;
border: solid 2px #bae9ff;
}
.products-item:hover .products-item-text {
color: #000;
border-radius: 5px;
}
.products-item-details-table {
background-color: transparent;
width: 100%;
font-family: Comfortaa;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
table-layout: fixed;
white-space: nowrap;
/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
background-color: #fff;
width: 600px;
}
.products-item-details-table th {
background-color: #ccc;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
}
.products-item-details-table td {
background-color: #fff;
width: 200px;
text-align: left;
}
I am looking to reveal products-item-details when I click on the selected products-item div.
If you require more information, please let me know.
Thank you.

Random movement from slideshow

I got a slideshow on my website but for some reason the slide make a movement that should not be the default one, it jumps from 1st slide for 3rd slide and then back to the 1st.
Then if you use the manual navigation (the circles) and go 1,2,3,4 he makes the correct movement but then he starts to make weird movements, just test by yourself a few times and you will see what i am talking about. My goal is to make 1st slide, to 2, to 3 then 4 and reset, simple.
Site live: http://optential.co.nf/
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function () {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function (i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) { button.addClass('current') }
button.click(function(){
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function () {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function(){
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
background-size: cover;
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
width: 100%;
height: 100%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: 100%;
position: absolute;
}
.controls {
width: 350px;
margin: 5px auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.mobile {
min-width: 1300px;
}
.mobile .bar {
background-size: cover;
width: 100%;
background: #F4F4F4;
color: #595B61;
min-width: 700px;
display: flex;
justify-content: space-around;
text-align: center;
}
.mobile .bar img {
width: 100%;
background-size: cover;
display: block;
margin: 0 auto;
}
.mobile .content {
background: radial-gradient(ellipse at 55% 50%, #F9F9F9 40%,#B6B5BD 120%);
position: relative;
}
.mobile .content .mobimg {
padding: 3em;
margin-left:10%;
}
.mobile .content .mob {
position: absolute;
top: 0;
left: 60%;
}
.mobile .content h1 {
color: #D6D6D4;
font-size: 120px;
margin-bottom: 0;
}
.mobile .content p {
margin-left: 15px;
width: 410px;
color: #929584;
font-size: 12px;
margin-bottom: 18px
}
.mobile .content .sep {
height: 15px;
border-bottom: 1px solid #C24147;
text-align: center;
}
.mobile .content .sep img {
padding: 0 8px;
background: #F9F9F9;
}
.mobile .content h2 {
margin-left: 15px;
color: #929584;
font-size: 15px;
font-weight: 600;
text-align: center;
}
.mobile .content .buttons {
display: flex;
justify-content: space-around;
width: 400px;
margin-left: 20px;
}
.mobile .content .button {
display: block;
background: #010101;
color: #F8F8F8;
text-decoration: none;
width: 160px;
height: 50px;
border-radius: 6px;
position: relative;
}
.mobile .content .button:hover {
background: #222;
}
.mobile .content .button.apple img {
margin: 10px 0 0 10px;
}
.mobile .content .button.apple span {
font-size: 11px;
font-weight: 400;
position: absolute;
top: 4px; left: 42px;
}
.mobile .content .button.apple h3 {
font-size: 22px;
font-weight: 600;
position: absolute;
top: 14px; left: 42px;
margin: 0;
}
.mobile .content .button.google img {
margin: 18px 0 0 8px;
}
.mobile .content .button.google span {
font-size: 10px;
font-weight: 600;
position: absolute;
top: 4px; left: 40px;
text-transform: uppercase;
}
.mobile .content .button.google h3 {
font-size: 20px;
font-weight: 300;
position: absolute;
top: 16px; left: 38px;
margin: 0;
}
.mobile .content .button.google h3 b {
font-size: 22px;
font-weight: 400;
font-family: 'Cardo', serif;
margin: 0;
margin-right: 4px
}
.contact {
min-width: 1100px;
background-image: url("img/fundo2es.jpg");
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:750px;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 #btn {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 4px;
padding: 10px 0px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/fixedbar.js"></script>
<script src="js/slider.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<div class="controls">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>
<div class="mobile">
<div class="bar">
<img src="img/barra2.png">
</div>
<div class="content">
<img class="mobimg" src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/mob.png">
<div class="mob">
<h1>Mobile</h1>
<p>Optential combines the best of responsive software with native IOS and Android apps to provide the best experience and optimal results!</p>
<p>On laptops, desktops, tablets and phones, always get the best experience on the most intuitive project management set of tools in the world!</p>
<p class="sep">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/a1.png">
</p>
<h2>Get the app!</h2>
<div class="buttons">
<a class="button apple" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/apple.png">
<span>Download on the</span>
<h3>App Store</h3>
</a>
<a class="button google" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/google.png">
<span>Get it on</span>
<h3><b>Google</b>play</h3>
</a>
</div>
</div>
</div>
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form method="POST" id="contactos_form" action="form/contactengine.php" onsubmit="return submit_form(this);">
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="Name" size="50" placeholder="Name"/>
<input type="text" name="Email" size="50" placeholder="Email"/>
<input type="text" name="Subject" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
<input type="submit" id="btn"value="Send"/>
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
<script src="js/slider.js"></script>
<script>
function submit_form(form){
formulario=$("#contactos_form");
$.ajax({url: formulario.attr("action"), method:formulario.attr("method"), data:formulario.serialize(), success: function(result){
alert(result);
}});
return false;
}
</script>
</body>
</html>
Site live: http://optential.co.nf/
Slideshow: slider and controls on css.