Creating Grid layout when clicked on nav tabs - javascript

I am trying to create a profile page like Instagram.
What I want is a 3 grid layout display of cards, to be divided in 3 numbers when viewed on Desktop with a gap of 10px, in mobile just one card visible and it should be responsible and fit to screen till 250px media width.
Let me know how can I do that. I also have a problem in removing the active class of nav tabs when clicked on other tabs.
Please check and let me know.
I tried the following:
const targets = document.querySelectorAll('[data-target]');
const content = document.querySelectorAll('[data-content]');
targets.forEach(target => {
target.addEventListener('click', () => {
content.forEach(c => {
c.classList.remove('active')
})
const t = document.querySelector(target.dataset.target)
t.classList.add('active');
target.classList.add('active');
})
})
#main-profile {
margin: 0;
profile: 0;
position: relative;
}
.profile-container {
max-width: 1280px;
margin: 0 auto;
box-sizing: border-box;
}
.wrapper-profile {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-areas: "intro details details details";
}
.wrapper-profile .wrapper-profile-intro {
grid-area: intro;
}
.wrapper-profile .wrapper-profile-details {
grid-area: details;
}
.wrapper-profile .wrapper-profile-intro,
.wrapper-profile .wrapper-profile-details {
background: #fff;
padding: 0 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 10px;
}
.profile-header {
margin: 0;
padding: 0;
}
.profile-header img {
display: cover;
width: 100%;
height: 200px;
opacity: 0.6;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.wrapper-profile-intro .profile-card {
flex: 1;
-webkit-box-flex: 1;
-ms-flex: 1;
height: 100%;
width: 100%;
font-weight: 300 !important;
position: relative;
}
.wrapper-profile-intro .profile-card .profile-image {
display: flex;
align-items: center;
justify-content: center;
margin-top: -50px;
}
.wrapper-profile-intro .profile-image img {
flex-wrap: wrap;
pointer-events: none;
border-radius: 50%;
width: 90px;
height: 90px;
float: none;
display: block;
object-fit: fill;
margin-bottom: 5px;
border: 4px solid #fff;
box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.18);
-webkit-box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.18);
}
.profile-card .profile-image span {
position: absolute;
display: flex;
background: #2afa6a;
width: 16px;
height: 16px;
border-radius: 50%;
margin-left: 60px;
margin-top: 60px;
border: 2px solid #fff;
}
.profile-card .profile-name {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.profile-card .profile-name h2 {
font-weight: 400;
margin-top: 0px;
font-size: 18px;
margin-bottom: 2px;
}
.profile-card .profile-name p {
font-size: 0.8rem;
color: #818181;
margin: 1px;
}
.profile-card .profile-page-stats {
margin: 10px 0 20px 0;
color: #1d1d1d;
font-size: 12px;
display: flex;
align-items: center;
gap: 0.25rem;
align-items: center;
font-weight: 300!important;
cursor: pointer;
position: relative;
}
.profile-card .profile-page-stats .stats {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
justify-content: center;
margin-bottom: -10px;
}
.profile-card .profile-page-stats .stats #followerCount,
.profile-card .profile-page-stats .stats #mediaCount,
.profile-card .profile-page-stats .stats #followingCount {
font-size: 10px;
font-weight: 500 !important;
color: #1d1d1d;
}
.profile-card .profile-page-stats .stats span {
color: #818181;
}
.profile-card .profile-page-stats::after {
position: absolute;
content: "";
bottom: -16px;
display: block;
background: #ccc;
height: 1px;
width: 100%;
}
.profile-card .profile-details p {
font-weight: 400;
}
.profile-card ul {
display: flex;
justify-content: center;
align-items: center;
gap: 0.50rem;
margin-right: 45px;
}
.details-header nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
margin-left: -40px;
cursor: pointer;
}
.details-header nav ul {
list-style: none;
display: flex;
gap: 20px;
}
.details-header nav ul li {
text-transform: uppercase;
padding: 5px 10px;
margin-top: -5px;
}
.details-header nav ul li.active {
text-transform: uppercase;
color: #FFF;
background: #000;
padding: 5px 10px;
margin-top: -5px;
border-radius: 50px;
}
.details-header nav button {
background: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.details-header nav button:hover {
opacity: 0.8;
}
.wrapper-profile-details .details-content {
position: relative;
}
[data-content] {
display: none;
}
.active[data-content] {
display: block;
}
.card {
min-width: 15rem;
flex: 1;
-webkit-box-flex: 1;
-ms-flex: 1;
height: 100%;
width: 100%;
border: 1px solid #ccc;
background: #fff;
font-weight: 300 !important;
position: relative;
}
#media(max-width: 768px) {
.wrapper-profile {
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-template-areas: "intro" "details";
}
.wrapper-profile .wrapper-profile-intro,
.wrapper-profile .wrapper-profile-details {
padding: 0 10px;
}
.wrapper-profile .wrapper-profile-intro {
margin-bottom: -5px;
}
.profile-card .profile-page-stats {
max-width: 300px;
margin: 5px auto;
margin-bottom: 30px;
}
.details-header nav {
justify-content: center;
align-items: center;
flex-direction: column-reverse;
}
.details-header nav ul {
gap: 10px;
}
.details-header nav ul li.active,
.details-header nav ul li {
font-size: 10px;
}
.details-header nav button {
margin-left: 40px;
}
}
<div id="main-profile">
<div class="profile-header">
<img src="img/6.jpg">
</div>
<div class="profile-container">
<div class="wrapper-profile">
<div class="wrapper-profile-intro">
<div class="profile-card">
<div class="profile-image">
<img src="img/4.jpeg" alt="profile-picture">
<span></span>
</div>
<div class="profile-name">
<h2>Umann Goswami</h2>
<p><i class="fas fa-chess-pawn"></i><span> Basic member</span></p>
<p>
<p>Anna#xyz.com</p>
</p>
</div>
<div class="profile-page-stats">
<div class="stats">
<strong id="mediaCount">56.7K</strong>
<span>Media</span>
</div>
<div class="stats">
<strong id="followerCount">56.7K</strong>
<span>Followers</span>
</div>
<div class="stats">
<strong id="followingCount">56.7K</strong>
<span>Followings</span>
</div>
</div>
<!--profile-page-stats-->
<div class="profile-details">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-pinterest"></i></li>
</ul>
</div>
</div>
<div class="wrapper-profile-details">
<div class="details-header">
<nav>
<ul>
<li class="active" data-target="#blogs">Blogs</li>
<li data-target="#images">Images</li>
<li data-target="#about">About</li>
</ul>
<button>Follow</button>
</nav>
</div>
<!--details-header-->
<div class="details-content
">
<div data-content id="blogs" class="active details-content-boxes">
<div class="card">
abc
</div>
<div class="card">
abc
</div>
<div class="card">
abc
</div>
</div>
<div data-content id="images" class=" details-content-boxes">
123
</div>
<div data-content id="about" class=" details-content-boxes">
12
</div>
</div>
<!--details-content-->
</div>
<!--wrapper-profile-details-->
</div>
<!--wrapper-profile-->
</div>
<!--profile-container-->
</div>

