I have this code.
- The problem is that as you can see, I get those blue lines in the links area and I tend to think it's from the padding used for read-more and I can't understand why they appear and how to remove them.
I also have another misunderstanding. 2. Why does the green border (.middle) have that size? No size is set in the code.Its parent is background-blur, but its size is set in the code for the whole screen.
- If a child is sized with vw, its size depends on the size of the entire viewport, or the father's viewport, because I played with these units and not always an element with 50vw is equal to another element with 50vw.
In this snippet, I used vw and sometimes 5vw seems very much and sometimes very little and I don't understand why.
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
});* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
min-height:100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width:100%;
}
.navbar{
position:fixed;
width:100%;
height:3rem;
top:0;
left:0;
z-index:1;
}
.logo{
letter-spacing: 2px;
font-size: 5vw 2vh;
font-weight: 800;
color:white;
z-index:1;
color:white;
cursor:pointer;
}
.middle{
background:green;
}
.menu{
max-width:60rem;
margin:0 auto;
height:100%;
display:flex;
justify-content: space-between;
align-items:center;
}
.hamburger-menu{
cursor: pointer;
width:4em;
height:3rem;
display:flex;
justify-content:center;
align-items:center;
z-index:1;
}
.container.active .menu-bar{
background:transparent;
transform:rotate(360deg);
}
.container.active .menu-bar:before{
transform:rotate(45deg);
transition:0.3s ease-in-out;
background:cyan;
}
.container.active .menu-bar:after{
transform:rotate(-45deg);
transition:0.3s ease-in-out;
background:cyan;
}
.container.active .main{
transition:2s ease-in-out ;
transform: perspective(120vw) rotateY(20deg) scale(0.5) translateZ(20vw);
}
.container.active .main:hover {
transition:2s ease-in-out ;
transform: perspective(150vw) rotateY(20deg) scale(.35) translateZ(30vw);
}
.container.active .main:hover #water:hover {
color:red;
cursor:pointer;
position:relative;
}
.container.active .main:hover #water{
color:cyan;
position:relative;
}
.container.active .background-blur{
background:transparent;
}
.container.active .logo{
color:white;
animation:animate-logo ;
animation-duration:8s;
}
.menu-bar{
width:50%;
height:1.5px;
background:white;
position:relative;
transition:0.5s;
}
.menu-bar:before{
position:absolute;
content:"";
width:100%;
height:1.5px;
background:white;
transform:translateY(-7px);
}
.menu-bar:after{
position:absolute;
content:"";
width:100%;
height:1.5px;
background:white;
transform:translateY(7px);
}
.main{
position:absolute;
width:100%;
height:100vh;
top:0;
left:0;
transition:0.5s ease-in-out;
transform:translate3d();
transform-origin:left;
}
.background{
position:absolute;
width:100vw;
height:100vh;
background: url("time.jpg") no-repeat top center / 100% 100%;
transition:0.5s ease-in-out;
}
.container.active .shadow1{
position:absolute;
z-index:-1;
width:95%;
height:85%;
right:15%;
transition:2s ease-in-out;
transform: perspective(10vw) rotateY(20deg) translateZ(90%);
background:white;
opacity:0.15;
transform-style: preserve-3d;
transform-origin: left;
animation:animate-shadow1 2s ease-in-out;
}
.container.active .shadow2{
position:absolute;
z-index:-2;
width:95%;
height:95%;
right:10%;
transition:2s ease-in-out;
transform: perspective(10vw) rotateY(20deg) translateZ(90%);
background:white;
opacity:0.1;
transform-style: preserve-3d;
transform-origin: left;
}
.background-blur{
position:absolute;
width:100%;
height:100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}
.read-more{
text-decoration:none;
position:absolute;
padding:0.6rem 0.2rem;
font-weight:bold;
color:white;
border-radius:25px;
background:blue;
transform:translateX(-3.6vw);
}
.links{
position:absolute;
top:20%;
left:160%;
list-style: none;
display:flex;
flex-direction: column;
justify-content:space-between;
align-items:stretch;
align-content: space-around;
visibility:hidden;
}
.container.active .links{
visibility:visible;
animation:menu-anime 5s linear ;
font-size:3vw;
}
.links a {
text-decoration:none;
font-size:250%;
color:white;
letter-spacing: 2px;
position:relative;
transform: perspective(160vw) rotateX(-40deg) scale(0.5) translateZ(40vw);
}
.links a:hover {
color:cyan;
}
#water{
transform:translateY(-10%);
color:blue;
animation: fill 4s linear infinite;
letter-spacing:1.5px;
}
.time,.future{
letter-spacing:1.5px;
color:white;
}
.future{
font-size: 10vw;
transform:translateY(90%);
}
.time{
font-size:3vw;
}
#water2{
animation: fill 4s linear infinite;
letter-spacing:1.5px;
color:cyan;
transform:translateY(-3.4vw);
font-size:3vw;
}
.container.active .futurediv{
transform:translateY(-45vh);
}
.container.active .timediv{
visibility:hidden;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Time</title>
<link rel ="stylesheet" href="style.css"/>
</head>
<body>
<div class="container">
<div class="navbar">
<div class ="menu">
<h1 class="logo">logo </h1>
<div class ="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="shadow1"></div>
<div class="shadow2"></div>
<div class ="middle">
<div class="futurediv">
<h2 class="future">Future is here</h2>
<h2 class ="future" id="water">Future is here</h2>
</div>
<div class="timediv">
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
<h2 class ="time" id="water2">"Time isn't the main thing.It's the only thing."</h2>
</div>
<a class="read-more" href="#" >Read more </a2>
<div class="links">
<h2><a href="#">About</a></h2>
<h2><a href="#">Blog</a></h2>
<h2><a href="#">Services</a></h2>
<h2><a href="#">Contact</a></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>CodePudding user response：
There is a typo here -
<a class="read-more" href="#" >Read more </a2>
It should be
<a class="read-more" href="#" >Read more </a>
This will remove blue lines.
.middle contains the other divs - and that is why stretches to accommodate all those and appear that wide.