div taking properties from each other in html error - javascript

I'm trying to make a portfolio page, using HTML, CSS & JS.
Encountered a weird error. The CSS styling that I have performed on one div is somehow also getting on another div. And the weird part is that, the second div responds to its own styling along with the first ones....It will be more clear from the code
$(document).ready(function () {
$(window).scroll(function() { // of scroll function of windows
if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
$('.navbar').addClass("sticky"); // add sticky class 2 navbar
} else {
$('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky
}
});
//toggle menu/navbar script
$('.menu-btn').click(function(){ // this activates the inbuilt click function of js on the menu button
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
*{
user-select: text;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
width: 100%;
z-index: 999;
position:fixed;
padding: 30px 0;
width: 100%;
font-family: 'Ubuntu', sans-serif;
transition: all 0.55s ease;
}
.navbar.sticky{
transition: background-color 0.55s ease;
padding: 15px 0;
background-color: crimson;
}
.max-width{
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
font-size: 35px;
font-weight: 600;
color: cyan;
}
.navbar .logo a span{
color: cyan
}
.navbar.sticky .logo a span{
color: white;
transition: all 0.3s ease;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover{
color: crimson;
}
.navbar.sticky .menu li a:hover{
color: white;
}
/* menu button styling */
.menu-btn{
color: white;
font-size: 23px;
cursor: pointer;
display: none;
}
/*home section styling */
.home{
cursor: default;
display: flex;
background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;/* Enter the background image location */
height: 100vh;
background-size: cover;
background-attachment: fixed;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', sans-serif;
background-color: black;
}
.home .max-width{
margin: auto 0 auto 40px;
}
.home .home-content .text-1{
font-size: 27px;
}
.home .home-content .text-2{
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3{
font-size: 40px;
margin: 5px, 0 ;
}
.home .home-content .text-3 span{
color: crimson;
font-weight: 500;
}
/* .home .home-content a{
display: inline-block;
background: crimson;
color: white;
font-size: white;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
} HIRE ME BUTTON STYLE*
.home .home-content a:hover{
color: crimson;
background: none; */
/* ABOUT SECTION STYLING */
section{
padding: 100px 0;
}
.about{
font-family: "Poppins", sans-serif;
user-select: text;
}
.about .title{
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
color: black;
}
.about .title::before{
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: black;
transform: translateX(-50%);
}
.about .title::after{
content: "who i am";
position: absolute;
padding: 5px;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
color: crimson;
background: white;
}
.about .about-content{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.about .about-content .left {
width: 45%;
}
.about .about-content .left img{
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
color: black;
}
.about .about-content .right .text span{
color: white;
}
.about .about-content .right .lorem{
color: black;
background: none;
}
.about .about-content .column a{
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover{
background: none;
color: crimson;
}
/* -----------------------------------------------------------------------------*/
/*start media query :start*/
#media(max-width: 1104px){
.home .max-width{
margin-left: 0px;
}
}
#media(max-width: 991px){
.max-width{
padding: 0 50px;
}
}
#media(max-width: 947px){
.menu-btn{
position: fixed;
display: block;
z-index: 999;
color: white;
}
.navbar .menu{
position: fixed;
height:100vh;
width: 100%;
left: -100%;
top: 0;
text-align: center;
padding-top: 80px;
background: black;
transition: all 0.3s ease;
}
.menu-btn i.active:before{
content: "\f00d";
}
.navbar .menu.active{
left: 0;
}
.navbar .menu li{
display: block;
}
.navbar .menu li a{
display: inline-block;
margin:20px 0;
font-size: 25px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 35px;
}
}
#media(max-width: 690px){
.max-width{
padding: 0 23px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 32px;
}
}
#media(max-width: 500px){
.home .home-content .text-2{
font-size: 50px;
}
.home .home-content .text-3{
font-size: 32px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale = 1.0">
<title> Personal Portfolio Website </title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Portfo<span>lio.</span></div>
<ul class="menu">
<li><a href="#">Home</li>
<!--navbar -->
<li><a href="#">About</li>
<li><a href="#">Skills</li>
<li><a href=#>Projects</li>
<li><a href=#>Experience</li>
<li><a href="#">Contact</li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Merlin</div>
<div class="text-3">And I'm an <span class="typing">Undergrad</span></div>
</div>
</div>
</section>
<!-- ABOUT SECTION STARTS-->
<section class="about" id="about">
<!-- Start Section-->
<div class="max-width">
<h2 class="title">About Me</h2>
<div class="about-content">
<div class="column left">
<img src="./Images/653438.jpg" alt="Image">
</div>
<div class="column right">
<div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
<div class="lorem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores
cumque
doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem
consequatur. Hic quas amet, aliquam nihil voluptatem, porro culpa doloremque qui numquam
atque
rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam,
adipisci
cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos!
Perferendis? </p>
</div>
Download Resume
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>
In the About section only the Resume Button is to be highlted but the entire colum right div is somehow affected. When I ran just the About section part, everything worked well. But when I run the whole file the same error pops up. I've tried removing the lorem part from div and put in and try, still the same error pops up. The same part is somehow referenced to the above the navbar as well, cause when clicked upon it shifts to the navbar. Please look into this.


The error is occurring because you did not close the anchor tags in your menu,
change it to this
<ul class="menu">
<li>Home</li>
<!--navbar -->
<li>About</li>
<li>Skills</li>
<li><a href=#>Projects</a></li>
<li><a href=#>Experience</a></li>
<li>Contact</li>
</ul>


You have this styling in the about section:
.about .about-content .column a{
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover{
background: none;
color: crimson;
}
That is, every anchor link in the about right part is styled that way - with a crimson background (which changes to crimson text and no background on hover).
Because the anchor tags are not closed in your menu you have anchor tags open (nested anchor tags aren't legal HTML BTW) and it seems the browser is doing its best to understand these open anchor tags. By the time you get to the about section right hand side it still thinks there's an anchor tag (at least, in my Edge on Windows 10 that's what it had put there when I used the dev tools inspect facility to check the actual HTML it's trying to interpret). So it picks up the crimson styling.
Here's the snippet with the anchor tags in the menu closed and the text part of the resume does not have that crimson background:
$(document).ready(function() {
$(window).scroll(function() { // of scroll function of windows
if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
$('.navbar').addClass("sticky"); // add sticky class 2 navbar
} else {
$('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky
}
});
//toggle menu/navbar script
$('.menu-btn').click(function() { // this activates the inbuilt click function of js on the menu button
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
* {
user-select: text;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar {
width: 100%;
z-index: 999;
position: fixed;
padding: 30px 0;
width: 100%;
font-family: 'Ubuntu', sans-serif;
transition: all 0.55s ease;
}
.navbar.sticky {
transition: background-color 0.55s ease;
padding: 15px 0;
background-color: crimson;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
color: cyan;
}
.navbar .logo a span {
color: cyan
}
.navbar.sticky .logo a span {
color: white;
transition: all 0.3s ease;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: crimson;
}
.navbar.sticky .menu li a:hover {
color: white;
}
/* menu button styling */
.menu-btn {
color: white;
font-size: 23px;
cursor: pointer;
display: none;
}
/*home section styling */
.home {
cursor: default;
display: flex;
background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;
/* Enter the background image location */
height: 100vh;
background-size: cover;
background-attachment: fixed;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', sans-serif;
background-color: black;
}
.home .max-width {
margin: auto 0 auto 40px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px, 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
/* .home .home-content a{
display: inline-block;
background: crimson;
color: white;
font-size: white;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
} HIRE ME BUTTON STYLE*
.home .home-content a:hover{
color: crimson;
background: none; */
/* ABOUT SECTION STYLING */
section {
padding: 100px 0;
}
.about {
font-family: "Poppins", sans-serif;
user-select: text;
}
.about .title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
color: black;
}
.about .title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: black;
transform: translateX(-50%);
}
.about .title::after {
content: "who i am";
position: absolute;
padding: 5px;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
color: crimson;
background: white;
}
.about .about-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.about .about-content .left {
width: 45%;
}
.about .about-content .left img {
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
color: black;
}
.about .about-content .right .text span {
color: white;
}
.about .about-content .right .lorem {
color: black;
background: none;
}
.about .about-content .column a {
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover {
background: none;
color: crimson;
}
/* -----------------------------------------------------------------------------*/
/*start media query :start*/
#media(max-width: 1104px) {
.home .max-width {
margin-left: 0px;
}
}
#media(max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media(max-width: 947px) {
.menu-btn {
position: fixed;
display: block;
z-index: 999;
color: white;
}
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
text-align: center;
padding-top: 80px;
background: black;
transition: all 0.3s ease;
}
.menu-btn i.active:before {
content: "\f00d";
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
.home .home-content .text-2 {
font-size: 70px;
}
.home .home-content .text-3 {
font-size: 35px;
}
}
#media(max-width: 690px) {
.max-width {
padding: 0 23px;
}
.home .home-content .text-2 {
font-size: 70px;
}
.home .home-content .text-3 {
font-size: 32px;
}
}
#media(max-width: 500px) {
.home .home-content .text-2 {
font-size: 50px;
}
.home .home-content .text-3 {
font-size: 32px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale = 1.0">
<title> Personal Portfolio Website </title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Portfo<span>lio.</span></div>
<ul class="menu">
<li><a href="#">Home</li>
<!--navbar -->
<li>About</li>
<li>Skills</li>
<li><a href=#>Projects</a></li>
<li><a href=#>Experience</a></li>
<li>Contact</li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Merlin</div>
<div class="text-3">And I'm an <span class="typing">Undergrad</span></div>
</div>
</div>
</section>
<!-- ABOUT SECTION STARTS-->
<section class="about" id="about">
<!-- Start Section-->
<div class="max-width">
<h2 class="title">About Me</h2>
<div class="about-content">
<div class="column left">
<img src="./Images/653438.jpg" alt="Image">
</div>
<div class="column right">
<div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
<div class="lorem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores cumque doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem consequatur. Hic quas amet, aliquam nihil voluptatem, porro
culpa doloremque qui numquam atque rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam, adipisci cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos! Perferendis? </p>
</div>
Download Resume
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>

Related

how can i remove little padding in my flex

i have been following someone on youtube about making simple website with only using html,css and javascript. i'm doing some modification myself, and i've been trying to get rid of padding on my flex. there's little bit padding below that i don't know how to remove.
here's the pict
already review the video i watch and still can't find the solution, can you guys help me? please explain it in most newbie ways...
below is my HTML
<!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>Proj Hotel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,300;0,400;0,700;1,200&display=swap"
rel="stylesheet"
/>
<!-- Fonts end -->
<!-- Feather icons -->
<script src="https://unpkg.com/feather-icons"></script>
<!-- Icons end -->
<link rel="stylesheet" href="css/Style.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
Hotel <span>Proj</span>
<div class="navbar-nav">
home
About us
Rooms
Contact
</div>
<div class="navbar-extra">
<i data-feather="search"></i>
<a href="#" id="shopping-cart">
<i data-feather="shopping-cart"></i>
</a>
<i data-feather="menu"></i>
</div>
</nav>
<!-- Navbar end -->
<!--Hero section -->
<section class="hero" id="home">
<main class="content">
<h1>Get Some Nice <span>Sleep!</span></h1>
<div class="inpad">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, fuga.
</p>
book now!
</div>
</main>
</section>
<!-- Hero section end -->
<!-- about sextion -->
<section id="about" class="about">
<h2><span>About</span> us</h2>
<div class="row">
<div class="about-img">
<img src="img/aboutfix.jpg" alt="About us" />
</div>
<div class="content">
<h3>Why Choose us?</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit sit,
in voluptatem adipisci minima eligendi dolor unde quis aliquid
itaque ut quas pariatur iste neque? Aut labore voluptatibus
laboriosam sapiente.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique
in esse recusandae quis architecto ad deleniti voluptatum pariatur
facere aliquam impedit nesciunt fugiat animi dolorum officiis rerum,
praesentium molestiae eum!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Recusandae, vel? Quasi error quas officiis esse mollitia doloremque
saepe dolorem magnam ad excepturi temporibus, illo possimus quis,
</p>
</div>
</div>
</section>
<!-- about section end -->
<!-- feather icons -->
<script>
feather.replace();
</script>
<!-- javascript my -->
<script src="js/script.js"></script>
<!-- Feather icons -->
</body>
</html>
my CSS
:root {
--bg: #fffbeb;
--Primary: #745b36;
}
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Poppins", sans-serif;
background-color: var(--bg);
color: #fff;
min-height: 5000px;
}
/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 7%;
background-color: #f2deba;
border-bottom: 0.5px solid #f8cba6;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.navbar .navbar-logo {
font-size: 2rem;
font-weight: 700;
color: #bb8d64;
font-style: italic;
}
.navbar .navbar-logo span {
color: var(--Primary);
}
.navbar .navbar-nav a {
display: inline-block;
font-size: 1.3rem;
margin: 0 1rem;
color: var(--Primary);
}
.navbar .navbar-nav a:hover {
color: #0c0c0c;
}
.navbar .navbar-nav a::after {
content: "";
display: block;
padding-bottom: 0.5rem;
border-bottom: 0.1rem solid #0a0a0a;
transform: scaleX(0);
transition: 0.2s linear;
}
.navbar .navbar-nav a:hover::after {
transform: scaleX(0.5);
}
.navbar .navbar-extra a {
color: var(--Primary);
margin: 0 0.5rem;
}
.navbar .navbar-extra a:hover {
color: #fff;
}
#hamburger-menu {
display: none;
}
/* Navbar end */
/* hero section style start */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background-image: url("../img/1.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
/* below is gradient section */
.hero::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 30%;
bottom: 0;
background: linear-gradient(
0deg,
rgba(255, 251, 235, 1) 8%,
rgba(255, 255, 255, 0) 50%
);
}
/* gradient section end */
.hero .content {
padding: 1.4rem 7%;
max-width: 70rem;
}
.hero .content h1 {
font-size: 5rem;
color: #fff;
text-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5);
line-height: 1;
}
.hero .content p {
font-size: 1.6rem;
margin-top: 1rem;
line-height: 1.4;
color: #fff;
font-weight: 100;
text-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5);
}
.hero .content span {
color: rgba(241, 213, 162, 2);
}
.hero .content .cta {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 2rem;
font-size: 1.4rem;
color: #fff;
background-color: #f1d5a2a9;
border-radius: 0.5rem;
box-shadow: 1px 1px 3px rgba(1, 1, 3, 0.3);
margin-bottom: 0.5rem;
}
.hero .content .inpad a:hover {
background-color: #d3ba8d65;
}
.hero .content .inpad {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
font-size: 1rem;
color: #fff;
background-color: rgba(116, 91, 54, 0.7);
border-radius: 0.5rem;
}
/* Hero section styles ends */
/* about start */
.about {
padding: 8rem 20%;
}
.about h2 {
text-align: center;
font-size: 2.4rem;
margin-bottom: 3rem;
color: rgba(116, 91, 54, 0.7);
}
.about .row .content p {
color: rgba(116, 91, 54, 0.5);
margin-bottom: 0.8rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.7rem;
margin-left: 1rem;
}
.about .row {
display: flex;
background-color: rgba(116, 91, 54, 0.2);
}
.about .row .about-img {
flex: 1 1 25rem;
}
.about .row .about-img img {
width: 100%;
}
.about .row .content {
flex: 1 1 20rem;
}
.about .row .content h3 {
font-size: 1.5rem;
color: rgba(116, 91, 54, 0.5);
padding-left: 1rem;
}
/* about end */
/* media queries */
/* laptop */
#media (max-width: 1366px) {
html {
font-size: 75%;
}
}
/* end */
/* Tablet */
#media (max-width: 768px) {
html {
font-size: 62.5%;
}
#hamburger-menu {
display: inline-block;
}
.navbar .navbar-nav {
position: absolute;
top: 100%;
right: -100%;
background-color: #fff;
width: 25rem;
height: 100vh;
transition: 0.5s;
}
.navbar .navbar-nav.active {
right: 0;
}
.navbar .navbar-nav a {
color: var(--Primary);
display: block;
margin: 1.5rem;
padding: 0.5rem;
font-size: 2rem;
}
.navbar .navbar-nav a::after {
transform-origin: 0 0;
}
.navbar .navbar-nav a:hover::after {
transform: scaleX(0.3);
}
.about .row {
flex-wrap: wrap;
}
.about .row .about-img img {
height: 25rem;
object-fit: cover;
object-position: center;
}
.about .row .content {
padding: 0;
}
.about .row .content h3 {
margin-top: 1rem;
font-size: 2rem;
}
.about .row .content p {
font-size: 1.6rem;
}
}
/* end */
/* mobile */
#media (max-width: 450px) {
html {
font-size: 55%;
}
}
/* end */
/* Media queries end */
and my Javascript
// toggle class active
const navbarNav = document.querySelector(".navbar-nav");
//ketika hamburger menu di klik
document.querySelector("#hamburger-menu").onclick = () => {
navbarNav.classList.toggle("active");
};
// outside click to close sidebar
const hamburger = document.querySelector("#hamburger-menu");
document.addEventListener("click", function (e) {
if (!hamburger.contains(e.target) && !navbarNav.contains(e.target)) {
navbarNav.classList.remove("active");
}
});
i'm sorry about the messy codes i made, thanks in advance.

Are you referring to this space?
This is not padding, but rather this is caused by the height of the image on the left. This is because the image is set to take up the same width as the text on the right (due to flex: 1), and so the height of the image causes the height of the content on the right to also increase, which is why you see this blank space at the bottom.
A simple option could be to apply align-items: center to the flex-container which will give equal space on the top or bottom. But this will not remove the spacing altogether.

Remove min-height: 5000px from inside the body tag in css

Active navigation bar with main content

I have a problem with my active navigation bar. When I open the hamburger menu than the main content stay fixed and does not moving with the open navigation menu. I was looking on the internet, but i did not find something what can help me or how to solve it. I am sending here my code. If anycone can help with this i will be happy. What can i do? How to repair it?
Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<header>
<div class="logo">Logo</div>
<div class="hamburger">
<div class="lines"></div>
</div>
<nav class="nav-bar">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function () {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
</script>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nihil corporis ut praesentium accusantium possimus molestiae reprehenderit quam nostrum distinctio repudiandae iure aliquam repellat unde recusandae quas ipsam. Dicta animi.</p>
</main>
</body>
</html>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
body {
background: #fff;
font-size: 100%;
}
/* NAVIGATION */
header {
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25em 6.25em;
border-bottom: 1px solid #000;
}
.logo {
width: 50%;
}
.hamburger {
display: none;
}
.nav-bar ul {
display: flex;
}
.nav-bar ul li a {
display: block;
color: #000;
font-size: 1.375em;
padding: 0.4545454545454545em 0.6818181818181818em;
border-radius: 50px;
transition: all 0.5s ease-in-out;
margin: 0 0.2272727272727273em;
}
.nav-bar ul li a:hover {
color: #fff;
background: #ffb038;
}
.fa-solid {
margin-right: 0.6818181818181818em;
vertical-align: middle;
}
#media only screen and (max-width: 1770px) {
.nav-bar ul li a i {
display: block;
}
}
#media only screen and (max-width: 1400px) {
header {
padding: 0px 1.5625em;
}
.hamburger {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.lines {
width: 50px;
height: 6px;
background-color: #ffb038;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.lines::before,
.lines::after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background-color: #ffb038;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.lines::before {
transform: translateY(-16px);
}
.lines::after {
transform: translateY(16px);
}
.hamburger.open .lines {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .lines::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .lines::after {
transform: rotate(-45deg) translate(35px, 35px);
}
.nav-bar {
height: 0;
position: absolute;
top: 65px;
left: 0;
right: 0;
width: 100vw;
background: #ffb038;
transition: 0.5s;
overflow: hidden;
}
.nav-bar.active {
height: 28.125em;
transition: all 0.5s ease-in-out;
margin-top: 15px;
}
.nav-bar ul {
display: block;
width: fit-content;
margin: 5em auto 0 auto;
text-align: center;
transition: all 0.5s ease-in-out;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
display: block;
}
.nav-bar ul li a {
margin-bottom: 0.75em;
}
.nav-bar ul li a:hover {
color: #000;
background: white;
}
}

In your media-query you are taking .nav-bar out of the flow with position: absolute, meaning it cannot affect e.g. main.
Adding a wrapper around .logo and .hamburger allows us to keep .nav-bar as its sibling in the flow:
<!--Before:-->
<header>
<div class="logo">Logo</div>
<div class="hamburger">
<div class="lines"></div>
</div>
<nav class="nav-bar"><!--...--></nav>
</header>
<!--After:-->
<header>
<div><!--The wrapper-->
<div class="logo">Logo</div>
<div class="hamburger">
<div class="lines"></div>
</div>
</div>
<nav class="nav-bar"><!--...--></nav>
</header>
This wrapper will replace before's header in terms of CSS. The result may look like this:
const hamburger = document.querySelector(".hamburger");
const navBar = document.querySelector(".nav-bar");
hamburger.addEventListener("click", () => navBar.classList.toggle("active"));
.nav-bar {
width: 100%;
background: #ffb038;
overflow: hidden;
}
.nav-bar:not(.active) {
height: 0;
}
.nav-bar a {
padding: 0.5em 0.7em;
width: 100%;
height: 48px;
display: inline-block;
box-sizing: border-box;
font-size: 1.375em;
text-align: center;
}
/*Wrapper (styled as before's header) - Mobile style*/
#wrapper {
padding: 0px 1.5625em;
border-bottom: 1px solid black;
display: flex;
align-items: center;
justify-content: space-between;
}
/*Default style*/
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
font-family: sans-serif;
color: black;
}
.hamburger {
width: 80px;
height: 80px;
background-color: orange;
cursor: pointer;
}
<body>
<header>
<div id="wrapper"><!--New wrapper-->
<div class="logo">Logo</div>
<div class="hamburger"></div>
</div>
<nav class="nav-bar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</header>
<main>
Lorem ipsum set amet.
</main>
</body>
To effectively transition height property, you can transition max-height. You may want to use custom properties:
const hamburger = document.querySelector(".hamburger");
const navBar = document.querySelector(".nav-bar");
hamburger.addEventListener("click", () => navBar.classList.toggle("active"));
// Example of setting `--links` property:
navBar.style.setProperty("--links", navBar.querySelectorAll("a").length);
.nav-bar {
--links: 3; /*Example of setting `--links` property*/
--link-height: 48px;
max-height: calc(var(--links, 0) * var(--link-height));
transition: max-height .25s ease;
}
.nav-bar:not(.active) {
max-height: 0;
}
.nav-bar a {
height: var(--link-height);
}
/*Remove `height` declarations from .nav-bar and related; otherwise same as before:*/
.nav-bar {
width: 100%;
background: #ffb038;
overflow: hidden;
}
.nav-bar a {
padding: 0.5em 0.7em;
width: 100%;
display: inline-block;
box-sizing: border-box;
font-size: 1.375em;
text-align: center;
}
#wrapper {
padding: 0px 1.5625em;
border-bottom: 1px solid black;
display: flex;
align-items: center;
justify-content: space-between;
}
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
font-family: sans-serif;
color: black;
}
.hamburger {
width: 80px;
height: 80px;
background-color: orange;
cursor: pointer;
}
<body>
<header>
<div id="wrapper">
<div class="logo">Logo</div>
<div class="hamburger"></div>
</div>
<nav class="nav-bar" style="--links:3"><!--Example of setting `--links` property-->
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</header>
<main>
Lorem ipsum set amet.
</main>
</body>

