Hello all,
I have been trying to aligned 2 buttons ( i-e send email , cancel button ) horizontally in the same row but no luck yet… Can someone please help me out… attaching an image for a reference:
here’s my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="containerbackground">
<h1>CLARITAS</h1>
<p>DATA PROTECTION SIMPLIFIED.</p>
</div>
<div class="header_area">
<div class="main-menu">
<img src="./wire2-removebg-preview.png" alt="About us" class="img-fluid">
</div>
<h2>CLARITAS</h2>
<div class="para">
<p>Claritas uses technology to provide prioritized risk insights,which translates into simplified data protection.</p>
</div>
<div class="value">
</div>
</div>
<div class="form-area">
<form action="/">
<div class="banner">
<h1>Reset your Password.</h1>
<h4>Enter your email address in order to reset your password for Claritas.</h4>
</div>
<div class="colums">
<div class="item">
<label for="emailaddress"> Email Address<span>*</span></label><br>
<input id="emailaddress" type="text" placeholder=" Enter Email Address" name="emailaddress" required/>
</div>
<br>
<label for="check">
<div class="input-container">
<input type="checkbox" class="checkbox" id="check">
<span class="checkbox-text">I'm not a robot</span>
</div>
</label>
<img class="image-logo" src="./logo_48.png"/>
<span class="recaptcha">reCAPTCHA</span>
<br>
<a href="#">Privacy</a>
<span class="dash">-</span>
<a href="#">Terms</a>
</div>
<div class="row">
<button class="sendemail" type="sendemail" data-inline="true" href="/"> send Email</button>
<button class='cancel' data-inline="true" type="cancel" href="/">Cancel </button>
</div>
</form>
</body>
</html>
body{
background-color: #ECE6E7;
}
.header_area{
height: 630px;
width: 590px;
display: block;
margin-left: 180px;
margin-top: 65px;
background-color: white;
border-radius: 15px;
}
.main-menu {
padding: 1.4rem 1.2rem auto ;
height: 370px;
width: 440px;
display: block;
/*margin-left: 91px; */
/* margin-bottom: 56px; */
/* margin-top: 40px; */
border-radius: 20px;
position: absolute; /*Can also be `fixed`*/
left: -85px;
right: 790px;
top: -49px;
bottom: 225px;
margin: auto;
}
.form-area{
height: 630px;
width: 590px;
display: block;
margin-left: 775px;
margin-bottom: 975px;
background-color: #FFFAFA;
border-radius: 15px;
position:relative;
top: -630px;
}
.img-fluid
{
/*width: 20px;
height: 35px;
top: 0;
bottom: 200px;
margin: auto; */
margin-left: 108px;
margin-top: 35px;
opacity: .5rem;
}
div, form, input, select, textarea, label {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
line-height: 22px;
}
.colums {
display:row;
justify-content: space-between;
flex-direction:row;
flex-wrap:wrap;
margin-left: 40px;
}
.colums div {
width:48%;
border-radius: 10px;
}
.item {
position: relative;
margin: 35px 5px;
margin-right: 6px;
display: inline;
border-color: #ECE6E7 ;
/*-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px; */
border-radius:6px;
border-collapse: separate;
}
.item span {
color: red;
}
#emailaddress{
border: 1px solid #ccc;
border-radius: 10px;
width: 80%;
height: 35px;
}
/* textarea {
width: calc(100% - 12px);
padding: 5px;
}
/* form {
width: 100%;
padding: 20px;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 8px #669999;
} */
.item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder {
color: #669999;
}
.item input:hover, .item select:hover, .item textarea:hover {
border: 1px solid transparent;
box-shadow: 0 0 3px 0 #669999;
color: #669999;
}
.banner{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin-left: 2px;
padding: 29px;
bottom: -2px;
}
h4{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin-left: 3px;
padding-bottom: 5px;
margin-bottom: 6px;
top: -10px;
/* bottom: 10px; */
}
/*.checkbox {
margin-bottom: 12px;
margin-left: -20px;
padding: 25px;
}*/
.sendemail {
width: 35%;
padding: 10px 0;
margin: 10px auto;
border-radius: 5px;
border: none;
background: #ECE6E7;
font-size: 12px;
font-weight: 550;
color: black;
margin-left: 350px;
margin-top: -15px;
bottom: -12px;
}
.cancel {
width: 35%;
padding: 10px 0;
margin: 10px auto;
border-radius: 5px;
border: none;
background: #ECE6E7;
font-size: 12px;
font-weight: 550;
color: black;
margin-left: 110px;
margin-top: -45px;
}
.row{
display: inline-block;
}
button:hover {
background: plum;
}
.checkbox input {
width: auto;
margin: -5px 15px 5px 5px;
}
.input-container {
background-color: rgb(249, 249, 249);
border: 1px solid #d3d3d3;
height: 74px;
width: 300px;
font-family: Roboto, sans-serif;
display: inline-block;
margin: 55px;
bottom: -15px;
padding:15px;
}
.image-logo {
width: 32px;
display: inline;
margin-right: -45px;
margin-left: -150px;
margin-top: 10px;
margin-bottom: -19px;
}
span, a {
color: rgb(155, 155, 155);
}
.recaptcha {
font-size: 12px;
margin-left: auto;
position: relative;
bottom: -35px;
}
a, .dash {
font-size: 8px;
text-decoration: none;
display: inline;
position: relative;
top: -93px;
right: -250px;
}
a:hover {
text-decoration: underline;
}
.value {
border-left: 6px solid #F08080;
height: 80px;
margin-bottom: 100px;
padding-top: 50px;
margin-top: 100px;
margin-left: 35px;
top : -10px;
position: relative;
}
.para{
margin-bottom: 40px;
padding-top: 100px;
margin-top: 390px;
margin-left: 50px;
text-decoration: black;
font-size: 15px;
font-weight: 550;
bottom: 100px;
position: relative;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.containerbackground{
margin-top: -25px;
margin: 3rem;
position: absolute;
top: -59px;
left: 15px;
margin-right: 15px;
bottom: 0;
z-index: -1;
}