This is the current appearance of my page:
This is what I'm aiming for:
Moreover, I want to ensure that when the screen is minimized and the width is reduced, the text remains neat and in the correct position. It should adapt and resize according to the screen width.
<body>
<h1>MedConnect</h1>
<h2>Please choose your Role</h2>
<div class="btn-container">
<a style="background-color: #A4907C;" href="process_role.php?role=user" class="btn"><i class="fa-solid fa-user"></i><span style="font-family: Lora;">User</span></a>
<a style="background-color: #5A96E3;" href="process_role.php?role=consultant" class="btn"><i class="fa-solid fa-hand-holding-medical"></i><span>Consultant</span></a>
</div>
<div class="texts">
<h5>Sign Up as a User on MedConnect</h5>
<h5>Sign Up as a Consultant on MedConnect</h5>
</div>
<script defer src="https://use.fontawesome.com/releases/v6.4.0/js/all.js"></script>
</body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
body {
font-family: Lora;
text-align: center;
margin-top: 100px;
background-color: #DBE2EF;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
h2 {
margin-top: 50px;
}
.btn-container {
display: flex;
justify-content: center;
margin-top: 200px;
}
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 50px;
border-radius: 5px;
background-color: #3498db;
color: black;
text-decoration: none;
margin: 0 100px;
}
.btn-container a {
width:15%;
}
.btn-container a span {
font-size: 20px;
padding-top: 10px;
display: block;
text-transform: uppercase;
letter-spacing: 1px;
}
</style>