responsive navbar stacked with the content

i've got a problem that the navbar was stacked with the content. Does Anyone know How to fix the nav-bar? and why the navbar is stacked, help me. i was try to fix it with z-index but not working... plz help me, i was frustated. i want the navbar is not stacked and the background is #fff.
stacked image
const burger = document.querySelector('.burger');
let nav = document.querySelector('.menu ul')
burger.addEventListener('click', function () {
this.classList.toggle('change');
nav.classList.toggle('open');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
font-size: 18px;
transition: .5s;
}
:root {
--body-color: #fff;
--main-color: #1c1c3c;
--text-color: #fff;
--red-color: #800000;
--semi-white: #ccc;
}
body {
min-height: 100vh;
overflow-x: hidden;
}
.body{
background-position:center;
background-size:cover;
background-repeat: no-repeat;
height:100vh
}
/*Nav And Header*/
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
align-items: center;
background:#fff;
padding: 20px 40px;
display: flex;
justify-content: space-between;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.logo {
font-size: 1.5em;
color: var(--main-color);
font-weight: 500;
letter-spacing: 1px;
}
.flex {
display: flex;
align-items: center;
}
header ul {
position: relative;
display: flex;
gap: 30px;
}
header ul li {
list-style: none;
}
header ul li a {
position: relative;
text-decoration: none;
font-size: 17px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--main-color);
}
header ul li a:hover {
transition: .5s;
font-size: 18px;
font-weight: 525;
color: var(--red-color);
}
header ul li a::before {
content: '';
position: absolute;
width: 100%;
bottom: -3px;
height: 3px;
background-color: #800000;
transform: scaleX(0);
transition: transform .3s ease-in-out;
transform-origin: right;
}
header ul li a:hover::before {
transform: scaleX(1);
transform-origin: left;
}
/*Hamburger Setting*/
.burger {
position: relative;
display: none;
cursor: pointer;
z-index: 2;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
border-radius: 5px;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
background-color: var(--red-color);
}
.change .bar2 {
opacity: 0;
background-color: var(--red-color);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: var(--red-color);
}
/*TextBox code*/
.text-box {
width: 90%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1,
.text-box span {
color: var(--main-color);
font-size: 46px;
}
.red-btn {
text-decoration: none;
font-family: 'Rubik', sans-serif;
color: var(--main-color);
margin: 5px auto;
padding: 15px 34px;
font-size: 17px;
background: var(--body-color);
border: 1px solid var(--red-color);
position: relative;
cursor: pointer;
border-radius: 25px;
}
.red-btn:hover{
background: var(--red-color);
color: var(--text-color);
}
/*Code Of Dashboard*/
/*This is responsive code*/
#media(max-width:920px) {
.text-box h1 {
font-size: 190%;
}
.text-box p {
margin: 20px 0 20px;
font-size: 16px;
font-weight: 500;
color: var(--main-color);
}
.menu ul {
position: absolute;
height: 40vh;
top: 100%;
width: 100%;
background-color:#fff;
justify-content: space-evenly;
padding: auto;
top: 100px;
flex-direction: column;
align-items: center;
z-index: 3;
}
.burger {
position: relative;
display: block;
cursor: pointer;
z-index: 2;
}
.menu ul.open {
position: fixed;
opacity: 5;
visibility:visible;
left:0;
z-index: 99;
transition: 1s;
}
}
<!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">
<title>BeHealthy.com</title>
</head>
<body>
<header>
<a href="#"><img src="" alt="logo" style="width: 55px;">
<p style="float: right; padding: 22px 0 ;" class="logo"> Lo<span
style="color:#800000 ;font-size:1em; font-weight: 500;">go</span></p>
</a>
<div class="flex">
<div class="menu">
<ul>
<li>Home</li>
<li>Dashboard</li>
<li>Artikel</li>
<li>Konsultasi</li>
</ul>
</div>
<div class="icon">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</header>
<div class="body">
<div class="text-box">
<h1>Lorem <span style="color: #800000;font-size: 100%;">Ipsum!</span>
<h1>
<p><b>Healthy First!</b>,Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium culpa debitis porro, neque consequatur, est quisquam nisi explicabo error, nostrum iste id. Incidunt, laudantium rem totam nisi itaque aperiam amet?
</b>BeHealthy<b>.</p>
<span style="font-size:18px;font-weight:550;">#StayHealthy</span>
<br>
this is button
</div>
</div>
</body>
</html>

