We Keep Coding

How to position my content next to my sidebar?

I am not very well versed in HTML and CSS. I am currently building a website and I integrated a sidebar into my web application using Bootstrap, but it has messed my layouts, and I can't seem to figure out how to move the content in a block to the left of side of my sidebar.
Please view the image on this link
[1]: https://i.stack.imgur.com/XFaVv.png
As seen in the picture above, my sidebar is located at the right and my content is located at the below of my sidebar. Below are my codes for my sidebar and the base template.
// Not bringing sidebar when active
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// When the button is clicked the sidebar will be active in the following code
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Sidebar Section */
.app {
display: flex;
min-height: 100vh;
}
.sidebar {
flex: 1 1 0;
max-width: 300px;
padding: 20px;
background: linear-gradient(#ed7014, #fa5b3d);
/* With Scrollbar */
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
}
.sidebar h3 {
font-family: 'Bungee', cursive;
color: #fff;
}
.sidebar .menu {
margin: 0 -1rem;
}
.sidebar .menu .menu-item {
display: block;
padding: 1em;
color: #fff;
text-decoration: none;
transition: 0.2s linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
color: rgb(255, 238, 151);
;
border-right: 5px solid rgb(255, 238, 151);
}
/* Content Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #ffa500;
}
::-webkit-scrollbar-thumb:hover {
background-color: #d67229;
}
/* Content Section */
.content {
flex: 1 1 0;
padding: 2rem;
background: linear-gradient(#dd5713, #d67229);
}
.content img {
width: 100%;
max-width: 300px;
display: block;
margin: auto;
}
.content h1 {
font-family: 'Bungee', cursive;
color: #fff;
margin-bottom: 1rem;
}
.content strong {
font-family: 'Bungee', cursive;
color: #fff;
}
.content p {
text-align: justify;
color: #fff;
}
/* Sample Code Content */
.sample-code {
width: 65%;
background: rgb(255, 238, 151);
padding: 1em;
margin-bottom: 2em;
border-radius: 10px;
box-shadow: 15px 15px;
}
.sample-code p {
color: #000;
}
/* Button Sidebar section */
.menu-toggle {
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #ed7014;
cursor: pointer;
}
.button {
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.button>span,
.button>span::before,
.button>span::after {
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #fff;
transition-duration: .25s;
}
.button>span::before {
content: '';
top: -8px;
}
.button>span::after {
content: '';
top: 8px;
}
/* Button Animation */
.menu-toggle.is-active .button>span {
transform: rotate(45deg);
}
.menu-toggle.is-active .button>span::before {
top: 0;
transform: rotate(0deg);
}
.menu-toggle.menu-toggle.is-active .button>span::after {
top: 0;
transform: rotate(90deg);
}
/* Sidebar Footer */
.white-section {
text-align: center;
}
.p-white-sec {
color: #fff;
}
.container-fluid {
padding: 7px 15px;
}
.footer-icon {
margin: 20px 10px;
color: #fff;
}
.footer-icon:hover {
color: #ffa500;
transition: 0.2s linear;
}
/* Mobile Size */
#media (max-width: 1024px) {
/* Sidebar Section */
.sidebar {
max-width: 200px;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
}
#media (max-width: 768px) {
/* Sidebar Section */
.menu-toggle {
display: block;
}
.sidebar {
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear;
}
.sidebar.is-active {
left: 0;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
/* Content */
.content {
padding-top: 8rem;
}
}
<!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>Codin'up | HTML Course</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;900&family=Ubuntu:ital,wght#0,300;1,400;1,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bungee&family=Poppins&display=swap" rel="stylesheet">
<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=Source+Code+Pro&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.png">
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/CSS/List of Course/HTML Course.css">
</head>
<body>
<section class="app">
<!-- Button for Sidebar -->
<div class="menu-toggle">
<div class="button">
<span></span>
</div>
</div>
<!-- Sidebar Section -->
<aside class="sidebar">
<a href="/HTML/List of Course/HTML Course.html">
<img src="/Logo/Codin'up Logo (1) White.png" alt="Codin'up">
</a>
<h3>HTML Course</h3>
<nav class="menu">
Home
Courses
</nav>
<hr>
<nav class="menu">
HTML Introduction
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
</nav>
<hr>
<!-- Sidebar Footer -->
<footer class="white-section" id="footer">
<div class="container-fluid">
<i class="fa-brands fa-twitter footer-icon"></i>
<i class="fa-brands fa-facebook-f footer-icon"></i>
<i class="fa-brands fa-instagram footer-icon"></i>
<i class="fa-solid fa-envelope footer-icon"></i>
<p class="p-white-sec">© 2022 ITMAWD21 Group 3</p>
</div>
</footer>
</aside>
<!-- Content Section -->
<main class="content">
<h1>Introduction To HTML</h1>
<img src="/Logo/HTML Logo.png" alt="Codin'up Logo">
<strong>Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsa, quod, placeat cupiditate enim hic natus maiores nobis sequi nisi odit voluptas earum quas perspiciatis qui explicabo recusandae ullam quibusdam? Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Dignissimos obcaecati exercitationem voluptatem accusamus, beatae sunt voluptatibus quam odio magnam, mollitia minima dicta distinctio, amet accusantium! Dolore debitis qui quis iusto. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Accusantium harum corrupti nisi ratione aperiam commodi rerum. Delectus illum suscipit distinctio unde iste veritatis voluptate nulla, enim rem harum ullam rerum. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut cumque totam ipsum, quia voluptate quam esse reprehenderit explicabo atque, molestiae doloribus earum repellendus architecto aperiam minima impedit dicta autem laboriosam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
corrupti adipisci. Itaque sint, nemo laborum a ratione corrupti laboriosam tenetur soluta pariatur nostrum fuga, earum voluptate ducimus iure ipsum saepe? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae recusandae
iste, molestiae modi ea numquam vero repellat. Doloremque iusto labore nobis placeat perspiciatis optio repellendus eius adipisci voluptas expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor doloremque rem debitis? Sed quod
eligendi inventore deleniti aliquid velit, magni perferendis, quaerat officiis in consequuntur tenetur ipsum animi tempore asperiores.</p>
<!-- Sample Code Content -->
<div class="sample-code">
<p><html></p>
<p><span style="padding-left: 20px;"><head></span></p>
<p><span style="padding-left: 40px;"><title>HTML Course</title></span></p>
<p><span style="padding-left: 20px;"></head></span></p>
<p><span style="padding-left: 20px;"><body></span></p>
<p><span style="padding-left: 40px;"><p>Hello World<p></span></p>
<p><span style="padding-left: 20px;"></body></span></p>
<p></html></p>
</div>
<strong>Code Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto, eveniet repudiandae ratione sint harum pariatur id numquam doloremque sequi eaque quo accusamus ab nihil aut alias inventore! Cumque, tempore.</p>
</main>
</section>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/c9df5e490e.js" crossorigin="anonymous"></script>
<!-- Bootstrap JS & External JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="/JS/List of Course/HTML Course.js"></script>
</body>
</html>
Can someone help me fit the content to the right beside my sidebar especially its layout? Thanks for the big help!

I would just apply position: sticky and height: 100vh on the sidebar:
position: sticky;
height: 100vh;
Giving it height: 100vh makes sure the sidebar always stretches to the entire height of the screen. position: sticky works in a similiar fashion to position: fixed but it doesn't affect the document flow in the same way. You can then apply positioning values such as top: 0 and left: 0, but those properties are already applied in your snippet.
// Not bringing sidebar when active
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// When the button is clicked the sidebar will be active in the following code
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Sidebar Section */
.app {
display: flex;
min-height: 100vh;
}
.sidebar {
flex: 1 1 0;
max-width: 300px;
padding: 20px;
background: linear-gradient(#ed7014, #fa5b3d);
/* With Scrollbar */
/* Edit start */
position: sticky;
height: 100vh;
/* Edit end */
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
}
.sidebar h3 {
font-family: 'Bungee', cursive;
color: #fff;
}
.sidebar .menu {
margin: 0 -1rem;
}
.sidebar .menu .menu-item {
display: block;
padding: 1em;
color: #fff;
text-decoration: none;
transition: 0.2s linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
color: rgb(255, 238, 151);
;
border-right: 5px solid rgb(255, 238, 151);
}
/* Content Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #ffa500;
}
::-webkit-scrollbar-thumb:hover {
background-color: #d67229;
}
/* Content Section */
.content {
flex: 1 1 0;
padding: 2rem;
background: linear-gradient(#dd5713, #d67229);
}
.content img {
width: 100%;
max-width: 300px;
display: block;
margin: auto;
}
.content h1 {
font-family: 'Bungee', cursive;
color: #fff;
margin-bottom: 1rem;
}
.content strong {
font-family: 'Bungee', cursive;
color: #fff;
}
.content p {
text-align: justify;
color: #fff;
}
/* Sample Code Content */
.sample-code {
width: 65%;
background: rgb(255, 238, 151);
padding: 1em;
margin-bottom: 2em;
border-radius: 10px;
box-shadow: 15px 15px;
}
.sample-code p {
color: #000;
}
/* Button Sidebar section */
.menu-toggle {
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #ed7014;
cursor: pointer;
}
.button {
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.button>span,
.button>span::before,
.button>span::after {
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #fff;
transition-duration: .25s;
}
.button>span::before {
content: '';
top: -8px;
}
.button>span::after {
content: '';
top: 8px;
}
/* Button Animation */
.menu-toggle.is-active .button>span {
transform: rotate(45deg);
}
.menu-toggle.is-active .button>span::before {
top: 0;
transform: rotate(0deg);
}
.menu-toggle.menu-toggle.is-active .button>span::after {
top: 0;
transform: rotate(90deg);
}
/* Sidebar Footer */
.white-section {
text-align: center;
}
.p-white-sec {
color: #fff;
}
.container-fluid {
padding: 7px 15px;
}
.footer-icon {
margin: 20px 10px;
color: #fff;
}
.footer-icon:hover {
color: #ffa500;
transition: 0.2s linear;
}
/* Mobile Size */
#media (max-width: 1024px) {
/* Sidebar Section */
.sidebar {
max-width: 200px;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
}
#media (max-width: 768px) {
/* Sidebar Section */
.menu-toggle {
display: block;
}
.sidebar {
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear;
}
.sidebar.is-active {
left: 0;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
/* Content */
.content {
padding-top: 8rem;
}
}
<!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>Codin'up | HTML Course</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;900&family=Ubuntu:ital,wght#0,300;1,400;1,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bungee&family=Poppins&display=swap" rel="stylesheet">
<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=Source+Code+Pro&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.png">
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/CSS/List of Course/HTML Course.css">
</head>
<body>
<section class="app">
<!-- Button for Sidebar -->
<div class="menu-toggle">
<div class="button">
<span></span>
</div>
</div>
<!-- Sidebar Section -->
<aside class="sidebar">
<a href="/HTML/List of Course/HTML Course.html">
<img src="/Logo/Codin'up Logo (1) White.png" alt="Codin'up">
</a>
<h3>HTML Course</h3>
<nav class="menu">
Home
Courses
</nav>
<hr>
<nav class="menu">
HTML Introduction
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
</nav>
<hr>
<!-- Sidebar Footer -->
<footer class="white-section" id="footer">
<div class="container-fluid">
<i class="fa-brands fa-twitter footer-icon"></i>
<i class="fa-brands fa-facebook-f footer-icon"></i>
<i class="fa-brands fa-instagram footer-icon"></i>
<i class="fa-solid fa-envelope footer-icon"></i>
<p class="p-white-sec">© 2022 ITMAWD21 Group 3</p>
</div>
</footer>
</aside>
<!-- Content Section -->
<main class="content">
<h1>Introduction To HTML</h1>
<img src="/Logo/HTML Logo.png" alt="Codin'up Logo">
<strong>Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsa, quod, placeat cupiditate enim hic natus maiores nobis sequi nisi odit voluptas earum quas perspiciatis qui explicabo recusandae ullam quibusdam? Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Dignissimos obcaecati exercitationem voluptatem accusamus, beatae sunt voluptatibus quam odio magnam, mollitia minima dicta distinctio, amet accusantium! Dolore debitis qui quis iusto. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Accusantium harum corrupti nisi ratione aperiam commodi rerum. Delectus illum suscipit distinctio unde iste veritatis voluptate nulla, enim rem harum ullam rerum. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut cumque totam ipsum, quia voluptate quam esse reprehenderit explicabo atque, molestiae doloribus earum repellendus architecto aperiam minima impedit dicta autem laboriosam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
corrupti adipisci. Itaque sint, nemo laborum a ratione corrupti laboriosam tenetur soluta pariatur nostrum fuga, earum voluptate ducimus iure ipsum saepe? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae recusandae
iste, molestiae modi ea numquam vero repellat. Doloremque iusto labore nobis placeat perspiciatis optio repellendus eius adipisci voluptas expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor doloremque rem debitis? Sed quod
eligendi inventore deleniti aliquid velit, magni perferendis, quaerat officiis in consequuntur tenetur ipsum animi tempore asperiores.</p>
<!-- Sample Code Content -->
<div class="sample-code">
<p><html></p>
<p><span style="padding-left: 20px;"><head></span></p>
<p><span style="padding-left: 40px;"><title>HTML Course</title></span></p>
<p><span style="padding-left: 20px;"></head></span></p>
<p><span style="padding-left: 20px;"><body></span></p>
<p><span style="padding-left: 40px;"><p>Hello World<p></span></p>
<p><span style="padding-left: 20px;"></body></span></p>
<p></html></p>
</div>
<strong>Code Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto, eveniet repudiandae ratione sint harum pariatur id numquam doloremque sequi eaque quo accusamus ab nihil aut alias inventore! Cumque, tempore.</p>
</main>
</section>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/c9df5e490e.js" crossorigin="anonymous"></script>
<!-- Bootstrap JS & External JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="/JS/List of Course/HTML Course.js"></script>
</body>
</html>

I don't know if i understand well but.
Try in the content class to add:
width:100%;
padding-left:300px; (the width of the menu)

.sidebar has a position; fixed.
You could apply styling to the main content <main class="content" style="left: 272px;position: absolute;">. But you must also account for the media queries adjusting the width of the sidebar. E.g.
#media (max-width: 1024px){
.sidebar {
max-width: 200px;
}
main.content {
left: 200px;
}
}
and
#media (max-width: 768px) {
.sidebar {
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear;
}
main.content {
left: 0;
height: 100%;
}
}
I would also use width property over max-width. To be sure that the content is aligns always as expected.

I have checked the layout maybe you can try using rows and columns to sort it out
<div class="row">
<div class="col-lg-3 col-xs-4">
//Sidebar code
</div>
<div class="col-lg-9 col-xs-8">
//Content code
</div>
</div>
This could be better option and will also be responsive.
If you are not comfortable or familiar then maybe like others suggested you can remove position:fixed styling in .sidebar will solve this problem temporarily

The second modal with a different ID opens with a different effect - Why?

I've got two different pricing cards:
<div class="card card1" id="open">
<span class=title>Basic</span>
<h1>$99 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Access to AM</li>
<li>Unlimited Households</li>
<li>White-Labeling</li>
</ul>
</div>
<div class="card card2" id="open2">
<span class=title>Pro</span>
<h1>$129 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Cash-Flow Reporting</li>
<li>Beneficiary Visualization</li>
<li>Unlimited TMs</li>
</ul>
</div>
When clicked, each should bring up a different modal:
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close">Close me</button>
</div>
<div class="modal-container" id="modal_container2">
<div class="modal">
<h1>Modal 2 goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close2">Close me</button>
</div>
All of the ID's are unique. With this JS I am able to bring up the first modal but not the second:
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
open.addEventListener('click', () => {
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});
I added unique IDs for the second card and modal, but when I pull them into the JS by adding this:
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');
open2.addEventListener('click', () => {
modal_container2.classList.add('show');
});
close2.addEventListener('click', () => {
modal_container2.classList.remove('show');
});
I am not getting the same effect.
Here is the relevant CSS:Added relevant CSS
.modal-container {
background-color: rgba(0,0,0,0.3);
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}

there was some error on your codepen, double body open and close tag, the second modal was inside the first one's container, Ids were duplicated and on the JS side the listeners for the second modal were missing, try this:
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');
open.addEventListener('click', () => {
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});
open2.addEventListener('click', () => {
modal_container2.classList.add('show');
});
close2.addEventListener('click', () => {
modal_container2.classList.remove('show');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f4efed;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
cursor: crosshair;
}
.card {
background-color: #fff;
border-radius: 10px;
padding: 60px 30px;
text-align: center;
max-width: 450px;
min-width: 275px;
margin: 1em;
transition: .2s ease all;
}
.card:hover {
transform: translateY(-20px);
box-shadow: 0 10px 20px rgba(0,0,0,.3);
cursor: pointer;
}
.card1 {
background-image: linear-gradient(to bottom right, #41464d, #2d3137);
color: white;
}
.card2 {
background-image: linear-gradient(to bottom right, #dbb898, #b98351);
color: white;
}
.card .title {
font-size: .8em;
}
.card1 .title{
font-weight: bold;
background-color: #444950;
border-radius: 10px;
padding: 12px 10px;
}
.card2 .title{
font-weight: bold;
background-color: white;
border-radius: 10px;
padding: 12px 10px;
color: #2d3137;
}
h1 {
margin: 30px 0 30px 0;
}
h4 {
font-weight: 100;
font-size: .75em;
}
h2 {
margin: 25px;
font-size: .8em;
}
ul {
font-size: .75em;
line-height: 1.75em;
list-style: none;
}
.modal-container {
background-color: rgba(0,0,0,0.3);
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
.modal {
background-color: white;
border-radius: 10px;
width: 800px;
max-width: 100%;
padding: 30px 50px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
text-align: center;
}
.modal h1 {
margin: .5em;
}
.modal p {
font-size: 14px;
opacity: 0.7;
}
.modal-container button {
background-color: #444950;
color: white;
border: 0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
font-size: 14px;
padding: 10px 25px;
margin: 15px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pricing Cards</title>
</head>
<body>
<div class="card card1" id="open">
<span class=title>Basic</span>
<h1>$99 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Access to Asset-Map</li>
<li>Unlimited Households</li>
<li>White-Labeling</li>
</ul>
</div>
<div class="card card2" id="open2">
<span class=title>Pro</span>
<h1>$129 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Cash-Flow Reporting</li>
<li>Beneficiary Visualization</li>
<li>Unlimited Target-Maps</li>
</ul>
</div>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close">Close me</button>
</div>
</div>
<div class="modal-container" id="modal_container2">
<div class="modal">
<h1>Modal 2 goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close2">Close me</button>
</div>
</div>
</body>
</html>

What element can make the background:url(); to not display image

I am trying to add the following effect in one of the divs of my website:
https://www.youtube.com/watch?v=o8DTzU0Iol8
I have done everything from the video, yet the background images of .container_page_1 .column.active .bg.bg1 2,3, and 4 don't show up even with full path and the jQuery doesn't work as well.
I am sure that the thing that causes these issues is that I've added the code from the tutorial in a div that's not directly in the body, it's in other div, that's in another div.
I will paste all the code of the page, both HTML and CSS and also link a code pen, because I do not know what part of the code is faulty...
This is a live codepen: Codepen
I've separated my website into 3 pages. I've added a parallax effect on the first page and I've tried adding the effect from the video tutorial into the second page.
I also have a reset.css file that's just too big to add here. I've found it online. Without the reset.css the codepen will have a margin at the top through which you can see the background image that should have been on .container_page_1 .column.active .bg.bg1.
What do you think ?
$(document).on('mouseover', 'container_page_1 .column', function() {
$(this).addClass('active').siblings().removeClass('active');
})
// eliminate scroll-bar
var child = document.getElementById('child-container');
child.style.right = child.clientWidth - child.offsetWidth + "px";
/* *** index.html - START *** */
body, html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
#parent-container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#child-container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px; /* exact value is given through JavaScript */
overflow: auto;
scroll-snap-type: both proximity;
}
header {
height: 100%;
background-image: url("https://i.postimg.cc/V671cpsf/ps4-controller-min.jpg");
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
scroll-snap-align: center;
}
header h1 {
font-size: 32px;
font-weight: bold;
position: sticky;
top: 5%;
margin-bottom:10px;
}
header p {
position: sticky;
width: 450px;
text-align: center;
margin: auto;
margin-top: 100px;
}
.container_page_1 {
width: 100%;
height: 100vh;
/* background-color: red; */
scroll-snap-align: center;
overflow: hidden;
}
.container_page_1 .column {
width: 25%;
height: 100%;
float: left;
border-right: 2px solid rgba(0, 0, 0, 0.5);
box-sizing: border-box;
z-index: 1;
}
.container_page_1 .column:last-child {
border-right: none;
}
.container_page_1 .column .content {
position: relative;
height: 100%;
}
.container_page_1 .column .content h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
background: rgba(0, 0, 0, .1);
text-align: center;
margin: 0;
padding: 0;
color: rgba(255, 255, 255, .2);
font-size: 15em;
border-top: 2px solid rgba(0, 0, 0, 0.5);
border-bottom: 2px solid rgba(0, 0, 0, 0.5);
}
.container_page_1 .column .content .box {
position: absolute;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
padding: 40px;
background: rgba(255, 255, 255, 1);
text-align: center;
transition: 0.5s;
opacity: 0;
}
.container_page_1 .column.active .content .box {
opacity: 1;
}
.container_page_1 .column .content .box h2 {
margin: 0;
padding: 0;
font-size: 30px;
color: #262626;
}
.container_page_1 .column .content .box p {
color: #262626;
font-size: 18px;
}
.container_page_1 .column .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.container_page_1 .column.active .bg.bg1 {
background: url('https://i.postimg.cc/ZRYZ24Ss/ac-odyssey-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg2 {
background: url('https://i.postimg.cc/x8h2XmbB/borderlands-3-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg3 {
background: url('https://i.postimg.cc/1RjPCkYM/god-of-war-4-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg4 {
background: url('https://i.postimg.cc/qqzrBwg8/sw-jedi-fallen-order-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_2 {
width: 100%;
height: 100%;
background-color: green;
scroll-snap-align: center;
}
/* *** index.html - END *** */
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div id="parent-container">
<div id=child-container>
<header>
<a href="#page2">
<h1 id="sticky-title">ACG - Gaming and e-Sports News</h1>
</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi debitis in libero tenetur suscipit iusto eum nulla dolorum aperiam adipisci unde veritatis vel iure, a nam, saepe exercitationem illum vitae.</p>
</header>
<div id="page2" class="container_page_1">
<div class="column active">
<div class="content">
<h1>1</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg1"></div>
</div>
<div class="column">
<div class="content">
<h1>2</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg2"></div>
</div>
<div class="column">
<div class="content">
<h1>3</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg3"></div>
</div>
<div class="column">
<div class="content">
<h1>4</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg4"></div>
</div>
</div>
<div class="container_page_2">
</div>
</div>
</div>

How to make the picture in the background change with the main slider?

There is a usual slider with text information. How to make so that when changing the slide with the text the background picture itself also changes? How to implement this? I use slick-slider. But the text "static text here" with a white background should not change with the slider. It is important. I am interested in this implementation and its possibility in principle.
$('.js-slider').slick({
appendArrows:$('.head-slider .js-arrows'), // Class For Arrows Buttons
prevArrow:'<span class="arrow arrow_prev arrow_lg"></span>',
nextArrow:'<span class="arrow arrow_next arrow_lg"></span>',
autoplay: true,
autoplaySpeed: 2000,
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
}
.wrap {
height: 100vh;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
}
.head-slider {
max-width: 786px;
width: 100%;
position: relative;
background: rgba(195, 158, 158, 0.7);
margin: auto 0;
}
.head-slider p {
font-size: 20px;
line-height: 28px;
max-height: 165px;
overflow: hidden;
}
.arrows {
position: absolute;
top: 48px;
right: 40px;
z-index: 10;
}
.arrows_main {
top: inherit;
right: 0;
}
.slider-item {
margin: 55px;
min-height: 342px;
max-height: 342px;
overflow: hidden;
}
.arrow {
display: inline-block;
width: 40px;
height: 40px;
position: relative;
cursor: pointer;
}
.arrow:after {
content: "";
display: inline-block;
vertical-align: middle;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 8px;
height: 8px;
border-top: 2px solid #c96217;
border-right: 2px solid #c96217;
transition: transform 0.5s;
}
.arrow_next:after {
transform: rotate(45deg);
}
.arrow_prev:after {
transform: rotate(225deg);
}
.text {
background: #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="wrap" style="background-image: url(https://images.unsplash.com/photo-1539567601-bf304c363f16?ixlib=r0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7aee0ae43485302fd9e03461549a1459&auto=format&fit=crop&w=3891&q=80)">
<div class="head-slider">
<div class="arrows arrows_main js-arrows"></div>
<div class="slider js-slider">
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus soluta inventore nisi tempore! In deleniti nobis, incidunt doloremque quia labore vero odio, accusantium laborum, necessitatibus perspiciatis minima esse itaque! Fuga, dolore animi esse voluptatibus recusandae assumenda sed praesentium eos ex!
</p>
</div>
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe porro qui sint, obcaecati eius excepturi! Cumque accusamus numquam maiores dolorum quaerat suscipit cum placeat praesentium.</p>
</div>
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quasi.</p>
</div>
</div>
</div>
<div class="text">
static text here
</div>
</div>

Good question Dan,
One way to handle this is by placing a "cover" over your slider. Use absolute positioning to place a div over your slider. Then, you can place text in front of the slider, while having the slider rotate images in the background.
I went ahead and added a snippet to make my answer more clear.
https://codepen.io/jacobshenning/pen/qJVMQa
HTML
<div class="container">
<div class="cover">
Cover Text
</div>
<div class="slider">
<div id="ImageOne"></div>
<div id="ImageTwo"></div>
<div id="ImageThree"></div>
</div>
</div>
CSS
.container {
height: 600px;
width: 400px;
}
.cover {
color: white;
position: absolute;
padding: 20px;
font-size: 24px;
z-index: 100;
}
#ImageOne {
background-image: url('http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg');
background-size: cover;
min-height: 300px;
}
#ImageTwo {
background-image: url('http://gbaproducts.com/wp-content/uploads/2017/11/img-placeholder-dark-vertical.jpg');
background-size: cover;
min-height: 300px;
}
#ImageThree {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHdqxo4BzJeS6EZkWzm9lqnmikKnGUXBsTAm1V55j3IWAfMn2daQ');
background-size: cover;
min-height: 300px;
}
JS
$(document).ready(function(){
$('.slider').slick();
});

How do I add an animation to this accordion?

So I found this awesome accordion on the internet and I wanted to make it even more awesome by working with animations.
I'm very new to animations so I couldnt wrap my head around it. How would I use the SlideDown animation from https://daneden.github.io/animate.css/
In this accordion that I found online
http://cssdeck.com/labs/5jlzqlt6
What I tried.
I tried channging the
.accordion:target{display:block;}
From this
#accordion{margin:100px auto;width:400px;}
#accordion ul{list-style:none;margin:0;padding:0;}
.accordion{display:none;}
.accordion:target{display:block;}
#accordion ul li a{text-decoration:none;display:block;padding:10px;}
.accordion{padding:4px;}
To this..
#accordion{margin:100px auto;width:400px;}
#accordion ul{list-style:none;margin:0;padding:0;}
.accordion{display:none;}
.accordion:target{display:block; animation-name: bounce; transform-origin: center bottom;}
#accordion ul li a{text-decoration:none;display:block;padding:10px;}
.accordion{padding:4px;}
I tried playing around with it but nothing seems to work.
How do I do this in a propper way?
EDIT
I got it working but there is a small issue..
My boxes can only fot 100px.. I tried changing it to auto but that removed the slide effect
This is the one I changed
.accordion:target{-webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; height: 100px}
And as you can see the boxes doesnt change size tot he amount of text there is.
the last one is overflowing.
https://i.imgur.com/D1BpaPO.gifv
https://jsfiddle.net/r6f6jbvy/

You can't animate element that has a display: none property. Here's a simple animation that animate opacity & height value
.accordion {
opacity: 0;
height: 0;
transition: all 500ms ease;
padding: 0;
}
.accordion:target {
opacity: 1;
height: 100px;
padding: 4px;
}
If you want to use animate.css library, you need to use Javascript and add for example: .slideInUp along with .animated class to your element when user click it.
body {
background: #d0d0d5;
}
/* Basic stucture
=====================*/
#accordion {
margin: 100px auto;
width: 400px;
}
#accordion ul {
list-style: none;
margin: 0;
padding: 0;
}
.accordion {
opacity: 0;
height: 0;
transition: all 500ms ease;
padding: 0;
}
.accordion:target {
opacity: 1;
height: 100px;
padding: 4px;
}
#accordion ul li a {
text-decoration: none;
display: block;
padding: 10px;
}
/* Colors
====================*/
#accordion ul {
/*box-shadow*/
-webkit-box-shadow: 0 4px 10px #BDBDBD;
-moz-box-shadow: 0 4px 10px #BDBDBD;
box-shadow: 0 4px 10px #BDBDBD;
/*border-radius*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#accordion ul li a {
background: #fff;
border-bottom: 1px solid #E0E0E0;
color: #999;
}
.accordion {
background: #fdfdfd;
color: #999;
}
.accordion:target {
border-top: 3px solid #FFCDCD;
}
<div id="accordion">
<ul>
<li>
Example one
<div id="one" class="accordion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
</li>
<li>
Example two
<div id="two" class="accordion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
</li>
<li>
Example three
<div id="three" class="accordion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
</li>
</ul>
</div>

Use css height property and transition. Set height to zero to hide the element. Use different classes and change them with javascript.