As someone with limited CSS/HTML skills and a preference for backend development, I decided to use a pre-made template.
The default login page looks like this:
https://i.sstatic.net/XKBAZ.png
In the register-page that I customized based on the login page:
https://i.sstatic.net/bViJn.png
I encountered an issue where the footer overlaps with the form.
Here is the HTML code:
<>
<ExamplesNavbar />
<div
className="page-header"
style={{
backgroundImage: "url(" + require("assets/img/login-image.jpg") + ")",
}}
>
<div className="filter" />
<Container>
<Row>
<Col className="ml-auto mr-auto" lg="4">
<Card className="card-register ml-auto mr-auto">
<h3 className="title mx-auto">Welcome</h3>
<div className="social-line text-center">
<Button
className="btn-neutral btn-just-icon mr-1"
color="facebook"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<i className="fa fa-facebook-square" />
</Button>
<Button
className="btn-neutral btn-just-icon mr-1"
color="google"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<i className="fa fa-google-plus" />
</Button>
<Button
className="btn-neutral btn-just-icon"
color="twitter"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
</div>
<Form className="register-form">
<label>First name</label>
<Input placeholder="First name" type="text" />
<label>Surname</label>
<Input placeholder="Surname" type="text" />
<label>Email</label>
<Input placeholder="Email" type="text" />
<label>Password</label>
<Input placeholder="Password" type="password" />
<label>Confirm password</label>
<Input placeholder="Password" type="password" />
<label>Birthday</label>
<Input placeholder="date placeholder" type="date" />
<label>Country</label>
<CountryDropdown
style={{ width: "100%" }}
value={"Tunisia"}
// onChange={(val) => this.selectCountry(val)}
/>
<Button block className="btn-round" color="danger">
Login
</Button>
</Form>
<div className="forgot">
<Button
className="btn-link"
color="danger"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Forgot password?
</Button>
</div>
</Card>
</Col>
</Row>
</Container>
<div className="footer register-footer text-center">
<h6>
© {new Date().getFullYear()}, made with{" "}
<i className="fa fa-heart heart" /> by Creative Tim
</h6>
</div>
</div>
</>
I've never experienced overlapped HTML elements before, so this issue surprises me. Since I'm still improving my frontend skills, any explanations or solutions would be highly appreciated.
NOTE: This was created using Reactstrap.