Cant get form inputs side by side to each other - javascript

I tried a bunch of things like playing with padding and margin, I used tables and even displayed as an inline and inline-block but I have also tried to div different parts of the code hoping that separating the code I could manipulate it better but no results. I can't get my inputs to be side by side. Here is a link to the code on codepen.io. can someone please give me some help!
/* color:#00a786 lighter green */
/* color:#005242 dark green for buttons */
/* color:003027 dark green background */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
background-color: #fff;
}
body {
background: #ede6e6;
margin:0 auto;
font-family: arial, helvetica, sans-serif ;
}
a {
text-decoration: none;
color:#fff;
}
li {
display: inline;
padding: 10px;
font-size: 16px;
color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
background-size: cover;
background-position: center;
right:-20px;
left: -20px;
min-height: 100vh;
margin-bottom: 300px;
overflow-x: hidden;
background-attachment: fixed;
position: absolute;
z-index: 80;
}
.row{
padding-top: 40px;
border-bottom: 2px solid white;
}
}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{
float:left;
}
.top-left ul {
font-size: 16px;
padding-left: 150px;
padding-top: -80px;
padding-bottom: 30px
}
/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;
}
.social-links li{
font-size: 100%;
}
.social-links li:hover,
.social-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
float:right;
}
.top-right {
float: right;
padding-bottom: 30px;
}
.top-right li {
font-size: 100%;
font-weight: 200;
}
.top-right li:hover,
.top-right li:active{
color:#005242;
transition: color 0.2s;
}
.top-right li:first-child{
border-left: 2px solid #fff;
border-width: thin;
}
.top-right li:last-child{
border-left: 2px solid #fff;
border-width: thin;
}
/* -------------------------------H1------------------------------------- */
.main-header{
padding-top: 30px;
padding-left: 130px;
float:left;
}
.header-text{
display: inline-block;
}
h1{
font-size: 90%;
color:#fff;
font-family: sans-serif;
}
span{
color:#00a786
}
/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
float: right;
padding-right: 30px;
padding-top: 40px;
}
.main-nav-links{
display: inline-block;
}
.main-nav-links li:hover,
.main-nav-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{
}
.main-content{
text-align: center;
}
.content{
padding-top: 50px;
color: #fff;
display:inline-block;
}
.content h2{
font-size: 100%;
}
.content p{
font-size: 60%
}
/* -------------------------------BUTTONS------------------------------------ */
.btn:link,
.btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
msargin-right: 15px;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
background-color: #00a786;
border: 1px solid #005242;
color: #fff;
}
.btn-full:hover,
.btn-full:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
.search-btn:link,
.search-btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
}
.search-btn:hover,
.search-btn:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
/* -------------------------------Section-Search------------------------------------ */
.section-Search{
background-color: #003027;
border: 2px solid #003027;
border-radius: 3px;
position:relative;
left:200px;
right:20px;
top: 500px;
height: 30vh;
width: 600px;
z-index: 99;
}
.main-Search{
padding:30px 10px;
display: inline;
}
.col1{
}
.col3{
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styling.css">
<link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
<title>Williams Rental Propertie's</title>
</head>
<body>
<header>
<!--- TOP LEFT-------->
<div class="row">
<div class="top-left">
<ul>
<li><i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
<li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
</ul>
</div>
<!--- SOCIAL LINKS-------->
<div class="social-links">
<ul>
<li><i class="fab fa-facebook-f"> </i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-pinterest-square"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<!--- TOP RIGHT-------->
<div class="top-right">
<ul>
<li><i class="fas fa-user "> Register</i></li>
<li><i class="fas fa-sign-in-alt">Login</i></li>
</ul>
</div>
</div>
<!--- main Header-------->
<div class="main-header">
<div class="header-text">
<h1>Williams <span> Rental</span> Properties</h1>
</div>
</div>
<nav class="main-nav">
<div class="main-nav-links">
<ul>
<li> Home</li>
<li> Featured List</li>
<li> About Us</li>
<li> Pages</li>
<li> Blog</li>
<li> contact</li>
</ul>
</div>
</nav>
<section class="main-section">
<div class="main-content">
<div class="content">
<h2>Let Us Find You Your Dream Home!</h2>
<p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
<a class="btn btn-full" href="#">View Details</a>
</div>
</div>
</section>
</header>
<section class ="section-Search">
<div class="main-Search">
<form class="Search" action="index.html" method="post">
<label for="address"></label>
<!--- city-------->
<div class="col1">
<input type="text" name="Search" placeholder="keyword,zipcode">
</div>
<!--- city-------->
<div class="col2">
<label for="city"></label>
<select class="city" name="city">
<option value="city">city</option>
</select>
</div>
<!--- state------->
<div class="col3">
<label for="state"></label>
<select class="state" name="state-form">
<option value="state">state</option>
</div>
<!--- search button------->
<a class="search-btn" href="#">Search</a>
</select>
</form>
</section>
</body>
</html>


You have them in different div elements and div elements are block-level (appear on their own line). Just place them in the same div.
Also (FYI), you aren't using the label element correctly. The for attribute value in a label needs to match the id attribute value of the form element that the label is "for"`.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html{
background-color: #fff;
}
body{
background: #ede6e6;
margin:0 auto;
font-family: arial, helvetica, sans-serif ;
}
a{
text-decoration: none;
color:#fff;
}
li{
display: inline;
padding: 10px;
font-size: 16px;
color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
background-size: cover;
background-position: center;
right:-20px;
left: -20px;
min-height: 100vh;
margin-bottom: 300px;
overflow-x: hidden;
background-attachment: fixed;
position: absolute;
z-index: 80;
}
.row{
padding-top: 40px;
border-bottom: 2px solid white;
}
}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{
float:left;
}
.top-left ul {
font-size: 16px;
padding-left: 150px;
padding-top: -80px;
padding-bottom: 30px
}
/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;
}
.social-links li{
font-size: 100%;
}
.social-links li:hover,
.social-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
float:right;
}
.top-right {
float: right;
padding-bottom: 30px;
}
.top-right li {
font-size: 100%;
font-weight: 200;
}
.top-right li:hover,
.top-right li:active{
color:#005242;
transition: color 0.2s;
}
.top-right li:first-child{
border-left: 2px solid #fff;
border-width: thin;
}
.top-right li:last-child{
border-left: 2px solid #fff;
border-width: thin;
}
/* -------------------------------H1------------------------------------- */
.main-header{
padding-top: 30px;
padding-left: 130px;
float:left;
}
.header-text{
display: inline-block;
}
h1{
font-size: 90%;
color:#fff;
font-family: sans-serif;
}
span{
color:#00a786
}
/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
float: right;
padding-right: 30px;
padding-top: 40px;
}
.main-nav-links{
display: inline-block;
}
.main-nav-links li:hover,
.main-nav-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{
}
.main-content{
text-align: center;
}
.content{
padding-top: 50px;
color: #fff;
display:inline-block;
}
.content h2{
font-size: 100%;
}
.content p{
font-size: 60%
}
/* -------------------------------BUTTONS------------------------------------ */
.btn:link,
.btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
msargin-right: 15px;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
background-color: #00a786;
border: 1px solid #005242;
color: #fff;
}
.btn-full:hover,
.btn-full:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
.search-btn:link,
.search-btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
}
.search-btn:hover,
.search-btn:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
/* -------------------------------Section-Search------------------------------------ */
.section-Search{
background-color: #003027;
border: 2px solid #003027;
border-radius: 3px;
position:relative;
left:200px;
right:20px;
top: 500px;
height: 30vh;
width: 600px;
z-index: 99;
}
.main-Search{
padding:30px 10px;
display: inline;
}
.col1{
}
.col3{
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styling.css">
<link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
<title>Williams Rental Propertie's</title>
</head>
<body>
<header>
<!--- TOP LEFT-------->
<div class="row">
<div class="top-left">
<ul>
<li> <i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
<li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
</ul>
</div>
<!--- SOCIAL LINKS-------->
<div class="social-links">
<ul>
<li><i class="fab fa-facebook-f"> </i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-pinterest-square"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<!--- TOP RIGHT-------->
<div class="top-right">
<ul>
<li><i class="fas fa-user "> Register</i></li>
<li> <i class="fas fa-sign-in-alt">Login</i></li>
</ul>
</div>
</div>
<!--- main Header-------->
<div class="main-header">
<div class="header-text">
<h1>Williams <span> Rental</span> Properties</h1>
</div>
</div>
<nav class="main-nav">
<div class="main-nav-links">
<ul>
<li> Home</li>
<li> Featured List</li>
<li> About Us</li>
<li> Pages</li>
<li> Blog</li>
<li> contact</li>
</ul>
</div>
</nav>
<section class="main-section">
<div class="main-content">
<div class="content">
<h2>Let Us Find You Your Dream Home!</h2>
<p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
<a class="btn btn-full" href="#">View Details</a>
</div>
</div>
</section>
</header>
<section class ="section-Search">
<div class="main-Search">
<form class="Search" action="index.html" method="post">
<label for="address"></label>
<!--- city-------->
<div class="col1">
<input type="text" name="Search" placeholder="keyword,zipcode">
<label for="city"></label>
<select class="city" name="city">
<option value="city">city</option>
</select>
<label for="state"></label>
<select class="state" name="state-form">
<option value="state">state</option>
</div>
<!--- search button------->
<a class="search-btn" href="#">Search</a>
</select>
</form>
</section>
</body>
</html>

Related

How position a text inside div inside image?

I would like to know where I made a mistake or where should I add something?
How to replace hours on third blue div on bottom to the right site? I was trying and shearching, but I can't see solution. Please let me know what to change and maybe also can You recomend me tutorial or articles with that case.
When I hover over a menu button, I'd like the text to turn white, but when i change it like color: #fff i doesn't work.
Sc1
Sc2
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{
background-image:url(Images/bg.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
width: 100%;
min-height: 100vh;
position: relative;
}
.menubar{
background: #fff;
text-align: center;
position: static;
}
.menubar ul{
display: inline-flex;
list-style: none;
color: black;
}
.menubar ul li{
width: auto;
margin: 10px;
padding: 15px;
}
.menubar ul li a{
text-decoration: none;
color: black;
}
.active, .menubar ul li:hover{
background-color: #2E8BC0;
border-radius: 2px;
color: white;
}
.menubar .fas, .menubar .far{
margin-right: 8px;
}
.sub-menu-1{
display: none;
}
.menubar ul li:hover .sub-menu-1{
display: block;
position: absolute;
background: #040c7a;
margin-top: 15px;
margin-left: -15px;
}
.menubar ul li:hover .sub-menu-1 ul{
display: block;
margin: 10px;
}
.menubar ul li:hover .sub-menu-1 ul li{
width: 100px;
padding: 10px;
border-bottom: 1px solid #fff;
background: transparent;
border-radius: 0;
text-align: left;
}
.menubar ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none;
}
.menubar ul li:hover .sub-menu-1 ul li a:hover{
color: #278eff;
}
.fa-angle-right{
float: right;
margin-left: 8px;
}
.class-menu-2{
display: none;
}
.hover-me:hover .class-menu-2{
position: absolute;
display: block;
margin-top: -40px;
margin-left: 110px;
background: #040c7a;
}
.row1{
color: white;
display:flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
background-color: transparent;
position: absolute;
bottom: 10px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.text-box1{
background-color: #2E8BC0;
height: 150px;
width: 300px;
display: block;
}
.text-box1 h3{
padding: 10px;
font-size:15px;
text-align: left;
margin-left: 20px;
}
.text-box1 p{
font-size: 25px;
padding: 10px;
text-align: left;
margin-left: 20px;
display: flex;
}
.text-box1 p2{
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
cursor: pointer;
margin-left: -40px;
margin-top: 10px;
}
.hero-btn:hover{
border: 1px solid white;
background: white;
transition: 1s;
color: black;
}
.text-box1 p a{
color: white;
}
.text-box1 ul li{
font-size: 17px;
margin-left: 20px;
margin-right: 20px;
display:flex;
border-bottom: 1px dotted white;
}
.text-box1 ul li:last-child{
border-bottom: none;
}
.text-box1#first{
background-color: #0C2D48;
}
.text-box1#second{
background-color: #145DA0;
}
.text-box1#third
background-color: #2E8BC0;
}
<!DOCTYPE html>
<html>
<head>
<title>Przychodnia</title>
<link rel="stylesheet" href="PrzychodniaStyle.css">
</head>
<body>
<section class="header">
<div class="menubar">
<ul>
<li class="active"><i class="fas fa-home"></i>Strona głowna</li>
<li><i class="far fa-address-card"></i>Specjalistyka
<div class="sub-menu-1">
<ul>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li> Menu</li>
</ul>
</div>
</li>
<li><i class="fas fa-motorcycle"></i>Stomatologia
<div class="sub-menu-1">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div></li>
<li><i class="fas fa-toolbox"></i>Poradnie POZ</li>
<li><i class="fas fa-graduation-cap"></i>Medycyna Pracy</li>
<li><i class="fas fa-flag-checkered"></i>Diagnostyki</li>
<li><i class="fas fa-user-plus"></i>Laboratorium</li>
<li><i class="fas fa-user-plus"></i>O nas</li>
<li><i class="fas fa-mobile-alt"></i>Kontakt</li>
</ul>
</div>
<div class="row1">
<div class="text-box1" id="first">
<h3>Rejstracja telefoniczna</h3>
<p>+1234567890</p>
</div>
<div class="text-box1" id="second">
<h3>Rejstracja elektroniczna</h3>
<p class="e">przychodnia#eu.pl</p>
Formularz kontaktowy
</div>
<div class="text-box1" id="third">
<h3>Godziny otwarcia</h3>
<ul>
<li><p1>Poniedziałek</p1><p2>6:00-18:00</p2></li>
<li>Wtorek</li>
<li>Środa</li>
<li>Czwartek</li>
<li>Piątek</li>
</ul>
</div>
</div>
</section>
<section>
<div class="text-box1">
Lolz
</div>
Formularz kontaktowy
</section>
</body>
</html>

