Desired Output
I need help aligning the buttons as shown in the Desired Output image, but when I run the code, the buttons stack vertically, resulting in Output like this. I've included the HTML, CSS, and JS code below. As a beginner in UI design, I can't seem to pinpoint the error in my CSS code. Any suggestions on how I can achieve the Desired Output would be greatly appreciated.
$('.form').find('input').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if( $this.val() === '' ) {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if( $this.val() === '' ) {
label.removeClass('highlight');
}
else if( $this.val() !== '' ) {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});*{
box-sizing: border-box;
margin:0px;
padding:0px;
}
body {
background:url(../background.jpg);
/*font-family: 'Titillium Web', sans-serif;*/
font-family: 'Roboto', sans-serif;
background-size:cover;
}
.user{
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
top: -10px;
left: calc(50%-50px);
right: -170px;
}
a {
text-decoration: none;
...
</body>
</html>