Creating Blog Folder & Installing Extensions
This commit is contained in:
Underemployed
parent
7ce0544222
commit
8b9c99c7b4
30 changed files with 2739 additions and 106 deletions
12
about.php
Normal file
12
about.php
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?php
|
||||||
|
include 'partials/header.php'
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="empty__page">
|
||||||
|
<h1>About Page</h1>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include './partials/footer.php';
|
||||||
|
?>
|
||||||
27
admin/add-category.php
Normal file
27
admin/add-category.php
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?php
|
||||||
|
include "partials/header.php";
|
||||||
|
?>
|
||||||
|
|
||||||
|
<section class="form__section">
|
||||||
|
|
||||||
|
<div class="container form__section-container">
|
||||||
|
<h2>Add Category</h2>
|
||||||
|
<div class="alert__message error">
|
||||||
|
<p>This is an error message</p>
|
||||||
|
</div>
|
||||||
|
<form action="">
|
||||||
|
<input type="text" placeholder="Title">
|
||||||
|
<textarea rows="4" placeholder="Description"></textarea>
|
||||||
|
|
||||||
|
<button type="submit" class="btn">Add Category</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include "../partials/footer.php";
|
||||||
|
?>
|
||||||
41
admin/add-post.php
Normal file
41
admin/add-post.php
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
<?php
|
||||||
|
include "partials/header.php";
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="form__section">
|
||||||
|
<div class="container form__section-container">
|
||||||
|
<h2>Add Post</h2>
|
||||||
|
<div class="alert__message error">
|
||||||
|
<p>This is an error message</p>
|
||||||
|
</div>
|
||||||
|
<form action="" enctype="multipart/form-data">
|
||||||
|
<input type="text" placeholder="Title">
|
||||||
|
<select >
|
||||||
|
<option value="1">Wild Life</option>
|
||||||
|
<option value="1">Music</option>
|
||||||
|
<option value="1">Website</option>
|
||||||
|
<option value="1">Movies</option>
|
||||||
|
<option value="1">Travel</option>
|
||||||
|
<option value="1">Science & Technology</option>
|
||||||
|
<option value="1">Food</option>
|
||||||
|
</select>
|
||||||
|
<div class="form__control inline">
|
||||||
|
<input type="checkbox" id="is_featured" checked>
|
||||||
|
<label for="is_featured" >Featured</label>
|
||||||
|
</div>
|
||||||
|
<textarea rows="8" placeholder="Body"></textarea>
|
||||||
|
|
||||||
|
<div class="form__control">
|
||||||
|
<label for="thumbnail">Add Thumbnail</label>
|
||||||
|
<input type="file" id="thumbnail">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn">Add Post</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include './partials/footer.php';
|
||||||
|
?>
|
||||||
40
admin/add-user.php
Normal file
40
admin/add-user.php
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<?php
|
||||||
|
include "partials/header.php";
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="form__section">
|
||||||
|
<div class="container form__section-container">
|
||||||
|
<h2>Add User</h2>
|
||||||
|
<div class="alert__message error">
|
||||||
|
<p>This is an error message</p>
|
||||||
|
</div>
|
||||||
|
<form action="" enctype="multipart/form-data">
|
||||||
|
<input type="text" placeholder="First Name">
|
||||||
|
<input type="text" placeholder="Last Name">
|
||||||
|
<input type="text" placeholder="Username">
|
||||||
|
<input type="email" placeholder="Email">
|
||||||
|
<input type="password" placeholder="Create Password">
|
||||||
|
<input type="password" placeholder="Confirm Password">
|
||||||
|
<select>
|
||||||
|
|
||||||
|
<option value="0">Author</option>
|
||||||
|
<option value="1">Admin</option>
|
||||||
|
|
||||||
|
</select>
|
||||||
|
<div class="form__control">
|
||||||
|
<label for="avatar">User Avatar</label>
|
||||||
|
<input type="file" id="avatar">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn">Add User</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include './partials/footer.php';
|
||||||
|
?>
|
||||||
2
admin/config/constants.php
Normal file
2
admin/config/constants.php
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?php
|
||||||
|
define("ROOT_URL", "https://localhost/blog/");
|
||||||
2
admin/config/database.php
Normal file
2
admin/config/database.php
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?php
|
||||||
|
require "constants.php";
|
||||||
25
admin/edit-category.php
Normal file
25
admin/edit-category.php
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<?php
|
||||||
|
include "partials/header.php";
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="form__section">
|
||||||
|
|
||||||
|
<div class="container form__section-container">
|
||||||
|
<h2>Edit Category</h2>
|
||||||
|
<form action="">
|
||||||
|
<input type="text" placeholder="Title">
|
||||||
|
<textarea rows="4" placeholder="Description"></textarea>
|
||||||
|
|
||||||
|
<button type="submit" class="btn">Update Category</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include "../partials/footer.php";
|
||||||
|
?>
|
||||||
37
admin/edit-post.php
Normal file
37
admin/edit-post.php
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
<?php
|
||||||
|
include "partials/header.php";
|
||||||
|
?>
|
||||||
|
|
||||||
|
<section class="form__section">
|
||||||
|
<div class="container form__section-container">
|
||||||
|
<h2>Edit Post</h2>
|
||||||
|
|
||||||
|
<form action="" enctype="multipart/form-data">
|
||||||
|
<input type="text" placeholder="Title">
|
||||||
|
<select >
|
||||||
|
<option value="1">Wild Life</option>
|
||||||
|
<option value="1">Music</option>
|
||||||
|
<option value="1">Website</option>
|
||||||
|
<option value="1">Movies</option>
|
||||||
|
<option value="1">Travel</option>
|
||||||
|
<option value="1">Science & Technology</option>
|
||||||
|
<option value="1">Food</option>
|
||||||
|
</select>
|
||||||
|
<div class="form__control inline">
|
||||||
|
<input type="checkbox" id="is_featured" checked>
|
||||||
|
<label for="is_featured" >Featured</label>
|
||||||
|
</div>
|
||||||
|
<textarea rows="8" placeholder="Body"></textarea>
|
||||||
|
|
||||||
|
<div class="form__control">
|
||||||
|
<label for="thumbnail">Change Thumbnail</label>
|
||||||
|
<input type="file" id="thumbnail">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn">Update Post</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include "../partials/footer.php";
|
||||||
|
?>s
|
||||||
28
admin/edit-user.php
Normal file
28
admin/edit-user.php
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<?php
|
||||||
|
include "partials/header.php";
|
||||||
|
?>
|
||||||
|
|
||||||
|
<section class="form__section">
|
||||||
|
<div class="container form__section-container">
|
||||||
|
<h2>Edit User</h2>
|
||||||
|
|
||||||
|
<form action="" enctype="multipart/form-data">
|
||||||
|
<input type="text" placeholder="First Name">
|
||||||
|
<input type="text" placeholder="Last Name">
|
||||||
|
<select>
|
||||||
|
|
||||||
|
<option value="0">Author</option>
|
||||||
|
<option value="1">Admin</option>
|
||||||
|
|
||||||
|
</select>
|
||||||
|
<button type="submit" class="btn">Update User</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include "../partials/footer.php";
|
||||||
|
?>
|
||||||
97
admin/index.php
Normal file
97
admin/index.php
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
<?php
|
||||||
|
include "partials/header.php";
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="dashboard">
|
||||||
|
<div class="container dashboard__container">
|
||||||
|
|
||||||
|
<button id="show__sidebar-btn" class="sidebar__toggle"><i class="uil uil-angle-right-b"></i></button>
|
||||||
|
<button id="hide__sidebar-btn" class="sidebar__toggle"><i class="uil uil-angle-left-b"></i></button>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/add-post.php">
|
||||||
|
<i class="uil uil-pen"></i>
|
||||||
|
<h5>Add Post</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/index.php" class="active" >
|
||||||
|
<i class="uil uil-pen"></i>
|
||||||
|
<h5>Manage Posts</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/add-user.php">
|
||||||
|
<i class="uil uil-user-plus"></i>
|
||||||
|
<h5>Add User</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/manage-users.php">
|
||||||
|
<i class="uil uil-users-alt"></i>
|
||||||
|
<h5>Manage Users</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/add-category.php">
|
||||||
|
<i class="uil uil-edit"></i>
|
||||||
|
<h5>Add Category</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/manage-categories.php" >
|
||||||
|
<i class="uil uil-list-ul"></i>
|
||||||
|
<h5>Manage Categories</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
<main>
|
||||||
|
<h2>Manage Posts</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Title</th>
|
||||||
|
<th>Edit</th>
|
||||||
|
<th>Delete</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, minus.</td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/edit-post.php" class="btn sm">Edit</a></td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/delete-category.php" class="btn sm danger">Delete</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, corrupti!</td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/edit-posts.php" class="btn sm">Edit</a></td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/delete-category.php" class="btn sm danger">Delete</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lorem ipsum dolor sit amet elit. Distinctio, quibusdam!</td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/edit-post.php" class="btn sm">Edit</a></td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/delete-category.php" class="btn sm danger">Delete</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/edit-post.php" class="btn sm">Edit</a></td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/delete-category.php" class="btn sm danger">Delete</a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include "../partials/footer.php";
|
||||||
|
?>
|
||||||
92
admin/manage-categories.php
Normal file
92
admin/manage-categories.php
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
<?php
|
||||||
|
include "partials/header.php";
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="dashboard">
|
||||||
|
<div class="container dashboard__container">
|
||||||
|
|
||||||
|
<button id="show__sidebar-btn" class="sidebar__toggle"><i class="uil uil-angle-right-b"></i></button>
|
||||||
|
<button id="hide__sidebar-btn" class="sidebar__toggle"><i class="uil uil-angle-left-b"></i></button>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/add-post.php">
|
||||||
|
<i class="uil uil-pen"></i>
|
||||||
|
<h5>Add Post</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/index.php">
|
||||||
|
<i class="uil uil-pen"></i>
|
||||||
|
<h5>Manage Posts</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/add-user.php">
|
||||||
|
<i class="uil uil-user-plus"></i>
|
||||||
|
<h5>Add User</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/manage-users.php">
|
||||||
|
<i class="uil uil-users-alt"></i>
|
||||||
|
<h5>Manage Users</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/add-category.php">
|
||||||
|
<i class="uil uil-edit"></i>
|
||||||
|
<h5>Add Category</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/manage-categories.php" class="active">
|
||||||
|
<i class="uil uil-list-ul"></i>
|
||||||
|
<h5>Manage Categories</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
<main>
|
||||||
|
<h2>Manage Categories</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Title</th>
|
||||||
|
<th>Edit</th>
|
||||||
|
<th>Delete</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Travel</td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/edit-category.php" class="btn sm">Edit</a></td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/delete-category.php" class="btn sm danger">Delete</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Music</td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/edit-category.php" class="btn sm">Edit</a></td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/delete-category.php" class="btn sm danger">Delete</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Wild Life</td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/edit-category.php" class="btn sm">Edit</a></td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/delete-category.php" class="btn sm danger">Delete</a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include "../partials/footer.php";
|
||||||
|
?>
|
||||||
100
admin/manage-users.php
Normal file
100
admin/manage-users.php
Normal file
|
|
@ -0,0 +1,100 @@
|
||||||
|
<?php
|
||||||
|
include "partials/header.php";
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="dashboard">
|
||||||
|
<div class="container dashboard__container">
|
||||||
|
|
||||||
|
<button id="show__sidebar-btn" class="sidebar__toggle"><i class="uil uil-angle-right-b"></i></button>
|
||||||
|
<button id="hide__sidebar-btn" class="sidebar__toggle"><i class="uil uil-angle-left-b"></i></button>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/add-post.php">
|
||||||
|
<i class="uil uil-pen"></i>
|
||||||
|
<h5>Add Post</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/index.php">
|
||||||
|
<i class="uil uil-pen"></i>
|
||||||
|
<h5>Manage Posts</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/add-user.php">
|
||||||
|
<i class="uil uil-user-plus"></i>
|
||||||
|
<h5>Add User</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/manage-users.php" class="active">
|
||||||
|
<i class="uil uil-users-alt"></i>
|
||||||
|
<h5>Manage Users</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/add-category.php">
|
||||||
|
<i class="uil uil-edit"></i>
|
||||||
|
<h5>Add Category</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="<?= ROOT_URL ?>admin/manage-categories.php" >
|
||||||
|
<i class="uil uil-list-ul"></i>
|
||||||
|
<h5>Manage Categories</h5>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
<main>
|
||||||
|
<h2>Manage Users</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Username</th>
|
||||||
|
<th>Edit</th>
|
||||||
|
<th>Delete</th>
|
||||||
|
<th>Admin</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Named Guy</td>
|
||||||
|
<td>Named </td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/edit-user.php" class="btn sm">Edit</a></td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/delete-category.php" class="btn sm danger">Delete</a></td>
|
||||||
|
<td>Yes</td>
|
||||||
|
<tr>
|
||||||
|
<td>Vinland Saga </td>
|
||||||
|
<td>Saga </td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/edit-user.php" class="btn sm">Edit</a></td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/delete-category.php" class="btn sm danger">Delete</a></td>
|
||||||
|
<td>No</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Pikachu Guy</td>
|
||||||
|
<td>Guy </td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/edit-user.php" class="btn sm">Edit</a></td>
|
||||||
|
<td><a href="<?= ROOT_URL ?>admin/delete-category.php" class="btn sm danger">Delete</a></td>
|
||||||
|
<td>Yes</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include "../partials/footer.php";
|
||||||
|
?>
|
||||||
|
|
||||||
48
admin/partials/header.php
Normal file
48
admin/partials/header.php
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<?php
|
||||||
|
require '../config/database.php';
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<php lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>php & mysql blog app with admin panel</title>
|
||||||
|
<!-- CUSTOM STYLESHEET -->
|
||||||
|
<link rel="stylesheet" href="<?= ROOT_URL ?>css/style.css">
|
||||||
|
<!-- ICONSCOUT CDN -->
|
||||||
|
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
|
||||||
|
<!-- GOOGLE FONT(MONTSERATE) -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,800;1,700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="container nav__container">
|
||||||
|
<a href="<?= ROOT_URL ?>index.php" class="nav__logo">UNDEREMPLOYED</a>
|
||||||
|
<ul class="nav__items">
|
||||||
|
<li><a href="<?= ROOT_URL ?>blog.php">Blog</a></li>
|
||||||
|
<li><a href="<?= ROOT_URL ?>about.php">About</a></li>
|
||||||
|
<li><a href="<?= ROOT_URL ?>services.php">Services</a></li>
|
||||||
|
<li><a href="<?= ROOT_URL ?>contact.php">Contact</a></li>
|
||||||
|
<li><a href="<?= ROOT_URL ?>signin.php">SignIn</a></li>
|
||||||
|
<li class="nav__profile">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="./images/avatar1.jpg">
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li><a href="<?= ROOT_URL ?>/admin/index.php">Dashboard</a></li>
|
||||||
|
<li><a href="<?= ROOT_URL ?>logout.php">Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<button id="open__nav-btn"><i class="uil uil-bars"></i></button>
|
||||||
|
<button id="close__nav-btn"><i class="uil uil-multiply"></i></button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- ======================== END OF NAV ======================== -->
|
||||||
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<!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>Bitnami: Open Source. Simplified</title>
|
|
||||||
<link href="bitnami.css" media="all" rel="Stylesheet" type="text/css" />
|
|
||||||
<link href="/dashboard/stylesheets/all.css" rel="stylesheet" type="text/css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="contain-to-grid">
|
|
||||||
<nav class="top-bar" data-topbar>
|
|
||||||
<ul class="title-area">
|
|
||||||
<li class="name">
|
|
||||||
<h1><a href="/dashboard/index.html">Apache Friends</a></h1>
|
|
||||||
</li>
|
|
||||||
<li class="toggle-topbar menu-icon">
|
|
||||||
<a href="#">
|
|
||||||
<span>Menu</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<section class="top-bar-section">
|
|
||||||
<!-- Right Nav Section -->
|
|
||||||
<ul class="right">
|
|
||||||
<li class="active"><a href="/applications.html">Applications</a></li>
|
|
||||||
<li class=""><a href="/dashboard/faq.html">FAQs</a></li>
|
|
||||||
<li class=""><a href="/dashboard/howto.html">HOW-TO Guides</a></li>
|
|
||||||
<li class=""><a target="_blank" href="/dashboard/phpinfo.php">PHPInfo</a></li>
|
|
||||||
<li class=""><a href="/phpmyadmin/">phpMyAdmin</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div id="wrapper">
|
|
||||||
<div class="hero">
|
|
||||||
<div class="row">
|
|
||||||
<div class="large-12 columns">
|
|
||||||
<p>Apache Friends and Bitnami are cooperating to make dozens of open source applications available on XAMPP, for free. Bitnami-packaged applications include Wordpress, Drupal, Joomla! and dozens of others and can be deployed with one-click installers. Visit the <a href="https://bitnami.com/xampp?utm_source=bitnami&utm_medium=installer&utm_campaign=XAMPP%2BModule" target="_blank">Bitnami XAMPP page</a> for details on the currently available apps.</p><br/>
|
|
||||||
<p>Check out our <a href="https://www.apachefriends.org/bitnami_for_xampp.html" target="_blank" >Bitnami for XAMPP Start Guide</a> for more information about the applications installed.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="lowerContainer" class="row">
|
|
||||||
<div id="content" class="large-12 columns">
|
|
||||||
<!-- @@BITNAMI_MODULE_PLACEHOLDER@@ -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<footer>
|
|
||||||
<div class="row">
|
|
||||||
<div class="large-12 columns">
|
|
||||||
<div class="row">
|
|
||||||
<div class="large-8 columns">
|
|
||||||
<ul class="social">
|
|
||||||
<li class="twitter"><a href="https://twitter.com/apachefriends">Follow us on Twitter</a></li>
|
|
||||||
<li class="facebook"><a href="https://www.facebook.com/we.are.xampp">Like us on Facebook</a></li>
|
|
||||||
<li class="google"><a href="https://plus.google.com/+xampp/posts">Add us to your G+ Circles</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul class="inline-list">
|
|
||||||
<li><a href="https://www.apachefriends.org/blog.html">Blog</a></li>
|
|
||||||
<li><a href="https://www.apachefriends.org/privacy_policy.html">Privacy Policy</a></li>
|
|
||||||
<li>
|
|
||||||
<a target="_blank" href="http://www.fastly.com/"> CDN provided by
|
|
||||||
<img width="48" data-2x="/dashboard/images/fastly-logo@2x.png" src="/dashboard/images/fastly-logo.png" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="large-4 columns">
|
|
||||||
<p class="text-right">Copyright (c) 2015, Apache Friends</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
17
bitnami.css
17
bitnami.css
|
|
@ -1,17 +0,0 @@
|
||||||
.module_top, .module_bottom{
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.module_content img{
|
|
||||||
min-width: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.module_content h2{
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
325
blog.php
Normal file
325
blog.php
Normal file
|
|
@ -0,0 +1,325 @@
|
||||||
|
<?php
|
||||||
|
include 'partials/header.php'
|
||||||
|
?>
|
||||||
|
<section class="search__bar">
|
||||||
|
<form class="container search__bar-container" action="">
|
||||||
|
<div>
|
||||||
|
<i class="uil uil-search"></i>
|
||||||
|
<input type="search" name="" placeholder="Search">
|
||||||
|
<button type="submit" class="btn">Go</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ===================END OF SEARCH================-->
|
||||||
|
|
||||||
|
<section class="posts">
|
||||||
|
|
||||||
|
<div class="container posts__container">
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar5.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog5.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar6.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog6.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar7.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog7.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar8.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog8.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar9.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog9.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar10.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog10.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar11.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog11.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar12.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog12.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar13.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog14.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar14.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog15.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar15.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!--=====================================================================
|
||||||
|
==========================END OF THE POSTS===============================
|
||||||
|
=================================================================== -->
|
||||||
|
<section class="category__buttons">
|
||||||
|
<div class="container category__buttons-container">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<a href="" class="category__button">Music</a>
|
||||||
|
<a href="" class="category__button">Movies</a>
|
||||||
|
<a href="" class="category__button">Travel</a>
|
||||||
|
<a href="" class="category__button">Science & Technology</a>
|
||||||
|
<a href="" class="category__button">Food</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!--=======================END OF CATEGORY ===================================-->
|
||||||
|
<?php
|
||||||
|
include './partials/footer.php';
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
||||||
315
category-posts.php
Normal file
315
category-posts.php
Normal file
|
|
@ -0,0 +1,315 @@
|
||||||
|
<?php
|
||||||
|
include 'partials/header.php'
|
||||||
|
?>
|
||||||
|
<header class="category__title">
|
||||||
|
<h2>Category Title</h2>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="posts">
|
||||||
|
|
||||||
|
<div class="container posts__container">
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar5.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog5.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar6.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog6.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar7.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog7.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar8.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog8.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar9.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog9.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar10.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog10.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar11.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog11.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar12.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog12.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar13.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog14.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar14.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog15.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.html" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar15.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!--=====================================================================
|
||||||
|
==========================END OF THE POSTS===============================
|
||||||
|
=================================================================== -->
|
||||||
|
<section class="category__buttons">
|
||||||
|
<div class="container category__buttons-container">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<a href="" class="category__button">Music</a>
|
||||||
|
<a href="" class="category__button">Movies</a>
|
||||||
|
<a href="" class="category__button">Travel</a>
|
||||||
|
<a href="" class="category__button">Science & Technology</a>
|
||||||
|
<a href="" class="category__button">Food</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!--=======================END OF CATEGORY ===================================-->
|
||||||
|
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include './partials/footer.php';
|
||||||
|
?>
|
||||||
2
config/constants.php
Normal file
2
config/constants.php
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?php
|
||||||
|
define("ROOT_URL", "https://localhost/blog/");
|
||||||
2
config/database.php
Normal file
2
config/database.php
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?php
|
||||||
|
require 'constants.php';
|
||||||
10
contact.php
Normal file
10
contact.php
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?php
|
||||||
|
include 'partials/header.php'
|
||||||
|
?>
|
||||||
|
<section class="empty__page">
|
||||||
|
<h1>Contact Page</h1>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include './partials/footer.php';
|
||||||
|
?>
|
||||||
903
css/style.css
Normal file
903
css/style.css
Normal file
|
|
@ -0,0 +1,903 @@
|
||||||
|
:root {--color-primary: #6f6af8;
|
||||||
|
--color-primary-light: hsl(242, 91%, 69%, 18%);
|
||||||
|
--color-primary-variant: #5854c7;
|
||||||
|
--color-red: #da0f3f;
|
||||||
|
--color-red-light: hsl(346, 87%, 46%, 15%);
|
||||||
|
--color-green: #00c476;
|
||||||
|
--color-green-light: hsl(156, 100%, 38%, 15%);
|
||||||
|
--color-gray-900: #1e1e66;
|
||||||
|
--color-gray-700: #2d2b7c;
|
||||||
|
--color-gray-300: rgba(242, 242, 254, 0.3);
|
||||||
|
--color-gray-200: rgba(242, 242, 254, 0.7);
|
||||||
|
--color-white: #f2f2fe;
|
||||||
|
--color-bg: #0f0f3e;
|
||||||
|
|
||||||
|
--transition: all 300ms ease;
|
||||||
|
|
||||||
|
--container-width-lg: 74%;
|
||||||
|
--container-width-md: 88%;
|
||||||
|
--form-width: 40%;
|
||||||
|
|
||||||
|
--card-border-radius-1: 0.3rem;
|
||||||
|
--card-border-radius-2: 0.5rem;
|
||||||
|
--card-border-radius-3: 0.8rem;
|
||||||
|
--card-border-radius-4: 2rem;
|
||||||
|
--card-border-radius-5: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================
|
||||||
|
=================GENERAL=============
|
||||||
|
============================================= */
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
outline:0;
|
||||||
|
border:0;
|
||||||
|
appearance: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
box-sizing: border-box ;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
font-family: 'Monstserat',sans-serif;
|
||||||
|
line-height:1.6;
|
||||||
|
color:var(--color-gray-200);
|
||||||
|
overflow-x:hidden;
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
font-size:0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
|
||||||
|
width:var(--container-width-lg);
|
||||||
|
max-width:1800px;
|
||||||
|
margin-inline:auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
section{
|
||||||
|
margin-top: 3rem;
|
||||||
|
|
||||||
|
width:100vw ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__extra-margin{
|
||||||
|
margin-top: 7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
h1,h2,h3,h4,h5{
|
||||||
|
color:var(--color-white);
|
||||||
|
line-height: 1.3;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
font-size: 3rem;
|
||||||
|
margin:1rem 0;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size: 1.7rem;
|
||||||
|
margin:1rem 0;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin:1rem 0.8rem 0 0.5rem;
|
||||||
|
}
|
||||||
|
h4{
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
color: var(--color-white);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
img{
|
||||||
|
display:block;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
nav{
|
||||||
|
background: var(--color-primary);
|
||||||
|
width:100vw;
|
||||||
|
height:4.5rem;
|
||||||
|
position:fixed;
|
||||||
|
top:0;
|
||||||
|
z-index:10;
|
||||||
|
/* box-shadow:0 1rem 1rem rgba(0,0,0,0.2); */
|
||||||
|
|
||||||
|
}
|
||||||
|
nav button{
|
||||||
|
display:none;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav__container{
|
||||||
|
height:100%;
|
||||||
|
display:flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar{
|
||||||
|
width:2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius:50%;
|
||||||
|
overflow:hidden;
|
||||||
|
border:0.25rem solid var(--color-bg);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__logo{
|
||||||
|
font-weight:600;
|
||||||
|
font-size:1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__items{
|
||||||
|
display:flex;
|
||||||
|
align-items: center;
|
||||||
|
gap:4rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav__profile{
|
||||||
|
position:relative;
|
||||||
|
cursor:pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav__profile ul{
|
||||||
|
position:absolute;
|
||||||
|
top:140%;
|
||||||
|
right:0;
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
box-shadow:0 3rem 3rem rgba(0,0,0,0.4);
|
||||||
|
|
||||||
|
visibility: hidden;
|
||||||
|
opacity:0;
|
||||||
|
transition:var(--transition);
|
||||||
|
|
||||||
|
}
|
||||||
|
/*show nav ul when nav profile is hovered*/
|
||||||
|
.nav__profile:hover>ul{
|
||||||
|
visibility: visible;
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
.nav__profile ul li a {
|
||||||
|
padding:1rem;
|
||||||
|
background:var(--color-gray-900);
|
||||||
|
display:block;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__profile ul li:last-child a{
|
||||||
|
background:var(--color-red);
|
||||||
|
color:var(--color-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================================================================
|
||||||
|
====================== CATEGORY BUTTON =======================
|
||||||
|
===================================================================*/
|
||||||
|
.category__button{
|
||||||
|
background: var(--color-primary-light);
|
||||||
|
color:var(--color-primary);
|
||||||
|
display:inline-block;
|
||||||
|
padding:0.5rem 1rem;
|
||||||
|
border-radius: var(--card-border-radius-2);
|
||||||
|
font-weight:600;
|
||||||
|
font-size:0.8rem;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.category__button:hover{
|
||||||
|
color: var(--color-white)
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================================================================
|
||||||
|
====================== GENERAL POST =======================
|
||||||
|
===================================================================*/
|
||||||
|
|
||||||
|
.post__thumbnail{
|
||||||
|
border-radius: var(--card-border-radius-5) 0;
|
||||||
|
border:1rem solid var(--color-gray-900);
|
||||||
|
overflow:hidden;
|
||||||
|
margin-bottom : 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post:hover .post__thumbnail img{
|
||||||
|
filter:saturate(0);
|
||||||
|
transform: filter 500ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__author {
|
||||||
|
display: flex;
|
||||||
|
gap:1rem;
|
||||||
|
margin-top: 1.2rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__author-avatar{
|
||||||
|
width: 2.5rem;
|
||||||
|
height:2.5rem;
|
||||||
|
border-radius:var(--card-border-radius-3);
|
||||||
|
overflow:hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*==================================================================
|
||||||
|
====================== FEATURED =======================
|
||||||
|
===================================================================*/
|
||||||
|
|
||||||
|
.featured{
|
||||||
|
margin-top: 8rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured__container{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap:4rem;
|
||||||
|
}
|
||||||
|
.featured .post__thumbnail{
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================================================================
|
||||||
|
====================== POST =======================
|
||||||
|
===================================================================*/
|
||||||
|
|
||||||
|
.posts__container{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3,1fr);
|
||||||
|
gap:5rem;
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*==================================================================
|
||||||
|
====================== CATEGORY BUTTONS =======================
|
||||||
|
===================================================================*/
|
||||||
|
|
||||||
|
.category__buttons{
|
||||||
|
padding:4rem 0;
|
||||||
|
border-top:2px solid var(--color-gray-900);
|
||||||
|
border-bottom:2px solid var(--color-gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category__buttons-container{
|
||||||
|
width:fit-content;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3,1fr);
|
||||||
|
gap:1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer{
|
||||||
|
background: var(--color-gray-900);
|
||||||
|
padding: 5rem 0 0;
|
||||||
|
box-shadow: inset 0 1.5rem 1.5rem rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.footer__socials{
|
||||||
|
margin-inline:auto;
|
||||||
|
width:fit-content;
|
||||||
|
margin-bottom:5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content:space-between;
|
||||||
|
align-items: center ;
|
||||||
|
gap: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__socials a{
|
||||||
|
background: var(--color-bg);
|
||||||
|
border-radius: 50%;
|
||||||
|
width:2.3rem;
|
||||||
|
height: 2.3rem;
|
||||||
|
display:flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__socials a:hover {
|
||||||
|
background: var(--color-white);
|
||||||
|
color: var(--color-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__container{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: repeat(4,1fr);
|
||||||
|
}
|
||||||
|
footer h4{
|
||||||
|
color: var(--color-white);
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
footer ul li {
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer ul a{
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
footer ul a:hover{
|
||||||
|
letter-spacing: 0.2rem;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__copyright{
|
||||||
|
text-align: center;
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
border-top: 2px solid var(--color-bg);
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*============================================================================================
|
||||||
|
============ SEARCH ================================== =============
|
||||||
|
============================================================================================*/
|
||||||
|
|
||||||
|
|
||||||
|
.search__bar{
|
||||||
|
margin-top: 7rem;
|
||||||
|
}
|
||||||
|
.search__bar-container{
|
||||||
|
position: relative;
|
||||||
|
width: 30rem;
|
||||||
|
background: var(--color-gray-900);
|
||||||
|
display:flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
border-radius:var(--card-border-radius-2);
|
||||||
|
color:var(--color-gray-300);
|
||||||
|
}
|
||||||
|
.search__bar-container > div{
|
||||||
|
width:100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.search__bar input{
|
||||||
|
outline: none;
|
||||||
|
background:transparent;
|
||||||
|
margin: 0.7rem;
|
||||||
|
padding:0.5rem 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__bar input::placeholder{
|
||||||
|
color:var(--color-gray-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==============================================================
|
||||||
|
======================== BUTTON =================================
|
||||||
|
==============================================================*/
|
||||||
|
|
||||||
|
|
||||||
|
.btn{
|
||||||
|
display: inline-block;
|
||||||
|
width: fit-content;
|
||||||
|
padding:0.6rem 1.2rem;
|
||||||
|
background-color:var(--color-primary);
|
||||||
|
border-radius: var(--card-border-radius-2);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--transition);
|
||||||
|
color:var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.sm {
|
||||||
|
padding:0.3rem 0.7rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.danger{
|
||||||
|
background:var(--color-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover{
|
||||||
|
background:var(--color-white);
|
||||||
|
color:var(--color-bg)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*=======================================================================================
|
||||||
|
================= SINGLE POST ================================================================
|
||||||
|
==============================================================================*/
|
||||||
|
|
||||||
|
.singlepost {
|
||||||
|
margin:6rem 0 2rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.singlepost__container{
|
||||||
|
width:var(--form-width);
|
||||||
|
background: var(--color-gray-900);
|
||||||
|
padding: 1rem 2rem 3rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.singlepost__thumbnail{
|
||||||
|
margin:1.5rem 0 1rem;
|
||||||
|
}
|
||||||
|
.singlepost__container p{
|
||||||
|
margin-top: 1rem;
|
||||||
|
line-height: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=======================================================================================
|
||||||
|
================= CATEGOTY POST ================================================================
|
||||||
|
==============================================================================*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.category__title{
|
||||||
|
height:7rem;
|
||||||
|
margin-top: 4.5rem;
|
||||||
|
background: var(--color-gray-900);
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
/*=======================================================================================
|
||||||
|
================= EMPTY PAGE ================================================================
|
||||||
|
==============================================================================*/
|
||||||
|
.empty__page{
|
||||||
|
height:70vh;
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*=======================================================================================
|
||||||
|
GENERAL FORM
|
||||||
|
==============================================================================*/
|
||||||
|
|
||||||
|
.form__section{
|
||||||
|
margin: 6rem 0 6rem;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.form__section-container{
|
||||||
|
width:var(--form-width);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert__message{
|
||||||
|
background: red;
|
||||||
|
padding: 0.8rem 1.4rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border-radius: var(--card-border-radius-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert__message.error{
|
||||||
|
background: var(--color-red-light);
|
||||||
|
color: var(--color-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert__message.success{
|
||||||
|
background: var(--color-green-light);
|
||||||
|
color: var(--color-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert__message.lg{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
form{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap:1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__control{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
.form__control.inline{
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
input,textarea,select{
|
||||||
|
padding: 0.8rem 1.4rem;
|
||||||
|
background: var(--color-gray-900);
|
||||||
|
border-radius: var(--card-border-radius-2 );
|
||||||
|
resize:none;
|
||||||
|
color: var(--color-white);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__section small {
|
||||||
|
margin-top: 1rem;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__section small a{
|
||||||
|
color:var(--color-primary)
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=======================================================================================
|
||||||
|
================= DASHBOARD ================================================================
|
||||||
|
==============================================================================*/
|
||||||
|
|
||||||
|
.dashboard{
|
||||||
|
margin-top: 6rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__toggle{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dashboard__container{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 14rem auto;
|
||||||
|
gap:1rem;
|
||||||
|
background: var(--color-gray-900);
|
||||||
|
padding: 2rem;
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard aside a{
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
display: flex;
|
||||||
|
gap:1rem;
|
||||||
|
align-items: center;
|
||||||
|
padding:1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard aside ul li:not(:last-child) a {
|
||||||
|
border-bottom: 1px solid var(--color-gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard aside a:hover{
|
||||||
|
background-color: var(--color-gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard aside a.active{
|
||||||
|
background-color: var(--color-gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard main{
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard main h2{
|
||||||
|
margin: 0 0 2rem 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard main table{
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.dashboard main table th{
|
||||||
|
background:var(--color-gray-700);
|
||||||
|
padding:0.8rem;
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard main table td{
|
||||||
|
padding:0.8rem;
|
||||||
|
border-bottom: 1px solid var(--color-gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard main table tr:hover td{
|
||||||
|
background-color:var(--color-bg);
|
||||||
|
color: var(--color-white);
|
||||||
|
cursor:default;
|
||||||
|
transition:var(--transition)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*============================================================================================
|
||||||
|
============ MEDIA QUERIES ==============================================
|
||||||
|
(MEDIUM DEVICES) ================================== =============
|
||||||
|
============================================================================================*/
|
||||||
|
@media screen and (max-width:1024px) {
|
||||||
|
|
||||||
|
/*========================GENERAL=================================*/
|
||||||
|
|
||||||
|
.container{
|
||||||
|
width:var(--container-width-md);
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3{
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
h5{
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
/*======================NAV==========================*/
|
||||||
|
nav button{
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
background: transparent;
|
||||||
|
color:var(--color-white);
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav button#close__nav-btn {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__container{
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__items{
|
||||||
|
position: absolute;
|
||||||
|
flex-direction: column;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
width: 12rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content:center;
|
||||||
|
gap:0;
|
||||||
|
display: none ;
|
||||||
|
}
|
||||||
|
.nav__items li{
|
||||||
|
width: 100%;
|
||||||
|
height:4.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: -2rem 3rem 7rem rgba(0, 0, 0, 0.7);
|
||||||
|
background: var(--color-gray-900);
|
||||||
|
border-top:1px solid var(--color-bg);
|
||||||
|
animation:animateDropdown 1s 0s ease forwards;
|
||||||
|
opacity: 0;
|
||||||
|
transform-origin: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__items li:nth-child(2){
|
||||||
|
animation-delay: 200ms;
|
||||||
|
}
|
||||||
|
.nav__items li:nth-child(3){
|
||||||
|
animation-delay: 400ms;
|
||||||
|
}
|
||||||
|
.nav__items li:nth-child(4){
|
||||||
|
animation-delay: 600ms;
|
||||||
|
}
|
||||||
|
.nav__items li:nth-child(5){
|
||||||
|
animation-delay: 800ms;
|
||||||
|
}.nav__items li:nth-child(6){
|
||||||
|
animation-delay: 1000ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* nav dropdown animation*/
|
||||||
|
|
||||||
|
@keyframes animateDropdown {
|
||||||
|
0%{
|
||||||
|
transform: rotateX(90deg) ;
|
||||||
|
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
opacity:1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.nav__items li a{
|
||||||
|
border-radius: 0;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
background: var(--color-gray-900);
|
||||||
|
padding: 0 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__profile{
|
||||||
|
background: var(--color-gray-900);
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav__profile ul{
|
||||||
|
top: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.nav__profile .avatar{
|
||||||
|
margin-left: 2rem;
|
||||||
|
border:0;
|
||||||
|
}
|
||||||
|
.featured__container{
|
||||||
|
gap:3rem;
|
||||||
|
}
|
||||||
|
.posts__container{
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap:3rem;
|
||||||
|
}
|
||||||
|
.footer__container{
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
/*====================== BLOG ===================*/
|
||||||
|
.search__bar-container{
|
||||||
|
width: var(--container-width-lg);
|
||||||
|
|
||||||
|
}
|
||||||
|
/*====================== GENERAL FORM =================*/
|
||||||
|
.form__section-container{
|
||||||
|
padding:3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*====================== DASHBOARD =================*/
|
||||||
|
|
||||||
|
.dashboard__container{
|
||||||
|
grid-template-columns: 4.3rem auto;
|
||||||
|
padding: 0;
|
||||||
|
background:transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard aside{
|
||||||
|
background: var(--color-primary);
|
||||||
|
}
|
||||||
|
.dashboard aside h5{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard main table thead{
|
||||||
|
display:none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard main table tr{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard main table tr:nth-child(even){
|
||||||
|
background:var(--color-gray-900);
|
||||||
|
}
|
||||||
|
.dashboard main table tr:hover td{
|
||||||
|
background:transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*============================================================================================
|
||||||
|
============ MEDIA QUERIES ==============================================
|
||||||
|
(SMALL DEVICES) ================================== =============
|
||||||
|
============================================================================================*/
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
section{
|
||||||
|
margin-top:2rem;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.featured{
|
||||||
|
margin-top: 6rem;
|
||||||
|
}
|
||||||
|
.featured__container{
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
.posts__container{
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
|
}
|
||||||
|
.category__buttons-container{
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__container{
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
text-align: center;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
/*====================== BLOG ================*/
|
||||||
|
.search__bar-container{
|
||||||
|
width:var(--container-width-md);
|
||||||
|
|
||||||
|
}
|
||||||
|
/*====================== SINGLE POST ================*/
|
||||||
|
.singlepost__container{
|
||||||
|
background-color: transparent;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
/*====================== GENERAL FORM ================*/
|
||||||
|
.form__section{
|
||||||
|
margin:0;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.form__section-container{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*====================== DASHBOARD ================*/
|
||||||
|
.dashboard{
|
||||||
|
|
||||||
|
margin-top: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard__container{
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
.dashboard main{
|
||||||
|
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard main h2{
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dashboard aside{
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
box-shadow: 2rem 0 4rem rgba(0,0,0,0.4);
|
||||||
|
left: 0;
|
||||||
|
height: 100vh;
|
||||||
|
transition: var(--transition);
|
||||||
|
background: var(--color-primary);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard .sidebar__toggle{
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--color-primary-variant);
|
||||||
|
color:var(--color-white);
|
||||||
|
position:fixed;
|
||||||
|
right :0;
|
||||||
|
bottom: 4rem;
|
||||||
|
z-index: 1;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius: 50% 0 0 50%;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: -1rem 0 2rem rgba(0,0,0,0.4);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dashboard aside a h5{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hide__sidebar-btn{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
340
index.php
340
index.php
|
|
@ -1,11 +1,331 @@
|
||||||
<?php
|
<?php
|
||||||
if (!empty($_SERVER['HTTPS']) && ('on' == $_SERVER['HTTPS'])) {
|
include 'partials/header.php'
|
||||||
$uri = 'https://';
|
|
||||||
} else {
|
|
||||||
$uri = 'http://';
|
|
||||||
}
|
|
||||||
$uri .= $_SERVER['HTTP_HOST'];
|
|
||||||
header('Location: '.$uri.'/dashboard/');
|
|
||||||
exit;
|
|
||||||
?>
|
?>
|
||||||
Something is wrong with the XAMPP installation :-(
|
|
||||||
|
<section class="featured">
|
||||||
|
<div class ="container featured__container">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog1.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="category-posts.php" class="category__button">Wild Life</a>
|
||||||
|
<h2 class="post__info"><a href="post.php">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid!</a></h2>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. At quidem reiciendis in fuga consequatur eligendi molestiae, magnam assumenda laborum inventore deleniti. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit maxime sapiente dolores iure quae necessitatibus ut perferendis aliquam fugiat cupiditate.
|
||||||
|
</p>
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar3.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Underemployed</h5>
|
||||||
|
<small>June 10, 2022 - 07:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- ===================END OF FEATURED================-->
|
||||||
|
|
||||||
|
<section class="posts">
|
||||||
|
|
||||||
|
<div class="container posts__container">
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar5.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog5.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar6.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog6.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar7.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog7.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar8.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog8.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar9.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog9.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar10.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog10.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar11.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog11.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar12.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog12.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar13.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog14.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar14.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
|
<div class="post__thumbnail">
|
||||||
|
<img src="./images/blog15.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__info">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<h3 class="post__title"><a href="post.php" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, iusto!</a></h3>
|
||||||
|
<p class="post__body">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, exercitationem! Minima ipsam obcaecati commodi nam aliquid delectus magnam molestiae nobis?
|
||||||
|
</p>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar15.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!--=====================================================================
|
||||||
|
==========================END OF THE POSTS===============================
|
||||||
|
=================================================================== -->
|
||||||
|
<section class="category__buttons">
|
||||||
|
<div class="container category__buttons-container">
|
||||||
|
<a href="" class="category__button">Wild Life</a>
|
||||||
|
<a href="" class="category__button">Music</a>
|
||||||
|
<a href="" class="category__button">Movies</a>
|
||||||
|
<a href="" class="category__button">Travel</a>
|
||||||
|
<a href="" class="category__button">Science & Technology</a>
|
||||||
|
<a href="" class="category__button">Food</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!--=======================END OF CATEGORY ===================================-->
|
||||||
|
<?php
|
||||||
|
include './partials/footer.php';
|
||||||
|
?>
|
||||||
42
js/main.js
Normal file
42
js/main.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
const navItem =document.querySelector(".nav__items");
|
||||||
|
const openNavBtn =document.querySelector("#open__nav-btn");
|
||||||
|
const closeNavBtn =document.querySelector("#close__nav-btn");
|
||||||
|
|
||||||
|
const openNav =()=>{
|
||||||
|
navItem.style.display="flex";
|
||||||
|
openNavBtn.style.display="none";
|
||||||
|
closeNavBtn.style.display="inline-block";
|
||||||
|
}
|
||||||
|
const closeNav=()=>{
|
||||||
|
navItem.style.display="none";
|
||||||
|
openNavBtn.style.display="inline-block";
|
||||||
|
closeNavBtn.style.display="none";
|
||||||
|
|
||||||
|
}
|
||||||
|
openNavBtn.addEventListener("click", openNav)
|
||||||
|
closeNavBtn.addEventListener("click", closeNav)
|
||||||
|
|
||||||
|
|
||||||
|
const sidebar = document.querySelector("aside");
|
||||||
|
const showSidebarBtn = document.querySelector("#show__sidebar-btn");
|
||||||
|
const hideSidebarBtn = document.querySelector("#hide__sidebar-btn");
|
||||||
|
|
||||||
|
|
||||||
|
const showSidebar = () => {
|
||||||
|
|
||||||
|
sidebar.style.left = "0";
|
||||||
|
showSidebarBtn.style.display="none";
|
||||||
|
hideSidebarBtn.style.display='inline-block';
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const hideSidebar = () => {
|
||||||
|
|
||||||
|
sidebar.style.left = "-100%";
|
||||||
|
showSidebarBtn.style.display="inline-block";
|
||||||
|
hideSidebarBtn.style.display="none";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
showSidebarBtn.addEventListener("click", showSidebar);
|
||||||
|
hideSidebarBtn.addEventListener("click", hideSidebar);
|
||||||
69
partials/footer.php
Normal file
69
partials/footer.php
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="footer__socials">
|
||||||
|
<a href="https://www.youtube.com/channel/UCvtrqmex9f7J9hxZfmhoHRw" target="_blank"><i class="uil uil-youtube"></i></a>
|
||||||
|
<a href="https://www.instagram.com/_underemployed_/" target="_blank"><i class="uil uil-instagram-alt"></i></a>
|
||||||
|
<a href="https://www.linkedin.com/in/nithin-a-06b946256/" target="_blank"><i class="uil uil-linkedin"></i></a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="container footer__container">
|
||||||
|
<article>
|
||||||
|
<h4>Categotries</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Wild Life</a></li>
|
||||||
|
<li><a href="">Music</a></li>
|
||||||
|
<li><a href="">Movies</a></li>
|
||||||
|
<li><a href="">Travel</a></li>
|
||||||
|
<li><a href="">Science & Technology</a></li>
|
||||||
|
<li><a href="">Food</a></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h4>Support</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Online Support</a></li>
|
||||||
|
<li><a href="">Call Numbers</a></li>
|
||||||
|
<li><a href="">Emails</a></li>
|
||||||
|
<li><a href="">Social Support</a></li>
|
||||||
|
<li><a href="">Location</a></li>
|
||||||
|
<li><a href="">Food</a></li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h4>Blog</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Safety</a></li>
|
||||||
|
<li><a href="">Repair</a></li>
|
||||||
|
<li><a href="">Recent</a></li>
|
||||||
|
<li><a href="">Popular</a></li>
|
||||||
|
<li><a href="">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h4>PermaLinks</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="">Blog</a></li>
|
||||||
|
<li><a href="">About</a></li>
|
||||||
|
<li><a href="">Services</a></li>
|
||||||
|
<li><a href="">Contact</a></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer__copyright">
|
||||||
|
<small>Copyright © UnderEmployed</small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="<?= ROOT_URL ?>js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</php>
|
||||||
|
|
||||||
|
|
||||||
48
partials/header.php
Normal file
48
partials/header.php
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<?php
|
||||||
|
require 'config/database.php';
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<php lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>php & mysql blog app with admin panel</title>
|
||||||
|
<!-- CUSTOM STYLESHEET -->
|
||||||
|
<link rel="stylesheet" href="<?= ROOT_URL ?>css/style.css">
|
||||||
|
<!-- ICONSCOUT CDN -->
|
||||||
|
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
|
||||||
|
<!-- GOOGLE FONT(MONTSERATE) -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,800;1,700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="container nav__container">
|
||||||
|
<a href="<?= ROOT_URL ?>index.php" class="nav__logo">UNDEREMPLOYED</a>
|
||||||
|
<ul class="nav__items">
|
||||||
|
<li><a href="<?= ROOT_URL ?>blog.php">Blog</a></li>
|
||||||
|
<li><a href="<?= ROOT_URL ?>about.php">About</a></li>
|
||||||
|
<li><a href="<?= ROOT_URL ?>services.php">Services</a></li>
|
||||||
|
<li><a href="<?= ROOT_URL ?>contact.php">Contact</a></li>
|
||||||
|
<li><a href="<?= ROOT_URL ?>signin.php">SignIn</a></li>
|
||||||
|
<li class="nav__profile">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="./images/avatar1.jpg">
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li><a href="<?= ROOT_URL ?>/admin/index.php">Dashboard</a></li>
|
||||||
|
<li><a href="<?= ROOT_URL ?>logout.php">Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<button id="open__nav-btn"><i class="uil uil-bars"></i></button>
|
||||||
|
<button id="close__nav-btn"><i class="uil uil-multiply"></i></button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- ======================== END OF NAV ======================== -->
|
||||||
|
|
||||||
48
post.php
Normal file
48
post.php
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<?php
|
||||||
|
include 'partials/header.php'
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="singlepost">
|
||||||
|
<div class="container singlepost__container">
|
||||||
|
|
||||||
|
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, dolore.</h2>
|
||||||
|
<div class="post__author">
|
||||||
|
<div class="post__author-avatar">
|
||||||
|
<img src="./images/avatar4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="post__author-info">
|
||||||
|
<h5>By: Jone titus</h5>
|
||||||
|
<small>June 12,2022 - 20:23</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="singlepost__thumbnail">
|
||||||
|
<img src="./images/blog45.jpg" >
|
||||||
|
</div>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae numquam exercitationem optio aperiam accusamus, debitis at, sint illo accusantium possimus quo maiores! Aperiam pariatur, eligendi in tempore autem fugit perspiciatis praesentium dolore rerum ipsum molestias atque blanditiis iure labore.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae numquam exercitationem optio aperiam accusamus, debitis at, sint illo accusantium possimus quo maiores! Aperiam pariatur, eligendi in tempore autem fugit perspiciatis praesentium dolore rerum ipsum molestias atque blanditiis iure labore.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae numquam exercitationem optio aperiam accusamus, debitis at, sint illo accusantium possimus quo maiores! Aperiam pariatur, eligendi in tempore autem fugit perspiciatis praesentium dolore rerum ipsum molestias atque blanditiis iure labore.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae numquam exercitationem optio aperiam accusamus, debitis at, sint illo accusantium possimus quo maiores! Aperiam pariatur, eligendi in tempore autem fugit perspiciatis praesentium dolore rerum ipsum molestias atque blanditiis iure labore.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae numquam exercitationem optio aperiam accusamus, debitis at, sint illo accusantium possimus quo maiores! Aperiam pariatur, eligendi in tempore autem fugit perspiciatis praesentium dolore rerum ipsum molestias atque blanditiis iure labore.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae numquam exercitationem optio aperiam accusamus, debitis at, sint illo accusantium possimus quo maiores! Aperiam pariatur, eligendi in tempore autem fugit perspiciatis praesentium dolore rerum ipsum molestias atque blanditiis iure labore.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae numquam exercitationem optio aperiam accusamus, debitis at, sint illo accusantium possimus quo maiores! Aperiam pariatur, eligendi in tempore autem fugit perspiciatis praesentium dolore rerum ipsum molestias atque blanditiis iure labore.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae numquam exercitationem optio aperiam accusamus, debitis at, sint illo accusantium possimus quo maiores! Aperiam pariatur, eligendi in tempore autem fugit perspiciatis praesentium dolore rerum ipsum molestias atque blanditiis iure labore.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae numquam exercitationem optio aperiam accusamus, debitis at, sint illo accusantium possimus quo maiores! Aperiam pariatur, eligendi in tempore autem fugit perspiciatis praesentium dolore rerum ipsum molestias atque blanditiis iure labore.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quae numquam exercitationem optio aperiam accusamus, debitis at, sint illo accusantium possimus quo maiores! Aperiam pariatur, eligendi in tempore autem fugit perspiciatis praesentium dolore rerum ipsum molestias atque blanditiis iure labore.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include './partials/footer.php';
|
||||||
|
?>
|
||||||
11
services.php
Normal file
11
services.php
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<?php
|
||||||
|
include 'partials/header.php'
|
||||||
|
?>
|
||||||
|
|
||||||
|
<section class="empty__page">
|
||||||
|
<h1>Services Page</h1>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
include './partials/footer.php';
|
||||||
|
?>
|
||||||
38
signin.php
Normal file
38
signin.php
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>UNDEREMPLOYED</title>
|
||||||
|
<!-- CUSTOM STYLESHEET -->
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
<!-- ICONSCOUT CDN -->
|
||||||
|
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
|
||||||
|
<!-- GOOGLE FONT(MONTSERATE) -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,800;1,700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="form__section">
|
||||||
|
|
||||||
|
<div class="container form__section-container">
|
||||||
|
<h2>Sign In</h2>
|
||||||
|
<div class="alert__message success">
|
||||||
|
<p>This is an success message</p>
|
||||||
|
</div>
|
||||||
|
<form action="">
|
||||||
|
<input type="text" placeholder="Username or Email">
|
||||||
|
<input type="password" placeholder=" Password">
|
||||||
|
|
||||||
|
<button type="submit" class="btn">Sign in</button>
|
||||||
|
<small>Don't have an account? <a href="signup.php">Sign up</a></small>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
45
signup.php
Normal file
45
signup.php
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>UNDEREMPLOYED</title>
|
||||||
|
<!-- CUSTOM STYLESHEET -->
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
<!-- ICONSCOUT CDN -->
|
||||||
|
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
|
||||||
|
<!-- GOOGLE FONT(MONTSERATE) -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,800;1,700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="form__section">
|
||||||
|
|
||||||
|
<div class="container form__section-container">
|
||||||
|
<h2>Sign Up</h2>
|
||||||
|
<div class="alert__message error">
|
||||||
|
<p>This is an error message</p>
|
||||||
|
</div>
|
||||||
|
<form action="" enctype="multipart/form-data">
|
||||||
|
<input type="text" placeholder="First Name">
|
||||||
|
<input type="text" placeholder="Last Name">
|
||||||
|
<input type="text" placeholder="Username">
|
||||||
|
<input type="email" placeholder="Email">
|
||||||
|
<input type="password" placeholder="Create Password">
|
||||||
|
<input type="password" placeholder="Confirm Password">
|
||||||
|
<div class="form__control">
|
||||||
|
<label for="avatar">User Avatar</label>
|
||||||
|
<input type="file" id="avatar">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn">Sign Up</button>
|
||||||
|
<small>Already have an Account? <a href="signin.php">Sign in</a></small>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue