Develop Reference

Header is not in the correct position - javascript

Excuse me for my stupidity. I'm trying to merge two different files but they're messed up and I'm sweating while thinking about the solution. Really appreciate someone taking the time to review my case T^T
Drive of header video if you want.
Oh, the system forced me to add more details to the post but I think with this dense code, it must be very detailed....
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu+Condensed&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
header {
z-index: 999;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 200px;
transition: 0.5s ease;
}
header .brand {
color: #fff;
font-size: 1.5em;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
}
header .navigation {
position: relative;
}
header .navigation .navigation-items a {
position: relative;
color: #fff;
font-size: 1em;
font-weight: 500;
text-decoration: none;
margin-left: 30px;
transition: 0.3s ease;
}
header .navigation .navigation-items a:before {
content: '';
position: absolute;
background: #fff;
width: 0;
height: 3px;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
header .navigation .navigation-items a:hover:before {
width: 100%;
}
section {
padding: 100px 200px;
}
.home {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
background: #2696E9;
}
.home:before {
z-index: 777;
content: '';
position: absolute;
background: rgba(3, 94, 251, 0.144);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.home .content {
z-index: 888;
color: #fff;
width: 70%;
margin-top: 50px;
display: none;
}
.home .content.active {
display: block;
}
.home .content h1 {
font-size: 4em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 5px;
line-height: 75px;
margin-bottom: 40px;
}
.home .content h1 span {
font-size: 1.2em;
font-weight: 600;
}
.home .content p {
margin-bottom: 65px;
}
/* .home .content a{
background: #fff;
padding: 15px 35px;
color: #1680AC;
font-size: 1.1em;
font-weight: 500;
text-decoration: none;
border-radius: 2px;
} */
.home .media-icons {
z-index: 888;
position: absolute;
right: 30px;
display: flex;
flex-direction: column;
transition: 0.5s ease;
}
.home .media-icons a {
color: #fff;
font-size: 1.6em;
transition: 0.3s ease;
}
.home .media-icons a:not(:last-child) {
margin-bottom: 20px;
}
.home .media-icons a:hover {
transform: scale(1.3);
}
.home video {
z-index: 000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-navigation {
z-index: 888;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform: translateY(80px);
margin-bottom: 12px;
}
.slider-navigation .nav-btn {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
transition: 0.3s ease;
}
.slider-navigation .nav-btn.active {
background: #2696E9;
}
.slider-navigation .nav-btn:not(:last-child) {
margin-right: 20px;
}
.slider-navigation .nav-btn:hover {
transform: scale(1.2);
}
.video-slide {
position: absolute;
width: 100%;
clip-path: circle(0% at 0 50%);
}
.video-slide.active {
clip-path: circle(150% at 0 50%);
transition: 2s ease;
transition-property: clip-path;
}
#media (max-width: 1040px) {
header {
padding: 12px 20px;
}
section {
padding: 100px 20px;
}
.home .media-icons {
right: 15px;
}
header .navigation {
display: none;
}
header .navigation.active {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(1, 1, 1, 0.5);
}
header .navigation .navigation-items a {
color: #222;
font-size: 1.2em;
margin: 20px;
}
header .navigation .navigation-items a:before {
background: #222;
height: 5px;
}
header .navigation.active .navigation-items {
background: #fff;
width: 600px;
max-width: 600px;
margin: 20px;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 5px;
box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
}
.menu-btn {
background: url(menu.png)no-repeat;
background-size: 30px;
background-position: center;
width: 40px;
height: 40px;
cursor: pointer;
transition: 0.3s ease;
}
.menu-btn.active {
z-index: 999;
background: url(close.png)no-repeat;
background-size: 25px;
background-position: center;
transition: 0.3s ease;
}
}
#media (max-width: 560px) {
.home .content h1 {
font-size: 3em;
line-height: 60px;
}
}
body .bod {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #3c2864;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 40px;
}
.card {
position: relative;
width: 320px;
height: 450px;
margin: 30px;
background: #287bff;
border-radius: 20px;
border-bottom-left-radius: 160px;
border-bottom-right-radius: 160px;
box-shadow: 0 15px 0 #fff, inset 0 -15px 0 rgba(255, 255, 255, 0.25), 0 45px 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
}
.card::before {
content: '';
position: absolute;
top: -140px;
left: -40%;
width: 100%;
height: 120%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
transform: rotate(35deg);
pointer-events: none;
filter: blur(5px);
}
.card:nth-child(1) {
background: linear-gradient(to bottom, #24ff72, #9a4eff);
}
.card:nth-child(2) {
background: linear-gradient(to bottom, #24ff72, #9a4eff);
}
.card:nth-child(3) {
background: linear-gradient(to bottom, #24ff72, #9a4eff);
}
.icon {
position: relative;
width: 140px;
height: 120px;
background: #3c2864;
;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1), inset 0 -8px 0 #fff;
z-index: 1000;
display: flex;
justify-content: center;
}
.icon::before {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 50px;
height: 50px;
background: transparent;
border-top-right-radius: 50px;
box-shadow: 15px -15px 0 15px #3c2864;
}
.icon::after {
content: '';
position: absolute;
top: 0;
right: -50px;
width: 50px;
height: 50px;
background: transparent;
border-top-left-radius: 50px;
box-shadow: -15px -15px 0 15px #3c2864;
}
.icon ion-icon {
color: #fff;
position: relative;
font-size: 6em;
z-index: 10000;
--ionicon-stroke-width: 10px;
}
.cont {
position: absolute;
width: 100%;
padding: 30px;
padding-top: 140px;
text-align: center;
}
.cont h2 {
font-size: 1.75em;
color: #fff;
margin-bottom: 10px;
}
.cont p {
color: #fff;
line-height: 1.5em;
}
.cont a {
color: #000000;
;
line-height: 1.5em;
}
footer {
background-color: #000000;
background-position: center;
color: #fff;
line-height: 1.5em;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KHXH&NV</title>
<link rel="stylesheet" href="nthuuyen.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body class="bod">
<div class="container">
<div class="card">
<div class="icon">
<ion-icon name="star-half-outline"></ion-icon>
</div>
<div class="cont">
<h2>Phạm Thanh Loan</h2>
<p>Điểm học tập: 9.1 <br> Điểm rèn luyện: 90 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br>
<!-- Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br> -->
Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br>
Read more
</p>
</div>
</div>
<div class="card">
<div class="icon">
<ion-icon name="star-half-outline"></ion-icon>
</div>
<div class="cont">
<h2>Đỗ Thanh Tây</h2>
<p>Điểm học tập: 9 <br> Điểm rèn luyện: 90 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br> Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br>
<!-- Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br> -->
Read more
</p>
</div>
</div>
<div class="card">
<div class="icon">
<ion-icon name="star-half-outline"></ion-icon>
</div>
<div class="cont">
<h2>Nguyễn Ngọc Phương Uyên</h2>
<p>Điểm học tập: 8.6 <br> Điểm rèn luyện: 81 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br> Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br>
<!-- Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br> -->
Read more
</p>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
<body class="bod">
<header>
ĐOÀN HỘI SINH VIÊN
<div class="menu-btn"></div>
<div class="navigation">
<div class="navigation-items">
Trang chủ
Giới thiệu
Hướng dẫn
Thông báo
Liên hệ
</div>
</div>
</header>
<section class="home">
<video class="video-slide active" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="hea.mp4" autoplay muted loop></video>
<div class="content active">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="media-icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
<div class="slider-navigation">
<div class="nav-btn active"></div>
<div class="nav-btn"></div>
<div class="nav-btn"></div>
<div class="nav-btn"></div>
<div class="nav-btn"></div>
</div>
</section>
<script type="text/javascript">
//Javacript for responsive navigation menu
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
menuBtn.addEventListener("click", () => {
menuBtn.classList.toggle("active");
navigation.classList.toggle("active");
});
//Javacript for video slider navigation
const btns = document.querySelectorAll(".nav-btn");
const slides = document.querySelectorAll(".video-slide");
const contents = document.querySelectorAll(".content");
var sliderNav = function(manual) {
btns.forEach((btn) => {
btn.classList.remove("active");
});
slides.forEach((slide) => {
slide.classList.remove("active");
});
contents.forEach((content) => {
content.classList.remove("active");
});
btns[manual].classList.add("active");
slides[manual].classList.add("active");
contents[manual].classList.add("active");
}
btns.forEach((btn, i) => {
btn.addEventListener("click", () => {
sliderNav(i);
});
});
</script>
</body>
<footer>
<p>
Group 3 <br> Phone: 0374040XXX <br> Class:xyz
</p>
</footer>
</html>

Related

I have a problem when it comes to making a transition for a design that I am taking as a basis for a project.
The problem is that, when I press the register button, it should show the registration section by means of a scroll to the left and it does not do so.
I want to know how I could fix the problem and know if it is any error in the id .
const signUpButton = document.getElementById('signUp');
const logInButton = document.getElementById('logIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click',()=>{
container.classList.add('right-panel-active');
});
logInButton.addEventListener('click', ()=>{
container.classList.remove('right-panel-active');
});
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
*{
box-sizing: border-box;
}
body{
background: #0E1119;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Lobster',cursive;
height: 100vh;
margin: -20px 0 50px;
}
h1{
font-weight: bold;
margin: 0;
}
h2{
text-align: center;
}
p{
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 1px;
margin: 20px 0 30px;
}
span{
font-size: 12px;
}
a{
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button{
border-radius: 20px;
border: none;
background-color: #3F2EFF;
color: white;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active{
transform: scale(0.95);
}
button:focus{
outline: none;
}
button.ghost{
background-color: transparent;
border: 1px solid white;
transition: 0.5s;
}
button.ghost:hover{
background-color: white;
color: #0E1119;
cursor: pointer;
}
form{
background-color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input{
background: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container{
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container{
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.log-in-container{
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active.log-in-container{
transform: translateX(100%);
}
.sign-up-container{
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active.sign-up-container{
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%,
49.99%{
opacity: 0;
z-index: 1;
}
50%,
100%{
opacity: 1;
z-index: 5;
}
}
.overlay-container{
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active.overlay-container{
transform: translateX(-100%);
}
.overlay{
background: #FF416C;
background: linear-gradient(142.18deg, #37ff48 0%, #36fef7 98.85%);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #000000;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active.overlay{
transform: translateX(50%);
}
.overlay-panel{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left{
transform: translateX(-20%);
}
.container.right-panel-active.overlay-left{
transform: translateX(0);
}
.overlay-right{
right: 0;
transform: translateX(0);
}
.container.right-panel-active.overlay-right{
transform: translateX(20%);
}
.social-container{
margin: 20px 0;
}
.social-container a{
border: 1px solid #1a9889;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styLogin.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Crear cuenta</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usa tu correo para registrarte</span>
<input type="text" placeholder="Nombre"/>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
<button id="btnR">Registrarme</button>
</form>
</div>
<div class="form-container log-in-container">
<form action="#">
<h1>Iniciar Sesión</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usar cuenta</span>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
¿Olvidaste tu contraseña?
<button>Iniciar sesión</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>¡Bienvenido de nuevo!</h1>
<p>¿Ya tienes una cuenta? Inicia sesión</p>
<button class="ghost" id="logIn">Iniciar sesión</button>
</div>
<div class="overlay-panel overlay-right">
<h1>¡Ey hola!</h1>
<p>¿No tienes una cuenta? ¡Crea una gratis!</p>
<button class="ghost" id="signUp">Registrarme</button>
</div>
</div>
</div>
</div>
<script src="log.js"></script>
</body>
</html>

const signUpButton = document.getElementById('signUp');
const logInButton = document.getElementById('logIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click',()=>{
container.classList.add('right-panel-active');
});
logInButton.addEventListener('click', ()=>{
container.classList.remove('right-panel-active');
});
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
*{
box-sizing: border-box;
}
body{
background: #0E1119;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Lobster',cursive;
height: 100vh;
margin: -20px 0 50px;
}
h1{
font-weight: bold;
margin: 0;
}
h2{
text-align: center;
}
p{
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 1px;
margin: 20px 0 30px;
}
span{
font-size: 12px;
}
a{
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button{
border-radius: 20px;
border: none;
background-color: #3F2EFF;
color: white;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active{
transform: scale(0.95);
}
button:focus{
outline: none;
}
button.ghost{
background-color: transparent;
border: 1px solid white;
transition: 0.5s;
}
button.ghost:hover{
background-color: white;
color: #0E1119;
cursor: pointer;
}
form{
background-color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input{
background: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container{
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container{
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.log-in-container{
left: 0;
width: 50%;
z-index: 2;
}
.right-panel-active .log-in-container{
transform: translateX(100%);
}
.sign-up-container{
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.right-panel-active .sign-up-container{
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%,
49.99%{
opacity: 0;
z-index: 1;
}
50%,
100%{
opacity: 1;
z-index: 5;
}
}
.overlay-container{
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay{
background: #FF416C;
background: linear-gradient(142.18deg, #37ff48 0%, #36fef7 98.85%);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #000000;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.right-panel-active .overlay{
transform: translateX(50%);
}
.overlay-panel{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left{
transform: translateX(-20%);
}
.right-panel-active .overlay-left{
transform: translateX(0);
}
.overlay-right{
right: 0;
transform: translateX(0);
}
.right-panel-active .overlay-right{
transform: translateX(20%);
}
.social-container{
margin: 20px 0;
}
.social-container a{
border: 1px solid #1a9889;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styLogin.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Crear cuenta</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usa tu correo para registrarte</span>
<input type="text" placeholder="Nombre"/>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
<button id="btnR">Registrarme</button>
</form>
</div>
<div class="form-container log-in-container">
<form action="#">
<h1>Iniciar Sesión</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usar cuenta</span>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
¿Olvidaste tu contraseña?
<button>Iniciar sesión</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>¡Bienvenido de nuevo!</h1>
<p>¿Ya tienes una cuenta? Inicia sesión</p>
<button class="ghost" id="logIn">Iniciar sesión</button>
</div>
<div class="overlay-panel overlay-right">
<h1>¡Ey hola!</h1>
<p>¿No tienes una cuenta? ¡Crea una gratis!</p>
<button class="ghost" id="signUp">Registrarme</button>
</div>
</div>
</div>
</div>
<script src="log.js"></script>
</body>
</html>
I edited in CSS.

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)

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

I am working now on a control panel using HTML CSS, I split the page using grid layout, but the problem is that the navbar & sidebar is not fixed
I have tried several methods including position: fixed;
overflow-y: auto but that didn't work for me.
https://jsfiddle.net/khalil_elyacubi/ckj8bqe9/2/
picture one
picture two

I hope you are looking for something like this.
$(".custom-select").each(function() {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template = '<div class="' + classes + '">';
template +=
'<span class="custom-select-trigger">' +
$(this).attr("placeholder") +
"</span>";
template += '<div class="custom-options">';
$(this)
.find("option")
.each(function() {
template +=
'<span class="custom-option ' +
$(this).attr("class") +
'" data-value="' +
$(this).attr("value") +
'">' +
$(this).html() +
"</span>";
});
template += "</div></div>";
$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});
$(".custom-option:first-of-type").hover(
function() {
$(this)
.parents(".custom-options")
.addClass("option-hover");
},
function() {
$(this)
.parents(".custom-options")
.removeClass("option-hover");
}
);
$(".custom-select-trigger").on("click", function() {
$("html").one("click", function() {
$(".custom-select").removeClass("opened");
});
$(this)
.parents(".custom-select")
.toggleClass("opened");
event.stopPropagation();
});
$(".custom-option").on("click", function() {
$(this)
.parents(".custom-select-wrapper")
.find("select")
.val($(this).data("value"));
$(this)
.parents(".custom-options")
.find(".custom-option")
.removeClass("selection");
$(this).addClass("selection");
$(this)
.parents(".custom-select")
.removeClass("opened");
$(this)
.parents(".custom-select")
.find(".custom-select-trigger")
.text($(this).text());
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#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');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
transition: 0.3s;
}
html,body{
height:100%;
}
.container{
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
height: 100%;
}
/*------------------------------------*/
/* Navbar */
/*------------------------------------*/
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
position: sticky;
}
.left-nav a{
font-weight: 300;
font-size: 13px;
text-decoration: none;
color: white;
margin: 0 10px;
}
.left-nav a:hover{
color: rgb(187, 187, 187);
}
.left-nav i:hover{
color: rgb(187, 187, 187);
}
.navbar{
grid-area: header;
background-color: rgba(38, 40, 48, 1);
color: white;
align-items: center;
height: 100%;
}
/*------------------------------------*/
/* Sidebar */
/*------------------------------------*/
.sidebar{
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
}
.sidebar{
grid-area: sidebar;
background-color: rgba(38, 40, 48, 1);
color: white;
}
.logo{
padding: 20px;
}
.logo img{
width: 100%;
}
.category-head{
display: flex;
flex-direction: row;
align-items: flex-start;
width: 83%;
justify-content: space-between;
font-size: small;
font-weight: 300;
color: rgba(255, 255, 255, 0.452);
margin-top: 15%;
}
.width_element{
width: 81%;
}
.category-pages, .category-select{
display: flex;
flex-direction: column;
width: 84%;
}
.category-select{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 2.5% 7%;
color: #C6C6C7;
font-weight: 400;
transition: .3s;
font-size: 0.93rem;
}
.category-select:hover{
background-color: rgba(255, 255, 255, 0.06);
border-radius: 5px;
color: white;
}
.categorySelected{
color: rgba(255, 185, 97, 1);
box-shadow: 0px 0px 21px -13px #ff9d1c6b;
background-color: rgba(53, 56, 65, 1);
border-radius: 5px;
margin-top: 5%;
padding: 3.5% 7%;
}
/*-------select box-------*/
select {
z-index: 3;
float: left;
}
/** Custom Select **/
.custom-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
cursor: pointer;
}
.custom-select-wrapper select {
display: none;
}
.custom-select {
position: relative;
display: inline-block;
font: 13px/1.5 "Poppins", sans-serif;
}
.custom-select-trigger {
position: relative;
/* display: block; */
min-width: 130px;
padding: 6% 104px 6% 25px;
font-weight: 600;
color: #6e7c83;
line-height: 50px;
background-color: rgba(53, 56, 65, 1);
border-radius: 7px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.custom-select-trigger:hover {
-webkit-box-shadow: 0px 10px 50px 0px rgba(70, 73, 83, 0.10);
box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
}
.custom-select-trigger:before {
position: absolute;
display: block;
content: "";
width: 1px;
height: 50px;
top: 3px;
right: 50px;
margin-top: -3px;
transition: all 0.35s ease-out;
transform-origin: 50% 0;
}
.custom-select-trigger:after {
position: absolute;
display: block;
content: "";
width: 10px;
height: 10px;
top: 50%;
right: 20px;
margin-top: -3px;
border-bottom: 1px solid #c7d1d6;
border-right: 1px solid #c7d1d6;
transform: rotate(45deg) translateY(-50%);
transition: all 0.35s ease-out;
transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
position: absolute;
display: block;
top: 100%;
left: 0%;
right: 0;
width: 100%;
margin: 10px 0;
border-radius: 5px;
box-sizing: border-box;
/* box-shadow: 0 2px 1px rgba(0, 0, 0, .1); */
background: rgba(53, 56, 65, 1);
transition: all 0.2s ease-in-out;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
border: 0;
height: 300px;
overflow-y: auto;
}
.custom-select.opened .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(-8px);
-webkit-box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
}
.option-hover:before {
background: #f9f9f9;
}
.custom-option {
position: relative;
display: block;
padding: 0 22px;
font: 13px/1.5 "Roboto", sans-serif;
font-weight: 600;
color: #b5b5b5;
line-height: 47px;
cursor: pointer;
transition: all 0.05s ease-in-out;
}
.custom-option:first-of-type {
border-radius: 4px 4px 0 0;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.custom-option:last-of-type {
border-bottom: 0;
border-radius: 0 0 4px 4px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.custom-option:hover,
.custom-option.selection {
color: #fff;
background-color: rgba(253, 183, 102, 0.1);
border: 1px solid rgba(253, 183, 102, 1);
}
/*-------select box end*-------/
/*------------------------------------*/
/* main content */
/*------------------------------------*/
.main{
justify-content: start;
display: flex;
flex-direction: column;
align-items: center;
grid-area: main;
background-color: rgba(30, 31, 37, 1);
color: white;
height: 100%;
overflow-y: auto;
}
.cotainer{
margin-top: 2%;
width: 90%;
height: auto;
display: flex;
flex-direction: column;
align-content: center;
}
.server-banner{
width: 100%;
height: 250px;
/* background: url(./baner1.png) no-repeat; */
filter: blur(5px);
border-radius: 10px;
/* background-size: cover; */
overflow: hidden;
}
.server-banner img{
width: 100%;
position: relative;
top: -140px;
opacity: 25%;
z-index: -1;
}
.server{
display: flex;
align-items: center;
margin-left: 3%;
position: relative;
bottom: 55px;
}
.server img{
width: 9%;
}
.server-members{
padding-left:2%;
}
/*------------------------------------*/
/* Scroll Bar */
/*------------------------------------*/
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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/6.2.0/css/solid.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<title>grid dashboard</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="left-nav">
<i class="fas fa-plus"></i> Support server
<i class="fas fa-code"></i> Commands
</div>
<div class="right-nav">user.icos</div>
</div>
<div class="sidebar">
<div class="logo"><img src="./logo.png" alt="" srcset=""></div>
<select name="potencial" id="potencial" class="custom-select sources" placeholder="Ticket Manager">
<option value="DH" selected><img src="server-logo.png" alt="server-logo"> Ticket Manager</option>
<option value="A">Ticket Manager</option>
<option value="B">Ticket Manager</option>
<option value="C">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D"><i class="fas fa-cog"></i>Ticket Manager</option>
</select>
<div class="category-head">General <i class="fas fa-angle-down"></i></div>
<div class="category-pages">
<div class="category-select categorySelected"><div class="title">Overview</div> <div class="icon"><i class="fas fa-chart-bar"></i></div></div>
<div class="category-select "><div class="title">Premium</div> <div class="icon"><i class="fas fa-crown"></i></div></div>
</div>
<div class="category-head width_element">Customise bot<i class="fas fa-angle-down"></i></div>
<div class="category-pages">
<div class="category-select"><div class="title">Settings</div> <div class="icon"><i class="fas fa-cog"></i></div></div>
<div class="category-select"><div class="title">Pannels</div> <div class="icon"><i class="fas fa-paper-plane"></i></div></div>
<div class="category-select"><div class="title">Logs</div> <div class="icon"><i class="fas fa-history"></i></div></div>
<div class="category-select "><div class="title">Archived tickets</div> <div class="icon"><i class="fas fa-folder-open"></i></div></div>
</div>
</div>
<div class="main">
<div class="cotainer">
<p>content</p>
<div class="server-info">
<div class="server-banner"> <img src="./baner1.png" alt=""></div>
<div class="server">
<img src="./server-logo-lg.png" alt="">
<div class="server-members">
<div class="server-name">Ticket Manager</div>
<div class="server-id">ID: 123456789</div>
</div>
</div>
</div>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>

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>