Add justify-content: space-between (documentation) :
.text-box1 ul li{
font-size: 17px;
margin-left: 20px;
margin-right: 20px;
display: flex;
border-bottom: 1px dotted white;
justify-content: space-between;
}
As recommened by #Chris G, use a more specific selector :
.menubar ul li:hover a {
color: white;
}
.active, .menubar ul li:hover {
background-color: #2E8BC0;
border-radius: 2px;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{
background-image:url(Images/bg.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
width: 100%;
min-height: 100vh;
position: relative;
}
.menubar{
background: #fff;
text-align: center;
position: static;
}
.menubar ul{
display: inline-flex;
list-style: none;
color: black;
}
.menubar ul li{
width: auto;
margin: 10px;
padding: 15px;
}
.menubar ul li a {
text-decoration: none;
color: black;
}
.menubar ul li:hover a {
color: white;
}
.active, .menubar ul li:hover {
background-color: #2E8BC0;
border-radius: 2px;
}
.menubar .fas, .menubar .far{
margin-right: 8px;
}
.sub-menu-1{
display: none;
}
.menubar ul li:hover .sub-menu-1{
display: block;
position: absolute;
background: #040c7a;
margin-top: 15px;
margin-left: -15px;
}
.menubar ul li:hover .sub-menu-1 ul{
display: block;
margin: 10px;
}
.menubar ul li:hover .sub-menu-1 ul li{
width: 100px;
padding: 10px;
border-bottom: 1px solid #fff;
background: transparent;
border-radius: 0;
text-align: left;
}
.menubar ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none;
}
.menubar ul li:hover .sub-menu-1 ul li a:hover{
color: #278eff;
}
.fa-angle-right{
float: right;
margin-left: 8px;
}
.class-menu-2{
display: none;
}
.hover-me:hover .class-menu-2{
position: absolute;
display: block;
margin-top: -40px;
margin-left: 110px;
background: #040c7a;
}
.row1{
color: white;
display:flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
background-color: transparent;
position: absolute;
bottom: 10px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.text-box1{
background-color: #2E8BC0;
height: 150px;
width: 300px;
display: block;
}
.text-box1 h3{
padding: 10px;
font-size:15px;
text-align: left;
margin-left: 20px;
}
.text-box1 p{
font-size: 25px;
padding: 10px;
text-align: left;
margin-left: 20px;
display: flex;
}
.text-box1 p2{
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
cursor: pointer;
margin-left: -40px;
margin-top: 10px;
}
.hero-btn:hover{
border: 1px solid white;
background: white;
transition: 1s;
color: black;
}
.text-box1 p a{
color: white;
}
.text-box1 ul li{
font-size: 17px;
margin-left: 20px;
margin-right: 20px;
display:flex;
border-bottom: 1px dotted white;
justify-content: space-between;
}
.text-box1 ul li:last-child{
border-bottom: none;
}
.text-box1#first{
background-color: #0C2D48;
}
.text-box1#second{
background-color: #145DA0;
}
.text-box1#third{
background-color: #2E8BC0;
}
<!DOCTYPE html>
<html>
<head>
<title>Przychodnia</title>
<link rel="stylesheet" href="PrzychodniaStyle.css">
</head>
<body>
<section class="header">
<div class="menubar">
<ul>
<li class="active"><i class="fas fa-home"></i>Strona głowna</li>
<li><i class="far fa-address-card"></i>Specjalistyka
<div class="sub-menu-1">
<ul>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li> Menu</li>
</ul>
</div>
</li>
<li><i class="fas fa-motorcycle"></i>Stomatologia
<div class="sub-menu-1">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div></li>
<li><i class="fas fa-toolbox"></i>Poradnie POZ</li>
<li><i class="fas fa-graduation-cap"></i>Medycyna Pracy</li>
<li><i class="fas fa-flag-checkered"></i>Diagnostyki</li>
<li><i class="fas fa-user-plus"></i>Laboratorium</li>
<li><i class="fas fa-user-plus"></i>O nas</li>
<li><i class="fas fa-mobile-alt"></i>Kontakt</li>
</ul>
</div>
<div class="row1">
<div class="text-box1" id="first">
<h3>Rejstracja telefoniczna</h3>
<p>+1234567890</p>
</div>
<div class="text-box1" id="second">
<h3>Rejstracja elektroniczna</h3>
<p class="e">przychodnia#eu.pl</p>
Formularz kontaktowy
</div>
<div class="text-box1" id="third">
<h3>Godziny otwarcia</h3>
<ul>
<li><p1>Poniedziałek</p1><p2 class="hour">6:00-18:00</p2></li>
<li>Wtorek</li>
<li>Środa</li>
<li>Czwartek</li>
<li>Piątek</li>
</ul>
</div>
</div>
</section>
<section>
<div class="text-box1">
Lolz
</div>
Formularz kontaktowy
</section>
</body>
</html>

