i trying to populate combo box using php code but not execute/show properly
code for login screen, its selecting records from branch table and put in combo button to selected by user, but it's not show properly , please check
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Visual Securas Login Page</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Welcome To Visuak Securas</h1>
<?php
$servername = "localhost";
$username = "root";
$password = "xxxxx";
$dbname = "visual";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
<form class="form">
<?php
$sql = "SELECT branchname FROM branch";
$result = $conn->query($sql);
echo "<select name=\"pcid\">";
echo "<option size =30 ></option>";
while($row = $result->fetch_assoc())
{
echo '<option value="'.$row['branchname'].'">'.$row['branchname'].'</option>';
}
echo "</select>";
?>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<select multiple="multiple"
<button type="submit" id="login-button">Login</button>
</form>
</body>
</html>
Based on what is currently there, I would say this is a styling issue, it appears that there is no styling being applied to your select tag. (CSS) Otherwise, it is showing in exactly the place that you have it in your code.
Edit:
Chunk1: css trivially small, plopped inside head and not a link
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[etc.] (not shown)
versus the next 2 chunk combo (that is, chunk2 and chunk3 are sorta married)
Chunk2: External css file
This is preferred way, css is reusable.
Imagine this is a css file named myStyle.css
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Chunk3: Include myStyle.css we just saw in Chunk2
using the css styles appropriately in <body>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<link rel="stylesheet" href="myStyle.css">
</head>
<body>
[etc.] (not shown)
Ok, end of Chunks. You basically need to do this as text rendered out via PHP which you are not doing. Again, note, you either do Chunk1, or (Chunk2 and Chunk3). So your issue is a styling/html/css issue.
MY CSS FILE
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body ::-webkit-input-placeholder {
/* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body ::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body :-ms-input-placeholder {
/* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
.wrapper {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 400px;
margin-top: -200px;
overflow: hidden;
}
.wrapper.form-success .container h1 {
-webkit-transform: translateY(85px);
-ms-transform: translateY(85px);
transform: translateY(85px);
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
}
.container h1 {
font-size: 40px;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-put;
transition-timing-function: ease-in-put;
font-weight: 200;
}
form {
padding: 20px 0;
position: relative;
z-index: 2;
}
form input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
form input:hover {
background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
background-color: white;
width: 300px;
color: #53e3a6;
}
form button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #53e3a6;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
form button:hover {
background-color: #f5f7f9;
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
Related
I have been working on a contact system - I got it to work, replies, everything - But the margins are way out of wack - see pic - Does anyone have any ideas what I am doing wrong? It is also centered and I want it to the left.
I have listed my index.php and styles.css below. I have to integrate it into an existing website - www.londonontariomortgages.ca/blog.html - So I am thinking of doing iFrame - However, with it not creating a new line when past the margin it looks dumb.
index.php
<?php require_once 'php/connect.php'; require_once 'php/functions.php'; ?>
<!doctype html>
<html>
<head>
<title>YouTube Comment System Series</title>
<meta charset="UTF-8" lang="en-US">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/global.js"></script>
</head>
<body>
<p>
<div class="page-container">
<?php
get_total();
require_once 'php/check_com.php';
?>
<form action="" method="post" class="main">
<label>enter a brief comment</label>
<textarea class="form-text" name="comment" id="comment"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="post">
</form>
<?php get_comments(); ?>
</div>
</p>
</body>
</html>
styles.php
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
/* resets */
* {
margin:0px;
padding:0px;
box-sizing:border-box;
font-family:'Calibri', sans-serif;
outline:none;
}
/* Animations */
#keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
/* body, html */
html, body {
background-color:#edf1f5;
}
/* content */
.page-container {
width:80%;
height:auto;
min-height:100vh;
margin:0 auto;
padding:50px 10px 0px 10px;
}
.comment {
width:45%;
height:auto;
padding:7px 23px;
margin:0px auto;
margin-bottom:10px;
text-align:left;
}
.child {
margin-top:10px;
margin-left:30px;
padding-left:5px;
}
.child-comments {
border-left:1px solid rgba(1,1,1,0.2);
}
form.main {
width:45%;
margin:0 auto;
margin-top:5px;
}
.form-input {
border:1px solid rgba(1,1,1,0.3);
width:50%;
padding:4px 7px;
font-size:13px;
line-height:24px;
resize:none;
}
.form-text {
border:1px solid rgba(1,1,1,0.3);
width:100%;
padding:4px 7px;
margin-top:5px;
font-size:13px;
line-height:24px;
resize:none;
transition:ease 0.2s all;
outline:none !important;
}
.form-text-error {
border-color:rgba(237,28,36,0.7);
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.form-text:focus {
border-color:rgba(0,114,188,0.7);
}
.form-submit {
text-transform: uppercase;
border:1px solid rgba(1,1,1,0.3);
cursor:pointer;
padding:5px 13px;
margin-top:5px;
}
/* fonts */
.user, .time {
display:inline-block;
}
.user {
font-size:13px;
color:#0072bc;
text-decoration: none;
word-break: break-all;
line-height:17px;
}
.time {
font-size:11px;
color:#b2b1b1;
transition:ease 0.2s all;
}
.comment:hover .time {
color:#767676;
}
.comment-text {
font-size:13px;
line-height:17px;
color:#222;
margin:0px 10px;
}
a {
font-size:11.2px;
text-transform: uppercase;
text-decoration: none;
color:#222;
cursor:pointer;
transition:ease 0.3s all;
}
a:hover {
color:#0072bc;
}
.link-reply {
color:#767676;
margin-left:20px;
}
h1 {
width:45%;
height:auto;
margin:0px auto;
font-size:16px;
font-weight:300;
text-transform: uppercase;
border-bottom:1px solid rgba(1,1,1,0.2);
}
label {
font-size:13px;
text-transform: uppercase;
vertical-align: bottom;
}
See updated CSS, I removed margin: auto from the .page-container and form.main and ".comment"
That was causing the centering of form on the page instead of default left alignment.
Add this CSS for fixing the text not wrapping issue
.comment-text {
font-size: 13px;
line-height: 17px;
color: #222;
margin: 0px 10px;
word-break: break-all;
}
Your comments do not wrap because there is no space in them. So to break elements with no space in them, you need to add word-break: break-all property to break them explicitly.
In ideal world scenario, your comments will definitely have spaces in them and you wont need it(word-break), but the testers(testing your website ) will test it with any dummy data, so you need to be prepared for that and apply fix generally for this issue.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
/* resets */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Calibri', sans-serif;
outline: none;
}
/* Animations */
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
/* body, html */
html,
body {
background-color: #edf1f5;
}
/* content */
.page-container {
width: 80%;
height: auto;
min-height: 100vh;
padding: 20px 10px 0px 10px;
}
.comment {
width: 45%;
height: auto;
padding: 7px 0;
margin-bottom: 10px;
text-align: left;
}
.child {
margin-top: 10px;
margin-left: 30px;
padding-left: 5px;
}
.child-comments {
border-left: 1px solid rgba(1, 1, 1, 0.2);
}
form.main {
width: 45%;
margin-top: 5px;
}
.form-input {
border: 1px solid rgba(1, 1, 1, 0.3);
width: 50%;
padding: 4px 7px;
font-size: 13px;
line-height: 24px;
resize: none;
}
.form-text {
border: 1px solid rgba(1, 1, 1, 0.3);
width: 100%;
padding: 4px 7px;
margin-top: 5px;
font-size: 13px;
line-height: 24px;
resize: none;
transition: ease 0.2s all;
outline: none !important;
}
.form-text-error {
border-color: rgba(237, 28, 36, 0.7);
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.form-text:focus {
border-color: rgba(0, 114, 188, 0.7);
}
.form-submit {
text-transform: uppercase;
border: 1px solid rgba(1, 1, 1, 0.3);
cursor: pointer;
padding: 5px 13px;
margin-top: 5px;
}
/* fonts */
.user,
.time {
display: inline-block;
}
.user {
font-size: 13px;
color: #0072bc;
text-decoration: none;
word-break: break-all;
line-height: 17px;
}
.time {
font-size: 11px;
color: #b2b1b1;
transition: ease 0.2s all;
}
.comment:hover .time {
color: #767676;
}
.comment-text {
font-size: 13px;
line-height: 17px;
color: #222;
margin: 0px 10px;
}
a {
font-size: 11.2px;
text-transform: uppercase;
text-decoration: none;
color: #222;
cursor: pointer;
transition: ease 0.3s all;
}
a:hover {
color: #0072bc;
}
.link-reply {
color: #767676;
margin-left: 20px;
}
h1 {
width: 45%;
height: auto;
margin: 0px auto;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(1, 1, 1, 0.2);
}
label {
font-size: 13px;
text-transform: uppercase;
vertical-align: bottom;
}
<html>
<head>
<title>YouTube Comment System Series</title>
<meta charset="UTF-8" lang="en-US">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/global.js"></script>
</head>
<body>
<p>
<div class="page-container">
<?php
get_total();
require_once 'php/check_com.php';
?>
<form action="" method="post" class="main">
<label>enter a brief comment</label>
<textarea class="form-text" name="comment" id="comment"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="post">
</form>
<?php get_comments(); ?>
</div>
</p>
</body>
</html>
I am working on a simple login page with a login form. When i added < !DOCTYPE HTML>, the input field sketched further than the container when set to 100% width. I have searched for solution and noticed questions asked consider doctype messing up css is regarding a specific problem.
Below are my codes;
.loginbox {
width: 320px;
height: 440px;
background: #000;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.loginbox {
width: 450px;
height: 480px;
padding: 90px 30px;
}
.inputContainer input {
margin-bottom: 30px;
}
}
.loginavatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.loginbox h1 {
font-size: 22px;
text-align: center;
margin: 0;
padding: 0 0 20px;
}
.inputContainer input {
margin-bottom: 20px;
}
input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
}
.inputContainer input[type="text"],
input[type="password"] {
width: 100%;
height: 42px;
background: transparent;
color: #fff;
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: none;
border-bottom: 1px solid #333;
outline: none;
padding-left: 25px;
}
.logico {
position: absolute;
top: 20%;
}
.usernithicon,
.passnithicon {
position: relative;
}
.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 1px solid #bc2333;
}
.inputContainer .inputBox label {
position: absolute;
top: 0;
left: 10%;
padding: 15px 0 0 0;
font-size: 14px;
pointer-events: none;
transition: .5s;
}
.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
top: -18px;
left: 10%;
font-size: 12px;
color: #bc2333;
}
input[type=checkbox]+label {
display: block;
margin: 3px 3px 20px;
cursor: pointer;
padding: 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 1px solid #fff;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: #bc2333;
border-color: #bc2333;
color: #fff;
}
input[type=checkbox]:checked:disabled+label:before {
transform: scale(1);
background-color: #bc2333;
border-color: #bc2333;
opacity: 0.5;
}
input[type=checkbox]:disabled+label:before {
transform: scale(1);
border-color: #fff;
opacity: 0.2;
}
.inputContainer input[type="submit"] {
width: 100%;
height: 48px;
background: #bc2333;
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: inherit;
border: 0;
outline: none;
}
.inputContainer input[type="submit"]:hover {
cursor: pointer;
background: #7a091f;
transition: .3s ease;
}
.inputContainer a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
.inputContainer a:hover {
color: #f4f4f4;
transition: .2s ease;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="">
<title>Member Login</title>
<link rel="stylesheet" href="fonts/FontAwesome/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/login.css">
</head>
<body>
<div class="loginbox">
<img class="loginavatar" src="assets/images/user.png" draggable="false" />
<h1>Login Form</h1>
<div class="inputContainer">
<form method="POST" action="">
<!--<p>Username</p>-->
<div class="usernithicon inputBox">
<i class="fa fa-user logico"></i>
<input type="text" id="usern" name="username" required><label for="usern">Username</label></div>
<!--<p>Password</p>-->
<div class="passnithicon inputBox">
<i class="fa fa-lock logico"></i>
<input type="password" id="pswrd" name="password" required><label for="pswrd">Password</label></div>
<input type="checkbox" id="remberme" name="remember"><label for="remberme">Remeber Me</label>
<input type="submit" name="" value="Login">
Forgot password?<br>
Create An Account
</form>
</div>
</div>
</body>
</html>
When this renders in browser the username and password input field will become stretched and i was able to use width:90%;, which works fine but i would love to have it set to width:100%; (which works perfectly without added the doctype tag) but when the doctype code is added, it becomes stretched.
Additional Issue: The background image i added to the body wont cover the whole screen, it breaks in the middle and repeat. i tried adding background-repeat:none; but didn't work. but if i remove the doctype tag, the background fills up the page as expected.
How do i solve this?
base on what you want i added display: inline-flex; in your input wrappers
Try this
.loginbox {
width: 320px;
height: 440px;
background: #000;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.loginbox {
width: 450px;
height: 480px;
padding: 90px 30px;
}
.inputContainer input {
margin-bottom: 30px;
}
}
.loginavatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.loginbox h1 {
font-size: 22px;
text-align: center;
margin: 0;
padding: 0 0 20px;
}
.inputContainer input {
margin-bottom: 20px;
}
input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
}
.inputContainer input[type="text"],
input[type="password"] {
width: 100%;
height: 42px;
background: transparent;
color: #fff;
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: none;
border-bottom: 1px solid #333;
outline: none;
padding-left: 20px;
}
.logico {
position: absolute;
top: 20%;
}
.usernithicon,
.passnithicon {
position: relative;
display: inline-flex;
align-items: baseline;
width: 100%;
}
.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 1px solid #bc2333;
}
.inputContainer .inputBox label {
position: absolute;
top: 0;
left: 10%;
padding: 15px 0 0 0;
font-size: 14px;
pointer-events: none;
transition: .5s;
}
.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
top: -22px;
left: 10%;
font-size: 12px;
color: #bc2333;
}
input[type=checkbox]+label {
display: block;
margin: 3px 3px 20px;
cursor: pointer;
padding: 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 1px solid #fff;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: #bc2333;
border-color: #bc2333;
color: #fff;
}
input[type=checkbox]:checked:disabled+label:before {
transform: scale(1);
background-color: #bc2333;
border-color: #bc2333;
opacity: 0.5;
}
input[type=checkbox]:disabled+label:before {
transform: scale(1);
border-color: #fff;
opacity: 0.2;
}
.inputContainer input[type="submit"] {
width: 100%;
height: 48px;
background: #bc2333;
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: inherit;
border: 0;
outline: none;
}
.inputContainer input[type="submit"]:hover {
cursor: pointer;
background: #7a091f;
transition: .3s ease;
}
.inputContainer a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
.inputContainer a:hover {
color: #f4f4f4;
transition: .2s ease;
}
For the background try this
body, html{
height: 100%;
background-image: url('your_image_path')
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I was making a Login form, but it did not do anything once submit the form.. The PHP does not work..
Nothing works. This is my code:
Login.php:
<?
$con = mysqli_connect("localhost", "root", "pass", "DB");
//Login Script
if (isset($_POST["email"]) && isset($_POST["password_login"])) {
$user_login = ($_POST["email"]); // filter everything but numbers and letters
$password_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["password_login"]); // filter everything but numbers and letters
$md5password_login = md5($password_login);
$sql = mysqli_query($con, "SELECT id FROM users WHERE email='$user_login' AND password='$md5password_login' AND closed='no' LIMIT 1"); // query the person
//Check for their existance
$userCount = mysql_num_rows($sql); //Count the number of rows returned
if ($userCount == 1) {
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
}
$_SESSION["id"] = $id;
$_SESSION["user_login"] = $user_login;
$_SESSION["password_login"] = $password_login;
exit("<meta http-equiv=\"refresh\" content=\"0\">");
} else {
echo 'That information is incorrect, try again';
exit();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login to Music and Science!</title>
<script type="text/javascript">
$("login-button").click(function(event){
event.preventDefault();
$('form').fadeOut(500);
$('.wrapper').addClass('form-success');
});
</script>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body ::-webkit-input-placeholder {
/* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body ::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body :-ms-input-placeholder {
/* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
.wrapper {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100%;
margin-top: -310px;
overflow: hidden;
}
.wrapper.form-success .container h1 {
-webkit-transform: translateY(85px);
-ms-transform: translateY(85px);
transform: translateY(85px);
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
}
.container h1 {
font-size: 40px;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-put;
transition-timing-function: ease-in-put;
font-weight: 200;
}
form {
padding: 20px 0;
position: relative;
z-index: 2;
}
form input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
form input:hover {
background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
background-color: white;
width: 300px;
color: #53e3a6;
}
form button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #53e3a6;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
form button:hover {
background-color: #f5f7f9;
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Welcome Back!</h1>
<form class="form" method="POST" action="#">
<input type="email" name="email" placeholder="Email">
<input type="password" name="password_login" placeholder="Password">
<button type="submit" name="submit" id="login-button">Login</button>
</form>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
No errors are displayed and I don't know whats wrong.
Please help..
Thanks!
You're mixing libaries. mysqli DOES NOT = mysql. What you want is this:
$userCount = mysqli_num_rows($sql);
The same thing goes for $row = mysql_fetch_array($sql), that'll need to be:
$row = mysqli_fetch_array($sql)
Also, your sessions won't be set, because you haven't started it! If you want to use sessions, you need to start them on every page that you intend to use them on:
<?php
session_start();
Please don't ever use this code in production. It's vulnerable to SQL Injection, you should sanitize the variables at minimum, but use PDO or Mysqli Prepared Statements instead.
Note: It seems you have PHP short tags on (<? ?>) so that isn't the issue, but not every host will have them turned on, so it's best to use the proper tags:
<?php
...... your code
?>
As the tittle, is it possible to echo entire html and css?
I am using if's and each match needs to generate a different page.
Also, in the html code in the html code I need to echo variable that is enclosed inside a div and styled.
Any thoughts how I can achieve this?
I get the following error syntax error, unexpected T_STRING, expecting
Thanks
echo '<!DOCTYPE html><html lang="mk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Roboto&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Fjalla+One);
*:focus { outline: none; }
::-webkit-scrollbar { width: 0; }
.animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
body { min-width: 300px; width: auto; max-width: 1100px; height: auto; margin: 0 auto; padding: 0; background-color: white; }
div#container {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: -3px 0 30px 0; padding: 0 0 50px 0;
background-image: url(guide.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover;
background-color: pink;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}
html body div#container form {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: 40px 0 0 0; padding: 0;
}
html body div#container form div#email-container {
position: relative; float: left; clear: none; display: block;
width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: hidden;
text-align: center;
}
html body div#container form div#email-container div#email-input {
position: relative; float: none; clear: none; display: inline-block;
width: auto; height: auto; margin: 0 auto; padding: 25px 40px;
font-family: 'Fjalla One', sans-serif; font-weight: 400; font-size: 40px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: rgba(26, 60, 88, 0.9); color: #ffffff;
cursor: default;
}
label.styled {
position: relative; float: left; clear: none; display: block;
width: auto; height: auto; margin: 0; padding: 10px 20px; overflow: hidden;
font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: #ffffff; color: rgba(128, 130, 132, 1); box-shadow: inset 0 0 0 2px #b6b6b8;
cursor: pointer;
}
label.styled:before {
position: absolute; float: none; clear: both; top: 0; left: 0; display: block;
width: 40px; height: 40px; margin: 0 0 0 10px; padding: 0;
content: '✔';
font-size: 60px;
opacity: 0;
}
input.styled {
display: none;
}
input.styled:checked ~ label.styled {
padding-left: 50px;
opacity: 1;
background-color: rgba(128, 130, 132, 0.9); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(128, 130, 132, 0.9);;
}
input.styled:checked ~ label.styled:before {
top: -10px; left: -2px;
opacity: 1; color: rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div id="container" class="animate">
<form method="post" action="$action" class="animate">
<input type="hidden" name="mode_login">
<input type="hidden" name="redirect" value="$redirect">
<input type="hidden" name="accept_terms" value="yes">
<div id="email-container">
<div id="email-input">' . $_POST['fes-email'] . '</div>
</div>
</div>
<input type="checkbox" class="styled animate" id="checkbox-tnc-accept">
<label class="styled animate" for="checkbox-tnc-accept">Ги прифаќам Условите и правилата <br> за користење на овој сервис</label>
<button type="submit" value="Enter">Продолжи</button>
</form>
</body>
</html>';
I would recommend you to not print html stuff with php, just close the php tags and write normal html, so here i removed the big echo statement and wrote normal html. This makes the code more clean and you see better what is html and where is PHP.
So your php code:
<div id="email-input">' . $_POST['fes-email'] . '</div>
If you don't have it in a echo statement just use this:
<div id="email-input"><?= $_POST['fes-email'] ?></div>
This is pretty much the same as:
<div id="email-input"><?php echo $_POST['fes-email']; ?></div>
Also for useful error messages you can turn on error reporting with this lines:
<?php
ini_set("display_errors", 1);
error_reporting(E_ALL);
?>
You can just put them on top of your php files and make sure that they are only turned on in staging!
The entire code should look something like this:
<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Roboto&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Fjalla+One);
*:focus { outline: none; }
::-webkit-scrollbar { width: 0; }
.animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
body { min-width: 300px; width: auto; max-width: 1100px; height: auto; margin: 0 auto; padding: 0; background-color: white; }
div#container {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: -3px 0 30px 0; padding: 0 0 50px 0;
background-image: url(guide.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover;
background-color: pink;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}
html body div#container form {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: 40px 0 0 0; padding: 0;
}
html body div#container form div#email-container {
position: relative; float: left; clear: none; display: block;
width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: hidden;
text-align: center;
}
html body div#container form div#email-container div#email-input {
position: relative; float: none; clear: none; display: inline-block;
width: auto; height: auto; margin: 0 auto; padding: 25px 40px;
font-family: 'Fjalla One', sans-serif; font-weight: 400; font-size: 40px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: rgba(26, 60, 88, 0.9); color: #ffffff;
cursor: default;
}
label.styled {
position: relative; float: left; clear: none; display: block;
width: auto; height: auto; margin: 0; padding: 10px 20px; overflow: hidden;
font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: #ffffff; color: rgba(128, 130, 132, 1); box-shadow: inset 0 0 0 2px #b6b6b8;
cursor: pointer;
}
label.styled:before {
position: absolute; float: none; clear: both; top: 0; left: 0; display: block;
width: 40px; height: 40px; margin: 0 0 0 10px; padding: 0;
content: '✔';
font-size: 60px;
opacity: 0;
}
input.styled {
display: none;
}
input.styled:checked ~ label.styled {
padding-left: 50px;
opacity: 1;
background-color: rgba(128, 130, 132, 0.9); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(128, 130, 132, 0.9);;
}
input.styled:checked ~ label.styled:before {
top: -10px; left: -2px;
opacity: 1; color: rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div id="container" class="animate">
<form method="post" action="$action" class="animate">
<input type="hidden" name="mode_login">
<input type="hidden" name="redirect" value="$redirect">
<input type="hidden" name="accept_terms" value="yes">
<div id="email-container">
<div id="email-input"><?= $_POST['fes-email'] ?></div>
</div>
</div>
<input type="checkbox" class="styled animate" id="checkbox-tnc-accept">
<label class="styled animate" for="checkbox-tnc-accept">Ги прифаќам Условите и правилата <br> за користење на овој сервис</label>
<button type="submit" value="Enter">Продолжи</button>
</form>
</body>
</html>
EDIT:
If you have this echo statement in a if statement you still don't need to print it that way :D
As a example (Pseudo Code):
<?php
if(condition) {
echo "<div>HTML STUFF</div>"; //Don't do it that way
} else {
?>
<div>Put your HTML stuff here</div>
<?php
}
?>
Also if you have to concatenate stuff:
//v Your variable here
"String is here" . $myVariable . " string goes further"
//^String start ^ ^Concatenate ^ ^ ^String ends
// |Break the string |
And for more information about concatenation see the manual: http://php.net/manual/en/language.operators.string.php
I would also recommend you to not write CSS inline or in style tags. You can write your own CSS files with *.css and then include them in the html head tag with this:
<link rel="stylesheet" type="text/css" href="yourCssFile.css">
echo '...assuming the previous part of the entire code are also present...
<form>
<div id="email-input">' . $_POST['fes-email']; . '</div>
</form>
...';
Take notice that before $_POST I've removed the echo; If you're already echoing there's no reason to start the echo. When you post ' . $_POST['fes-email'] . ' You're just allowing a variable; it's been running the echo the whole time, so all the new echo does is confuse it. If you have to have it this way then it might be better to have something along the lines of
htdocs(folder)
index.php(file)
includes(folder)
includes/YourForm.php
Then within YourForm.php add the HTML that you want to have then within index.php add
require_once("includes/YourForm.php");
While I don't agree with the way you're doing it right now what I posted should work.
Not sure why the require isn't formatting as code.. Sorry.
Why do you echo HTML in a PHP file . what you can do is , you can include HTML files in your condition . example :-
if(condition 1)
{
include "one.php";
}
else if(condition 2)
{
include "two.php";
}
in your one.php and two.php you have your HTML , in your case your all HTML will go to one of these files . in that file you can echo your variable
<div id="email-input"><?php echo $_POST['fes-email']; ?></div>
Long story short I was using in-line CSS directly in the page for the longest time, but decided to put it all in one file for my own sanity. I have tried the typical
<link rel="stylesheet" href="URL">
method and it loaded, but looked extremely weird, so I decided to include it with a PHP like
<?php include("assets/style.php"); ?>
and it works perfectly fine on all of my desktop browser like Chrome and IE, but on mobile safari the entire page is a mess.
This is my page.
<!DOCTYPE html>
<html>
<head>
<title>EPICMC</title>
<meta http-equiv=Content-Type content="text/html;charset=UTF-8">
<meta name="description" content="EPICMC is a service that lets you interact with your favorite servers in a new and exciting way.">
<meta name="keywords" content="epicmc,epic mc,epicmc server,epicmc/register,epicmc mcpe,epicmc vote,epicmcs vote,epicmc twitter,epicmc register,epicmcgaming,epicmc mcpe,epicmcpixels,epicmc donate,epicmcs donate,epic mc admin,epic mc builds">
<meta name=viewport content="width=device-width, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Days+One&text=EPICM" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Numans' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="https://epicmc.us/dist/css/ripples.min.css" rel="stylesheet">
<link href="https://epicmc.us/dist/css/material-wfont.min.css" rel="stylesheet">
<?php include("assets/style.php"); ?>
</head>
<body>
<?php include("assets/header.php"); ?>
<hgroup>
<h1 class="logo">EPIC<font color="#00aa00">MC</font></h1>
</hgroup>
<form id="statsform" action="stats.php" method="GET">
<div class="group">
<input type="text" name="player" id="CAPSINPUT" placeholder="USERNAME" autocomplete="off"><span class="bar"></span>
</div>
<center><input type="submit" value="CHECK STATS" class="load-more"></a></center>
</form>
</div>
</div>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- BANNER -->
<center><ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-4863164385597709"
data-ad-slot="3088967678"></ins></center>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://epicmc.us/dist/js/textbox.js"></script>
<script src="https://epicmc.us/dist/js/loadingbutton.js"></script>
<script src="https://epicmc.us/dist/js/ripples.min.js"></script>
<script src="https://epicmc.us/dist/js/material.min.js"></script>
<script>
$(document).ready(function() {
$.material.init();
});
</script>
</body>
</html>
This is my style.php
<style type="text/css">
#charset "UTF-8";
* { box-sizing: border-box;
}
p {
display: inline;
}
form {
width: 300px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
font-family: 'Numans', sans-serif;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
background: transparent;
}
input:focus {
outline: none;
}
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75);
left: -2px;
color: #00aa00;
}
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #00aa00;
transition: all 0.2s ease;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
a:link,a:visited,a:hover,a:active {
color: #636363;
text-decoration: none;
}
body {
font-family: 'Numans', sans-serif;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align: center;
margin-top: 4em;
}
h1 {
color: #636363;
}
h2 {
font-family: 'Numans', sans-serif;
font-size: 12px;
}
#error {
font-family: 'Numans', sans-serif;
font-size: 15px;
text-align: center;
margin-top: -15px;
margin-bottom: 20px;
}
#username, h5 {
font-family: 'Numans',sans-serif;
font-size: 18px;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
text-transform: uppercase;
}
.logo {
font-family: 'Days One', sans-serif;
font-weight: lighter;
font-size: 48px;
margin-bottom: 35px;
text-align: center;
}
.alert-info, .alert-danger, .alert-warning, .alert-success {
margin-top: -20px;
background-color: #323232;
}
.container {
text-align: center;
}
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
border-bottom: none;
}
.load-more.load-more--loading {
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
};
}
#CAPSINPUT, .CAPSINPUT {
text-transform: uppercase;
}
#stats {
width: 300px;
margin: 4em auto;
padding: 1.5em 1.5em 1.5em 1.5em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
#statsform {
background: #fafafa;
}
#search {
background: transparent;
}
table {
color: #333;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid #ebebeb;
cursor: pointer;
}
td, th {
border: 1px solid transparent;
/* No more visible border */
height: 30px;
transition: all 0.3s;
/* Simple transition for hover effect */;
}
th {
background: #DFDFDF;
/* Darken header a bit */
font-weight: bold;
}
td {
background: #FAFAFA;
text-align: center;
width: 33.33%;
border-left: 2px solid #ebebeb;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td {
background: #FEFEFE;
}
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td {
background: #F1F1F1;
}
tr td:hover {
background: #666;
color: #FFF;
} /* Hover cell effect! */
.fa-stack {
color: #00aa00;
}
#container-avatar img {
background: url('https://epicmc.us/images/herobrine.png');
background-repeat: no-repeat;
background-position: center;
display: block;
height: 85px;
width: 85px;
pointer-events: none;
}
#container-avatar #badge {
font-size: 12px;
margin: -22px 0 0 130px;
position: absolute;
text-align: center;
width: 68px;
}
</style>
the href should be "style.css" and rename the style.php to style.css and remove the tag