Initial import
This commit is contained in:
commit
c89f3a4171
8 changed files with 712 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
config.php
|
||||
52
authenticate.php
Normal file
52
authenticate.php
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<?php
|
||||
// Start the session
|
||||
session_start();
|
||||
require_once('config.php');
|
||||
// Try and connect using the info above
|
||||
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
|
||||
// Check for connection errors
|
||||
if (mysqli_connect_errno()) {
|
||||
// If there is an error with the connection, stop the script and display the error
|
||||
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
|
||||
}
|
||||
// Now we check if the data from the login form was submitted, isset() will check if the data exists
|
||||
if (!isset($_POST['username'], $_POST['password'])) {
|
||||
// Could not get the data that should have been sent
|
||||
exit('Please fill both the username and password fields!');
|
||||
}
|
||||
// Prepare our SQL, which will prevent SQL injection
|
||||
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
|
||||
// Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s"
|
||||
$stmt->bind_param('s', $_POST['username']);
|
||||
$stmt->execute();
|
||||
// Store the result so we can check if the account exists in the database
|
||||
$stmt->store_result();
|
||||
// Check if account exists with the input username
|
||||
if ($stmt->num_rows > 0) {
|
||||
// Account exists, so bind the results to variables
|
||||
$stmt->bind_result($id, $password);
|
||||
$stmt->fetch();
|
||||
// Note: remember to use password_hash in your registration file to store the hashed passwords
|
||||
if (password_verify($_POST['password'], $password)) {
|
||||
// Password is correct! User has logged in!
|
||||
// Regenerate the session ID to prevent session fixation attacks
|
||||
session_regenerate_id();
|
||||
// Declare session variables (they basically act like cookies but the data is remembered on the server)
|
||||
$_SESSION['account_loggedin'] = TRUE;
|
||||
$_SESSION['account_name'] = $_POST['username'];
|
||||
$_SESSION['account_id'] = $id;
|
||||
// Redirect to the home page
|
||||
header('Location: home.php');
|
||||
exit;
|
||||
} else {
|
||||
// Incorrect password
|
||||
echo 'Incorrect username and/or password!';
|
||||
}
|
||||
} else {
|
||||
// Incorrect username
|
||||
echo 'Incorrect username and/or password!';
|
||||
}
|
||||
// Close the prepared statement
|
||||
$stmt->close();
|
||||
}
|
||||
?>
|
||||
5
config.example.php
Normal file
5
config.example.php
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<?php
|
||||
$DATABASE_HOST = 'localhost';
|
||||
$DATABASE_USER = 'root';
|
||||
$DATABASE_PASS = '';
|
||||
$DATABASE_NAME = 'phplogin';
|
||||
57
home.php
Normal file
57
home.php
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<?php
|
||||
// We need to use sessions, so you should always initialize sessions using the below function
|
||||
session_start();
|
||||
// If the user is not logged in, redirect to the login page
|
||||
if (!isset($_SESSION['account_loggedin'])) {
|
||||
header('Location: index.php');
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1">
|
||||
<title>Home</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<h1>Website Title</h1>
|
||||
|
||||
<nav class="menu">
|
||||
<a href="home.php">Home</a>
|
||||
<a href="profile.php">Profile</a>
|
||||
<a href="logout.php">
|
||||
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"/></svg>
|
||||
Logout
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="page-title">
|
||||
<div class="wrap">
|
||||
<h2>Home</h2>
|
||||
<p>Welcome back, <?=htmlspecialchars($_SESSION['account_name'], ENT_QUOTES)?>!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
|
||||
<p>This is the home page. You are logged in!</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
45
index.php
Normal file
45
index.php
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<?php
|
||||
// We need to use sessions, so you should always initialize sessions using the below function
|
||||
session_start();
|
||||
// If the user is logged in, redirect to the home page
|
||||
if (isset($_SESSION['account_loggedin'])) {
|
||||
header('Location: home.php');
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1">
|
||||
<title>Login</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="login">
|
||||
|
||||
<h1>Member Login</h1>
|
||||
|
||||
<form action="authenticate.php" method="post" class="form login-form">
|
||||
|
||||
<label class="form-label" for="username">Username</label>
|
||||
<div class="form-group">
|
||||
<svg class="form-icon-left" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
|
||||
<input class="form-input" type="text" name="username" placeholder="Username" id="username" required>
|
||||
</div>
|
||||
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<div class="form-group mar-bot-5">
|
||||
<svg class="form-icon-left" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>
|
||||
<input class="form-input" type="password" name="password" placeholder="Password" id="password" required>
|
||||
</div>
|
||||
|
||||
<button class="btn blue" type="submit">Login</button>
|
||||
|
||||
<p class="register-link">Don't have an account? <a href="register.php" class="form-link">Register</a></p>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
logout.php
Normal file
9
logout.php
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?php
|
||||
// Start the session
|
||||
session_start();
|
||||
// Destroy the active session, which logs the user out
|
||||
session_destroy();
|
||||
// Redirect to the login pag
|
||||
header('Location: index.php');
|
||||
exit;
|
||||
?>
|
||||
85
profile.php
Normal file
85
profile.php
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<?php
|
||||
// We need to use sessions, so you should always initialize sessions using the below function
|
||||
session_start();
|
||||
// If the user is not logged in, redirect to the login page
|
||||
if (!isset($_SESSION['account_loggedin'])) {
|
||||
header('Location: index.php');
|
||||
exit;
|
||||
}
|
||||
require_once('config.php');
|
||||
// Try and connect using the info above
|
||||
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
|
||||
// Ensure there are no connection errors
|
||||
if (mysqli_connect_errno()) {
|
||||
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
|
||||
}
|
||||
// We don't have the email or registered info stored in sessions so instead we can get the results from the database
|
||||
$stmt = $con->prepare('SELECT email, registered FROM accounts WHERE id = ?');
|
||||
// In this case, we can use the account ID to get the account info
|
||||
$stmt->bind_param('i', $_SESSION['account_id']);
|
||||
$stmt->execute();
|
||||
$stmt->bind_result($email, $registered);
|
||||
$stmt->fetch();
|
||||
$stmt->close();
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1">
|
||||
<title>Home</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<h1>Website Title</h1>
|
||||
|
||||
<nav class="menu">
|
||||
<a href="home.php">Home</a>
|
||||
<a href="profile.php">Profile</a>
|
||||
<a href="logout.php">
|
||||
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"/></svg>
|
||||
Logout
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="page-title">
|
||||
<div class="wrap">
|
||||
<h2>Profile</h2>
|
||||
<p>View your profile details below.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
|
||||
<div class="profile-detail">
|
||||
<strong>Username</strong>
|
||||
<?=htmlspecialchars($_SESSION['account_name'])?>
|
||||
</div>
|
||||
|
||||
<div class="profile-detail">
|
||||
<strong>Email</strong>
|
||||
<?=htmlspecialchars($email)?>
|
||||
</div>
|
||||
|
||||
<div class="profile-detail">
|
||||
<strong>Registered</strong>
|
||||
<?=htmlspecialchars($registered)?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
458
style.css
Normal file
458
style.css
Normal file
|
|
@ -0,0 +1,458 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 16px;
|
||||
}
|
||||
body, html {
|
||||
background-color: #f3f5f7;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #474b50;
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
}
|
||||
.form .form-label {
|
||||
display: block;
|
||||
padding: 20px 0 10px 0;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #474b50;
|
||||
}
|
||||
.form .form-group {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.form .form-group .form-icon-left, .form .form-group .form-icon-right {
|
||||
fill: #c1c6cb;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.form .form-group .form-icon-left {
|
||||
left: 0;
|
||||
}
|
||||
.form .form-group .form-icon-left + .form-input {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.form .form-group .form-icon-right {
|
||||
right: 0;
|
||||
}
|
||||
.form .form-group .form-icon-right + .form-input {
|
||||
padding-right: 40px;
|
||||
}
|
||||
.form .form-group:focus-within .form-icon-left {
|
||||
fill: #989fa8;
|
||||
}
|
||||
.form .form-input {
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
border: 1px solid #dee1e6;
|
||||
padding: 0 15px;
|
||||
border-radius: 4px;
|
||||
color: #000;
|
||||
}
|
||||
.form .form-input::placeholder {
|
||||
color: #989fa8;
|
||||
}
|
||||
.form .form-link {
|
||||
color: #2a8eeb;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
.form .form-link:hover {
|
||||
color: #136fc5;
|
||||
}
|
||||
.form p.register-link {
|
||||
margin: 0;
|
||||
padding: 20px 0 0 0;
|
||||
font-size: 14px;
|
||||
color: #6b7179;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: #3e7bd6;
|
||||
color: #FFFFFF;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
height: 42px;
|
||||
box-shadow: 0px 0px 6px 1px rgba(45, 57, 68, 0.1);
|
||||
}
|
||||
.btn:hover {
|
||||
background: #3172d3;
|
||||
}
|
||||
.login, .register {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 400px;
|
||||
max-width: 95%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 0px 7px 1px rgba(45, 57, 68, 0.05);
|
||||
border-radius: 5px;
|
||||
margin: 100px auto;
|
||||
padding: 35px;
|
||||
}
|
||||
.login h1, .register h1 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
padding: 15px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.header {
|
||||
background-color: #333941;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
.header .wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 900px;
|
||||
height: 100%;
|
||||
}
|
||||
.header .wrapper h1, .header .wrapper a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header .wrapper h1 {
|
||||
font-size: 20px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
.header .wrapper .menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header .wrapper .menu a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
margin: 0 3px;
|
||||
text-decoration: none;
|
||||
color: #dddfe2;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.header .wrapper .menu a svg {
|
||||
fill: #dddfe2;
|
||||
margin: 2px 8px 0 0;
|
||||
}
|
||||
.header .wrapper .menu a:hover, .header .wrapper .menu a:active {
|
||||
color: #ebebec;
|
||||
}
|
||||
.header .wrapper .menu a:hover svg, .header .wrapper .menu a:active svg {
|
||||
fill: #ebebec;
|
||||
}
|
||||
.header .wrapper .menu a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.content {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.content .page-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 25px 0 10px 0;
|
||||
}
|
||||
.content .page-title h2 {
|
||||
margin: 0;
|
||||
padding: 0 0 7px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #53585e;
|
||||
}
|
||||
.content .page-title p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
color: #777e86;
|
||||
}
|
||||
.content .block {
|
||||
box-shadow: 0px 0px 7px 1px rgba(45, 57, 68, 0.05);
|
||||
margin: 25px 0;
|
||||
padding: 25px;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.content .block p {
|
||||
padding: 7px;
|
||||
margin: 0;
|
||||
}
|
||||
.content .profile-detail {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
font-size: 18px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.content .profile-detail strong {
|
||||
display: block;
|
||||
color: #92979e;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pad-1 {
|
||||
padding: 5px;
|
||||
}
|
||||
.mar-1 {
|
||||
margin: 5px;
|
||||
}
|
||||
.pad-2 {
|
||||
padding: 10px;
|
||||
}
|
||||
.mar-2 {
|
||||
margin: 10px;
|
||||
}
|
||||
.pad-3 {
|
||||
padding: 15px;
|
||||
}
|
||||
.mar-3 {
|
||||
margin: 15px;
|
||||
}
|
||||
.pad-4 {
|
||||
padding: 20px;
|
||||
}
|
||||
.mar-4 {
|
||||
margin: 20px;
|
||||
}
|
||||
.pad-5 {
|
||||
padding: 25px;
|
||||
}
|
||||
.mar-5 {
|
||||
margin: 25px;
|
||||
}
|
||||
.pad-bot-1 {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.pad-top-1 {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.pad-left-1 {
|
||||
padding-left: 5px;
|
||||
}
|
||||
.pad-right-1 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.pad-x-1 {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.pad-y-1 {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.mar-bot-1 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.mar-top-1 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.mar-left-1 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.mar-right-1 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.mar-x-1 {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.mar-y-1 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.pad-bot-2 {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.pad-top-2 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.pad-left-2 {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.pad-right-2 {
|
||||
padding-right: 10px;
|
||||
}
|
||||
.pad-x-2 {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.pad-y-2 {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.mar-bot-2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mar-top-2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mar-left-2 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mar-right-2 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mar-x-2 {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mar-y-2 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pad-bot-3 {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.pad-top-3 {
|
||||
padding-top: 15px;
|
||||
}
|
||||
.pad-left-3 {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.pad-right-3 {
|
||||
padding-right: 15px;
|
||||
}
|
||||
.pad-x-3 {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.pad-y-3 {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.mar-bot-3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.mar-top-3 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.mar-left-3 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.mar-right-3 {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.mar-x-3 {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.mar-y-3 {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.pad-bot-4 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.pad-top-4 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.pad-left-4 {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.pad-right-4 {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.pad-x-4 {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.pad-y-4 {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.mar-bot-4 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mar-top-4 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mar-left-4 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.mar-right-4 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mar-x-4 {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mar-y-4 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.pad-bot-5 {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.pad-top-5 {
|
||||
padding-top: 25px;
|
||||
}
|
||||
.pad-left-5 {
|
||||
padding-left: 25px;
|
||||
}
|
||||
.pad-right-5 {
|
||||
padding-right: 25px;
|
||||
}
|
||||
.pad-x-5 {
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
.pad-y-5 {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.mar-bot-5 {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.mar-top-5 {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.mar-left-5 {
|
||||
margin-left: 25px;
|
||||
}
|
||||
.mar-right-5 {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.mar-x-5 {
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.mar-y-5 {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue