Prevent header and footer divs from overlapping main div

Prevent header and footer divs from overlapping main div - javascript

I'm new to coding and I decided to try and learn HTML and CSS last night. I'm working on a chat UI. But I'm having a problem with my header and footer div overlapping the chat div.
I'm also having a problem with the message input I'm trying to fix the
input to the bottom of chat div but everything I tried didn't work.
// This is just to append dummy messages.
$(document).ready(function() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let message_content = `
<div class="chat_message">
<div class="chat_person_name"><p>Dummy User</p></div>
<div class="chat_message_content"><p>Dummy Message</p></div>
<div class="chat_time_stamp"><p>${hours} : ${minutes}</p></div>
</div>`;
$(".message_area").append(message_content);
$(".chat_messages").animate({
scrollTop: $(".chat_messages").prop("scrollHeight")
}, 1000);
}
}, 5000);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
line-height: 1.4;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
}
.chat {
display: flex;
}
.chat_header {
width: 100%;
padding: 20px;
position: fixed;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #FFFFFF;
}
.chat_sidebar {
height: 100vh;
color: #FFFFFF;
background-color: #2A2A2A;
overflow-y: scroll;
display: block;
}
.chat_main {
flex-grow: 1;
display: flex;
background-color: #2A2A2A;
flex-direction: column;
max-height: 100vh;
}
.message_area {
margin-bottom: 16px;
}
.chat_messages {
flex-grow: 1;
padding: 24px 24px 0;
overflow-y: scroll;
}
.chat_message {
width: 50%;
background-color: #212121;
padding: 10px 10px 0;
color: #B9B9B9;
animation-name: msg-ani;
animation-duration: 0.5s;
border-radius: 0 10px 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.chat_person_name {
font-weight: bold;
color: #FFFFFF;
}
.chat_time_stamp {
text-align: right;
color: #FFFFFF;
font-weight: 500;
}
.compose {
display: flex;
flex-shrink: 0;
margin-top: 16px;
padding: 2px;
}
.compose form {
display: flex;
flex-grow: 1;
margin-right: 1px;
}
.compose input {
border: 1px solid #EEEEEE;
border-radius: 100px;
width: 100%;
padding: 12px;
margin: 0 16px 0 0;
flex-grow: 1;
font-size: 14px;
outline: none;
}
.compose button {
cursor: pointer;
padding: 12px;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
border: none;
color: #F3F3F3;
font-size: 16px;
transition: background 0.3s ease;
border-radius: 100px;
}
.compose button:hover {
background: #8064A2;
background: -webkit-linear-gradient(to right, #000000, #8064A2);
background: linear-gradient(to right, #000000, #8064A2);
}
.list-title {
font-weight: 500;
font-size: 18px;
margin-bottom: 4px;
padding: 12px 24px 0;
text-align: center;
}
.user_item {
display: flex;
padding: 0;
margin: 0;
height: 44px;
align-items: center;
cursor: pointer;
clear: both;
position: relative;
font-weight: 500;
font-size: 0.9em;
border-bottom: 1px solid #F3F3F3;
}
.user_label {
color: #F3F3F3;
font-weight: 700 !important;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 32px;
display: inline-block;
font-size: 14px !important;
margin-left: -26px;
cursor: default;
position: absolute;
left: 75px;
max-width: 170px;
}
.chat_footer {
width: 100%;
padding: 20px;
position: fixed;
bottom: 0;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #ffffff;
}
<html>
<head>
<title>My Application</title>
<meta name="viewport" content="width=device-width, initial=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="chat_header" style="display: block;">
<p>Logo Here</p>
</div>
<div class="chat">
<div id="side_bar" class="chat_sidebar">
<ul class="chat_nav" style="display: flex; flex-direction: row; justify-content: space-evenly;">
<li class="">
<a href="#users_container" data-role="users" data-toggle="tab">
<i class="fa fa-users"></i>
<span>Users</span><span class="users_online"></span>
</a>
</li>
<li class="">
<a href="#rooms_container" data-role="rooms" data-toggle="tab">
<i class="fa fa-list"></i>
<span>Rooms</span><span class="rooms_online"></span>
</a>
</li>
</ul>
<h3 class="list-title">Users Online</h3>
<hr>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username one</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username two</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username three</span>
</div>
</div>
</div>
<div class="chat_main">
<div id="messages" class="chat_messages">
<div class="message_area">
</div>
<div class="compose flex-property ">
<form id="message-form">
<input name="message" type="text" placeholder="message" required autocomplete="off" class="message_input_field">
<button id="send_button">SEND</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat_footer" style="display: block;">
<p>Footer Info Here</p>
</div>
<script src="script.js"></script>
</body>
</html>
I would appreciate any advice or help I could get.

Just remove position: fixed from both the classes for header and footer!
// This is just to append dummy messages.
$(document).ready(function() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let message_content = `
<div class="chat_message">
<div class="chat_person_name"><p>Dummy User</p></div>
<div class="chat_message_content"><p>Dummy Message</p></div>
<div class="chat_time_stamp"><p>${hours} : ${minutes}</p></div>
</div>`;
$(".message_area").append(message_content);
$(".chat_messages").animate({
scrollTop: $(".chat_messages").prop("scrollHeight")
}, 1000);
}
}, 5000);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
line-height: 1.4;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
}
.chat {
display: flex;
}
.chat_header {
width: 100%;
padding: 20px;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #FFFFFF;
}
.chat_sidebar {
height: 100vh;
color: #FFFFFF;
background-color: #2A2A2A;
overflow-y: scroll;
display: block;
}
.chat_main {
flex-grow: 1;
display: flex;
background-color: #2A2A2A;
flex-direction: column;
max-height: 100vh;
}
.message_area {
margin-bottom: 16px;
}
.chat_messages {
flex-grow: 1;
padding: 24px 24px 0;
overflow-y: scroll;
}
.chat_message {
width: 50%;
background-color: #212121;
padding: 10px 10px 0;
color: #B9B9B9;
animation-name: msg-ani;
animation-duration: 0.5s;
border-radius: 0 10px 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.chat_person_name {
font-weight: bold;
color: #FFFFFF;
}
.chat_time_stamp {
text-align: right;
color: #FFFFFF;
font-weight: 500;
}
.compose {
display: flex;
flex-shrink: 0;
margin-top: 16px;
padding: 2px;
}
.compose form {
display: flex;
flex-grow: 1;
margin-right: 1px;
}
.compose input {
border: 1px solid #EEEEEE;
border-radius: 100px;
width: 100%;
padding: 12px;
margin: 0 16px 0 0;
flex-grow: 1;
font-size: 14px;
outline: none;
}
.compose button {
cursor: pointer;
padding: 12px;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
border: none;
color: #F3F3F3;
font-size: 16px;
transition: background 0.3s ease;
border-radius: 100px;
}
.compose button:hover {
background: #8064A2;
background: -webkit-linear-gradient(to right, #000000, #8064A2);
background: linear-gradient(to right, #000000, #8064A2);
}
.list-title {
font-weight: 500;
font-size: 18px;
margin-bottom: 4px;
padding: 12px 24px 0;
text-align: center;
}
.user_item {
display: flex;
padding: 0;
margin: 0;
height: 44px;
align-items: center;
cursor: pointer;
clear: both;
position: relative;
font-weight: 500;
font-size: 0.9em;
border-bottom: 1px solid #F3F3F3;
}
.user_label {
color: #F3F3F3;
font-weight: 700 !important;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 32px;
display: inline-block;
font-size: 14px !important;
margin-left: -26px;
cursor: default;
position: absolute;
left: 75px;
max-width: 170px;
}
.chat_footer {
width: 100%;
padding: 20px;
bottom: 0;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #ffffff;
}
<html>
<head>
<title>My Application</title>
<meta name="viewport" content="width=device-width, initial=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="chat_header" style="display: block;">
<p>Logo Here</p>
</div>
<div class="chat">
<div id="side_bar" class="chat_sidebar">
<ul class="chat_nav" style="display: flex; flex-direction: row; justify-content: space-evenly;">
<li class="">
<a href="#users_container" data-role="users" data-toggle="tab">
<i class="fa fa-users"></i>
<span>Users</span><span class="users_online"></span>
</a>
</li>
<li class="">
<a href="#rooms_container" data-role="rooms" data-toggle="tab">
<i class="fa fa-list"></i>
<span>Rooms</span><span class="rooms_online"></span>
</a>
</li>
</ul>
<h3 class="list-title">Users Online</h3>
<hr>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username one</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username two</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username three</span>
</div>
</div>
</div>
<div class="chat_main">
<div id="messages" class="chat_messages">
<div class="message_area">
</div>
<div class="compose flex-property ">
<form id="message-form">
<input name="message" type="text" placeholder="message" required autocomplete="off" class="message_input_field">
<button id="send_button">SEND</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat_footer" style="display: block;">
<p>Footer Info Here</p>
</div>
<script src="script.js"></script>
</body>
</html>

Related

How to solve this problem with responsive - blank space on right side?

I'm teaching coding in Visual Studio Code, and I found some template and tried make website. After finishing coding I have problem with responsive which u can see on pictures. There is blank white space and I dont know how to fix it.
https://i.stack.imgur.com/8jvI4.jpg
I tried to change values on #media in CSS, but nothing changes. I would really like someone to help me so I know in future where I made a mistake. I also have this reset.css - that is bootstrap.
Thanks in regards.
/* for navigation*/
var dugme = document.getElementById('dugmeNav');
dugme.addEventListener('click',pokreni,false);
function pokreni() {
document.getElementById("myNav").classList.toggle("meni_sirina");
document
.querySelector(".meni-dugmici")
.classList.toggle("meni-dugmici_style");
}
/* FONTOVI */
#font-face {
font-family: 'Raleway';
src: url('../fontovi/Raleway.ttf');
}
#font-face {
font-family: 'Open Sans';
src: url('../fontovi/OpenSans.ttf');
}
#font-face {
font-family: 'Poppins';
src: url('../fontovi/Poppins.ttf');
}
#font-face {
font-family: 'Roboto';
src: url('../fontovi/Roboto.ttf');
}
/* KRAJ FONTOVA */
body {
font-family: 'Raleway', sans-serif;
color: #0c0c0c;
background-color: #ffffff;
}
.margine {
margin: 90px 0;
}
.padding {
padding: 90px 0;
}
.padding2 {
padding: 45px 0;
}
.padding2-top {
padding-top: 45px;
}
.padding2-bottom {
padding-bottom: 45px;
}
.padding-top {
padding-top: 90px;
}
.padding-bottom {
padding-bottom: 90px;
}
.naslovi h2 {
font-weight: bold;
color: #1d1e31;
text-align: center;
position: relative;
padding-bottom: 10px;
}
.naslovi h2::before {
content: "";
width: 100px;
height: 1px;
background-color: #8547ca;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
}
.hero_next_section-margin {
margin-top: 100px;
}
/*header section*/
.omotac {
height: 100vh;
position: relative;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #f2f7fd), color-stop(45%, #1d1e31));
background: linear-gradient(to right, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
height: auto;
}
#header_sekcija .sekcija {
padding-right: 25px;
padding-left: 25px;
}
#header_sekcija .nav_container {
margin: 0 auto;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link img {
width: 22px;
margin-right: 15px;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link {
padding: 0px 25px;
color: #fefeff;
text-align: center;
font-family: "Roboto", sans-serif;
}
.meni-dugmici {
z-index: 9;
position: absolute;
right: 15px;
top: 14px;
}
.meni-dugmici button {
margin-top: 12px;
outline: none;
border: none;
background-color: transparent;
}
.meni-dugmici span {
display: block;
width: 35px;
height: 5px;
background-color: #fff;
margin: 7px 0;
-webkit-transition: all .3s;
transition: all .3s;
}
.meni-dugmici .meni-dugmici .s-2 {
-webkit-transition: all .1s;
transition: all .1s;
}
.meni-dugmici_style button {
position: fixed;
right: 29px;
top: 14px;
}
.meni-dugmici_style button .s-1 {
-webkit-transform: rotate(45deg) translateY(17px);
transform: rotate(45deg) translateY(17px);
}
.meni-dugmici_style button .s-2 {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.meni-dugmici_style button .s-3 {
-webkit-transform: rotate(-45deg) translateY(-17px);
transform: rotate(-45deg) translateY(-17px);
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.overlay .closebtn {
position: absolute;
top: 0;
right: 30px;
font-size: 60px;
}
.overlay a {
padding: 0px;
text-decoration: none;
font-size: 22px;
color: #f1f1f1;
display: block;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.overlay-sadrzaj {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.meni_sirina {
width: 100%;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a:hover,
a:focus {
color: initial;
}
.btn,
.btn:focus {
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.navigacija-sekcija .nav_search-btn {
background-image: url(../slike/search-icon.png);
background-size: 18px;
background-repeat: no-repeat;
width: 35px;
height: 35px;
padding: 0;
border: none;
margin: 0 40px 0 15px;
background-position: center;
}
.navbar-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar-logo img {
width: 40px;
margin-right: 5px;
}
.navbar-logo h1 {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
color: #8547ca;
margin-top: 5px;
}
.navigacija-sekcija {
z-index: 99999;
padding: 15px 0;
}
.navigacija-sekcija .navbar-toggler {
outline: none;
}
.navigacija-sekcija .navbar-toggler .navbar-toggler-icon {
background-image: url(../slike/menu.png);
background-size: 55px;
}
.quote_btn-container a {
display: inline-block;
padding: 5px 15px;
background-color: #fc5d35;
color: #f7f7f7;
font-size: 14px;
text-transform: uppercase;
}
/*end header section*/
/* contact section */
.kontakt_sekcija {
background-color: #f2f7fd;
}
.kontakt_sekcija h3 {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.kontakt_sekcija .row {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kontakt_sekcija input {
border: none;
outline: none;
border-bottom: 1px solid #000;
width: 90%;
margin: 15px 0;
background-color: transparent;
}
.kontakt_sekcija input::-webkit-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input:-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_form-container #posaljiDugme {
border: none;
background-color: #8c60bd;
color: #fff;
font-size: 15px;
padding: 15px 45px;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
}
#kontaktnaslov {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.contact_img-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact_img-box img {
width: 100%;
}
/* end contact section */
/* info section */
.info_sekcija {
background-color: #363636;
color: #ffffff;
font-family: 'Poppins', sans-serif;
padding-left: 20px;
}
.info_sekcija h4 {
margin-bottom: 12px;
font-size: 22px;
}
.info_logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_logo-box h3 {
font-weight: bold;
padding: 5px 35px;
border-bottom: 1.5px solid #8547ca;
}
.info_sekcija ul {
padding: 0;
}
.info_sekcija ul li {
list-style-type: none;
margin: 3px 0;
}
.info_sekcija ul li a {
color: #ffffff;
}
.info_sekcija ul li a:hover {
color: #8547ca;
}
.info_sekcija .form_container input {
width: 225px;
height: 40px;
padding: 10px;
}
.info_sekcija .form_container::-webkit-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container:-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container .pretplataDugme {
background-color: #8c60bd;
border: none;
outline: none;
color: #fff;
padding: 8px 30px;
margin-top: 15px;
font-size: 15px;
text-transform: uppercase;
}
.mreze_container {
width: 95%;
margin: 0 auto;
border-top: 1px solid #898989;
padding: 25px 0;
}
.info_sekcija .social-box {
margin: 0 auto;
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_sekcija .social-box img {
width: 35px;
margin-right: 5px;
}
/* end info section */
/* footer section*/
.footer_sekcija {
background-color: #8547ca;
padding: 20px;
}
.footer_sekcija p {
margin: 0;
text-align: center;
color: #fefdfc;
}
.footer_sekcija a {
color: #fefdfc;
}
#media (max-width: 1280px) {
.slajder_sekcija .img-box img {
height: auto;
width: 100%;
}
.slajder_sekcija .detalji-box h2 {
font-size: 4.5rem;
}
}
#media (max-width: 992px) {
.slajder_sekcija .detalji-box h2 {
font-size: 3.5rem;
}
.slajder_sekcija .detalji-box h3 {
font-size: 2rem;
}
.slajder_sekcija .carousel-control-prev {
top: 15px;
}
.slajder_sekcija .carousel-control-next {
bottom: 75px;
}
}
#media (max-width: 769px) {
.omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #f2f7fd 45%);
}
.omotac {
height: auto;
}
.meni-dugmici span {
background-color: #1d1e31;
}
.meni-dugmici_style button span {
background-color: #fff;
}
.carousel-indicators {
display: none;
}
.slajder_sekcija .img-box {
margin-top: 22.5px;
}
.slajder_sekcija .carousel-control-prev,
.slajder_sekcija .carousel-control-next {
display: none;
}
.skidanje_sekcija .main-img-box {
margin-top: 22.5px;
}
.onama_sekcija {
background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url("../slike/about-bg.jpg");
}
.onama_sekcija .detalji-box {
text-align: left;
height: auto;
}
.onama_sekcija .detalji-box.b-1 a {
margin: 0 auto;
}
.onama_sekcija .detalji-box.b-1 {
margin-bottom: 22.5px;
}
.info_sekcija .col-md-3 {
padding: 10px 12.50px;
text-align: left;
}
.contact_img-box {
margin-top: 22.5px;
}
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 500px;
}
.kol-desno {
margin: 50px 0px 0px 180px;
}
.b-3 p {
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
.b-4 p {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
}
#media (max-width: 576px) {
.kontakt_sekcija input {
width: 100%;
}
.info_sekcija .social-box {
width: auto;
}
}
#media (max-width: 400px) {
.slajder_sekcija .detalji-box h3 {
font-size: 1.5rem;
}
.slajder_sekcija .detalji-box h2 {
font-size: 2.5rem;
}
.pretplata_sekcija form {
flex-direction: column;
}
.pretplata_sekcija form input {
width: 100%;
height: 45px;
}
.pretplata_sekcija form .pretplataDugme {
width: 150px;
height: 45px;
line-height: 45px;
margin-top: 25px;
}
}
#media (max-width: 376px) {
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 250px;
padding: 0;
}
.kol-desno {
margin: 50px 0px 0px 50px;
padding: 0;
}
.b-3 p {
padding-top: 10px;
color: #FFF;
font-size: 17px;
}
.b-4 p {
margin-top: 20px;
color: #FFF;
font-size: 17px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Abdans - Kontakt</title>
<!-- slajder css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<!-- Header deo -->
<div class="omotac">
<header class="header_sekcija">
<div class="sekcija">
<nav class="navbar navbar-prosirenje navigacija-sekcija">
<div class="navbar-vracanje">
<div class="meni-dugmici">
<button id="dugmeNav">
<span class="s-1"> </span>
<span class="s-2"> </span>
<span class="s-3"> </span>
</button>
</div>
<div id="myNav" class="overlay">
<div class="overlay-sadrzaj">
POČETNA
O NAMA
ISKUSTVA KORISNIKA
KONTAKT
</div>
</div>
</div>
</nav>
<a class="navbar-logo" href="index.html">
<h1>
ABDANS
</h1>
</a>
</div>
</header>
<!-- Zavrsava se header deo -->
<!-- kontakt -->
<section class="kontakt_sekcija padding">
<div class="container">
<div class="d-flex ">
<h2 id="kontaktnaslov">
Kontaktirajte nas
</h2>
</div>
<div class="row">
<div class="col-md-6">
<form action="kontakt.php" method="get">
<div class="kontakt_form-container">
<div>
<div>
<input type="text" placeholder="Ime">
</div>
<div>
<input type="text" placeholder="Broj telefona">
</div>
<div>
<input type="email" placeholder="Email">
</div>
<div class="mt-5">
<input type="text" placeholder="Poruka">
</div>
<div class="mt-5">
<input type="submit" value="pošalji" id="posaljiDugme">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="contact_img-box">
<img src="slike/contact-img.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- zavrsavaju se kontakti -->
<!-- info -->
<section class="info_sekcija padding-top">
<div class="info_logo-box">
<h3>
ABDANS
</h3>
</div>
<div class="container padding2">
<div class="row">
<div class="col-md-3">
<h4>
O nama
</h4>
<p>
Firma se bavi prodajom BIO prehrambenih proizvoda.
</p>
</div>
<div class="col-md-3">
<h4>
Korisni linkovi
</h4>
<ul>
<li>
<a href="http://www.organiccentar.rs/prednosti/sta-organski-proizvodi.html">
Šta je BIO proizvod ?
</a>
</li>
<li>
<a href="#">
Kako preuzeti aplikaciju ?
</a>
</li>
<li>
<a href="onama.html">
O nama
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4>
Kontaktirajte nas
</h4>
<p>
Kontaktirajte nas na svim društvenim mrežama, klikom na ikonicu ispod.
</p>
</div>
<div class="col-md-3">
<div class="pretplata_container">
<h4>
Newsletter
</h4>
<div class="form_container">
<form action="pretplata.php" method="post">
<input type="email" placeholder="Upišite vaš email" id="preplata_provera">
<input type="submit" value="Pretplati se" class="pretplataDugme">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mreze_container">
<div class="social-box">
<a href="#">
<img src="slike/fb.png" alt="">
</a>
<a href="#">
<img src="slike/twitter.png" alt="">
</a>
<a href="#">
<img src="slike/linkedin.png" alt="">
</a>
<a href="#">
<img src="slike/instagram.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- zavrsava se info -->
<!-- footer -->
<footer class="sekcija footer_sekcija">
<p>
© 2022 Sva prava zadržana. Napravljen od strane
Nikole Tešića
</p>
</footer>
<!-- zavrsava se footer -->
<!-- javasript -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/reset.js"></script>
<script src="js/navigacija.js"></script>
</div>
</body>
</html>
Thanks in regards.

Try width: 100vw; in the body element(or the element that have background color)

Change header and content based off the tab selected

I have a menu bar that changes the tab based on which one is selected. Right now both of the headers aren't displaying properly with each of the tabs and I was wondering how I can fix this?
When I move the content-header div into the content div with the associated tab, the styling gets messed up, but when I take it out and leave it where it's at, the header gets duplicated to the other tabs. I have provided a screenshot of what I'm trying to achieve and the code as well.
(How I want to display each tab: Each will have their own header that's specific to the tab selected)
function switchTabs() {
document.querySelectorAll(".tab-button").forEach(link => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`[data-tab="${tabNumber}"]`)
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tab-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add("tab-button-active");
tabToActivate.classList.add("content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click()
})
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#alert{
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*, ::after, ::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover, .button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus, .search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: none;
}
.content-active {
display: flex !important;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a + * {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked + span {
background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0,0,0,.125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.tab-button-active{
color: var(--c-accent-primary) !important;
border-bottom: 3px solid var(--c-accent-primary) !important;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StudioPick</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="CSS/settings.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType"
style="position: relative; top: -20px; right: -60px; font-size: 12px !important">Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" />Edit profile
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
<a class="tab-button" href="#" data-for-tab="1">Profile</a>
<a class="tab-button" href="#" data-for-tab="2">My Rooms</a>
<a class="tab-button" href="#" data-for-tab="3">Session Management</a>
<a class="tab-button" href="#" data-for-tab="4">Payment History</a>
<a class="tab-button" href="#" data-for-tab="5">Edit Payment</a>
</div>
<div class="content" data-tab="1">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your profile</h2>
<p>Edit your profile information such email, username, password, etc.</p>
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your studio rooms</h2>
<p>Add, delete, and edit the room images for your studio profile.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Add a room</span>
</a>
</div>
</div>
<div class="content" data-tab="2">
<div class="content-panel">
<div class="vertical-tabs">
View Rooms
Manage Services
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Room A</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>Room B</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Room C</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
<div class="content" data-tab="3">
<div class="content-panel">
<div class="vertical-tabs">
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script>
<script src="Javascript/settings.js"></script>
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>

There are a few things you need to do.
Add a wrapper to content-panel and content main with these styles:
width: 100%;
display: flex;
flex-direction: row;
Move your content-headers inside the content class
Finally provide a width of 100% to content-headers
And here is the working example:
https://codepen.io/saadramay/pen/NWMgxrB

Switch tabs with click

Hello I am trying to build a page with a sidebar and have it where I click one of the links at the top and it switches the tab and the content within it. The current formula that I have isn't working and I get one error:
Uncaught TypeError: Cannot read properties of null (reading 'click')
I have provided my code below. Thanks!:
function switchTabs(){
document.querySelectorAll(".tab-button").forEach(link => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`.content[data-tab="${tabNumber}"]`);
menuBar.querySelector(".tab-button").forEach(link => {
link.classList.remove("tabs-button-active");
})
tabsContainer.querySelector(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add(".tab-button-active");
tabToActivate.classList.add(".content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
tabsContainer.querySelector(".horizontal-tabs .tab-button").click();
})
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#alert{
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*, ::after, ::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover, .button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus, .search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: flex;
align-items: flex-start;
}
.content-active {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: flex;
align-items: flex-start;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a + * {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked + span {
background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0,0,0,.125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>StudioPick</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType" style="position: relative; top: -20px; right: -60px; font-size: 12px !important">Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" />Edit profile
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
<a class="tab-button" href="#" data-for-tab="1">Profile</a>
<a class="tab-button" href="#" data-for-tab="2">My Rooms</a>
<a class="tab-button" href="#" data-for-tab="3">Session Management</a>
<a class="tab-button" href="#" data-for-tab="4">Payment History</a>
<a class="tab-button" href="#" data-for-tab="5">Edit Payment</a>
</div>
<div class="content" data-tab="1">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your profile</h2>
<p>Edit your profile information such email, username, password, etc.</p>
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your studio rooms</h2>
<p>Add, delete, and edit the room images for your studio profile.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Add a room</span>
</a>
</div>
</div>
<div class="content" data-tab="2">
<div class="content-panel">
<div class="vertical-tabs">
View Rooms
Manage Services
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Room A</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>Room B</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Room C</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script>
<script src="./script.js"></script>
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>

I solved this problem and i hope this similar as you expect
first, fix your css code:
You add class tab-button-active to your css code to active link when click:
.tab-button-active {
color: var(--c-accent-primary) !important;
border-bottom: 3px solid var(--c-accent-primary) !important;
}
Update your css code to content and code when content active. This will similar code and display none and active with display: flex !important, code below:
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: none;
}
.content-active {
display: flex !important;
}
second, fix some errors in javascript code:
You can replace querySelector with querySelectorAll to select all elements with you query, here are errors code:
menuBar.querySelector(".tab-button").forEach(link => {
link.classList.remove("tabs-button-active");
})
tabsContainer.querySelector(".content").forEach(tab => {
tab.classList.remove("content-active");
})
Some spelling mistakes: "tab-button-active" similar className you add when active not "tabs-button-active"
link.classList.remove("tabs-button-active");
tabsContainer doesn't contain tab-button so you can't querySelector on this, below is the fix code:
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click()
})
});
Here are my code, hope it useful for you:
function switchTabs() {
document.querySelectorAll(".tab-button").forEach(link => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`[data-tab="${tabNumber}"]`)
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tab-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add("tab-button-active");
tabToActivate.classList.add("content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click()
})
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#alert{
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*, ::after, ::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover, .button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus, .search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: none;
}
.content-active {
display: flex !important;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a + * {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked + span {
background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0,0,0,.125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.tab-button-active{
color: var(--c-accent-primary) !important;
border-bottom: 3px solid var(--c-accent-primary) !important;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>StudioPick</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType" style="position: relative; top: -20px; right: -60px; font-size: 12px !important">Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" />Edit profile
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
<a class="tab-button" href="#" data-for-tab="1">Profile</a>
<a class="tab-button" href="#" data-for-tab="2">My Rooms</a>
<a class="tab-button" href="#" data-for-tab="3">Session Management</a>
<a class="tab-button" href="#" data-for-tab="4">Payment History</a>
<a class="tab-button" href="#" data-for-tab="5">Edit Payment</a>
</div>
<div class="content" data-tab="1" >
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your profile</h2>
<p>Edit your profile information such email, username, password, etc.</p>
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your studio rooms</h2>
<p>Add, delete, and edit the room images for your studio profile.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Add a room</span>
</a>
</div>
</div>
<div class="content" data-tab="2">
<div class="content-panel">
<div class="vertical-tabs">
View Rooms
Manage Services
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Room A</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>Room B</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Room C</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script>
<script src="./script.js"></script>
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>

Error here:
document.querySelectorAll(".content").forEach(tabsContainer => {
console.log(tabsContainer);
tabsContainer.querySelector(".horizontal-tabs .tab-button").click();
})
There's no horizontal-tabs class in your content class.
So, when you use tabsContainer.querySelector(".horizontal-tabs .tab-button") you got a null element.
Obviously, you call the click function on null element caught an error.
If you don't sure what elements you select, just print it on the console.

I am unsure exactly what you want to do but I went until all errors had been solved.
Firstly, minor issue, you forgot to end the strong element:
<!-- old code -->
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<!-- new code -->
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</strong></a>
You should be changing the above to querySelectorAll if you are intending to do a forEach on them as querySelector only returns one element.
//old code
menuBar.querySelector(".tab-button").forEach(link => {
link.classList.remove("tabs-button-active");
})
tabsContainer.querySelector(".content").forEach(tab => {
tab.classList.remove("content-active");
})
//new code
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tabs-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
You should use document instead of tabsContainer for this as there are no horizontal-tabs under tabsContainer which is the reason you are getting the null issue you were initially talking about.
//old code
document.querySelectorAll(".content").forEach(tabsContainer => {
tabsContainer.querySelector(".horizontal-tabs .tab-button").click();
})
//new code
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click();
})
Below is the fixed code:
function switchTabs(){
document.querySelectorAll(".tab-button").forEach((link) => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`.content[data-tab="${tabNumber}"]`);
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tabs-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add(".tab-button-active");
tabToActivate.classList.add(".content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click();
})
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#alert{
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*, ::after, ::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover, .button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus, .search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: flex;
align-items: flex-start;
}
.content-active {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: flex;
align-items: flex-start;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a + * {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked + span {
background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0,0,0,.125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>StudioPick</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType" style="position: relative; top: -20px; right: -60px; font-size: 12px !important">Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" />Edit profile
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
<a class="tab-button" href="#" data-for-tab="1">Profile</a>
<a class="tab-button" href="#" data-for-tab="2">My Rooms</a>
<a class="tab-button" href="#" data-for-tab="3">Session Management</a>
<a class="tab-button" href="#" data-for-tab="4">Payment History</a>
<a class="tab-button" href="#" data-for-tab="5">Edit Payment</a>
</div>
<div class="content" data-tab="1">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your profile</h2>
<p>Edit your profile information such email, username, password, etc.</p>
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your studio rooms</h2>
<p>Add, delete, and edit the room images for your studio profile.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Add a room</span>
</a>
</div>
</div>
<div class="content" data-tab="2">
<div class="content-panel">
<div class="vertical-tabs">
View Rooms
Manage Services
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Room A</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>Room B</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Room C</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script>
<script src="./script.js"></script>
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>

How can i edit the Li item to add text to it with javascript

I am creating a trello like web app for practising so i have completed the cards with drag drop features but i want now to add content to the li items of an ul tag that can even be edited by user too
I want it to be in javascript
HTML COde
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trello</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Masthead -->
<header class="masthead">
<div class="boards-menu">
<div class="board-search">
<input type="search" class="board-search-input" aria-label="Board Search">
<i class="fas fa-search search-icon" aria-hidden="true"></i>
</div>
</div>
<div class="logo">
<h1><i class="fab fa-trello logo-icon" aria-hidden="true"></i>Trello</h1>
</div>
<div class="user-settings" style="height: 20px;margin-bottom:35px;">
<a href="profile.html">
<img src="https://img.icons8.com/wired/64/000000/settings.png">
</a>
</div>
</header>
<!-- Lists container -->
<section class="lists-container">
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card1">
<h3 class="list-title">Completed Tasks</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<button class="add-list-btn btn">Add a list</button>
</section>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script/script.js">
</script>
</body>
</html>
Javascript
$(function () {
$("#parent, #parent1").sortable({
connectWith: ".list-items"
}).disableSelection();
});
document.getElementById('button').onclick = repeat;
var i = 0;
var original = document.getElementById('repeatTHIS');
function repeat() {
var clone = original.cloneNode(true);
clone.id = "repeatTHIS" + ++i;
original.parentNode.appendChild(clone);
}
my css as follows
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
:focus {
outline-color: #fa0;
}
:root {
font-size: 11px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Masthead */
.masthead {
flex-basis: 4rem;
display: flex;
align-items: center;
padding: 0 0.8rem;
margin: -8px -8px 0 -8px;
background-color: #0067a3;
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
}
.masthead .btn {
background-color: #4c94be;
border-radius: 0.3rem;
transition: background-color 150ms;
}
.masthead .btn:hover {
background-color: #3385b5;
}
.boards-menu {
display: flex;
flex-shrink: 0;
}
.boards-btn {
flex-basis: 9rem;
font-size: 1.4rem;
font-weight: 700;
color: #fff;
margin-right: 0.8rem;
padding: 0.6rem 0.8rem;
}
.boards-btn-icon {
font-size: 1.7rem;
padding-right: 1.2rem;
}
.board-search {
flex-basis: 18rem;
position: relative;
}
.board-search-input {
height: 3rem;
border: none;
border-radius: 0.3rem;
background-color: #4c94be;
width: 100%;
padding: 0 3rem 0 1rem;
color: #fff;
}
.board-search-input:hover {
background-color: #66a4c8;
}
.search-icon {
font-size: 1.5rem;
position: absolute;
top: 50%;
right: 0.8rem;
transform: translateY(-50%) rotate(90deg);
color: #fff;
}
.logo {
flex: 1;
font-family: "Courgette", cursive;
font-size: 2.2rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
margin: 0 2rem;
transition: color 150ms;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
.logo:hover {
color: rgba(255, 255, 255, 0.8);
}
.logo-icon {
padding-right: 0.4rem;
}
.user-settings {
display: flex;
height: 1.5rem;
color: #fff;
}
.user-settings-btn {
font-size: 1.5rem;
width: 3.5rem;
margin-right: 1.5rem;
}
/* Board info bar */
.board-info-bar {
flex-basis: 3rem;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0.8rem 0;
padding: 0 1rem;
color: #f6f6f6;
}
sboard-info-bar .btn {
font-size: 1.4rem;
font-weight: 400;
transition: background-color 150ms;
padding: 0 0.6rem;
border-radius: 0.3rem;
height: 3rem;
}
.board-info-bar .btn:hover {
background-color: #006aa8;
}
.private-btn-icon,
.menu-btn-icon {
padding-right: 0.6rem;
white-space: nowrap;
}
.board-title h2 {
font-size: 1.8rem;
font-weight: 700;
white-space: nowrap;
}
/* Lists */
.lists-container::-webkit-scrollbar {
height: 2.4rem;
}
.lists-container::-webkit-scrollbar-thumb {
background-color: #66a3c7;
border: 0.8rem solid #0079bf;
border-top-width: 0;
}
.lists-container {
display: flex;
align-items: start;
padding: 0 0.8rem 0.8rem;
overflow-x: auto;
height: calc(100vh - 8.6rem);
margin-top: 60px;
}
.list {
flex: 0 0 27rem;
display: flex;
flex-direction: column;
background-color: #e2e4e6;
max-height: calc(100vh - 11.8rem);
border-radius: 0.3rem;
margin-right: 1rem;
}
.list:last-of-type {
margin-right: 0;
}
.list-title {
font-size: 1.4rem;
font-weight: 700;
color: #333;
padding: 1rem;
}
.list-items {
flex: 1;
display: flex;
flex-direction: column;
align-content: start;
padding: 0 0.6rem 0.5rem;
overflow-y: auto;
}
.list-items::-webkit-scrollbar {
width: 1.6rem;
}
.list-items::-webkit-scrollbar-thumb {
background-color: #c4c9cc;
border-right: 0.6rem solid #e2e4e6;
}
.list-items li {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.3;
background-color: #fff;
padding: 0.65rem 0.6rem;
color: #4d4d4d;
border-bottom: 0.1rem solid #ccc;
border-radius: 0.3rem;
margin-bottom: 0.6rem;
word-wrap: break-word;
cursor: pointer;
}
.list-items li:last-of-type {
margin-bottom: 0;
}
.list-items li:hover {
background-color: #eee;
}
.add-card-btn {
display: block;
font-size: 1.4rem;
font-weight: 400;
color: #838c91;
padding: 1rem;
text-align: left;
cursor: pointer;
}
.add-card-btn:hover {
background-color: #cdd2d4;
color: #4d4d4d;
text-decoration: underline;
}
.add-list-btn {
flex: 0 0 27rem;
display: block;
font-size: 1.4rem;
font-weight: 400;
background-color: #006aa7;
color: #a5cae0;
padding: 1rem;
border-radius: 0.3rem;
cursor: pointer;
transition: background-color 150ms;
text-align: left;
margin-left: 15px;
}
.add-list-btn:hover {
background-color: #005485;
}
.add-card-btn::after,
.add-list-btn::after {
content: '...';
}
$(function () {
$("#parent, #parent1").sortable({
connectWith: ".list-items"
}).disableSelection();
});
document.getElementById('button').onclick = repeat;
var i = 0;
var original = document.getElementById('repeatTHIS');
function repeat() {
var clone = original.cloneNode(true);
clone.id = "repeatTHIS" + ++i;
original.parentNode.appendChild(clone);
}
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
:focus {
outline-color: #fa0;
}
:root {
font-size: 11px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Masthead */
.masthead {
flex-basis: 4rem;
display: flex;
align-items: center;
padding: 0 0.8rem;
margin: -8px -8px 0 -8px;
background-color: #0067a3;
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
}
.masthead .btn {
background-color: #4c94be;
border-radius: 0.3rem;
transition: background-color 150ms;
}
.masthead .btn:hover {
background-color: #3385b5;
}
.boards-menu {
display: flex;
flex-shrink: 0;
}
.boards-btn {
flex-basis: 9rem;
font-size: 1.4rem;
font-weight: 700;
color: #fff;
margin-right: 0.8rem;
padding: 0.6rem 0.8rem;
}
.boards-btn-icon {
font-size: 1.7rem;
padding-right: 1.2rem;
}
.board-search {
flex-basis: 18rem;
position: relative;
}
.board-search-input {
height: 3rem;
border: none;
border-radius: 0.3rem;
background-color: #4c94be;
width: 100%;
padding: 0 3rem 0 1rem;
color: #fff;
}
.board-search-input:hover {
background-color: #66a4c8;
}
.search-icon {
font-size: 1.5rem;
position: absolute;
top: 50%;
right: 0.8rem;
transform: translateY(-50%) rotate(90deg);
color: #fff;
}
.logo {
flex: 1;
font-family: "Courgette", cursive;
font-size: 2.2rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
margin: 0 2rem;
transition: color 150ms;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
.logo:hover {
color: rgba(255, 255, 255, 0.8);
}
.logo-icon {
padding-right: 0.4rem;
}
.user-settings {
display: flex;
height: 1.5rem;
color: #fff;
}
.user-settings-btn {<!DOCTYPE html>
<html lang="en">
<head>
<title>Trello</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Masthead -->
<header class="masthead">
<div class="boards-menu">
<div class="board-search">
<input type="search" class="board-search-input" aria-label="Board Search">
<i class="fas fa-search search-icon" aria-hidden="true"></i>
</div>
</div>
<div class="logo">
<h1><i class="fab fa-trello logo-icon" aria-hidden="true"></i>Trello</h1>
</div>
<div class="user-settings" style="height: 20px;margin-bottom:35px;">
<a href="profile.html">
<img src="https://img.icons8.com/wired/64/000000/settings.png">
</a>
</div>
</header>
<!-- Lists container -->
<section class="lists-container">
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card1">
<h3 class="list-title">Completed Tasks</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<button class="add-list-btn btn">Add a list</button>
</section>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script/script.js">
</script>
</body>
</html>
font-size: 1.5rem;
width: 3.5rem;
margin-right: 1.5rem;
}
/* Board info bar */
.board-info-bar {
flex-basis: 3rem;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0.8rem 0;
padding: 0 1rem;
color: #f6f6f6;
}
sboard-info-bar .btn {
font-size: 1.4rem;
font-weight: 400;
transition: background-color 150ms;
padding: 0 0.6rem;
border-radius: 0.3rem;
height: 3rem;
}
.board-info-bar .btn:hover {
background-color: #006aa8;
}
.private-btn-icon,
.menu-btn-icon {
padding-right: 0.6rem;
white-space: nowrap;
}
.board-title h2 {
font-size: 1.8rem;
font-weight: 700;
white-space: nowrap;
}
/* Lists */
.lists-container::-webkit-scrollbar {
height: 2.4rem;
}
.lists-container::-webkit-scrollbar-thumb {
background-color: #66a3c7;
border: 0.8rem solid #0079bf;
border-top-width: 0;
}
.lists-container {
display: flex;
align-items: start;
padding: 0 0.8rem 0.8rem;
overflow-x: auto;
height: calc(100vh - 8.6rem);
margin-top: 60px;
}
.list {
flex: 0 0 27rem;
display: flex;
flex-direction: column;
background-color: #e2e4e6;
max-height: calc(100vh - 11.8rem);
border-radius: 0.3rem;
margin-right: 1rem;
}
.list:last-of-type {
margin-right: 0;
}
.list-title {
font-size: 1.4rem;
font-weight: 700;
color: #333;
padding: 1rem;
}
.list-items {
flex: 1;
display: flex;
flex-direction: column;
align-content: start;
padding: 0 0.6rem 0.5rem;
overflow-y: auto;
}
.list-items::-webkit-scrollbar {
width: 1.6rem;
}
.list-items::-webkit-scrollbar-thumb {
background-color: #c4c9cc;
border-right: 0.6rem solid #e2e4e6;
}
.list-items li {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.3;
background-color: #fff;
padding: 0.65rem 0.6rem;
color: #4d4d4d;
border-bottom: 0.1rem solid #ccc;
border-radius: 0.3rem;
margin-bottom: 0.6rem;
word-wrap: break-word;
cursor: pointer;
}
.list-items li:last-of-type {
margin-bottom: 0;
}
.list-items li:hover {
background-color: #eee;
}
.add-card-btn {
display: block;
font-size: 1.4rem;
font-weight: 400;
color: #838c91;
padding: 1rem;
text-align: left;
cursor: pointer;
}
.add-card-btn:hover {
background-color: #cdd2d4;
color: #4d4d4d;
text-decoration: underline;
}
.add-list-btn {
flex: 0 0 27rem;
display: block;
font-size: 1.4rem;
font-weight: 400;
background-color: #006aa7;
color: #a5cae0;
padding: 1rem;
border-radius: 0.3rem;
cursor: pointer;
transition: background-color 150ms;
text-align: left;
margin-left: 15px;
}
.add-list-btn:hover {
background-color: #005485;
}
.add-card-btn::after,
.add-list-btn::after {
content: '...';
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trello</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Masthead -->
<header class="masthead">
<div class="boards-menu">
<div class="board-search">
<input type="search" class="board-search-input" aria-label="Board Search">
<i class="fas fa-search search-icon" aria-hidden="true"></i>
</div>
</div>
<div class="logo">
<h1><i class="fab fa-trello logo-icon" aria-hidden="true"></i>Trello</h1>
</div>
<div class="user-settings" style="height: 20px;margin-bottom:35px;">
<a href="profile.html">
<img src="https://img.icons8.com/wired/64/000000/settings.png">
</a>
</div>
</header>
<!-- Lists container -->
<section class="lists-container">
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card1">
<h3 class="list-title">Completed Tasks</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<button class="add-list-btn btn">Add a list</button>
</section>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script/script.js">
</script>
</body>
</html>

You could use the HTML Attribute called contenteditable, this will allow the users to edit html content on the element!
But if you need to save the changes, you have to add some javascript AJAX request into your PHP page that may save the changes into a database or a file or whatever else.
Hope my answer would be useful for you!
window.isEditingALi=false;
document.addEventListener("click", function(e){ //Of course you can merge this EventListener with the next one but I am separing them just to make things clear for you !
const elementsIdSelector="editableLi";
e=(e||window.event);
e.preventDefault();
const path=e.path;
for(var i=0;i<path.length-4;i++){
if(path[i].tagName=="LI"&&path[i].id==elementsIdSelector){
//Found a Li element with the id required ( Even dynamically created li would fires ! )
//Do whatever you want there
path[i].addEventListener("click", function(){
if(this.getAttribute("contenteditable")!="true"){
const wantEdit=window.confirm("You want to edit this element content ?");
if(wantEdit){
this.setAttribute("contenteditable", true);
window.isEditingALi=this;
this.focus();
}else{
window.isEditingALi=false;
}
}
});
}
}
});
document.addEventListener("click", function(e){
e=(e||window.event);
e.preventDefault();
const path=e.path;
let canGetReset=true;
for(var i=0;i<path.length-4;i++){
if(path[i]==window.isEditingALi) canGetReset=false;
}
if(canGetReset&&window.isEditingALi){
window.isEditingALi.removeAttribute("contenteditable");
//Here you can add your Ajax request or whatever function you want to do after the user finish editing the li ..
alert("Li has been changed successfully !");
window.isEditingALi=false;
}
});
//This is just an additional function to test if the dynamically created element would work or not !
function createEditableLi(){
const ul=document.querySelector("ul");
const newLi=document.createElement("li");
newLi.setAttribute("id", "editableLi");
newLi.innerHTML="New Li (Created dynamically)";
ul.appendChild(newLi);
}
body{
font-family: Arial, sans-serif;
font-size: 14px;
}
You can actually edit these Li by clicking and apply any changes you want ! (Even dynamically created elements are supported now!)
<br>
<ul>
<li id="editableLi"> First Li</li>
<li id="editableLi"> Second Li</li>
<li id="editableLi"> Third Li</li>
<li id="editableLi"> Another Li</li>
<li id="editableLi"> More Li</li>
</ul>
<br>
<button onclick="createEditableLi()">Create a New Li Dynamically</button>

Blank Screen on right scroll

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

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

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

Develop Reference

JavaScript is the programming language of the Web.

Prevent header and footer divs from overlapping main div - javascript

Related

How to solve this problem with responsive - blank space on right side?

Change header and content based off the tab selected

Switch tabs with click

How can i edit the Li item to add text to it with javascript

Blank Screen on right scroll

Categories

Resources