I am a beginner web developer currently undertaking AppBrewery’s the Complete Web Development Bootcamp by Angela Yu on Udemy. I have to build a personal website for a capstone project.
I want to build a simple notebook register layout for my website. I achieved this layout by using repeating-linear-gradient to draw the black lines. It repeats every 38px to draw a notebook like lines layout for the webpage.
I want to place the text inside those lines. Just like the text in notebooks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amar</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
* {
line-height: 34px;
}
p {
margin: 0px;
padding: 0px;
}
body>.content-container {
background-image: repeating-linear-gradient(180deg, black 1px, transparent 2px 35px);
border-inline: 10px double red;
}
.top-margin-container {
height: 72px;
border-bottom: 10px double green;
}
.top-margin-container>.container {
height: inherit;
border-inline: 10px double red;
}
#profile-picture {
width: 100%;
height: 100%;
border: 20px solid #F6E58D;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="top-margin-container">
<div class="container"></div>
</div>
<div class="container content-container">
<header class="row align-items-center">
<div class="col-12 col-md-6 p-5">
<img src="https://avatar.iran.liara.run/public/boy" alt="Profile Picture" id="profile-picture">
</div>
<div class="col-12 col-md-6">
<h1>Lorem Ipsum</h1>
<h4>Dolor sit amet</h4>
</div>
</header>
<main>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries.
</p>
<p>
But also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</main>
<footer>
<p>Copyright © 2024</p>
</footer>
</div>
</body>
</html>
When I insert text in my webpage, it gets positioned right between those background lines in one bootstrap breakpoint, but not in the other.
I want to position the text perfectly between those lines. How can I achieve this goal?
If I can measure the length of repeating-linear-gradient using chrome developer tools, then I can position the text manually between those lines.
I would very much appreciate you kind help ????.
Amar Kay is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.