Design:
Explanation: So I used a div and added CSS (display: inline-block;) and width to it, they were perfectly fine, when I added a tag into it to actually make the buttons do something they went on top of each other, I have tried wrapping them tag in another div but can't seem to make it work.
Here is how they look right now:
HTML:
export default function About() {
return (
<div className="About--div">
<h3 className="About--name">Huzaifa Aziz</h3>
<h5 className="About--job">Frontend Developer</h5>
<a className="About--site"></a>
<div className="About--btn">
<div>
<form action="mailto:[email protected]">
<button className="Email--btn" ><i className='fa fa-envelope'></i> Email</button>
</form>
<div className="About--btn--space"></div>
<form action="https://www.linkedin.com/in/huzaifah-aziz-63092996/">
<button className="Linkedin--btn"><i className='fa fa-linkedin'></i> Linkedin</button>
</form>
</div>
</div>
</div>
)}
CSS:
* {
box-sizing: border-box;
}
body{
border-radius: 20px;
background: #23252C;
margin: auto;
width: 100%;
border: 3px solid #1A1B21;
padding: 10px;
font-family: 'Inter', sans-serif;
}
.About--div{
text-align:center
}
.About--name{
color: white;
}
.About--job{
color: #F3BF99;
}
.About--site{
color: #F5F5F5;
}
.About--btn{
margin-top: 15px;
}
.About--btn--space{
width: 17px;
display: inline-block;
}
.Email--btn{
background: whitesmoke;
border: none;
width: 115px;
height: 34px;
border-radius: 5px;
}
.Linkedin--btn{
background: #5093E2;
border: none;
width: 115px;
height: 34px;
color: white;
border-radius: 5px;
}
.fa fa-linkedin{
}
Using flexbox, all you would need to do is add the following to the parent element of the buttons:
display: flex;
align-items: center;
Add a classname to that div just above your opening form tag and apply to that one. Other guys are right about the form tag being redundant but shouldn't be an issue.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments