i have created a home page but after the end of the header i wanted a line that should act like a little shadow like on stack overflow it has a grey line after header but the problem for me is that it keeps going after the grey line and i cant stop and even google genimi or something like that didnt help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="index.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
</style>
</head>
<body>
<div class="header">
<h1>Pixelcyber</h1>
</div>
<script scr="index.js"></script>
</body>
</html>
body {
font-family: "Helvetica", Sans-Serif;
background-image: url("Luffy1.png");
margin: 0;
}
.header {
padding: 25px;
text-align: center;
background: #ffffff;
color: rgb(0, 0, 0);
font-size: 20px;
}
.header:after {
content: '';
display: block;
border: 3px solid #d0d0d0;
border-radius: 5px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); /* Adjust as needed */
}
.header:after {
overflow: hidden; /* Added line to clip overflowing content */
}
i tried this but it aint working i dont know what to try anymore
New contributor
Golden is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.