As a beginner in front-end development, I'm currently working on my website to showcase my Blockchain projects. Right now, my goal is to align the text "Technology is my Passion" in the center of the remaining free space.
How can I achieve this with bootstrap v5.1?
Is there a way to achieve a similar layout to the image below?
https://i.sstatic.net/zrB7S.png
CODE SNIPPET
/*--- basic styling ---*/
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Hack, monospace !important;
background-color: #0f0f0f !important;
}
.owner {
color: #F4364C;
font-size: 1.2vw;
}
/*--- glitch effect ---*/
.glitch {
color: #F4364C;
position: relative;
font-size: 4vw !important;
}
.glitch::before {
color: #F4364C;
position: absolute;
content: attr(data-text);
top: 0vh;
left: 0.3vw;
width: 100%;
height: 100%;
text-shadow: -1px 0 #FFD700;
background: #0f0f0f;
overflow: hidden;
animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
.glitch::after {
color: #F4364C;
position: absolute;
content: attr(data-text);
top: 0vh;
right: 0.3vw;
width: 100%;
height: 100%;
text-shadow: -1px 0 #C0C0C0;
background: #0f0f0f;
overflow: hidden;
animation: glitch-anim-2 2s infinite linear alternate-reverse;
}
@-webkit-keyframes glitch-anim-1 {
0% {
-webkit-clip-path: inset(37% 0 1% 0);
clip-path: inset(37% 0 1% 0);
}
// Remaining keyframes omitted for brevity...
}
@-webkit-keyframes glitch-anim-2 {
0% {
-webkit-clip-path: inset(35% 0 4% 0);
clip-path: inset(35% 0 4% 0);
}
// Remaining keyframes omitted for brevity...
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Joshua">
<title>XXX's Website | XXX</title>
<!-- stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- bootstrap cdns -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeedeabb0afb0ac">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<!-- hack fonts -->
<link href='//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08881838bcd868f8e94a0d3ced3ced0">[email protected]</a>/build/web/hack.css' rel='stylesheet'>
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100">
<div class="container-fluid owner">
<p class="text-left">I'm XXX XXX</p>
</div>
<div class="container-fluid">
<p class="text-center h1 glitch" data-text="Technology is my Passion">Technology is my Passion</p>
</div>
</div>
</body>
</html>