Opacity in CSS makes cards on my page overlap the navbar

I am building a website for a crypto coin meme, the problem is that my navbar doesn't overlap some of the links and cards I created that have 'opacity' argument in CSS. I want to make my navbar overlap everything when I scroll down.
Example photo https://imgur.com/a/Ipd1lOT
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200&family=Roboto&family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/navbar.css">
<link rel="stylesheet" href="CSS/buttons.css">
<link rel="stylesheet" href="CSS/details.css">
<link rel="stylesheet" href="CSS/container.css">
<link rel="stylesheet" href="CSS/container2.css">
<link rel="stylesheet" href="CSS/container3.css">
<link rel="stylesheet" href="CSS/footer.css">
<link rel="icon" type="image/gif/png" href="assets/shitcoin_logo.png">
<title>Shitcoin - Worst crypto currency</title>
</head>
<body>
<header>
<div class="Nav-Container">
<img class="logo" src="assets/shitcoin_logo.png" alt="">
<nav class="navbar">
<ul>
<li class="navbar-links">Home</li>
<li class="navbar-links">About us</li>
<li class="navbar-links">Stake</li>
<li class="coinprice"><img src="assets/shitcoin_logo.png" alt=""><p>: $0.00213</p></li>
<li>Connect Wallet</li>
</ul>
</nav>
</div>
</header>
<div class="container1">
<div class="aboutcointext">
<h1>Welcome to the <span>THUNDER</span> project homepage</h1>
<h2>Worst cypto coin available on the market!</h2>
Buy Thunder (THD)
</div>
<div class="aboutcoinlinks">
Facebook
Instagram
Twitter
</div>
</div>
<div class="details">Why you should <span>NOT</span> invest in us?</div>
<div class="container2">
<div class="reason1">
<img src="assets/man_on_toilet.png" alt="">
<h3>Reason 1:</h3>
<p>We have very little to no experience in the crypto world</p>
</div>
<div class="reason2">
<img src="assets/just_toilet.png" alt="">
<h3>Reason 2:</h3>
<p>This coin is made as a joke and should not be taken seriously</p>
</div>
<div class="reason3">
<img src="assets/money-pngrepo-com.png" alt="">
<h3>Reason 3:</h3>
<p>Your capital is at risk and we are not responsible for your money</p>
</div>
</div>
<div class="mining_details">You can mine <span>Shitcoin</span> but we don't guarantee you'll make money</div>
<div class="container3">
<div class="">
<p>Compact tool made by us to help you mine easier:</p>
Download THD miner
</div>
</div>
<footer>
<div class="footer-container">
<h2>Contact Us</h2>
<ul>
<li>Support</li>
<li>Email</li>
<li>About Us</li>
</ul>
</div>
<div class="footer-container">
<h2>FAQ</h2>
<ul>
<li>How to buy?</li>
<li>How to sell?</li>
<li>How to mine THD?</li>
<li>More...</li>
</ul>
</div>
</footer>
</body>
</html>
CSS code for navbar:
body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background: linear-gradient(0deg, rgba(47,48,48,1) 0%, rgba(73,80,87,1) 100%);
/* background-color: #495057; */
color: white;
}
header{
position: sticky;
top: 0;
background-color: #ADB5BD;
}
header::after{
content: '';
display: table;
clear:both;
}
.Nav-Container{
width: 80%;
margin: 0 auto;
}
.logo{
width: 5rem;
float: left;
}
.navbar{
float: right;
/* text-align: center; */
}
.navbar ul{
list-style: none;
margin:0;
padding:0;
}
.navbar li{
display: inline-block;
margin-left: 70px;
padding-top: 31px;
position: relative;
}
.navbar a{
color: #495057;
text-decoration: none;
text-transform: uppercase;
}
.navbar a:hover{
color: white;
}
.navbar-links::before{
content:'';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 0%;
transition: all ease 250ms;
}
.navbar-links:hover::before{
width: 100%;
}
.navbar img{
float:left;
width: 2rem;
position: relative;
bottom: 7px;
}
.navbar p{
display: inline;
}
.wallet{
display: inline;
padding: 5px 5px;
border: 1px solid #495057;
border-radius: 7px;
}
CSS code for social media links:
.aboutcoinlinks{
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
.aboutcoinlinks a{
align-self: flex-start;
margin-left:10px;
padding: 20px 15px;
text-decoration: none;
color: white;
text-align: center;
background-color: black;
opacity:70%;
transition: all ease 250ms;
}
.aboutcoinlinks a:hover{
opacity: 100%;
}
.aboutcoinlinks .fb{
padding: 20px 15px;
background-color: #4267B2;
border: 1px solid #4267B2;
border-radius: 10px;
}
.aboutcoinlinks .insta{
padding: 20px 15px;
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
border: 1px solid linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);;
border-radius: 10px;
}
.aboutcoinlinks .twitter{
padding: 20px 15px;
background-color: #1DA1F2;
border: 1px solid #1DA1F2;
border-radius: 10px;
}