Hello Please use below css. I have made changes only css file. Hope it may helpful to you.
const burger = document.querySelector('.burger');
let nav = document.querySelector('.menu ul')
burger.addEventListener('click', function () {
this.classList.toggle('change');
nav.classList.toggle('open');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
font-size: 18px;
transition: .5s;
}
:root {
--body-color: #fff;
--main-color: #1c1c3c;
--text-color: #fff;
--red-color: #800000;
--semi-white: #ccc;
}
body {
min-height: 100vh;
overflow-x: hidden;
}
.body{
background-position:center;
background-size:cover;
background-repeat: no-repeat;
height:100vh;
}
/*Nav And Header*/
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
align-items: center;
background:#fff;
padding: 20px 40px;
display: flex;
justify-content: space-between;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
z-index: 1;
}
.logo {
font-size: 1.5em;
color: var(--main-color);
font-weight: 500;
letter-spacing: 1px;
}
.flex {
display: flex;
align-items: center;
}
header ul {
position: relative;
display: flex;
gap: 30px;
}
header ul li {
list-style: none;
}
header ul li a {
position: relative;
text-decoration: none;
font-size: 17px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--main-color);
}
header ul li a:hover {
transition: .5s;
font-size: 18px;
font-weight: 525;
color: var(--red-color);
}
header ul li a::before {
content: '';
position: absolute;
width: 100%;
bottom: -3px;
height: 3px;
background-color: #800000;
transform: scaleX(0);
transition: transform .3s ease-in-out;
transform-origin: right;
}
header ul li a:hover::before {
transform: scaleX(1);
transform-origin: left;
}
/*Hamburger Setting*/
.burger {
position: relative;
display: none;
cursor: pointer;
z-index: 2;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
border-radius: 5px;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
background-color: var(--red-color);
}
.change .bar2 {
opacity: 0;
background-color: var(--red-color);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: var(--red-color);
}
/*TextBox code*/
.text-box {
width: 90%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1,
.text-box span {
color: var(--main-color);
font-size: 46px;
}
.red-btn {
text-decoration: none;
font-family: 'Rubik', sans-serif;
color: var(--main-color);
margin: 5px auto;
padding: 15px 34px;
font-size: 17px;
background: var(--body-color);
border: 1px solid var(--red-color);
position: relative;
cursor: pointer;
border-radius: 25px;
}
.red-btn:hover{
background: var(--red-color);
color: var(--text-color);
}
/*Code Of Dashboard*/
/*This is responsive code*/
#media(max-width:920px) {
.text-box h1 {
font-size: 190%;
}
.text-box p {
margin: 20px 0 20px;
font-size: 16px;
font-weight: 500;
color: var(--main-color);
}
.menu ul {
position: absolute;
height: calc(100vh - 80px);
top: 100%;
width: 100%;
background-color:#fff;
justify-content: space-evenly;
padding: auto;
top: 80px;
flex-direction: column;
align-items: center;
z-index: 3;
visibility: hidden;
}
.burger {
position: relative;
display: block;
cursor: pointer;
z-index: 2;
}
.menu ul.open {
position: fixed;
opacity: 5;
visibility:visible;
left:0;
z-index: 99;
transition: 1s;
overflow: auto;
}
}
<!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">
<title>BeHealthy.com</title>
</head>
<body>
<header>
<a href="#"><img src="" alt="logo" style="width: 55px;">
<p style="float: right; padding: 22px 0 ;" class="logo"> Lo<span
style="color:#800000 ;font-size:1em; font-weight: 500;">go</span></p>
</a>
<div class="flex">
<div class="menu">
<ul>
<li>Home</li>
<li>Dashboard</li>
<li>Artikel</li>
<li>Konsultasi</li>
</ul>
</div>
<div class="icon">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</header>
<div class="body">
<div class="text-box">
<h1>Lorem <span style="color: #800000;font-size: 100%;">Ipsum!</span>
<h1>
<p><b>Healthy First!</b>,Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium culpa debitis porro, neque consequatur, est quisquam nisi explicabo error, nostrum iste id. Incidunt, laudantium rem totam nisi itaque aperiam amet?
</b>BeHealthy<b>.</p>
<span style="font-size:18px;font-weight:550;">#StayHealthy</span>
<br>
this is button
</div>
</div>
</body>
</html>

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

