I have created a DropDown navigation menu in CSS. when i click on it, it hides the page contents altogether. I want want that instead of hiding the page content, either it pushes page content down or drop down menu should be on front end of the page content.
<script type="text/javascript">
$(".menu-toggle-btn").click(function () {
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
</script>
body{
/*font-family:Calibri !important;*/
font-family:ProximaNova,Arial,Sans-serif;
margin: 0 2px;
padding: 0;
text-decoration: none;
font-size:12px;
/*max-width: 100%;*/
overflow-x: hidden;
}
header{
height: 45px;
background: #008269;
margin-bottom:2px;
}
.inner-width{
max-width: 100%;
/*padding: 0 10px;*/
margin: auto;
}
.navigation-menu{
float: left;
display: flex;
align-items: center;
min-height: 45px;
}
.navigation-menu a{
/*margin-left: 10px;*/
color: #fff;
text-transform: uppercase;
font-size: 14px;
padding: 1% 10%;
border-radius: 4px;
transition: .3s linear;
font-weight:700;
text-decoration: none;
}
.navigation-menu a:hover{
background: #fff;
color: #2f3640;
transform: scale(1.1);
text-decoration: none;
}
.navigation-menu i{
margin-right: 8px;
font-size: 16px;
}
.menu-toggle-btn{
float: right;
height: 20px;
line-height: 20px !important;
color: #fff;
font-size: 26px;
display: none !important;
cursor: pointer;
}
#media screen and (max-width:1500px) {
.menu-toggle-btn{
display: block !important;
margin-top:13px;
margin-right:13px;
}
.navigation-menu{
position:center;
width: 100%;
height:100%;
/*max-width: 100%;*/
background:#008269;
top: 45px;
right: 0;
display: none;
/*padding: 20px 40px;*/
box-sizing: border-box;
}
.navigation-menu::before{
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #172b4d;
position: absolute;
top: -10px;
right: 10px;
}
.navigation-menu a{
display: block;
margin: 10px 0;
}
.navigation-menu.active{
display: block;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Drop-down Navigation</title>
<link href="css/MasterPage-CSS.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form2" runat="server">
<header>
<div class="inner-width">
<i class="menu-toggle-btn fas fa-bars"></i>
<nav class="navigation-menu">
Products
Customers
Sales
Installments
Financial
Stock
payroll
Expensis
</nav>
</div>
</header>
<asp:ContentPlaceHolder id="contentBody" runat="server">
<div style="overflow-x:auto;"></div>
</asp:ContentPlaceHolder>
</form>
<script type="text/javascript">
$(".menu-toggle-btn").click(function () {
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
</script>
</body>
</html>
I added float: left; on wrap content div element
$(".menu-toggle-btn").click(function () {
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
body {
/*font-family:Calibri !important;*/
font-family: ProximaNova, Arial, Sans-serif;
margin: 0 2px;
padding: 0;
text-decoration: none;
font-size: 12px;
/*max-width: 100%;*/
overflow-x: hidden;
}
header {
height: 45px;
background: #008269;
margin-bottom: 2px;
}
.inner-width {
max-width: 100%;
/*padding: 0 10px;*/
margin: auto;
}
.navigation-menu {
float: left;
display: flex;
align-items: center;
min-height: 45px;
}
.navigation-menu a {
/*margin-left: 10px;*/
color: #fff;
text-transform: uppercase;
font-size: 14px;
padding: 1% 10%;
border-radius: 4px;
transition: .3s linear;
font-weight: 700;
text-decoration: none;
}
.navigation-menu a:hover {
background: #fff;
color: #2f3640;
transform: scale(1.1);
text-decoration: none;
}
.navigation-menu i {
margin-right: 8px;
font-size: 16px;
}
.menu-toggle-btn {
float: right;
height: 20px;
line-height: 20px !important;
color: #fff;
font-size: 26px;
display: none !important;
cursor: pointer;
}
#media screen and (max-width:1500px) {
.menu-toggle-btn {
display: block !important;
margin-top: 13px;
margin-right: 13px;
}
.navigation-menu {
position: center;
width: 100%;
height: 100%;
/*max-width: 100%;*/
background: #008269;
top: 45px;
right: 0;
display: none;
/*padding: 20px 40px;*/
box-sizing: border-box;
}
.navigation-menu::before {
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #172b4d;
position: absolute;
top: -10px;
right: 10px;
}
.navigation-menu a {
display: block;
margin: 10px 0;
}
.navigation-menu.active {
display: block;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form id="form2" runat="server">
<header>
<div class="inner-width">
<i class="menu-toggle-btn fas fa-bars"></i>
<nav class="navigation-menu">
Products
Customers
Sales
Installments
Financial
Stock
payroll
Expensis
</nav>
</div>
</header>
<asp:ContentPlaceHolder id="contentBody" runat="server">
<div style="overflow-x:auto; float: left;">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem totam delectus aspernatur veritatis deleniti repellat dignissimos recusandae alias odio necessitatibus cupiditate tempora, soluta voluptatum fuga non possimus officiis maiores culpa?
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic voluptas repellat deleniti laudantium rem nobis magni labore. Libero dolore fuga facere, beatae commodi voluptate assumenda repellendus, aperiam magnam voluptates consectetur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptate blanditiis illo corrupti sunt pariatur soluta, laborum voluptates veniam facilis. Neque possimus natus assumenda enim magnam reprehenderit quas omnis voluptas?
</div>
</asp:ContentPlaceHolder>
</form>
Related
i have been following someone on youtube about making simple website with only using html,css and javascript. i'm doing some modification myself, and i've been trying to get rid of padding on my flex. there's little bit padding below that i don't know how to remove.
here's the pict
already review the video i watch and still can't find the solution, can you guys help me? please explain it in most newbie ways...
below is my HTML
<!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" />
<title>Proj Hotel</title>
<!-- Fonts -->
<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=Poppins:ital,wght#0,100;0,300;0,400;0,700;1,200&display=swap"
rel="stylesheet"
/>
<!-- Fonts end -->
<!-- Feather icons -->
<script src="https://unpkg.com/feather-icons"></script>
<!-- Icons end -->
<link rel="stylesheet" href="css/Style.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
Hotel <span>Proj</span>
<div class="navbar-nav">
home
About us
Rooms
Contact
</div>
<div class="navbar-extra">
<i data-feather="search"></i>
<a href="#" id="shopping-cart">
<i data-feather="shopping-cart"></i>
</a>
<i data-feather="menu"></i>
</div>
</nav>
<!-- Navbar end -->
<!--Hero section -->
<section class="hero" id="home">
<main class="content">
<h1>Get Some Nice <span>Sleep!</span></h1>
<div class="inpad">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, fuga.
</p>
book now!
</div>
</main>
</section>
<!-- Hero section end -->
<!-- about sextion -->
<section id="about" class="about">
<h2><span>About</span> us</h2>
<div class="row">
<div class="about-img">
<img src="img/aboutfix.jpg" alt="About us" />
</div>
<div class="content">
<h3>Why Choose us?</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit sit,
in voluptatem adipisci minima eligendi dolor unde quis aliquid
itaque ut quas pariatur iste neque? Aut labore voluptatibus
laboriosam sapiente.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique
in esse recusandae quis architecto ad deleniti voluptatum pariatur
facere aliquam impedit nesciunt fugiat animi dolorum officiis rerum,
praesentium molestiae eum!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Recusandae, vel? Quasi error quas officiis esse mollitia doloremque
saepe dolorem magnam ad excepturi temporibus, illo possimus quis,
</p>
</div>
</div>
</section>
<!-- about section end -->
<!-- feather icons -->
<script>
feather.replace();
</script>
<!-- javascript my -->
<script src="js/script.js"></script>
<!-- Feather icons -->
</body>
</html>
my CSS
:root {
--bg: #fffbeb;
--Primary: #745b36;
}
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Poppins", sans-serif;
background-color: var(--bg);
color: #fff;
min-height: 5000px;
}
/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 7%;
background-color: #f2deba;
border-bottom: 0.5px solid #f8cba6;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.navbar .navbar-logo {
font-size: 2rem;
font-weight: 700;
color: #bb8d64;
font-style: italic;
}
.navbar .navbar-logo span {
color: var(--Primary);
}
.navbar .navbar-nav a {
display: inline-block;
font-size: 1.3rem;
margin: 0 1rem;
color: var(--Primary);
}
.navbar .navbar-nav a:hover {
color: #0c0c0c;
}
.navbar .navbar-nav a::after {
content: "";
display: block;
padding-bottom: 0.5rem;
border-bottom: 0.1rem solid #0a0a0a;
transform: scaleX(0);
transition: 0.2s linear;
}
.navbar .navbar-nav a:hover::after {
transform: scaleX(0.5);
}
.navbar .navbar-extra a {
color: var(--Primary);
margin: 0 0.5rem;
}
.navbar .navbar-extra a:hover {
color: #fff;
}
#hamburger-menu {
display: none;
}
/* Navbar end */
/* hero section style start */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background-image: url("../img/1.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
/* below is gradient section */
.hero::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 30%;
bottom: 0;
background: linear-gradient(
0deg,
rgba(255, 251, 235, 1) 8%,
rgba(255, 255, 255, 0) 50%
);
}
/* gradient section end */
.hero .content {
padding: 1.4rem 7%;
max-width: 70rem;
}
.hero .content h1 {
font-size: 5rem;
color: #fff;
text-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5);
line-height: 1;
}
.hero .content p {
font-size: 1.6rem;
margin-top: 1rem;
line-height: 1.4;
color: #fff;
font-weight: 100;
text-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5);
}
.hero .content span {
color: rgba(241, 213, 162, 2);
}
.hero .content .cta {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 2rem;
font-size: 1.4rem;
color: #fff;
background-color: #f1d5a2a9;
border-radius: 0.5rem;
box-shadow: 1px 1px 3px rgba(1, 1, 3, 0.3);
margin-bottom: 0.5rem;
}
.hero .content .inpad a:hover {
background-color: #d3ba8d65;
}
.hero .content .inpad {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
font-size: 1rem;
color: #fff;
background-color: rgba(116, 91, 54, 0.7);
border-radius: 0.5rem;
}
/* Hero section styles ends */
/* about start */
.about {
padding: 8rem 20%;
}
.about h2 {
text-align: center;
font-size: 2.4rem;
margin-bottom: 3rem;
color: rgba(116, 91, 54, 0.7);
}
.about .row .content p {
color: rgba(116, 91, 54, 0.5);
margin-bottom: 0.8rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.7rem;
margin-left: 1rem;
}
.about .row {
display: flex;
background-color: rgba(116, 91, 54, 0.2);
}
.about .row .about-img {
flex: 1 1 25rem;
}
.about .row .about-img img {
width: 100%;
}
.about .row .content {
flex: 1 1 20rem;
}
.about .row .content h3 {
font-size: 1.5rem;
color: rgba(116, 91, 54, 0.5);
padding-left: 1rem;
}
/* about end */
/* media queries */
/* laptop */
#media (max-width: 1366px) {
html {
font-size: 75%;
}
}
/* end */
/* Tablet */
#media (max-width: 768px) {
html {
font-size: 62.5%;
}
#hamburger-menu {
display: inline-block;
}
.navbar .navbar-nav {
position: absolute;
top: 100%;
right: -100%;
background-color: #fff;
width: 25rem;
height: 100vh;
transition: 0.5s;
}
.navbar .navbar-nav.active {
right: 0;
}
.navbar .navbar-nav a {
color: var(--Primary);
display: block;
margin: 1.5rem;
padding: 0.5rem;
font-size: 2rem;
}
.navbar .navbar-nav a::after {
transform-origin: 0 0;
}
.navbar .navbar-nav a:hover::after {
transform: scaleX(0.3);
}
.about .row {
flex-wrap: wrap;
}
.about .row .about-img img {
height: 25rem;
object-fit: cover;
object-position: center;
}
.about .row .content {
padding: 0;
}
.about .row .content h3 {
margin-top: 1rem;
font-size: 2rem;
}
.about .row .content p {
font-size: 1.6rem;
}
}
/* end */
/* mobile */
#media (max-width: 450px) {
html {
font-size: 55%;
}
}
/* end */
/* Media queries end */
and my Javascript
// toggle class active
const navbarNav = document.querySelector(".navbar-nav");
//ketika hamburger menu di klik
document.querySelector("#hamburger-menu").onclick = () => {
navbarNav.classList.toggle("active");
};
// outside click to close sidebar
const hamburger = document.querySelector("#hamburger-menu");
document.addEventListener("click", function (e) {
if (!hamburger.contains(e.target) && !navbarNav.contains(e.target)) {
navbarNav.classList.remove("active");
}
});
i'm sorry about the messy codes i made, thanks in advance.
Are you referring to this space?
This is not padding, but rather this is caused by the height of the image on the left. This is because the image is set to take up the same width as the text on the right (due to flex: 1), and so the height of the image causes the height of the content on the right to also increase, which is why you see this blank space at the bottom.
A simple option could be to apply align-items: center to the flex-container which will give equal space on the top or bottom. But this will not remove the spacing altogether.
Remove min-height: 5000px from inside the body tag in css
i'm using a javascript music player for my website but it's covering the entire width of the website. please advice how to shorten its width. i don't want to ruin the website so i haven't tried editing anything in the music player code as i got it from another website.
all the earlier issues i had with the code were resolved, only this i'm confused about at the moment.
document.querySelector('.playpause').addEventListener('click', playpause);
function playpause() {
if (document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>') {
document.querySelector('#musicsrc').play();
document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
} else {
document.querySelector('#musicsrc').pause();
document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
}
}
#musicplayer {
display: grid;
grid-template-columns: 18px auto;
align-items: center width: 90px;
height: 24px;
font-size: 11px;
font-family: kosugi;
color: #955136;
line-height: 200%;
background: white;
border: 2px solid #F9CDE2;
border-radius: 2px;
}
#musictitle {
overflow: hidden;
white-space: nowrap;
-webkit-filter: drop-shadow(0px 0px 2px #FFB0C9);
display: inline-block;
width: calc(109% - 10px - 0px);
margin-left: calc(4px + 0px);
}
#musicpixel {
width: 120%;
padding-top: 0px;
position: relative;
min-height: 20px;
background: white;
border-right: 2px solid #F9CDE2;
}
.overlay {
opacity: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
height: 100%;
transition: 0.3s ease;
background: white;
}
#musicplayer:hover .overlay {
opacity: 1;
transition: 0.3s ease;
}
.playpause {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.playpause:hover {
cursor: help;
}
#musicpixel img {
display: block;
}
.marquee {
display: inline-block;
padding-left: 100%;
animation: marquee 7s linear infinite;
}
#keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-image: url('https://lifted.crd.co/assets/images/gallery01/a307cfec.png?v=a0ae4590');
display: table-cell;
vertical-align: middle;
}
section {
width: 50%;
margin: 0 auto;
}
#font-face {
src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
font-family: jojoba;
}
div {
font-family: jojoba;
font-size: 18px;
}
/* Style the header */
header {
background-color: #666;
margin: auto;
padding: 10px;
text-align: center;
border-color: #000000;
font-size: 20px;
height: 35px;
width: 50%;
margin: 0 auto;
background: radial-gradient(circle, rgb(240, 242, 240, 1) 10%, rgba(217, 219, 218, 1) 43%, rgb(240, 242, 240, 1) 75%);
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px;
/* only for demonstration, should be removed */
background: #f1f1f1;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #ffffff;
height: 300px;
/* only for demonstration, should be removed */
overflow-y: auto;
direction: ltr;
scrollbar-color: #d4aa70 #e4e4e4;
scrollbar-width: thin;
}
/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
padding: 10px;
text-align: center;
color: white;
height: 35px;
width: 50%;
margin: 0 auto;
vertical-align: middle;
background: rgb(219, 219, 219);
background: radial-gradient(circle, rgb(240, 242, 240, 1) 10%, rgba(217, 219, 218, 1) 43%, rgb(240, 242, 240, 1) 75%);
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav,
article {
width: 90%;
height: auto;
}
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id='musicplayer'>
<div id='musicpixel'>
<img src='https://graphic.neocities.org/tumblr_inline_oeqayhhdhP1uqb749_500.gif'>
<div class='overlay'>
<div class='playpause'><i class="fas fa-play"></i></div>
</div>
</div>
<div id='musictitle'>
<span class='marquee'>きみに恋したんだ</span>
</div>
</div>
<audio id='musicsrc' loop src='https://dl.dropbox.com/s/58ifb5zr8lbedlo/%E3%81%8D%E3%81%BF%E3%81%AB%E6%81%8B%E3%81%97%E3%81%9F%E3%82%93%E3%81%A0.mp3'></audio>
<div>
<header>
</header>
<section>
<nav>
<img src="https://barbara.crd.co/assets/images/gallery34/d0d75dc1.gif?v=078d66a6">
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
</nav>
<article>
<h2> yatori <img src="https://barbara.crd.co/assets/images/gallery07/fd56c474.gif?v=078d66a6"> </h2>
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</article>
</section>
<footer>
</footer>
</div>
</body>
</html>
Reduce the size of the div that contains the player by specifying the width property in pixels for the #musicplayer div. The CSS you provided already has a width: 90px; line however its not working because its to the right of the align-items: center; line. Move that new width line to a new line, and put a semicolon after align-items: center
#musicplayer {
display: grid;
grid-template-columns: 18px auto;
align-items: center width: 90px; /* notice this line with width in it */
height: 24px;
font-size: 11px;
font-family: kosugi;
color: #955136;
line-height: 200%;
background: white;
border: 2px solid #F9CDE2;
border-radius: 2px;
}
I have this code:
new WOW().init();
/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
$('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
//$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});
body {
font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 13px;
background-color: #000000 !important;
background-size: cover;
margin: 0;
height: 100%;
background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}
.overlayE {
position: absolute;
width: 100%;
height: 100% !important;
margin: 0;
padding: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.886);
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
font-size: 13px;
direction: ltr;
}
.sectionClass1 {
padding: 80px 0px 50px 0px;
position: relative;
display: block;
}
.row {
width: 980px;
height: 100%;
max-width: 100%;
margin: 0 auto;
}
.row:before,
.row:after {
content: "";
display: table;
}
.sectiontitle {
background-position: center;
text-align: center;
min-height: 20px;
}
.sectiontitle h2 {
font-size: 30px;
color: #222;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.headerLine {
width: 160px;
height: 2px;
display: inline-block;
background: #101F2E;
}
.fullWidth {
width: 100%;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
}
/********************************/
/* SECTION WORK EXPERIENCE
********************************/
#work-experience .sectiontitle .headerLine {
width: 280px;
}
#work-experience .headerline {
width: 280px;
}
.cbp_tmtimeline {
margin: 60px 30px 0 0;
padding: 0;
list-style: none;
position: relative;
}
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 3%;
bottom: 0;
width: 10px;
background: #324454;
left: 13%;
height: 100%;
}
.cbp_tmtimeline li:last-child:before {
content: initial;
}
.cbp_tmtimeline>li .cbp_tmtime {
display: block;
width: 25%;
padding-right: 100px;
position: absolute;
}
.cbp_tmtimeline>li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline>li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 2.9em;
color: #3594cb;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
color: #6cbfee;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 0 0 15px 25%;
background: rgba(50, 68, 84, 1);
color: #FFF;
padding: 30px;
font-size: 1.2em;
font-weight: 300;
line-height: 1.4;
font-family: 'Open Sans';
position: relative;
border-radius: 5px;
min-height: 150px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
background: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmlabel h3 {
margin-top: 0px;
color: white;
font-size: 20px;
margin-bottom: 5px;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 {
opacity: 0.7;
color: rgba(255, 255, 255, 1);
letter-spacing: 0px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
line-height: 1.2em;
font-weight: 600;
padding: 0;
padding-bottom: 10px;
margin: 0;
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 i {
margin-right: 5px;
vertical-align: middle;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: rgba(50, 68, 84, 1);
border-width: 10px;
top: 70px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmicon {
width: 150px;
height: 150px;
top: 3%;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #151515;
background: #324454;
border-radius: 50%;
text-align: center;
left: 8%;
margin: 0 0 0 -25px;
}
.cbp_tmtimeline li {
margin-bottom: 70px;
position: relative;
}
.sectionClassProject {
position: relative;
display: block;
/* background: #f7f7f7; */
margin: 0 auto;
padding: 80px 1.875em 3.125em;
}
.projectParagraph {
font-size: 18px;
margin: 0.5em 0 0;
font-family: 'Source Sans Pro', serif;
}
.projectParagraphLink {
font-size: 15px !important;
font-weight: 500 !important;
margin-top: 50px !important;
margin-bottom: 0px;
text-align: right;
}
.projectParagraphLink a {
color: white;
text-decoration: underline;
}
.cbp_tmicon img {
width: 100%;
}
.faPra {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 70px;
vertical-align: middle;
color: white;
line-height: 150px;
}
.label {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
color: #FFFFFF;
display: inline;
font-size: 12px;
font-weight: bold;
margin-right: 10px;
padding: 5px 15px;
}
.date {
color: #BFC3C7;
display: block;
font-size: 14px;
font-weight: 600;
position: absolute;
top: 30px;
right: 20px;
}
.date i {
margin-right: 8px;
vertical-align: top;
font-size: 18px;
line-height: 20px;
}
#media (max-width: 1024px) {
.cbp_tmtimeline:before {
display: none;
}
.cbp_tmtimeline>li .cbp_tmtime {
width: 100%;
position: relative;
padding: 0 0 20px 0;
}
.cbp_tmtimeline>li .cbp_tmtime span {
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 30px 0 70px 0;
padding: 50px 30px 30px 30px;
font-weight: 400;
font-size: 95%;
float: left;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: auto;
border-right-color: transparent;
border-bottom-color: rgb(50, 68, 84);
top: -20px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: transparent;
border-bottom-color: rgb(43, 58, 72);
left: 65px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
right: 65px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
position: relative;
float: left;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
position: relative;
float: right;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 1.5em;
}
}
#media (max-width: 32em) {
.cbp-ntaccordion {
font-size: 70%;
}
}
<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<div class="overlayE"></div>
<div id="workexperience">
<div class="row ">
<div class="sectiontitle">
<h2>Work experience</h2>
<span class="headerLine"></span>
</div>
<ul class="cbp_tmtimeline">
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web developer</h3>
<div class="date">
<i class="fa fa-calendar"></i>April 2014 - Current
</div>
<h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-screen">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
<div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-mail">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
<div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Freelancer</h3>
<div class="date"><i class="fa fa-calendar"></i>Januar 2006 - November 2009</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iusto, possimus hic at quisquam, incidunt illo asperiores et nobis, qui nulla consequatur molestiae quibusdam expedita dignissimos? Iste eum velit quos.</p>
</div>
</li>
</ul>
</div>
</div>
If you run the code, and open it on new page, there is a different background at the end of the page, I would like to remove that and merge it with the dark background I have. How can I extend the dar background to the full page? I would just like the blueish background near the end of the page to be removed.
Edit: enter image description here
You can set the overflow-y on the body to scroll and still use the fixed background
new WOW().init();
/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
$('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
//$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 13px;
background-color: #000000 !important;
background-size: cover;
margin: 0;
height: 100%;
overflow-y: scroll;
background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}
.overlayE {
position: fixed;
width: 100%;
height: 100% !important;
margin: 0;
padding: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.886);
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
font-size: 13px;
direction: ltr;
}
.sectionClass1 {
padding: 80px 0px 50px 0px;
position: relative;
display: block;
}
.row {
width: 980px;
height: 100%;
max-width: 100%;
margin: 0 auto;
}
.row:before,
.row:after {
content: "";
display: table;
}
.sectiontitle {
background-position: center;
text-align: center;
min-height: 20px;
}
.sectiontitle h2 {
font-size: 30px;
color: #222;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.headerLine {
width: 160px;
height: 2px;
display: inline-block;
background: #101F2E;
}
.fullWidth {
width: 100%;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
}
/********************************/
/* SECTION WORK EXPERIENCE
********************************/
#work-experience .sectiontitle .headerLine {
width: 280px;
}
#work-experience .headerline {
width: 280px;
}
.cbp_tmtimeline {
margin: 60px 30px 0 0;
padding: 0;
list-style: none;
position: relative;
}
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 3%;
bottom: 0;
width: 10px;
background: #324454;
left: 13%;
height: 100%;
}
.cbp_tmtimeline li:last-child:before {
content: initial;
}
.cbp_tmtimeline>li .cbp_tmtime {
display: block;
width: 25%;
padding-right: 100px;
position: absolute;
}
.cbp_tmtimeline>li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline>li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 2.9em;
color: #3594cb;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
color: #6cbfee;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 0 0 15px 25%;
background: rgba(50, 68, 84, 1);
color: #FFF;
padding: 30px;
font-size: 1.2em;
font-weight: 300;
line-height: 1.4;
font-family: 'Open Sans';
position: relative;
border-radius: 5px;
min-height: 150px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
background: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmlabel h3 {
margin-top: 0px;
color: white;
font-size: 20px;
margin-bottom: 5px;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 {
opacity: 0.7;
color: rgba(255, 255, 255, 1);
letter-spacing: 0px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
line-height: 1.2em;
font-weight: 600;
padding: 0;
padding-bottom: 10px;
margin: 0;
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 i {
margin-right: 5px;
vertical-align: middle;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: rgba(50, 68, 84, 1);
border-width: 10px;
top: 70px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmicon {
width: 150px;
height: 150px;
top: 3%;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #151515;
background: #324454;
border-radius: 50%;
text-align: center;
left: 8%;
margin: 0 0 0 -25px;
}
.cbp_tmtimeline li {
margin-bottom: 70px;
position: relative;
}
.sectionClassProject {
position: relative;
display: block;
/* background: #f7f7f7; */
margin: 0 auto;
padding: 80px 1.875em 3.125em;
}
.projectParagraph {
font-size: 18px;
margin: 0.5em 0 0;
font-family: 'Source Sans Pro', serif;
}
.projectParagraphLink {
font-size: 15px !important;
font-weight: 500 !important;
margin-top: 50px !important;
margin-bottom: 0px;
text-align: right;
}
.projectParagraphLink a {
color: white;
text-decoration: underline;
}
.cbp_tmicon img {
width: 100%;
}
.faPra {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 70px;
vertical-align: middle;
color: white;
line-height: 150px;
}
.label {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
color: #FFFFFF;
display: inline;
font-size: 12px;
font-weight: bold;
margin-right: 10px;
padding: 5px 15px;
}
.date {
color: #BFC3C7;
display: block;
font-size: 14px;
font-weight: 600;
position: absolute;
top: 30px;
right: 20px;
}
.date i {
margin-right: 8px;
vertical-align: top;
font-size: 18px;
line-height: 20px;
}
#media (max-width: 1024px) {
.cbp_tmtimeline:before {
display: none;
}
.cbp_tmtimeline>li .cbp_tmtime {
width: 100%;
position: relative;
padding: 0 0 20px 0;
}
.cbp_tmtimeline>li .cbp_tmtime span {
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 30px 0 70px 0;
padding: 50px 30px 30px 30px;
font-weight: 400;
font-size: 95%;
float: left;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: auto;
border-right-color: transparent;
border-bottom-color: rgb(50, 68, 84);
top: -20px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: transparent;
border-bottom-color: rgb(43, 58, 72);
left: 65px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
right: 65px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
position: relative;
float: left;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
position: relative;
float: right;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 1.5em;
}
}
#media (max-width: 32em) {
.cbp-ntaccordion {
font-size: 70%;
}
}
<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<body>
<div class="overlayE"></div>
<div id="workexperience">
<div class="row ">
<div class="sectiontitle">
<h2>Work experience</h2>
<span class="headerLine"></span>
</div>
<ul class="cbp_tmtimeline">
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web developer</h3>
<div class="date">
<i class="fa fa-calendar"></i>April 2014 - Current
</div>
<h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-screen">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
<div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-mail">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
<div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>
</div>
</li>
</ul>
</div>
</div>
</body>
[with toggle effect the carousal is also moving which I don't want][1]
[without toggle the carousal is at right place ][2]
[1]: https://i.stack.imgur.com/84qYC.jpg
[2]: https://i.stack.imgur.com/rJJ8P.jpg
Here is the code html code
/*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">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="home.css">
<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=Quicksand:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"
crossorigin="anonymous"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="header-row justify-content-between align-items">
<div class="logo">
<img src="logo.png">
</div>
<button type="button" class="nav-toggler">
<span></span>
</button>
<nav class="navigation">
<ul>
<li class="active">Home</li>
<li>Services</li>
<li>Gallery</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="display-flex">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="news-slider" class="owl-carousel owl-theme">
<div class="news-grid">
<div class="news-grid-image">
<img src="bg.jpg" alt="">
<div class="news-grid-box">
<h1>19</h1>
<p>Sep</p>
</div>
</div>
<div class="news-grid-txt">
<span>Finance</span>
<h2>heading will be here</h2>
<ul>
<li><i class="fa fa-calendar"></i>Sept 19, 2020</li>
<li><i class="fa fa-user"></i>Admin</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro eligendi
et
excepturi minima tempora ex magni at fugit, voluptatibus animi minus. Non numquam
vel
impedit perferendis dolorum voluptatem quos.</p>
<button>Read More....</button>
</div>
</div>
<div class="news-grid">
<div class="news-grid-image">
<img src="bg.jpg" alt="">
<div class="news-grid-box">
<h1>19</h1>
<p>Sep</p>
</div>
</div>
<div class="news-grid-txt">
<span>Finance</span>
<h2>heading will be here</h2>
<ul>
<li><i class="fa fa-calendar"></i>Sept 19, 2020</li>
<li><i class="fa fa-user"></i>Admin</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro eligendi
et
excepturi minima tempora ex magni at fugit, voluptatibus animi minus. Non numquam
vel
impedit perferendis dolorum voluptatem quos.</p>
<button>Read More....</button>
</div>
</div>
<div class="news-grid">
<div class="news-grid-image">
<img src="bg.jpg" alt="">
<div class="news-grid-box">
<h1>19</h1>
<p>Sep</p>
</div>
</div>
<div class="news-grid-txt">
<span>Finance</span>
<h2>heading will be here</h2>
<ul>
<li><i class="fa fa-calendar"></i>Sept 19, 2020</li>
<li><i class="fa fa-user"></i>Admin</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro eligendi
et
excepturi minima tempora ex magni at fugit, voluptatibus animi minus. Non numquam
vel
impedit perferendis dolorum voluptatem quos.</p>
<button>Read More....</button>
</div>
</div>
<div class="news-grid">
<div class="news-grid-image">
<img src="bg.jpg" alt="">
<div class="news-grid-box">
<h1>19</h1>
<p>Sep</p>
</div>
</div>
<div class="news-grid-txt">
<span>Finance</span>
<h2>heading will be here</h2>
<ul>
<li><i class="fa fa-calendar"></i>Sept 19, 2020</li>
<li><i class="fa fa-user"></i>Admin</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro eligendi
et
excepturi minima tempora ex magni at fugit, voluptatibus animi minus. Non numquam
vel
impedit perferendis dolorum voluptatem quos.</p>
<button>Read More....</button>
</div>
</div>
<div class="news-grid">
<div class="news-grid-image">
<img src="bg.jpg" alt="">
<div class="news-grid-box">
<h1>19</h1>
<p>Sep</p>
</div>
</div>
<div class="news-grid-txt">
<span>Finance</span>
<h2>heading will be here</h2>
<ul>
<li><i class="fa fa-calendar"></i>Sept 19, 2020</li>
<li><i class="fa fa-user"></i>Admin</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro eligendi
et
excepturi minima tempora ex magni at fugit, voluptatibus animi minus. Non numquam
vel
impedit perferendis dolorum voluptatem quos.</p>
<button>Read More....</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<h3>Code Opacity</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae at excepturi placeat omnis totam assumenda quae, </p>
<ul class="socials">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> copyright ©2022 codeOpacity. designed by <span>Rahul Singh</span> </p>
</div>
</footer>
<script type="text/javascript">
$(document).ready(function () {
$("#news-slider").owlCarousel({
items: 3, //10 items above 1000px browser width
itemsDesktop: [1000, 3], //5 items between 1000px and 901px
itemsDesktopSmall: [900, 2], // betweem 900px and 601px
itemsTablet: [600, 1], //2 items between 600 and 0;
itemsMobile: false,
autoPlay: true
});
});
</script>
<script src="home.js"></script>
</body>
</html>
/*The css for that code */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Quicksand',sans-serif;
}
body{
height: 100vh;
width: 100%;
background: url('bg.jpg') center no-repeat;
background-size: cover;
}
.navigation ul {
list-style: none;
}
.navigation ul li{
padding: 10px 10px;
display: inline-block;
}
.navigation ul li a{
text-decoration: none;
padding: 10px 10px;
font-size: 1.5rem;
background-color: transparent;
color: #fff;
background-color: transparent;
transition: 0.3s;
}
.navigation ul li a:hover{
background-color: #fff;
color: #000;
}
.mavigation ul li.active a{
background-color: #fff;
color: #000;
}
.header {
padding: 15px 0px;
line-height: 1.5;
}
.header-row{
display: flex;
flex-wrap: wrap;
}
.justify-content-between{
justify-content: space-between;
}
.align-items{
align-items: center;
}
.navigation{
padding: 0 30px;
}
.logo img{
width: 150px;
height: auto;
}
.nav-toggler{
height: 34px;
width: 44px;
background-color: #fff;
border-radius: 4px;
cursor: pointer;
display: none;
}
.nav-toggler :focus{
outline: none;
box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5);
}
.nav-toggler span{
height: 2px;
width: 20px;
margin: auto;
background-color: #000;
display: block;
position: relative;
transition: all 0.3s ease;
}
.nav-toggler.active span{
background-color: transparent;
}
.nav-toggler span::before, .nav-toggler span::after{
content :'';
position : absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
transition: all 0.3s ease;
}
.nav-toggler span::after{
transform: translateY(6px);
}
.nav-toggler.active span::after{
transform: rotate(45deg);
}
.nav-toggler span::before{
transform: translateY(-6px);
}
.nav-toggler.active span::before{
transform: rotate(135deg);
}
/******* Slider *******/
.display-flex{
display: flex;
align-items: center;
}
.news-grid{
position: relative;
width: auto;
background: #fff;
border-radius: 5px;
border: 1px solid #ddd;
margin: 20px;
overflow: hidden;
}
.news-grid-image{
width: 100%;
height: 280px;
overflow: hidden;
}
.news-grid-image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: .5s;
}
.news-grid-box{
display: block;
position: absolute;
text-align: center;
background: #26ccca;
left: -80px;
top: 15px;
padding: 10px;
transition: .5s;
}
.news-grid-box h1{
color:#fff;
font-size: 30px;
font-weight: 400;
letter-spacing: 2px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(255,255,255,0.3);
margin-bottom: 5px;
}
.news-grid-box p{
color: #fff;
margin-bottom: 0;
font-size:14px;
font-weight: 400;
}
.news-grid-txt span{
color:#26ccca;
font-size: 13px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
}
.news-grid-txt h2{
color: #111;
font-size: 20px;
font-weight: 500;
letter-spacing: 1px;
margin: 10px 0px 5px 0px;
}
.news-grid-txt ul li{
list-style-type: none;
display: inline-block;
font-size: 14px;
font-weight:300;
margin: 8px 10px 8px 0px;
letter-spacing: 1px;
}
.news-grid-txt ul li i{
color: #26ccca;
font-size: 14px;
font-weight: 500;
margin-right: 5px;
}
.news-grid-txt p{
color: #222;
font-size: 14px;
font-weight: 300;
line-height: 170%;
letter-spacing: 1.5px;
border-bottom: 1px solid #ececec;
padding-bottom: 15px;
margin-bottom: 25px;
height: 75px;
overflow: hidden;
}
.news-grid-txt button {
background: #26ccca;
padding: 8px 20px;
border: 0px;
border-radius: 50px;
margin: 10px;
}
.news-grid-txt button a{
color: #fff;
font-size: 14px;
font-weight: 300;
line-height: 30px;
letter-spacing: 1px;
text-decoration-line: none;
transition: .5s;
}
.news-grid:hover .news-grid-box{
left: 15px;
transition: 0.5s;
}
.news-grid:hover .news-grid-image img{
filter: grayscale(1);
transform: scale(1.1);
transition: .5s;
}
.news-grid:hover .news-grid-txt button a{
letter-spacing: 2px ;
transition: 0.5s;
}
/*******Footer *******/
footer{
color: #fff;
padding-top: 20px;
height: auto;
width: 100vw;
}
footer .footer-content{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
footer .footer-content h3{
font-size: 1.8rem;
line-height: 3rem;
text-transform: capitalize;
font-weight: 400;
}
footer .footer-content .socials{
list-style: none;
display: flex;
justify-content: center;
align-items: center;
margin: 1rem 0 1rem 0;
}
footer .footer-content .socials li{
margin: 0 10px;
}
footer .footer-content .socials li a{
text-decoration: none;
color: #fff;
}
footer .footer-content .socials li a i{
font-size: 1.1rem;
transition: color 0.4s ease;
}
footer .footer-content .socials li a:hover i{
color: aqua;
}
footer .footer-bottom{
background-color: #000;
padding: 20px 0;
text-align: center;
width: 100vw;
}
footer .footer-bottom p{
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
footer .footer-bottom span{
opacity: .4;
text-transform: uppercase;
}
#media screen and (max-width: 991px) {
.nav-toggler{
display: block;
}
.navigation{
width: 100%;
background-color: transparent;
padding: 0;
margin-top: 12px;
max-height: 0px;
overflow: hidden;
visibility: hidden;
transition: all 0.5s ease;
}
.navigation.open{
visibility: visible;
}
.navigation ul{
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.8);
}
.navigation ul li{
padding: 0;
display: block;
}
.navigation ul li a{
display: block;
text-align: center;
}
.navigation ul li a:hover{
color: #000;
background-color: transparent;
}
}
/*Javascript file home.js */
const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", navToggle);
function navToggle(){
navToggler.classList.toggle("active");
const navigation = document.querySelector(".navigation");
navigation.classList.toggle("open"); // here is the open toggler
if(navigation.classList.contains("open")){
navigation.style.maxHeight = navigation.scrollHeight + "px";
}
else{
navigation.removeAttribute("style");
}
}
the code contains Javascript , Html file and Css file. In open class is added when the toggler gets on by using javascript and the open class is removed when toggler switches off.
in the #media screen when the width is changed to different size than desktop then I am hiding the navigation and displaying the nav-toggler and on clicking I am calling the javascript in which the .navigation.open visibility is made visible.
The functionality is working correctly. the problem is when I display the navigation with the help of javascript toggle functionality . the display of carousal is going down. I want that carousal to be stagnant in the position it is. the toggle should overlap and come at the top .
I created a popup with pseudoclass :target and it works properly.
<!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" />
<title>Document</title>
<style>
body {
font-family: "Open Sans", sans-serif;
padding: 0;
margin: 0;
}
h2 {
color: #2062ae;
}
a.btn {
display: block;
margin: 0px auto;
border: 1px solid #2062ae;
padding: 10px 20px;
color: #2062ae;
width: 100px;
transition: 0.4s;
text-decoration: none;
text-align: center;
}
a.btn:hover {
background: #2062ae;
color: white;
}
.popup {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
#popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #999;
opacity: 0;
transition: 1s;
z-index: -1;
}
#popup:target {
opacity: 1;
z-index: 2;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
/* min-height: 35%;
width:50%;
line-height: 1.5; */
/* word-break: break-all; */
transform: translate(-50%, -50%);
padding: 20px 10px;
background: rgb(238, 235, 235);
border: 5px ridge orange;
font-size: smaller;
}
.close-popup {
position: absolute;
top: -1em;
left: -1em;
width: 2em;
height: 2em;
border-radius: 50%;
line-height: 2em;
text-align: center;
background-color: #ccc;
text-decoration: none;
color: black;
}
video {
width: 100%;
height: auto;
display: block; /* Necessario altrimenti visualizza una striscia bianca in basso */
}
</style>
</head>
<body>
<div class="popup">
<h2>Pure CSS Popup</h2>
Apri Popup
</div>
<div id="popup">
<div class="popup-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis
iure numquam quia dolores voluptates repellat qui, incidunt in, enim
id laborum doloribus odio rem sed fuga ratione totam? Laboriosam,
ipsam.
</p>
<!-- Attribute muted necessario altrimenti Google Chrome potrebbe impedire l'autoplay -->
<!-- <video src="video.mp4" autoplay muted controls></video> -->
X
</div>
</div>
<!-- <script>
let closeLink = document.querySelector(".close-popup");
closeLink.onclick = stoppaVideo;
function stoppaVideo() {
document.getElementsByTagName("video")[0].pause();
}
</script> -->
</body>
</html>
However I would make possible click on the background/overlay element and close the popup. For this purpose I transformated the div element (#popup) in a tag but in this way doesn't work. How could I resolve, and why doesn't work like that?
Below the code that doesn't work.
<!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" />
<title>Document</title>
<style>
body {
font-family: "Open Sans", sans-serif;
padding: 0;
margin: 0;
}
h2 {
color: #2062ae;
}
a.btn {
display: block;
margin: 0px auto;
border: 1px solid #2062ae;
padding: 10px 20px;
color: #2062ae;
width: 100px;
transition: 0.4s;
text-decoration: none;
text-align: center;
}
a.btn:hover {
background: #2062ae;
color: white;
}
.popup {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
#popup {
display:block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #999;
opacity: 0;
transition: 1s;
z-index: -1;
}
#popup:target {
opacity: 1;
z-index: 2;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
/* min-height: 35%;
width:50%;
line-height: 1.5; */
/* word-break: break-all; */
transform: translate(-50%, -50%);
padding: 20px 10px;
background: rgb(238, 235, 235);
border: 5px ridge orange;
font-size: smaller;
}
.close-popup {
position: absolute;
top: -1em;
left: -1em;
width: 2em;
height: 2em;
border-radius: 50%;
line-height: 2em;
text-align: center;
background-color: #ccc;
text-decoration: none;
color: black;
}
video {
width: 100%;
height: auto;
display: block; /* Necessario altrimenti visualizza una striscia bianca in basso */
}
</style>
</head>
<body>
<div class="popup">
<h2>Pure CSS Popup</h2>
Apri Popup
</div>
<a href="#" id="popup">
<div class="popup-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis
iure numquam quia dolores voluptates repellat qui, incidunt in, enim
id laborum doloribus odio rem sed fuga ratione totam? Laboriosam,
ipsam.
</p>
<!-- Attribute muted necessario altrimenti Google Chrome potrebbe impedire l'autoplay -->
<!-- <video src="video.mp4" autoplay muted controls></video> -->
X
</div>
</a>
<!-- <script>
let closeLink = document.querySelector(".close-popup");
closeLink.onclick = stoppaVideo;
function stoppaVideo() {
document.getElementsByTagName("video")[0].pause();
}
</script> -->
</body>
</html>