You can refer to this Example.
window.onscroll = function () { myFunction() };
var header = document.getElementById("header");
function myFunction() {
if (window.pageYOffset >= 30) {
header.classList.add("sticky")
} else {
header.classList.remove("sticky");
}
}
body{
margin:0;
}
header{
position: fixed;
width: 100%;
padding: 5px 20px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.75s;
}
header .logo{
color: rgb(255, 255, 255);
font-weight: 700;
font-size: 30px;
text-decoration: none;
}
header .nav{
position: relative;
display: flex;
}
header .nav li{
list-style: none;
margin-left: 50px;
height:100%;
}
header .nav li a{
text-decoration: none;
color: #fff;
font-weight: 300;
font-size: 20px;
}
header.sticky{
background: rgba(255,255,255,0.85);
padding-top:0px;
padding-bottom:0px;
box-shadow: 0 5px 20px rgba(0,0,0,0,0.5);
height:3.75rem;
}
header.sticky .logo{
color: rgb(0, 0, 0);
}
header.sticky ul{
height:100%;
}
header.sticky ul li{
height:100%;
display:flex;
align-items: center;
}
header.sticky ul li a{
color:rgb(204, 34, 34);
}
header.sticky .nav li:hover{
border-bottom: 5px solid #ff0157;
}
p{
font-weight: 300;
color: #111;
}
.ban{
position: relative;
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg,rgba(255,255,255,0.1),rgba(0,0,0,0.35)),url('https://winteriscoming.net/files/2021/01/thor-4-marvel-chris-hemsworth.jpg');
background-repeat: no-repeat;
background-size:cover;
background-position:left;
}
.ban .box{
max-width: 1000px;
text-align: center;
}
.ban .box h3{
font-size: 5rem;
color: #fff;
}
.ban .box p{
font-size: 1rem;
color: #fff;
}
<header id="header">
Avenger
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Expert</li>
<li>contact</li>
</ul>
</header>
<section class="ban" id="ban">
<div class="box">
<h3>Always Choose Good</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sit nemo blanditiis tenetur, autem enim
similique dolor saepe earum consequuntur.</p>
Our Menu
</div>
</section>

