I need the buttons to be evenly spaced with more room between them. And, of course, they need to be responsive in the end. I attempted to use Bootstrap's "d-flex" class to arrange the buttons, but it didn't work as expected.
If you review my Bootstrap columns and have any suggestions on how to make the code more efficient, feel free to offer improvements in that area as well.
Here is the code:
function menuButton(button) {
var productElement = button.classList;
if (productElement !== null) {
if (productElement.contains("Start-Button")) {
window.location.href = "index.html";
console.log("redirected to 'index.html'");
} else if (productElement.contains("Shop-Button")) {
window.location.href = "products.html";
console.log("redirected to 'products.html'");
} else if (productElement.contains("Kontakt-Button")) {
window.location.href = "contact.html";
console.log("redirected to 'contact.html'");
} else {
console.error("menuButton: ERROR / No CSS-Class found!")
}
}
}body {
margin: 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
.wrapper-1 {
position: relative;
overflow: hidden;
}
#background-video {
height: 30vh;
width: 100%;
position: absolute;
object-fit:cover;
}
.head-sentence {
color: yellow;
text-align: center;
margin-top: 4vh;
font-family: "Black Ops One";
font-size: 6vh;
padding: 10px;
border: 5px;
border-style: solid;
border-radius: 10px;
border-color: yellow;
backdrop-filter: blur(5px);
}
.Start-Button, .Shop-Button, .Kontakt-Button {
color: yellow;
background-color: rgba(0, 0, 0, 0);
font-family: "Black Ops One";
text-decoration: underline;
backdrop-filter: blur(5px);
border-radius: 5px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfddd0d0cbcccbcddecfff8a918c918d">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
<title>Dädalus</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aaa7a7bcbbbcbaa9b8e5a1aba7a6bb88f9e6f1e6f9">[email protected]</a>/font/bootstrap-icons.css">
</head>
<body>
<video id="background-video" src="img/video (2160p).mp4" autoplay muted loop></video>
<div class="container-fluid wrapper-1">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 d-flex flex-column align-items-center justify-content-center">
<h2 class="head-sentence">Dädalus</h2>
</div>
<div class="col-md-3"></div>
</div>
<div class="row nav-bar">
<div class="col-md-3 col-sm-1">
</div>
<div class="col-md-6 col-sm-10 d-flex align-items-center justify-content-center nav-width">
<nav style="margin-top: 20px;">
<button class="Start-Button" onclick="menuButton(this)">Start</button>
<button class="Shop-Button" onclick="menuButton(this)">Products</button>
<button class="Kontakt-Button" onclick="menuButton(this)">Contact</button>
</nav>
</div>
<div class="col-md-3 col-sm-1">
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10"></div>
<div class="col-md-1"></div>
</div>
</div>
</body>
</html>