Witam, chciałbym zrobić tak aby pomiędzy divem box i divem text nie było niebieskiej linii oddzielającej te dwa divy(chodzi o border). Próbowałem z z-index i ustawić border na taki sam kolor jak box i text ale z-index mi nie działał.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="logo"></div>
<button class="menu-1">
blabla
</button>
<button class="menu-2">
blabla
</button>
<button class="menu-3">
blabla
</button>
</header>
<div class="content">
<div class="image"></div>
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas cumque debitis beatae maxime at sed consequatur iure, rerum modi repellat voluptas temporibus tenetur minus numquam neque iste amet quia architecto dolores illum magnam asperiores? Suscipit minus quam vitae saepe tempora, sit dicta atque numquam assumenda accusamus est omnis eos? Assumenda!
<p class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et veritatis, voluptatibus rerum sunt laboriosam dolorem praesentium maiores itaque facere quasi voluptate quos tempora enim porro quibusdam id omnis in nam ad! Unde veniam consequatur culpa ea non placeat, repudiandae impedit possimus consequuntur ipsum est. A odio molestiae voluptatum, commodi esse laboriosam aliquam molestias culpa dolores assumenda voluptatibus dolor nemo fuga laudantium eligendi. Quam esse, omnis quasi modi mollitia sunt ut quibusdam, iure vitae pariatur repellat?</p>
</div>
</div>
<footer class="footer">
<p class="arts">Lorem ipsum dolor sit amet.</p>
<div class="fb"></div>
<div class="email"></div>
<div class="insta"></div>
</footer>
</div>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
}
.container{
width: 100vw;
height: 100vh;
background: #222831;
}
.header{
width: 100vw;
height: 7%;
background: #393e46;
display: flex;
justify-content: flex-end;
}
.header button{
height: 50%;
width: 100px;
align-self: center;
margin-right: 1%;
outline: none;
border: none;
background: transparent;
color: #00adb5;
font-weight: bold;
font-size: 25px;
transition: transform.3s;
}
.header button:hover{
color: teal;
cursor: pointer;
transform: scale(1.2);
transition: transform .3s;
}
.logo{
width: 50px;
height: 50px;
border-radius: 50%;
background: grey;
align-self: center;
margin-right: 77%;
}
.content{
display: flex;
align-items: center;
justify-content: space-around;
}
.image{
width: 300px;
height: 300px;
background: grey;
border-radius: 50%;
margin-top: 5%;
border: 3px solid #00adb5;
}
.text{
box-sizing: border-box;
border: 3px solid #00adb5;
font-size: 20px;
font-family: sans-serif;
width: 600px;
background: grey;
margin-right: 45%;
margin-top: 15%;
border-bottom: none;
z-index: 3;
}
.box{
z-index: 2;
box-sizing: border-box;
border: 3px solid #00adb5;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-left: none;
width: 800px;
background: grey;
margin-top: 20px;
margin-bottom: 0;
}
.footer{
color: #222831;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
width: 100vw;
height: 7%;
position: fixed;
bottom: 0;
background: #00adb5;
display: flex;
justify-content: flex-end;
align-items: center;
}
.fb, .email, .insta{
width: 50px;
height: 50px;
border-radius: 50%;
background: #393e46;
margin-right: 20px;
transition: transform .3s;
}
.fb:hover, .email:hover, .insta:hover{
color: rgb(42, 42, 42);
cursor: pointer;
transform: scale(1.2);
transition: transform .3s;
}
.arts{
position: absolute;
left: 1%;
}
z góry dzięki za wszelkie podpowiedzi