SideBar navigation collapse shows blank screen when bootstrap 4 css loaded

I am trying to do side navigation bar with collapse. so that I have included jquery 3.4.1 and CSS. But When Bootstrap 4 css and Bootstrap js added page turns into white screen. In console there will be no error. After removing bootstrap it is working fine.But bootstrap is essential. So that JS, CSS, JSP has been included for your reference. Please help me in this.
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass("collapse");
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body{
background: #e1ecf2;
}
.wrapper{
margin: 10px;
}
.wrapper .top_navbar{
width:84%;
height: 60px;
display: flex;
position: fixed;
top: 10px;
transition: all 0.3s ease;
}
.wrapper.collapse .top_navbar{
width: 92.5%;
height: 60px;
display: flex;
position: fixed;
top: 10px;
}
.wrapper .top_navbar .hamburger{
width: 70px;
height: 100%;
background: #33AAAA;
padding: 25px 25px;
/* border-top-left-radius: 20px; */
cursor: pointer;
}
.wrapper . .hamburger div{
width: 35px;
height: 4px;
background: #92a6e2;
margin: 5px 0;
border-radius: 5px;
}
.wrapper .top_navbar .top_menu{
width: 100%;
height: 100%;
background: linear-gradient(to right,#33AAAA,#80C477);
/* border-top-right-radius: 20px; */
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.wrapper .top_navbar .top_menu .logo{
color: white;
font-size: 20px;
font-weight: 700;
letter-spacing: 3px;
}
.wrapper .top_navbar .top_menu ul{
display: flex;
}
.wrapper .top_navbar .top_menu ul li a{
display: block;
margin: 0 10px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
border: 1px solid white;
border-radius: 50%;
color: white;
}
.wrapper .top_navbar .top_menu ul li a:hover{
background: #4360b5;
color: #fff;
}
.wrapper .top_navbar .top_menu ul li a:hover i{
color: #fff;
}
.wrapper .sidebar{
position: fixed;
left: 10px;
background: linear-gradient(#80C477,#33AAAA);;
width: 200px;
height: calc(100% - 20px);
/* border-bottom-left-radius: 20px; */
transition: all 0.3s ease;
margin-top: -60px
}
.wrapper .sidebar ul li a{
display: block;
padding: 20px;
color: #fff;
position: relative;
margin-bottom: 1px;
color: white;
white-space: nowrap;
}
.wrapper .sidebar ul li a:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: #92a6e2;
display: none;
}
.wrapper .sidebar ul li a span.icon{
margin-right: 10px;
display: inline-block;
}
.wrapper .sidebar ul li a span.title{
display: inline-block;
}
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
background: #4360b5;
color: #fff;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
display: block;
}
.wrapper .main_container{
width: (100% - 200px);
margin-top: 70px;
margin-left: 200px;
padding: 15px;
transition: all 0.3s ease;
}
.wrapper .main_container .item{
background: #fff;
margin-bottom: 10px;
padding: 15px;
font-size: 14px;
line-height: 22px;
}
.wrapper.collapse .sidebar{
width: 70px;
}
.wrapper.collapse .sidebar ul li a{
text-align: center;
}
.wrapper.collapse .sidebar ul li a span.icon{
margin: 0;
}
.wrapper.collapse .sidebar ul li a span.title{
display: none;
}
.wrapper.collapse .main_container{
width: (100% - 70px);
margin-left: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Side Navigation Bar</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../css/Side.css">
<script src="../Scripts/fontawsome.js"></script>
<link rel="stylesheet" href="../css/dataTables.min.css">
<script type="text/javascript" src="../Scripts/dataTables.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar" >
<ul>
<li>
<li>
<li><a href="#"> <span class="icon"><i
class="fas fa-book"></i></span> <span class="title">Books</span></a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-file-video"></i></span> <span class="title">Movies</span>
</a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-volleyball-ball"></i></span> <span class="title">Sports</span>
</a></li>
<li><a href="#" class="active"> <span class="icon"><i
class="fas fa-blog"></i></span> <span class="title">Blogs</span>
</a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-leaf"></i></span> <span class="title">Nature</span>
</a></li>
</ul>
</div>
<div class="main_container">
<div class="top_navbar" >
<div class="hamburger" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<i class="fas fa-bars"></i>
</div>
<div class="top_menu">
<div class="logo">logo</div>
<ul>
<li> <i class="fas fa-search"></i></li>
<li><a href="#"> <i class="fas fa-bell"></i>
</a></li>
<li><a href="#"> <i class="fas fa-user"></i>
</a></li>
</ul>
</div>
</div>
<div id ="Home">
<jsp:include page="Home.jsp"/>
</div>
</div>
</div>
</body>
</html>
problem comes if the below line added
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I tried without bootstrap css it is working fine.But the bootstrap css is essential.

Put your scripts in this order and don't forget to put important rules to your css which might be overriding some default bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/dataTables.min.css">
<script type="text/javascript" src="../Scripts/dataTables.min.js"></script>
<link rel="stylesheet" href="../css/Side.css">
<script src="../Scripts/fontawsome.js"></script>

Blank Screen on right scroll

On the right side you can a see few pixels of space:
Does anyone know how to remove it? I think it's because of animations I have added with "aos" library. I have already had this error without animations, but I fixed it with this code:
*, *::before, *::after {
box-sizing: border-box;
}
This is the link for the code so you can preview the page:
https://jsfiddle.net/5rq8grcL/
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'IBM Plex Sans Condensed', sans-serif;
background-image: url("/assets/images/masaze.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
scroll-behavior: smooth;
animation: fadeEffect 1s;
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#navbar-list {
list-style-type: none;
text-align: center;
margin: 0;
overflow: hidden;
background-color: #000;
width: 100%;
opacity: 0.9;
position: fixed;
z-index: 1;
}
#navbar-list li {
text-align: justify;
display: inline;
}
#navbar-list li a {
color: white;
text-decoration: none;
display: inline-block;
}
#navbar-list li a:hover {
color: #a0c2d5;
transition: .5s;
}
.pocetna {
font-size: 1.7rem;
padding: 25px 20px;
float: left;
}
.linkovi {
padding: 35px 20px;
position: relative;
right: 180px;
}
.linkovi:active {
color: black;
background-color: white;
}
#main {
text-align: center;
padding-top: 15%;
}
#main h1 {
font-size: 4.5em;
text-shadow: 1px 1px 1px #000000;
}
#main h3 {
font-size: 17pt;
}
hr {
width: 615px;
opacity: .2;
}
.button {
height: 50px;
font-size: 20px;
margin-top: 20px;
cursor: pointer;
padding: 10px;
outline: none;
text-decoration: none;
border: none;
border-radius: 3%;
}
.button a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #a0c2d5;
transition: .5s;
}
section {
position: relative;
margin-top: -5px;
}
#video {
background-color: rgba(20, 25, 25, 0.5);
min-width: 100%;
min-height: 100%;
margin-top: 580px;
z-index: 0;
position: relative;
}
#section1 {
position: absolute;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 200px;
bottom: 0;
left: 0;
}
#section1 h3 {
font-size: 25pt;
}
#section1 p {
font-size: 18pt;
letter-spacing: 1px;
text-shadow: 1px 1px gray;
}
#contact {
background: rgba(0, 0, 0, 0.2);
position: absolute;
width: 100%;
height: 500px;
display: table;
table-layout: fixed;
border-spacing: 10px;
margin-top: 50px;
}
#section2 {
font-size: 25pt;
text-align: center;
background: rgba(0, 0, 0, 0.2);
height: 100%;
background-image: url("/assets/images/masaze.jpg");
}
#section2 h3 {
margin: 0;
padding: 20px 0;
}
.sectionc {
display: table-cell;
}
.sectionc a {
color: black;
text-decoration: none;
padding: 5px;
}
.sectionc a:hover {
transition: 0.5s;
color: #a0c2d5;
}
#map {
width: 700px;
height: 400px;
margin: 50px auto;
}
#section3 {
text-align: center;
font-size: 25pt;
background: rgba(0, 0, 0, 0.5);
background-image: url("/assets/images/proba.jpg");
height: 705px;
}
.kdn {
margin: 0;
padding: 20px;
color: white;
}
#footer {
background-color: black;
color: white;
height: 80px;
}
#footer p {
margin: -5px;
text-align: center;
padding: 30px;
}
#footer p a {
color: white;
text-decoration: none;
padding-left: 10px;
}
#footer p a:hover {
color: #a0c2d5;
transition: .5s;
}
span {
color: black;
transition: 1.5s;
}
span:hover {
color: white;
transition: 1.5s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Masaže Gligorijević</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/main.css">
<link rel="icon" href="/assets/images/logo.png">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<script src="/assets/js/main.js"></script>
</head>
<body>
<nav>
<div id="navbar">
<ul id="navbar-list">
<li>
<a class="pocetna" href="#"><img src="/assets/images/logo icon.ico" width="40" height="30" style="padding-right:10px;">Masaže Gligorijević</a>
</li>
<li class="linkovil"><a class="linkovi" href="#">Početna</a></li>
<li class="linkovil"><a class="linkovi" href="#section1">O nama</a></li>
<li><a class="linkovi m" href="#section2">Kontakt</a></li>
<li><a class="linkovi" href="#section3">Kako do nas</a></li>
</ul>
</div>
</nav>
<header>
<div id="main">
<h1>Masaže Gligorijević</h1>
<h3>Ulaganjem u svoje zdravlje, ulažete u kvalitet sopstvenog života.</h3>
<hr>
<button class="button"><i class="fas fa-play"></i> Rezervišite Odmah</button>
</div>
</header>
<section>
<video autoplay muted loop id="video">
<source src="/assets/images/klip.mp4" type="video/mp4">
</video>
<div id="section1" data-aos="fade-right" data-aos-duration="1500" data-aos-easing="linear">
<h3>O nama</h3>
<p>
Profesionalni maser i specijalno usavršeni fizioterapeut čija veština pokazuje odlične rezultate kod klijenata. <br><br> Naš salon je opremljen profesionalnom opremom. Masaže se obavljaju na stolovima za masažu.<br><br>Kompletnom uživanju doprinose
prijatni zvuci muzike i mirisi aromatičnih ulja.<br> NAŠI klijenti odlaze uz pravilo: NAKON MASAŽE OPET IMAM OSMEH!
</p>
</div>
</section>
<section id="section2">
<h3>Kontakt</h3>
<div id="contact">
<div id="sectionc" data-aos="fade-right" data-aos-duration="1500" data-aos-easing="linear">
<h4>Zakažite vaš termin već sada!</h4>
<p><i class="fas fa-location-arrow"></i> Adresa: Ljubiše Uroševića 6/21, Jagodina</p>
<p><i class="fas fa-mobile"></i> Tel: 060 078 2880</p>
<p><i class="fas fa-at"></i> Email: milosgliga92#gmail.com</a>
</p>
</div>
<div class="sectionc" data-aos="fade-left" data-aos-duration="1500" data-aos-easing="linear">
<h4>Pratite nas na društvenim mrežama!</h4>
<p><i class="fab fa-facebook-f"></i> Facebook</p>
<p><i class="fab fa-instagram"></i>Instagram</p>
</div>
</div>
</section>
<div id="section3" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear">
<h3 class="kdn">Kako do nas</h3>
<div id="map">
</div>
</div>
<footer>
<div id="footer">
<p>
© 2018 <span> Đorđe Gligorijević </span> All Rights Reserved
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</p>
</div>
</footer>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvHllMfDUDEVM_GtdkQ6_hyj4wMJ2vVxM&callback=initMap"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>

On #footer p, remove margin: -5px; or at least change it to margin: -5px 0px;. The negative left and right margins are what's causing the gap.

100% work. Try this
<script>$('[data-aos]').parent().addClass('hideOverflowOnMobile');</script>
<style>
#media (max-width: 768px) {
.hideOverflowOnMobile {
overflow: hidden;
}
}
</style>

