As a newcomer to website development, I am working on my personal site and hoping to achieve smooth scrolling in the future. For now, my focus is on adding more text to the center of the screen. Despite trying various methods, I have not been able to achieve the desired result. My goal is to have a small line of text that reads "Hi, my name is", followed by a larger text displaying a name. Below this, I intend to include additional text in paragraph form. Here is an excerpt from my current code:
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@1,700;1,800&display=swap');
*
{
margin: 0;
padding: 0;
bottom: 0;
box-sizing: border-box;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body
{
min-height: 100vh;
background: linear-gradient(#000, #fff);
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 50px;
display: flex;
justify-content: space-between;
align-items: top;
}
header .logo
{
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 1px;
}
.header img
{
float: left;
width: 160px;
height: 150px;
position: absolute;
left: 50px;
top: -20px;
}
header ul
{
display: flex;
justify-content: center;
align-items: top;
}
header ul li
{
list-style: none;
margin-left: 20px;
margin-top: 10px;
}
header ul li a
{
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover ,
header ul li a.active
{
background: #CEE4F3;
color: #000;
}
section
{
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
z-index: -1000;
}
section img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1000;
opacity: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>personal site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="header">
<img src="logo-no-background.png" alt="logo" />
</div>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Personal Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<section>
<img src="7076118.jpg" id="wavy">
</section>
</body>
</html>