Here is a basic example using CSS Grid and media queries to achieve the desired layout:
HTML:
<div class="container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
</div>
CSS:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
#media (max-width: 250px) {
.container {
grid-template-columns: 1fr;
}
}
.card {
background-color: lightgray;
padding: 20px;
text-align: center;
}
To remove the active class of nav tabs, you need to use JavaScript or jQuery to listen for the click event on the tabs and remove the active class from the current active tab and add it to the clicked tab. Here is a basic example using jQuery:
HTML:
<ul class="nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
jQuery:
$('.nav-tabs a').click(function() {
$('.nav-tabs .active').removeClass('active');
$(this).parent().addClass('active');
});

Related

Active navigation bar with main content

I have a problem with my active navigation bar. When I open the hamburger menu than the main content stay fixed and does not moving with the open navigation menu. I was looking on the internet, but i did not find something what can help me or how to solve it. I am sending here my code. If anycone can help with this i will be happy. What can i do? How to repair it?
Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<header>
<div class="logo">Logo</div>
<div class="hamburger">
<div class="lines"></div>
</div>
<nav class="nav-bar">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function () {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
</script>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nihil corporis ut praesentium accusantium possimus molestiae reprehenderit quam nostrum distinctio repudiandae iure aliquam repellat unde recusandae quas ipsam. Dicta animi.</p>
</main>
</body>
</html>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
body {
background: #fff;
font-size: 100%;
}
/* NAVIGATION */
header {
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25em 6.25em;
border-bottom: 1px solid #000;
}
.logo {
width: 50%;
}
.hamburger {
display: none;
}
.nav-bar ul {
display: flex;
}
.nav-bar ul li a {
display: block;
color: #000;
font-size: 1.375em;
padding: 0.4545454545454545em 0.6818181818181818em;
border-radius: 50px;
transition: all 0.5s ease-in-out;
margin: 0 0.2272727272727273em;
}
.nav-bar ul li a:hover {
color: #fff;
background: #ffb038;
}
.fa-solid {
margin-right: 0.6818181818181818em;
vertical-align: middle;
}
#media only screen and (max-width: 1770px) {
.nav-bar ul li a i {
display: block;
}
}
#media only screen and (max-width: 1400px) {
header {
padding: 0px 1.5625em;
}
.hamburger {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.lines {
width: 50px;
height: 6px;
background-color: #ffb038;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.lines::before,
.lines::after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background-color: #ffb038;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.lines::before {
transform: translateY(-16px);
}
.lines::after {
transform: translateY(16px);
}
.hamburger.open .lines {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .lines::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .lines::after {
transform: rotate(-45deg) translate(35px, 35px);
}
.nav-bar {
height: 0;
position: absolute;
top: 65px;
left: 0;
right: 0;
width: 100vw;
background: #ffb038;
transition: 0.5s;
overflow: hidden;
}
.nav-bar.active {
height: 28.125em;
transition: all 0.5s ease-in-out;
margin-top: 15px;
}
.nav-bar ul {
display: block;
width: fit-content;
margin: 5em auto 0 auto;
text-align: center;
transition: all 0.5s ease-in-out;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
display: block;
}
.nav-bar ul li a {
margin-bottom: 0.75em;
}
.nav-bar ul li a:hover {
color: #000;
background: white;
}
}
In your media-query you are taking .nav-bar out of the flow with position: absolute, meaning it cannot affect e.g. main.
Adding a wrapper around .logo and .hamburger allows us to keep .nav-bar as its sibling in the flow:
<!--Before:-->
<header>
<div class="logo">Logo</div>
<div class="hamburger">
<div class="lines"></div>
</div>
<nav class="nav-bar"><!--...--></nav>
</header>
<!--After:-->
<header>
<div><!--The wrapper-->
<div class="logo">Logo</div>
<div class="hamburger">
<div class="lines"></div>
</div>
</div>
<nav class="nav-bar"><!--...--></nav>
</header>
This wrapper will replace before's header in terms of CSS. The result may look like this:
const hamburger = document.querySelector(".hamburger");
const navBar = document.querySelector(".nav-bar");
hamburger.addEventListener("click", () => navBar.classList.toggle("active"));
.nav-bar {
width: 100%;
background: #ffb038;
overflow: hidden;
}
.nav-bar:not(.active) {
height: 0;
}
.nav-bar a {
padding: 0.5em 0.7em;
width: 100%;
height: 48px;
display: inline-block;
box-sizing: border-box;
font-size: 1.375em;
text-align: center;
}
/*Wrapper (styled as before's header) - Mobile style*/
#wrapper {
padding: 0px 1.5625em;
border-bottom: 1px solid black;
display: flex;
align-items: center;
justify-content: space-between;
}
/*Default style*/
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
font-family: sans-serif;
color: black;
}
.hamburger {
width: 80px;
height: 80px;
background-color: orange;
cursor: pointer;
}
<body>
<header>
<div id="wrapper"><!--New wrapper-->
<div class="logo">Logo</div>
<div class="hamburger"></div>
</div>
<nav class="nav-bar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</header>
<main>
Lorem ipsum set amet.
</main>
</body>
To effectively transition height property, you can transition max-height. You may want to use custom properties:
const hamburger = document.querySelector(".hamburger");
const navBar = document.querySelector(".nav-bar");
hamburger.addEventListener("click", () => navBar.classList.toggle("active"));
// Example of setting `--links` property:
navBar.style.setProperty("--links", navBar.querySelectorAll("a").length);
.nav-bar {
--links: 3; /*Example of setting `--links` property*/
--link-height: 48px;
max-height: calc(var(--links, 0) * var(--link-height));
transition: max-height .25s ease;
}
.nav-bar:not(.active) {
max-height: 0;
}
.nav-bar a {
height: var(--link-height);
}
/*Remove `height` declarations from .nav-bar and related; otherwise same as before:*/
.nav-bar {
width: 100%;
background: #ffb038;
overflow: hidden;
}
.nav-bar a {
padding: 0.5em 0.7em;
width: 100%;
display: inline-block;
box-sizing: border-box;
font-size: 1.375em;
text-align: center;
}
#wrapper {
padding: 0px 1.5625em;
border-bottom: 1px solid black;
display: flex;
align-items: center;
justify-content: space-between;
}
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
font-family: sans-serif;
color: black;
}
.hamburger {
width: 80px;
height: 80px;
background-color: orange;
cursor: pointer;
}
<body>
<header>
<div id="wrapper">
<div class="logo">Logo</div>
<div class="hamburger"></div>
</div>
<nav class="nav-bar" style="--links:3"><!--Example of setting `--links` property-->
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</header>
<main>
Lorem ipsum set amet.
</main>
</body>