How to toggle my menu with right swipe on a mobile device?

Below is my simple menu: I want it to be closed by default when I open on a mobile and if I swap right to left then it should open.
#import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
#import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css);
.accordion {
color: #FFF;
width: 100%;
}
.accordion .section {
width: 100%;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked + label {
background: #363636;
}
.accordion .section input[type='radio']:checked + label:before {
content: " ";
position: absolute;
border-left: 3px solid #21CCFC;
height: 100%;
left: 0;
}
.accordion .section input[type='radio']:checked ~ .content {
max-height: 300px;
opacity: 1;
z-index: 10;
overflow-y: auto;
}
.accordion .section label {
position: relative;
cursor: pointer;
padding: 10px 20px;
display: table;
background: #222;
width: 100%;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.accordion .section label:before {
content: " ";
width: 100%;
position: absolute;
left: 0;
top: 0;
height: 1px;
border-top: 1px solid #363636;
}
.accordion .section label:hover {
background: #363636;
}
.accordion .section label span {
display: table-cell;
vertical-align: middle;
}
.accordion .section:last-of-type {
border-bottom: 1px solid #363636;
}
.accordion .section .content {
max-height: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
opacity: 0;
position: relative;
overflow-y: hidden;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #666;
font-family: 'Quicksand', sans-serif;
}
.left-menu {
background: #222;
width: 200px;
position: absolute;
top: 0;
bottom: 0;
}
.accordion {
font-size: 14px;
}
.accordion .section .content {
padding: 0 15px;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked ~ .content {
padding: 15px;
}
ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
padding: 10px;
}
ul li i {
font-size: 13px;
width: 15px;
margin-right: 15px;
}
ul li:hover {
cursor: pointer;
}
ul li:hover i {
color: #21CCFC;
}
.logo {
padding: 30px 10px;
width: 200px;
text-align: center;
color: #FFF;
font-size: 20px;
}
.logo i {
font-size: 70px;
color: #21CCFC;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Pure CSS Accordion Nav</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="left-menu">
<div class="logo"><i class="fa fa-align-justify"></i>
<div>Pure CSS Accordion Nav</div>
</div>
<div class="accordion">
<div class="section">
<input type="radio" name="accordion-1" id="section-1" checked="checked"/>
<label for="section-1"><span>Messages</span></label>
<div class="content">
<ul>
<li><i class="fa fa-inbox"></i><span>Inbox</span></li>
<li><i class="fa fa-share"></i><span>Sent </span></li>
<li><i class="fa fa-archive"></i><span>Archive</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-2" value="toggle"/>
<label for="section-2"> <span>Usage</span></label>
<div class="content">
<ul>
<li><i class="fa fa-cog"></i><span>System</span></li>
<li><i class="fa fa-group"></i><span>Users </span></li>
<li><i class="fa fa-sitemap"></i><span>Visitation</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-3" value="toggle"/>
<label for="section-3"> <span>Scroller</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee </span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee </span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee </span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-4" value="toggle"/>
<label for="section-4"> <span>Section 4</span></label>
<div class="content"></div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
I require to make a very very simple pop out menu with no button.

Categories

Resources