Revised question. Trying to make the situation as clear as possible. I downloaded a login system for my existing website. So as not to mess with my index.php, I set it up in its own folder (login-system). Got it all to work. I copy pasted relevant code to my index.php in the root and changed all paths to "login-system/whatever.php". Even though I changed the paths, it still won't work correctly. Specifically the css. The login form has its own css file (login-system/css/css.html) included like this:
. In css.html are 3 links (google fonts, normalize and css/style.css) I cannot get the login form's css AND the existing css (main.css) to work together. I either get my page looking fine and login form has no css or I get the login form with its css messing up my page. What do I need to do? Here is the relevant code: The Living Oracles.org</head>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (isset($_POST['login'])) { //user logging in
require '/login-system/login.php';
}
elseif (isset($_POST['register'])) { //user registering
require '/login-system/register.php';
}
}
?>
<body>
<div class ="login">
<div class="form">
<ul class="tab-group">
<li class="tab"><a href="#signup">Sign Up</a>
</li>
<li class="tab active"><a href="#login">Log In</a>
</li>
</ul>
<div class="tab-content">
<div id="login">
<h1>Welcome Back!</h1>
<form action="index.php" method="post" autocomplete="off">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" name="email"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" required autocomplete="off" name="password"/>
</div>
<p class="forgot"><a href="forgot.php">Forgot Password?</a>
</p>
<button class="button button-block" name="login"/>Log In</button>
</form>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="login-system/js/index.js"></script>
</div>
</div>