I need to create a page header with large text at the top and subtext below it, all positioned on the left side of the page. On the right side, I want a group of buttons for a menu that can be easily moved to a specific location. Currently, I am struggling to move these buttons effectively. Here is my current code snippet:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<script src="script.js"></script>
<style>
.button1, .button2, .button3 {display:block;}
.row {
padding: 10%;
}
.button-group {
position: relative;
float: right;
margin:-340px auto;
}
.button1 {
height: 25px;
width: 80px;
position: absolute;
top: 50px;
left: 120px;
}
.button2 {
height: 25px;
width: 80px;
z-index: 1;
float: right;
top: 50px;
left: 180px;
}
.button3 {
height: 25px;
width: 80px;
z-index: -1;
float: right;
top: 50px;
left: 20px;
}
</style>
<style>
table {
border-collapse: collapse;
width: 100%;
}
tr.border_bottom td {
border-bottom:1pt solid black;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 3px solid #ddd;
border-top: 3px solid #ddd;
}
</style>
<style>
body {
background-color: darkblue;
}
</style>
<style>
h2 {
font-size: 20px;
}
p {
font-size: 14px;
}
</style>
<style>
body {
color: white;
}
h1 {
color: white;
}
p {
color: darkgrey;
}
</style>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<style type="text/css">
a.nounderline {text-decoration: none; }
</style>
<style type="text/css">
a.nounderline {text-decoration: none; }
</style>
</head>
<body>
<div class="container">
<div style="padding-left:60px">
<h2 size="6" style="font-family:sans-serif"><b>Python Code</b>
</h2>
<p>Make use of this database of Python code to improve your current projects</p>
</div
<div class="row button-group">
<button class="btn btn-primary button2"><a
href="/movielist">BUTTON 1</button>
<button class="btn btn-primary button2"><a
href="/python_forum">BUTTON 2</button>
<button class="btn btn-primary button3">BUTTON 3</button>
</div>
</div>
<br/>
<table width="90%">
{% for x in pythonforum: %}
<tr>
<td width=20%> {{ x[2] }} </td>
<td width=20%> {{ x[1] }} </td>
</tr>
{% endfor %}
</table><br/>
</body>
</html>
I am aiming to achieve a button group similar to the one found on this site: . Any assistance in achieving this would be highly appreciated.