JS Onclick function is not working properly

Html:
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse" id="collapse">
<div class="progNum" style="--i: 'Program 1'">
<div>
<h1>1</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 01:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis. </p>
<div class="btns"> <button class="btn btn1 showDiv3"> <img src="svg/dash.svg"> </button> <button class="btn btn2"> <span>Source code</span> <img src="svg/arrow.svg"> </button>
</div>
</div>
<div class="div3">
<div class="h-div3">
<h1>C++</h1>
<img src="svg/close.svg" class="div3-close">
</div>
<div class="d-link-div3"> <span>Download</span> Turbo C++ Code Dev C++ Code
</div>
<div class="c-link-div3"> <span>Compiler</span> Compile
</div>
<div class="view-div3"> <span>View Code</span> View Code
</div>
</div>
</div>
When a user click on div.prog shrink the class name changes to div.prog expand
I want to add the class shrink and remove the class expand when a user click on img.collapse#collapse
I tried:
var closeBtn = document.getElementById('collapse');
var prog = document.getElementById('prog');
closeBtn.onclick = function(){
console.log('close button clicked..');
prog.classList.remove('expand');
prog.classList.add('shrink');
}
The output statement is displaying on the console but the div is not returning to its initial state.
Full code :
var progElements = document.getElementsByClassName('prog');
var closeBtn = document.getElementById('collapse');
for (let i = 0; i < progElements.length; i++) {
progElements[i].onclick = function() {
this.classList.add('expand');
this.classList.remove('shrink');
for (let j = 0; j < progElements.length; j++) {
if (i !== j) {
if (!progElements[j].classList.contains('shrink')) {
progElements[j].classList.add('shrink');
progElements[j].classList.remove('expand');
}
}
}
}
}
var showDiv3 = document.getElementsByClassName('showDiv3');
var div3 = document.getElementsByClassName('div3');
var div3Close = document.getElementsByClassName('div3-close');
for (let i = 0; i < div3.length; i++) {
showDiv3[i].onclick = function() {
div3[i].style.display = 'block';
div3[i].style.zIndex = '100';
}
div3Close[i].onclick = function() {
div3[i].style.display = 'none';
}
}
var closeBtn = document.getElementById('collapse');
var prog = document.getElementById('prog');
closeBtn.onclick = function() {
console.log('close button clicked..');
prog.classList.remove('expand');
prog.classList.add('shrink');
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&family=Roboto+Condensed:wght#300;400;700&family=Source+Sans+Pro:wght#300;400;600;700;900&display=swap");
* {
outline: 0px solid #0f0;
font-family: "Poppins", sans-serif;
user-select: none;
}
.container {
position: relative;
transform: translateX(60px);
width: calc(100vw - 60px);
height: 100vh;
overflow: scroll;
background: #152644;
}
.container .title {
text-align: center;
width: 100%;
height: 66px;
background: #11101d;
display: flex;
justify-content: center;
align-items: center;
}
.container .title h1 {
color: #fff;
font-size: 35px;
font-weight: 700;
font-family: "Poppins", sans-serif;
background: var(--rainbow);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container .content {
position: relative;
height: calc(100% - 66px);
width: 100%;
overflow: scroll;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.home-content {
border: 0px solid #fff;
}
.home-content h1 {
color: #fff;
border: 0px solid #aaa;
}
.home-content .hc-links {
border: 0px solid #f0f;
}
.home-content .hc-links div {
border: 0px solid #0ff;
}
.home-content .hc-links div h1 {
border: 0px solid #faa;
}
.home-content .hc-links div a {
border: 0px solid #ff0;
}
.home-content .fback {
border: 0;
}
.content::-webkit-scrollbar {
display: none;
}
.content .prog.shrink {
margin: 16px;
width: 125px;
height: 125px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 -5px 5px rgba(250, 250, 255, 0.05), inset 0 -5px 5px rgba(250, 250, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
.content .prog.expand {
position: relative;
margin: 20px auto;
width: 75%;
background-color: #007bff;
border-radius: 20px;
display: flex;
justify-content: space-evenly;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.3);
}
.prog.shrink .div1 {
height: 125px;
width: 125px;
background: #11101d;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 {
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.prog.shrink .div1 .collapse {
display: none;
}
.prog.expand .div1 .collapse {
border: 1px solid #00f;
position: absolute;
top: 10px;
left: 10px;
height: 40px;
filter: invert(1);
background: #778;
border-radius: 5px;
}
.prog.shrink .div1 .progNum {
padding: 7px;
position: relative;
height: 75px;
width: 75px;
background: rgba(250, 250, 255, 0.45);
border-radius: 50%;
transform: translateY(-15px);
}
.prog.shrink .div1 .progNum::after {
content: var(--i);
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
color: #0088ff;
font-size: 15px;
font-weight: 500;
font-family: "Poppins", sans-serif;
opacity: 0.8;
}
.prog.expand .div1 .progNum {
background: #0088ff;
height: 125px;
width: 125px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
box-shadow: 0 0 20px rgba(0, 0, 255, 0.2);
}
.prog.shrink .div1 .progNum>div {
background: #11101d;
height: 100%;
width: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div {
background: #def;
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.shrink .div1 .progNum>div>h1 {
font-size: 2.5em;
color: #0088ff;
font-weight: bold;
opacity: 0.8;
}
.prog.expand .div1 .progNum>div>h1 {
font-size: 52px;
}
.prog.shrink div2 {
display: none;
}
.prog.expand .div2 {
padding: 20px;
width: calc(100% - 250px);
}
.prog.expand .div2 h1 {
color: #fff;
font-size: 30px;
font-family: "Poppins", sans-serif;
}
.prog.expand .div2 p {
color: rgba(255, 255, 255, 0.8);
height: 100px;
margin-top: 20px;
margin-bottom: 10px;
font-size: 17px;
}
.prog.expand .div2 .btns {
width: 100%;
display: flex;
}
.prog.expand .div2 .btns .btn {
padding: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
background: #0bc42a;
border: none;
border-radius: 5px;
color: #fff;
}
.prog.expand .div2 .btns .btn1 {
padding: 10px;
}
.prog.expand .div2 .btns .btn2 {
margin-left: 20px;
}
.prog.expand .div2 .btns .btn2 span {
font-size: 20px;
}
.prog.expand .div2 .btns .btn img {
filter: invert(1);
}
.prog.expand .div3 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
background: #11101d;
}
.prog.expand .div3 .h-div3 {
margin-left: -10px;
margin-top: -10px;
width: calc(100% + 20px);
min-height: 50px;
background: #007bff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
}
.prog.expand .div3 .h-div3 h1 {
font-size: 30px;
color: #fff;
}
.prog.expand .div3 .h-div3 img {
filter: invert(1);
height: 30px;
}
.prog.expand .div3 .d-link-div3 {
margin-top: 20px;
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: row;
padding: 15px 0;
}
.prog.expand .div3 .d-link-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .d-link-div3 a {
margin: 5px 5px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
.prog.expand .div3 .c-link-div3 {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0px;
min-height: 50px;
}
.prog.expand .div3 .c-link-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .c-link-div3 a {
display: block;
margin-top: 20px;
margin-bottom: 20px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
letter-spacing: 1px;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
.prog.expand .div3 .view-div3 {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0px;
min-height: 50px;
}
.prog.expand .div3 .view-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .view-div3 a {
display: block;
margin-top: 20px;
margin-bottom: 10px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
letter-spacing: 1px;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
#media screen and (max-width: 700px) {
.home-content {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 22px;
min-width: 270px;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #11101d;
border-radius: 8px;
box-shadow: 0 -5px 5px rgba(250, 250, 255, 0.05), inset 0 -5px 5px rgba(250, 250, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
.home-content h1 {
margin-top: 15px;
font-size: 32px;
font-family: "Poppins", sans-serif;
}
.home-content .hc-links {
position: relative;
margin-top: 10px;
margin-bottom: 25px;
width: 100%;
border-radius: 8px;
}
.home-content .hc-links div {
padding: 12px;
margin-top: 15px;
display: flex;
flex-direction: column;
align-items: stretch;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border-radius: 10px;
}
.home-content .hc-links div:nth-child(2) {
margin-bottom: 10px;
}
.home-content .hc-links div h1 {
font-size: 25px;
color: #def;
margin-bottom: 5px;
}
.home-content .hc-links div a {
white-space: nowrap;
text-decoration: none;
color: #fff;
background: #007bff;
font-size: 16px;
padding: 8px;
text-align: center;
border-radius: 5px;
}
.container .content {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.content .prog.shrink {
margin: 6px;
margin-bottom: 12px;
}
.content .prog.expand {
position: relative;
top: 0;
left: 0;
transform: translate(0, 0);
width: 250px;
min-height: 370px;
border-radius: 10px;
overflow: hidden;
margin: 10px;
background: #11101d;
flex-direction: column;
}
.prog.expand .div1 {
position: relative;
top: 0px;
width: 100%;
height: 100px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #007bff;
}
.prog.expand .div1 .collapse {
height: 32px;
filter: invert(0);
opacity: 1;
position: absolute;
right: 10px;
}
.prog.expand .div1 .progNum {
position: absolute;
bottom: -37px;
left: 15px;
background: #11101d;
height: 75px;
width: 75px;
padding: 7px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div {
background: #eee;
border-radius: 50%;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div>h1 {
font-size: 2.5em;
color: #000;
opacity: 0.6;
}
.prog.expand .div2 {
padding: 8px 16px;
display: block;
position: relative;
left: 0;
top: 0;
min-height: 270px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
}
.prog.expand .div2 h1 {
transform: translateY(-10px);
align-self: flex-end;
margin-right: 0px;
font-size: 24px;
font-weight: 700;
color: #fff;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
}
.prog.expand .div2 p {
transform: translateY(-10px);
margin-top: 10px;
margin-bottom: 0px;
font-size: 16.5px;
color: rgba(250, 250, 255, 0.8);
height: 160px;
overflow-y: scroll;
font-family: "Source Sans Pro", sans-serif;
word-break: break-all;
}
.prog.expand .div2 .btns {
display: flex;
justify-content: flex-start;
}
.prog.expand .div2 .btns .btn {
border: none;
border-radius: 4px;
}
.prog.expand .div2 .btns .btn1 {
padding: 4px 5px;
}
.prog.expand .div2 .btns .btn1 img {
height: 28px;
}
.prog.expand .div2 .btns .btn2 {
margin-left: 10px;
padding: 5px 10px;
}
.prog.expand .div2 .btns .btn2 span {
font-size: 20px;
margin-right: 10px;
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 500;
}
.prog.expand .div2 .btns .btn2 img {
height: 25px;
}
.prog.expand .div3 .d-link-div3 {
flex-direction: column;
align-items: center;
}
.prog.expand .div3 .d-link-div3 a {
margin: 7px 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>C++ programs</title>
<link rel="stylesheet" href="css/sideBar.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<section class="main">
<!--< --sideBar-- >-->
<section class="sidebar close" id="sideBar">
<div class="logo-section close" id="logoSection">
<img src="svg/cpp.svg" id="btn1">
<h1>C++<span>programs</span></h1>
<img src="svg/bar.svg" id="btn2" class="close">
</div>
<ul class="nav-list close" id="navList">
<li>
<a href="11th.html" class="navLinks">
<img src="svg/1.svg" class="navImg">
<span class="navItem">
11th class
</span>
</a>
<span class="tooltip">
11th class
</span>
</li>
<li>
<a href="12th.html" class="navLinks">
<img src="svg/2.svg" class="navImg">
<span class="navItem">
12th class
</span>
</a>
<span class="tooltip">
12th class
</span>
</li>
<li>
<a href="others.html" class="navLinks">
<img src="svg/3.svg" class="navImg">
<span class="navItem">
Others
</span>
</a>
<span class="tooltip">
Others
</span>
</li>
<li>
<a href="feedback.html" class="navLinks">
<img src="svg/4.svg" class="navImg">
<span class="navItem">
Feedback
</span>
</a>
<span class="tooltip">
Feedback
</span>
</li>
<li>
<a href="more.html" class="navLinks">
<img src="svg/5.svg" class="navImg">
<span class="navItem">
More
</span>
</a>
<span class="tooltip">
More
</span>
</li>
<li>
<a href="FAQ.html" class="navLinks">
<img src="svg/6.svg" class="navImg">
<span class="navItem">
FAQ
</span>
</a>
<span class="tooltip">
FAQ
</span>
</li>
<li class="theme">
<a id="theme">
<span>
Darkmode
</span>
<img src="svg/sun.svg" id="ThemeImg">
</a>
</li>
</ul>
</section>
<!--< --content-section-- >-->
<section class="container">
<div class="title">
<h1>C++ programs</h1>
</div>
<div class="content 11th">
<!--program 1-->
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse" id="collapse">
<div class="progNum" style="--i: 'Program 1'">
<div>
<h1>1</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 01:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis.
</p>
<div class="btns">
<button class="btn btn1 showDiv3">
<img src="svg/dash.svg">
</button>
<button class="btn btn2">
<span>Source code</span>
<img src="svg/arrow.svg">
</button>
</div>
</div>
<div class="div3">
<div class="h-div3">
<h1>C++</h1>
<img src="svg/close.svg" class="div3-close" />
</div>
<div class="d-link-div3">
<span>Download</span>
Turbo C++ Code
Dev C++ Code
</div>
<div class="c-link-div3">
<span>Compiler</span>
Compile
</div>
<div class="view-div3">
<span>View Code</span>
View Code
</div>
</div>
</div>
<!--program 2-->
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse">
<div class="progNum" style="--i: 'Program 2'">
<div>
<h1>2</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 02:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis.
</p>
<div class="btns">
<button class="btn btn1">
<img src="svg/dash.svg">
</button>
<button class="btn btn2">
<span>Source code</span>
<img src="svg/arrow.svg">
</button>
</div>
</div>
</div>
</div>
</section>
</section>
<script src="js/sidebar.js"></script>
<script src="js/main.js"></script>
<script>
links[0].classList.add('active');
</script>
</body>
</html>
I want to close the div by changing its class from prog expand to prog shrink
Can anyone tell how can I achieve that ...
Full project : link
First you need to have a unique id for example id="prog-one" id="prog-two".
Secondly you need to set the data-target attribute so you can target specific div to toggle(add/remove) classes like this.
<img src="svg/close.svg" class="collapse" data-target="prog-two" id="collapse">
Finally you have to get all the collapse image and add the event listener.
var closeBtns = document.querySelectorAll('.collapse');
closeBtns.forEach(closeBtn => {
closeBtn.addEventListener('click', function({target}) {
const targetId = target.getAttribute('data-target');
const targetDOM = document.getElementById(targetId);
console.log('close button clicked..');
targetDOM.classList.remove('expand');
targetDOM.classList.add('shrink');
})
})
Here is the code pen link.😊 LINK ONE LINKTWO
[UPDATED]
var progElements = document.getElementsByClassName("prog");
var closeBtn = document.getElementById("collapse");
for (let i = 0; i < progElements.length; i++) {
progElements[i].onclick = function ({ target }) {
if (target.getAttribute("class") === "collapse") return;
this.classList.add("expand");
this.classList.remove("shrink");
console.log("running");
for (let j = 0; j < progElements.length; j++) {
if (i !== j) {
if (!progElements[j].classList.contains("shrink")) {
progElements[j].classList.add("shrink");
progElements[j].classList.remove("expand");
}
}
}
};
}
var showDiv3 = document.getElementsByClassName("showDiv3");
var div3 = document.getElementsByClassName("div3");
var div3Close = document.getElementsByClassName("div3-close");
for (let i = 0; i < div3.length; i++) {
showDiv3[i].onclick = function () {
div3[i].style.display = "block";
div3[i].style.zIndex = "100";
};
div3Close[i].onclick = function () {
div3[i].style.display = "none";
};
}
var closeBtns = document.querySelectorAll(".collapse");
closeBtns.forEach((closeBtn) => {
closeBtn.addEventListener("click", function ({ target }) {
const targetId = target.getAttribute("data-target");
const targetDOM = document.getElementById(targetId);
console.log("close button clicked..");
targetDOM.className = "prog shrink";
});
});

I want to add a section under a video section but it doesn't align perfectly under the first section. How can I solve this?

I am trying to include a section under a previous section but it doesn't show and align the way I want it to be. The first section is a text section with video background but the next section added doesn't show in the preview. Even in the stack overflow snippet the "about us" section is behind the video section. How can I solve this problem?
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #000000;
transition: 0.5s;
color: #ffff;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0394f4;
mix-blend-mode: overlay;
color: #001540;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 2.5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 5em;
font-weight: 700;
color: #64A8F0;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover
{
letter-spacing: 6px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000026;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #ffff;
}
.menu ul li a:hover
{
color: #64A8F0;
}
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container{
width: 80%;
display: block;
margin:auto;
padding-top: 100px;
}
.content-section{
float: left;
width: 55%;
}
.image-section{
float: right;
width: 40%;
}
.image-section img{
width: 100%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color:#5d5d5d;
font-size: 21px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
}
.content-section .content .button{
margin-top: 30px;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding:12px 40px;
text-decoration: none;
color:#fff;
font-size: 25px;
letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color:#fff;
}
.content-section .social{
margin: 40px 40px;
}
.content-section .social i{
color:#a52a2a;
font-size: 30px;
padding:0px 10px;
}
.content-section .social i:hover{
color:#3d3d3d;
}
#media screen and (max-width: 768px){
.container{
width: 80%;
display: block;
margin:auto;
padding-top:50px;
}
.content-section{
float:none;
width:100%;
display: block;
margin:auto;
}
.image-section{
float:none;
width:100%;
}
.image-section img{
width: 100%;
height: auto;
display: block;
margin:auto;
}
.content-section .title{
text-align: center;
font-size: 19px;
}
.content-section .content .button{
text-align: center;
}
.content-section .content .button a{
padding:9px 30px;
}
.content-section .social{
text-align: center;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 1.5em;
}
.text h3
{
font-size: 3em;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<title>Think Tank</title>
</html>
<head>
</head>
<body>
<style>
#import url('styles.css');
</style>
<section class="showcase">
<header>
<h2 class="logo"></h2>
<div class="toggle"></div>
</header>
<video src="webasset.mov" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Willkommen auf </h2>
<h3>Think Tank</h3>
<p>Beispiel.</p>
THINK kaufen
</div>
<ul class="social">
<li><img src="https://i.ibb.co/x7P24fL/facebook.png"></li>
<li><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></li>
<li><img src="https://i.ibb.co/ySwtH4B/instagram.png"></li>
</ul>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Unser Token</li>
<li>NFT (COMING SOON)</li>
<li>Das Team</li>
<li>Kontakt</li>
</ul>
</div>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1>About Us</h1>
</div>
<div class="content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<div class="button">
Read More
</div>
</div>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="image-section">
<img src="image/img one.jpg">
</div>
</div>
</div>
<!--===== MAIN JS =====-->
<script src="main.js"></script>
</body>
</html>
.showcase {
position: relative;
}
Replace the 'position:absolute' property to 'position:relative' for above section. I will make your next section visible.
--> Always use "Position:relation" on parent div after give "position:absolute" to child div.
--> i add "hero-section-wrapper" div for solve this issue & add some css for it.
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.hero-section-wrapper {
position: relative;
height: 100vh;
display: table;
width: 100%;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #000000;
transition: 0.5s;
color: #ffff;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0394f4;
mix-blend-mode: overlay;
color: #001540;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 2.5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 5em;
font-weight: 700;
color: #64A8F0;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover
{
letter-spacing: 6px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000026;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #ffff;
}
.menu ul li a:hover
{
color: #64A8F0;
}
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container{
width: 80%;
display: block;
margin:auto;
padding-top: 100px;
}
.content-section{
float: left;
width: 55%;
}
.image-section{
float: right;
width: 40%;
}
.image-section img{
width: 100%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color:#5d5d5d;
font-size: 21px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
}
.content-section .content .button{
margin-top: 30px;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding:12px 40px;
text-decoration: none;
color:#fff;
font-size: 25px;
letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color:#fff;
}
.content-section .social{
margin: 40px 40px;
}
.content-section .social i{
color:#a52a2a;
font-size: 30px;
padding:0px 10px;
}
.content-section .social i:hover{
color:#3d3d3d;
}
#media screen and (max-width: 768px){
.container{
width: 80%;
display: block;
margin:auto;
padding-top:50px;
}
.content-section{
float:none;
width:100%;
display: block;
margin:auto;
}
.image-section{
float:none;
width:100%;
}
.image-section img{
width: 100%;
height: auto;
display: block;
margin:auto;
}
.content-section .title{
text-align: center;
font-size: 19px;
}
.content-section .content .button{
text-align: center;
}
.content-section .content .button a{
padding:9px 30px;
}
.content-section .social{
text-align: center;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 1.5em;
}
.text h3
{
font-size: 3em;
}
<div class="hero-section-wrapper">
<section class="showcase">
<header>
<h2 class="logo"></h2>
<div class="toggle"></div>
</header>
<video src="Video/video.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Willkommen auf </h2>
<h3>Think Tank</h3>
<p>Beispiel.</p>
THINK kaufen
</div>
<ul class="social">
<li><img src="https://i.ibb.co/x7P24fL/facebook.png"></li>
<li><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></li>
<li><img src="https://i.ibb.co/ySwtH4B/instagram.png"></li>
</ul>
</section>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Unser Token</li>
<li>NFT (COMING SOON)</li>
<li>Das Team</li>
<li>Kontakt</li>
</ul>
</div>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1>About Us</h1>
</div>
<div class="content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<div class="button">
Read More
</div>
</div>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="image-section">
<img src="https://images.unsplash.com/photo-1640525999004-42b645dd3dee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">
</div>
</div>
</div>

How to display a message on a particular hovered card?

I have three cards when I hover on any card it it should translate upwards up to this it's working fine, now what my requirement is when ever the hovered card translates there should be a small space in that I want to fill with some message. Please help me to achieve this thing.
Note - each card contains different messages
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons {
margin-left: -40%;
}
/* .fas{
background: transparent;
color:red;
} */
button {
border: none;
position: absolute;
}
.fas {
/* padding-left:2000%; */
background: #ebf5fc;
padding-top: 500%;
color: yellowgreen;
font-weight: 600;
/* top:10;
right:50; */
}
audio {
margin-top: 40%;
}
* {
margin: o;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
/* background:#c7c744; */
}
#my_audio {
margin-top: -40%;
}
.main-section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #b95ce4, #4f29cd);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8em;
color: rgba(0, 0, 0, 0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2 {
color: rgba(0, 0, 0, 0.05);
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content p {
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box .content p {
color: #fff;
}
.container .card:hover .box .content p {
font-style: italic;
color: gold;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top: 15px;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.container .card:hover .box .content a {
background: #ff568f;
}
#i1 {
width: 100%;
height: 50px;
}
h1 {
text-align: center;
font-size: 65px;
font-style: italic;
}
#love {
color: red;
}
#shape {
width: 150px;
height: 150px;
border-radius: 50%;
margin-left: 45%;
margin-top: -12%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css" rel="stylesheet" />
First, you have to use an absolute div to position it on the bottom of the card, next use z index in order to move the absolute div behind the main moving card
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<title>Special-Wishes </title>
<style>
.secret{
position : absolute;
bottom : 2px;
padding : 20px;
z-index : 0
}
.box{
z-index:1
}
</style>
<script>
</script>
</head>
<body>
<h1>kitty <span class="wifey">puppy</span></h1>
<img id="shape"src="https://i.pinimg.com/originals/2f/9d/95/2f9d9562eb2252ae132b4bf8258aa18a.jpg"/>
<audio autoplay id="player">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
<button id="music" onclick="document.getElementById('player').play()">
<i style='font-size:24px;' class='fas'></i>
</button>
<div class="main-section">
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2 id="initial">I</h2>
<h3>Card One</h3>
<p>Your birthday is the first day of another 365-day journey. Be the shining thread in the beautiful tapestry of the world to make this year the best ever.</p>
Read More
</div>
</div>
<div class="secret">
This is my secret
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2><span class="heart-icon" style='font-size:180px;'>♥</span></h2>
<h3>Card Two</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>U</h2>
<h3>Card Three</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
</div>
</div>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons{
margin-left:-40%;
}
/* .fas{
background: transparent;
color:red;
} */
button{
border: none;
position:absolute;
}
.fas{
/* padding-left:2000%; */
background:#ebf5fc;
padding-top:500%;
color:yellowgreen;
font-weight: 600;
/* top:10;
right:50; */
}
audio{
margin-top:40%;
}
*{
margin: o;
padding:0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
/* background:#c7c744; */
}
#my_audio{
margin-top:-40%;
}
.main-section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:#ebf5fc;
}
.container{
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card{
position: relative;
width:320px;
height:440px;
box-shadow: inset 5px 5px 5px rgba(0,0,0,0.05),
inset -5px -5px 5px rgba(255,255,255,0.5),
5px 5px 5px rgba(0,0,0,0.05),
-5px -5px 5px rgba(255,255,255,0.5);
border-radius: 15px;
margin:30px;
}
.container .card .box{
position: absolute;
top:20px;
left:20px;
right:20px;
bottom:20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box{
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
background: linear-gradient(45deg,#b95ce4,#4f29cd);
}
.container .card .box .content{
padding:20px;
text-align: center;
}
.container .card .box .content h2{
position: absolute;
top:-10px;
right:30px;
font-size: 8em;
color:rgba(0,0,0,0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2{
color: rgba(0,0,0,0.05);
}
.container .card .box .content h3{
font-size:1.8em;
color: #777;
z-index:1;
transition: 0.5s;
}
.container .card .box .content p{
font-size:1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box .content p{
color: #fff;
}
.container .card:hover .box .content p{font-style: italic;color: gold;}
.container .card .box .content a{
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top:15px;
border-radius: 20px;
color:#fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.container .card:hover .box .content a{
background: #ff568f;
}
#i1{
width:100%;
height:50px;
}
h1{
text-align:center;
font-size:65px;
font-style: italic;
}
#love{
color:red;
}
#shape{
width:150px;
height:150px;
border-radius:50%;
margin-left:45%;
margin-top:-12%;
}
.
</style>
</html>

Sidebar Affects my page responsiveness and Something causes an overflow

HTML Code
I made some changes to CSS code so that my sidebar can be fixed to the left, however even if I add margin-left to main content, it still extends beyond the view width
I want the page to be responsive with sidebar fixed to left and doesn't cover the main content while maintaining responsiveness
/** #format */
#import url("https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Dosis:wght#300;400;500;700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");
* {
outline: 0;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
body {
margin: auto;
font-family: "Quicksand", sans-serif;
height: 100vh;
/* overflow-x: hidden; */
/* max-width: 1000px; */
}
.content-wrap {
/* .header-container, */
/* .sidebar-container,
.main-content-wrap, */
/* .footer-wrap */
border: 1px solid red;
}
.container {
padding: 2rem 2.4rem;
margin: 0 auto;
}
.content-wrap {
position: relative;
display: grid;
grid-auto-columns: repeat(8, min-max(200px, 1fr));
/* grid-template-rows: repeat(4, 20rem); */
grid-template-areas: "hd hd hd hd hd " "sd sd main main main " "sd sd nl nl nl " "ft ft ft ft ft ";
width: 100%;
}
ul {
list-style-type: none;
}
/* HEADER */
.header-container {
grid-area: hd;
background-color: #7c6447;
height: 3.72rem;
-moz-box-shadow: 0 0.05rem 2rem 1rem #000000;
box-shadow: 0 0.05rem 2rem 0.01rem #000000;
z-index: 5;
}
.header-content {
display: flex;
justify-content: space-around;
align-items: center;
flex-flow: row wrap;
}
.nav-bar {
padding: 20px 36px;
background-color: #7c6447;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.3rem;
}
.nav-bar ul {
list-style-type: none;
}
.nav-bar li {
display: inline;
}
.nav-bar a {
color: #fff;
text-decoration: none;
font-size: 1rem;
line-height: 1rem;
padding-right: 15px;
padding: 20px;
}
.nav-bar a:hover {
background-color: #ece2d5;
color: #763200;
font-size: 1.1rem;
font-weight: 700;
}
.site-logo {
color: #ece2d5;
text-align: center;
width: 300px;
}
.site-logo h1 {
display: inline;
text-transform: uppercase;
font-size: 1.1rem;
border: 4px solid #ece2d5;
padding: 0.5rem;
width: 300px;
letter-spacing: 0.2rem;
font-weight: 600;
}
.search-btn {
color: #1d1409;
background: #ece2d5;
padding: 0.4rem;
border-radius: 3px;
box-sizing: border-box;
}
.search-btn .search-input {
padding: 4px;
background-color: #ece2d5;
border: none;
color: #1d1409;
}
/* FIXED SIDEBAR */
.sidebar-container {
grid-area: sd;
background-color: #ece2d5;
display: flex;
align-items: center;
position: fixed;
top: 0;
height: 100%;
z-index: 1;
width: 220px;
left: 0;
/* height: 200vh; */
}
.left-sidebar {
font-weight: 600;
text-shadow: 0 1px 20px #9b9b9b;
color: #1d1409;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
text-align: center;
transition: linear 2s;
opacity: 0.9;
}
.action-button {
font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 0.24em;
padding: 10px 25px;
border: 4px solid #1d1409;
border-radius: 4px;
color: #1d1409;
background-color: #ffffff;
}
.action-button:hover {
background-color: #763200;
color: #ffffff;
cursor: pointer;
border-color: #763200;
}
.social-media-menu {
margin: 40px auto;
}
.social-links {
text-decoration-style: none;
color: inherit;
}
.social-links:hover {
cursor: pointer;
}
.social-media-menu .fa {
font-size: 1.6rem;
padding: 0.4rem;
}
.social-media-menu .fa:hover {
font-size: 2rem;
padding: 0.5rem;
}
/* MAIN CONTENT */
.main-content-wrap {
grid-area: main;
margin-left: 284px;
}
.showcase {
padding: 0;
display: inline-flex;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
}
.showcase-image {
max-width: 100%;
margin: auto;
z-index: -10;
position: static;
max-height: 80%;
}
.showcase-heading {
position: absolute;
padding: 1rem 4rem;
text-align: center;
text-shadow: 0px 1px 20px #000000;
color: #ffffff;
margin: auto;
font-size: 2.4rem;
font-family: "Indie Flower", cursive;
}
.posts-navigation {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
text-transform: capitalize;
margin-bottom: 2rem;
}
.posts-navigation a {
color: inherit;
font-size: 1.12rem;
text-decoration: none;
}
.posts-navigation .all-posts:hover {
color: #7c6447;
font-size: 1.15rem;
text-decoration: underline;
}
.posts-navigation .fa {
margin-left: 0.4rem;
}
.posts-navigation .latest {
text-decoration: none;
color: #7c6447;
font-weight: 600;
}
.latest-posts-wrap {
display: grid;
/* grid-gap: 2rem; */
box-sizing: border-box;
margin: auto;
justify-content: center;
padding: 3rem;
}
.post-card {
width: 200px;
/* border: 4px solid #000000; */
}
.card-image {
height: 240px;
width: 180px;
object-fit: cover;
}
.more-btn {
font-size: 0.8rem;
padding: 0.2rem 0.4rem;
border-radius: 0;
margin-top: 1rem;
}
.first-selected-post {
display: flex;
align-items: center;
margin-top: 8rem;
}
.first-selected-post:first-child {
margin-top: 0;
}
.selected-posts-theme {
min-width: 200px;
margin-right: 40px;
}
.card-wrap {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(100px, 1fr));
grid-auto-rows: 1fr;
gap: 3rem 2rem;
}
.first-selected-post:first-child .selected-posts-theme {
margin-left: 40px;
margin-right: 0;
}
/* .post-card {
} */
.post-card:first-child {
grid-area: 1 / 1 / span 1 / span 2;
}
.post-card:nth-child(2) {
grid-area: 1 / 3 / span 2;
}
.post-card:last-child {
grid-area: 2 / 2 / span 1 / span 2;
}
.back-to-top {
position: absolute;
background-color: #ffffff;
padding: 1rem 0.2rem;
text-transform: uppercase;
color: #1d1409;
font-weight: 600;
font-size: xx-large;
text-align: center;
display: block;
width: 3.6rem;
height: 2.4rem;
letter-spacing: 0.3rem;
line-height: 1.4rem;
bottom: 60rem;
left: 0;
word-wrap: break-word;
border-radius: 0 0.4rem 0.4rem 0;
/* pointer-events: none; */
}
.back-to-top .link {
/* position: fixed;
position: sticky;
pointer-events: all; */
/* top: calc(180vh - 0rem); */
}
.link {
text-decoration: none;
color: inherit;
cursor: pointer;
}
.back-to-top:hover {
background-color: #1d1409;
color: #ece2d5;
}
/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
/* #media screen and (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
} */
/* NEWSLETTER */
.newsletter-signup {
grid-area: nl;
background-color: #ece2d5;
padding: 4rem 2rem;
margin: auto;
width: 100%;
box-sizing: border-box;
display: flex;
flex-flow: column wrap;
align-content: center;
align-self: center;
z-index: 2;
}
.newsletter-heading {
text-align: center;
text-transform: uppercase;
font-size: 1.6rem;
color: #1d1409;
letter-spacing: 0.16rem;
}
.newsletter-tagline {
flex-grow: 2;
margin: 2rem auto;
font-size: 1rem;
color: #7c6447;
/* text-transform: capitalize; */
}
.newsletter-input {
display: inline-flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: center;
background: #1d1409;
padding: 4rem 2rem;
border-radius: 24px;
width: 70%;
margin: auto;
}
.newsletter-input input:first-child {
margin-right: 10px;
}
.newsletter-input>input {
margin-bottom: 1.2rem;
}
.username,
.user-email,
.newsletter-form-submit {
padding: 1rem 2rem;
width: 300px;
border: none;
border-radius: 24px;
font-weight: 500;
font-size: 0.85rem;
color: #7c6447;
}
.newsletter-form-submit {
background: #7c6447;
color: #ece2d5;
margin-top: 2.4rem;
font-weight: 700;
}
.newsletter-form-submit:hover {
background: #763200;
color: #1d1409;
}
/* FOOTER */
.footer-wrap {
grid-area: ft;
background: #000000;
color: #efe;
padding: 1rem 2.4rem;
z-index: 2;
}
#media (max-width: 980px) {
.newsletter-input {
width: 50%;
}
}
#media (max-width: 893px) {
.header-container {
height: 8rem;
}
.header-content {
justify-content: space-between;
align-items: baseline;
}
.first-selected-post {
flex-wrap: wrap;
}
.selected-posts-theme {
margin-bottom: 4rem;
}
.first-selected-post:first-child .selected-posts-theme {
margin-top: 4rem;
}
.username,
.user-email {
width: 200px;
}
.newsletter-form-submit {
width: 260px;
margin-top: 1rem;
}
/* .showcase-image {
max-width: 80%;
} */
}
/* MOBILE DESIGN */
#media (max-width: 820px) {
.header-content {
flex-wrap: wrap;
flex-basis: 100%;
}
.header-container {
height: 12rem;
}
.sidebar-container {
display: none;
}
.main-content-wrap {
margin-left: 0;
}
}
#media (max-width: 600px) {
.content-wrap {
display: inline-block;
}
.showcase-heading{
font-size: 1rem;
}
}
<!-- #format -->
<!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>Minimalist Decór</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/sidebar.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/newsletter.css" />
<link rel="stylesheet" href="css/footer.css" />
</head>
<body>
<div class="content-wrap">
<div class="header-container">
<!-- HEADER -->
<header class="header-content" id="header">
<!-- NAVIGATION- -->
<div class="nav-bar-wrap">
<nav class="nav-bar">
<ul>
<li>home</li>
<li>blog</li>
<li>about</li>
</ul>
</nav>
</div>
<div class="site-logo">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=350&w=494" alt="logo-icon" />
<h1>minimalist decór</h1>
</div>
<div class="search-btn">
<i class="fa fa-search" aria-hidden="true"></i>
<input class="search-input" type="text" placeholder="search here..." />
</div>
</header>
</div>
<!-- FIXED SIDEBAR -->
<div class="sidebar-container container">
<aside class="left-sidebar">
<div class="subscribe-button">
<a href="#subscribe"><button type="menu" class="action-button">subscribe</button></a
>
</div>
<div class="social-media-menu">
<ul>
<li>
<a href="#" class="social-links"
><i class="fa fa-instagram" aria-hidden="true"></i
></a>
</li>
<li>
<a href="#" class="social-links"><i class="fa fa-facebook" aria-hidden="true"></i
></a>
</li>
<li>
<a href="#" class="social-links"><i class="fa fa-youtube-play" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
minimalist decór
</aside>
</div>
<!-- MAIN CONTENT -->
<div class="main-content-wrap">
<main class="main-content">
<!-- SHOWCASE -->
<section class="showcase">
<img src="ihttps://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="A couch portraying minimalist decor" class="showcase-image" />
<!-- <img src="images/blob1.webp" /> -->
<h2 class="showcase-heading">
Helping you to navigate through your aesthetics with a minimalism touch!
</h2>
</section>
<div class="blog-posts container">
<nav>
<div class="posts-navigation">
<!-- add arrow icons to all posts -->
<div class="latest">latest posts</div>
<div class="all-posts">
<a href="#">all posts<i
class="fa fa-long-arrow-right"
aria-hidden="true"
></i
></a>
</div>
</div>
</nav>
<div class="latest-posts-wrap">
<div class="first-selected-post">
<div class="card-wrap cardf-wrap">
<div class="post-card">
<div class="card-image-wrap">
<img src="images/throw-pillow.jpg" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
</div>
<div class="selected-posts-theme">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea totam nemo dolore eius deserunt aut aperiam amet voluptatem doloremque iste eos officiis minima, delectus,
</p>
</div>
</div>
<div class="first-selected-post">
<div class="selected-posts-theme">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea totam nemo dolore eius deserunt aut aperiam amet voluptatem doloremque iste eos officiis minima, delectus,
</p>
</div>
<div class="card-wrap">
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
</div>
</div>
</div>
</div>
<span class="back-to-top"><a href="#header" class="link"
><i class="fa fa-angle-up" aria-hidden="true"></i> </a
></span>
</main>
</div>
<!-- NEWSLETTER -->
<div class="newsletter-signup">
<h4 class="newsletter-heading">subscribe to our newsletter</h4>
<span class="newsletter-tagline">for tips to spice up your minimalism lifestyle and add a fine touch
to it regularly.
<!-- TODO: down arrow --></span
>
<form class="newsletter-input">
<input type="text" class="username" placeholder="name" />
<input
type="email"
class="user-email"
placeholder="enter email address"
/>
<button type="submit" class="newsletter-form-submit">submit</button>
</form>
</div>
<!-- FOOTER -->
<div class="footer-wrap">
<footer class="footer-content">
<small
>made with love by
mariam adekola</small
>
</footer>
</div>
</div>
</body>
</html>
It's the combination of border and width 100% on .content-wrap that's causing the problem. You're effectively making it 100% plus 1 pixel wide.
.content-wrap {
border: 1px solid red;
}
.content-wrap {
width: 100%;
}
either take off the border or remove width:100% from .content-wrap

Categories

Resources