I am trying to include a section under a previous section but it doesn't show and align the way I want it to be. The first section is a text section with video background but the next section added doesn't show in the preview. Even in the stack overflow snippet the "about us" section is behind the video section. How can I solve this problem?
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #000000;
transition: 0.5s;
color: #ffff;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0394f4;
mix-blend-mode: overlay;
color: #001540;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 2.5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 5em;
font-weight: 700;
color: #64A8F0;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover
{
letter-spacing: 6px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000026;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #ffff;
}
.menu ul li a:hover
{
color: #64A8F0;
}
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container{
width: 80%;
display: block;
margin:auto;
padding-top: 100px;
}
.content-section{
float: left;
width: 55%;
}
.image-section{
float: right;
width: 40%;
}
.image-section img{
width: 100%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color:#5d5d5d;
font-size: 21px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
}
.content-section .content .button{
margin-top: 30px;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding:12px 40px;
text-decoration: none;
color:#fff;
font-size: 25px;
letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color:#fff;
}
.content-section .social{
margin: 40px 40px;
}
.content-section .social i{
color:#a52a2a;
font-size: 30px;
padding:0px 10px;
}
.content-section .social i:hover{
color:#3d3d3d;
}
#media screen and (max-width: 768px){
.container{
width: 80%;
display: block;
margin:auto;
padding-top:50px;
}
.content-section{
float:none;
width:100%;
display: block;
margin:auto;
}
.image-section{
float:none;
width:100%;
}
.image-section img{
width: 100%;
height: auto;
display: block;
margin:auto;
}
.content-section .title{
text-align: center;
font-size: 19px;
}
.content-section .content .button{
text-align: center;
}
.content-section .content .button a{
padding:9px 30px;
}
.content-section .social{
text-align: center;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 1.5em;
}
.text h3
{
font-size: 3em;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<title>Think Tank</title>
</html>
<head>
</head>
<body>
<style>
#import url('styles.css');
</style>
<section class="showcase">
<header>
<h2 class="logo"></h2>
<div class="toggle"></div>
</header>
<video src="webasset.mov" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Willkommen auf </h2>
<h3>Think Tank</h3>
<p>Beispiel.</p>
THINK kaufen
</div>
<ul class="social">
<li><img src="https://i.ibb.co/x7P24fL/facebook.png"></li>
<li><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></li>
<li><img src="https://i.ibb.co/ySwtH4B/instagram.png"></li>
</ul>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Unser Token</li>
<li>NFT (COMING SOON)</li>
<li>Das Team</li>
<li>Kontakt</li>
</ul>
</div>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1>About Us</h1>
</div>
<div class="content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class="button">
Read More
</div>
</div>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="image-section">
<img src="image/img one.jpg">
</div>
</div>
</div>
<!--===== MAIN JS =====-->
<script src="main.js"></script>
</body>
</html>

.showcase {
position: relative;
}
Replace the 'position:absolute' property to 'position:relative' for above section. I will make your next section visible.

--> Always use "Position:relation" on parent div after give "position:absolute" to child div.
--> i add "hero-section-wrapper" div for solve this issue & add some css for it.
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.hero-section-wrapper {
position: relative;
height: 100vh;
display: table;
width: 100%;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #000000;
transition: 0.5s;
color: #ffff;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0394f4;
mix-blend-mode: overlay;
color: #001540;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 2.5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 5em;
font-weight: 700;
color: #64A8F0;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover
{
letter-spacing: 6px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000026;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #ffff;
}
.menu ul li a:hover
{
color: #64A8F0;
}
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container{
width: 80%;
display: block;
margin:auto;
padding-top: 100px;
}
.content-section{
float: left;
width: 55%;
}
.image-section{
float: right;
width: 40%;
}
.image-section img{
width: 100%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color:#5d5d5d;
font-size: 21px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
}
.content-section .content .button{
margin-top: 30px;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding:12px 40px;
text-decoration: none;
color:#fff;
font-size: 25px;
letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color:#fff;
}
.content-section .social{
margin: 40px 40px;
}
.content-section .social i{
color:#a52a2a;
font-size: 30px;
padding:0px 10px;
}
.content-section .social i:hover{
color:#3d3d3d;
}
#media screen and (max-width: 768px){
.container{
width: 80%;
display: block;
margin:auto;
padding-top:50px;
}
.content-section{
float:none;
width:100%;
display: block;
margin:auto;
}
.image-section{
float:none;
width:100%;
}
.image-section img{
width: 100%;
height: auto;
display: block;
margin:auto;
}
.content-section .title{
text-align: center;
font-size: 19px;
}
.content-section .content .button{
text-align: center;
}
.content-section .content .button a{
padding:9px 30px;
}
.content-section .social{
text-align: center;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 1.5em;
}
.text h3
{
font-size: 3em;
}
<div class="hero-section-wrapper">
<section class="showcase">
<header>
<h2 class="logo"></h2>
<div class="toggle"></div>
</header>
<video src="Video/video.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Willkommen auf </h2>
<h3>Think Tank</h3>
<p>Beispiel.</p>
THINK kaufen
</div>
<ul class="social">
<li><img src="https://i.ibb.co/x7P24fL/facebook.png"></li>
<li><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></li>
<li><img src="https://i.ibb.co/ySwtH4B/instagram.png"></li>
</ul>
</section>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Unser Token</li>
<li>NFT (COMING SOON)</li>
<li>Das Team</li>
<li>Kontakt</li>
</ul>
</div>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1>About Us</h1>
</div>
<div class="content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class="button">
Read More
</div>
</div>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="image-section">
<img src="https://images.unsplash.com/photo-1640525999004-42b645dd3dee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">
</div>
</div>
</div>

Image transition (?) in CSS/HTML

I am trying to get my image to grow, fade and have text come up from the bottom. Is there any way to do this? I have tried variations of ".grow:hover" but it is not working for me. I have been trying to get my images (which are in the bottom-sidebar divider) to do it. An example I found but have not been able to duplicate can be found here
Here's my HTML and CSS.
/* ===========================
======= Body style ========
=========================== */
body {
background-image: url('images/image.png');
color: #000305;
font-size: 87.5%;
/* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
.body {
clear: both;
margin: 0 auto;
width: 70%;
}
/* ===========================
========= Headings ========
=========================== */
h1 {
font-size: 2.5em
}
h2 {
font-size: 1.571em
}
/* 22px */
h3 {
font-size: 1.429em
}
/* 20px */
h4 {
font-size: 1.286em
}
/* 18px */
h5 {
font-size: 1.143em
}
/* 16px */
h6 {
font-size: 0.95em
}
/* 14px */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* ===========================
======= Anchor style ======
=========================== */
body {
background-image: url('images/image.png');
color: #000305;
font-size: 87.5%;
/* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
a {
outline: 0;
}
a img {
border: 0px;
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
padding: 0 1px;
text-decoration: none;
}
.mainHeader nav {
background: #666;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto;
text-align: center;
border-radius: 20px;
margin-left: -40px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
width: 430px;
}
.mainHeader nav ul li {
display: inline-block;
vertical-align: top;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 23px;
text-decoration: none;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
color: #fff;
}
.mainHeader nav li a {
background: -webkit-repeating-linear-gradient(#666666, #666666 41px, #FF9317 41px, #FF9317 82px);
background: -moz-repeating-linear-gradient(#666666, #666666 41px, #FF9317 41px, #FF9317 82px);
background: repeating-linear-gradient(#666666, #666666 41px, #FF9317 41px, #FF9317 82px);
background-size: 100% 200%;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 0.5s;
}
.mainHeader nav a:hover {
background-position: 0px -40px;
}
.mainHeader nav ul li h1 {
height: 40px;
line-height: 10px;
margin-left: 10px;
margin-right: 10px;
}
/* ===========================
======= Content Area ======
=========================== */
.mainContent {
overflow: hidden;
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.topcontent {
background-color: #EBE4DD;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-bottom: 3%;
}
.bottomcontent {
background-color: #EBE4DD;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
}
.content {
width: 68%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.post-info {
font-style: italic;
color: #919191;
font-size: 85%;
}
/* ===========================
======== Sidebar ==========
=========================== */
.top-sidebar,
.middle-sidebar,
.bottom-sidebar {
width: 24%;
float: left;
margin-left: 2%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #EBE4DD;
padding: 2% 3%;
margin-bottom: 2%;
}
/* ===========================
========= Footer ==========
=========================== */
.mainFooter {
width: 100%;
float: left;
margin-top: 2%;
margin-bottom: 2%;
padding-left: 0;
background-color: #666;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
color: #FFF;
}
.mainFooter p {
width: 91%;
margin: 2% auto;
}
/* ===========================
====== Miscellaneous ======
=========================== */
#media only screen and (min-width: 150px) and (max-width: 780px) {
<!DOCTYPE html>
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link rel="stylesheet" type "text/css" href="styles.css" />
<title>Craftd's Official Website</title>
</head>
<body class="body">
<header class="mainHeader">
<nav>
<ul>
<li class="active">
<span>
<li>Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</span>
</div>
</ul>
</nav>
</header>
<br>
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2>Welcome!</h2>
</header>
<footer>
<p class="post-info">Welcome to my Channel!</p>
</footer>
<content>
<iframe width="580" height="300" src="http://www.youtube.com/embed/oetU4zNP91o" frameborder="0" allowfullscreen></iframe>
</content>
</article>
<article class="bottomcontent">
<header>
<h2>First post</h2>
</header>
<footer>
<p class="post-info"></p>
</footer>
<content>
<p>Lorem ipsum dlior sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dliore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dlior in reprehenderit in vliuptate velit esse cillum dliore eu fugiat nulla pariatur. Duis aute irure dlior in reprehenderit in vliuptate velit esse cillum dliore eu fugiat nulla pariatur.</p>
</content>
</article>
</div>
<aside class="top-sidebar">
<article>
<h2><center>Q & A's!</center></h2>
<p>
<ol>
<h6>
<li><i>What is your middle name?</i> Malosi.</li>
<li><i>Where do you live?</i> Australia.</li>
<li><i>What do you use to record?</i> Fraps, ands sometimes Camtasia.</li>
<li><i>What consoles do you play?</i> Just XBox 360.</li>
<li><i>What was your first ever game?</i> Mario Bros. on the GameBoy.</li>
</p></ol></h6>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2><center>Latest News!</center></h2>
<p><i><u><center>There are no new stories.</center></u></i>
</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Social Networks</h2>
<a href="http://www.facebook.com/CraftdMC/">
<img src="images/Facebook.png" alt="Facebook" width="64" height="64">
</a>
<a href="http://www.instagram.com/CraftdMC/">
<img src="images/Instagram.png" alt="Instagram" width="64" height="64">
</a>
<a href="http://www.twitter.com/CraftdMC/">
<img src="images/Twitter.png" alt="Twitter" width="64" height="64">
</a>
</article </aside>
</div>
<footer class="mainFooter">
<p>Copyright © 2014 Craftd
</p>
</footer>
</center>
</body>
</HTML>

You can add #keyframes to do this. I've used some JavaScript code to add couple CSS rules to .img:hover when the animation ends.
var imgs = document.getElementsByClassName('img');
var event = ['webkitAnimationEnd', 'animationend'];
for (i = 0; i < imgs.length; i++) {
for (j = 0; j < event.length; j++) {
imgs[i].addEventListener(event[j], function() {
var ss = document.styleSheets;
for (k = 0; k < ss.length; k++) {
var rules = ss[k];
for (l = 0; l < rules.cssRules.length; l++) {
var r = rules.cssRules[l];
if (r.selectorText == ".img:hover") {
r.style.backgroundSize = "170px 170px";
r.style.backgroundPosition = "-10px -10px";
}
}
}
});
}
}
body {
background-color: black;
}
.img {
background: url(http://lorempixel.com/150/150/);
width: 150px;
height: 150px;
background-size: 150px 150px;
display: inline-block;
margin: 2px;
cursor: pointer;
text-align: center;
line-height: 150px;
color: transparent;
font-size: 25px;
-webkit-animation: shrink 0.5s 1;
animation: shrink 0.5s 1;
opacity: 1;
}
.img:hover {
-webkit-animation: grow 0.5s 1;
animation: grow 0.5s 1;
opacity: 0.5;
color: white;
}
#-webkit-keyframes grow {
0% {
background-size: 150px 150px;
background-position: 0px 0px;
opacity: 1;
color: transparent;
}
100% {
background-size: 170px 170px;
background-position: -10px -10px;
opacity: 0.5;
color: white;
}
}
#-moz-keyframes grow {
0% {
background-size: 150px 150px;
background-position: 0px 0px;
opacity: 1;
color: transparent;
}
100% {
background-size: 170px 170px;
background-position: -10px -10px;
opacity: 0.5;
color: white;
}
}
#-webkit-keyframes shrink {
0% {
background-size: 170px 170px;
background-position: -10px -10px;
opacity: 0.5;
color: white;
}
100% {
background-size: 150px 150px;
background-position: 0px 0px;
opacity: 1;
color: transparent;
}
}
#-moz-keyframes shrink {
0% {
background-size: 170px 170px;
background-position: -10px -10px;
opacity: 0.5;
color: white;
}
100% {
background-size: 150px 150px;
background-position: 0px 0px;
opacity: 1;
color: transparent;
}
}
<div class="container">
<div class="img">Content</div>
<div class="img">Content</div>
<div class="img">Content</div>
<div class="img">Content</div>
<div class="img">Content</div>
<div class="img">Content</div>
<div class="img">Content</div>
<div class="img">Content</div>
<div class="img">Content</div>
<div class="img">Content</div>
<div class="img">Content</div>
<div class="img">Content</div>
</div>

Categories

Resources