'I am a beginner in html. I created a toggle using javascript. When I added a toggle the other content of the website is moving down . How to fix?
[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"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></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><a href="#">Read More....</a></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><a href="#">Read More....</a></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><a href="#">Read More....</a></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><a href="#">Read More....</a></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><a href="#">Read More....</a></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><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-youtube"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-linkedin-square"></i></a></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 .
Solution 1:[1]
Provided I completely understand what you're asking for, here's what I did: I made your mobile menu positioned absolutely and adjusted and open and closed classes as necessary. I also used the z-index to make sure it appears above everything else. You can tune the attributes to your liking. Doing it this way prevents anything in the rest of your doc flow from changing and it's still all scrollable and I didn't have to modify your owl carousel to do it.
Your code didn't include links to any images so I just put some placeholders in the background and put a gray background over your nav so I could see what I was working on, you can remove those and replace them with your actual content.
Hope that covers it, let me know if you need any further assistance
$(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
});
});
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");
}
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
}
body {
height: 100vh;
width: 100%;
background: url('https://i.imgur.com/BHvRNUB.jpeg') center 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;
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%;
position: absolute;
top: 3rem;
left: 0;
background-color: transparent;
padding: 0;
max-height: 0px;
overflow: hidden;
visibility: hidden;
transition: all 0.5s ease;
}
.navigation.open {
visibility: visible;
width: 100%;
z-index: 99;
position: absolute;
background-color: rgba(127, 127, 127, 0.9);
top: 3rem;
left: 0;
}
.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;
}
}<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"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></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><a href="#">Read More....</a></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><a href="#">Read More....</a></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><a href="#">Read More....</a></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><a href="#">Read More....</a></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><a href="#">Read More....</a></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><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-youtube"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-linkedin-square"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p> copyright ©2022 codeOpacity. designed by <span>Rahul Singh</span> </p>
</div>
</footer>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |