The challenge I'm facing is positioning the experience section beneath the canvas and title elements. However, it seems like the experience section is overlapping the canvas. Despite trying to increase the left margin, I am still unable to resolve this issue.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
background-color: black;
font-family: 'Poppins', sans-serif;
}
body,html{
overflow-x: hidden;
font-family: Arial, Helvetica, sans-serif;
}
.webgl{
position:absolute;
}
.title{
color:white;
z-index:1;
margin-top: 300px;
width:550px;
font-size: 100px;
font-weight: 800;
outline: none;
text-transform: uppercase;
background: linear-gradient(135deg, #5335cf 0%, #de005e 25%, #f66e48 50%, #de005e 75%, #5335cf 100%);
background-size: 400%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate 10s linear infinite;
}
@keyframes animate {
to{
background-position: 400%;
}
}
.page{
z-index: 2;
position:absolute;
}
header .header-contain{
display: flex;
}
.experience-section {
margin-top: 50px;
padding: 20px;
background-color: #f0f0f0;
color: #333;
margin-top: 400px;
position:relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Suneet's Portfolio</title>
</head>
<body>
<canvas class="webgl"></canvas>
<div class="page">
<h1 class="title">
Welcome to Suneets Portfolio
</h1>
<section class="experience-section">
<h2>Work Experience</h2>
<div class="experience">
<p>work</p>
<p>work</p>
</div>
</section>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>
Despite my attempts at tweaking margins and positions, I have not been able to rectify the overlap between the experience section and the canvas.