محرر ويب أونلاين

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

h1 {
    padding: 20px 10px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}

.pages-nav {
    padding: 0 10px;
    margin: 20px 0;
}

.pages-nav a {
    display: inline-block;
    width: 110px;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

.pages-nav a.next {
    float: right;
}

.float-fixer {
    clear: both;
}
        </style>
    </head>
    <body>
        <div class="pages-nav">
            <a class="prev" href="#"><i class="fa-solid fa-angle-left"></i> Previous</a>
            <a class="next" href="#">Next <i class="fa-solid fa-angle-right"></i></a>
            <div class="float-fixer"></div>
        </div>
        <h1>Next And Previous Buttons</h1>
    </body>
</html>