diff --git a/about.php b/about.php new file mode 100644 index 0000000..bf26c13 --- /dev/null +++ b/about.php @@ -0,0 +1,12 @@ + + + +
+

About Page

+
+ + \ No newline at end of file diff --git a/admin/add-category.php b/admin/add-category.php new file mode 100644 index 0000000..868d694 --- /dev/null +++ b/admin/add-category.php @@ -0,0 +1,27 @@ + + +
+ +
+

Add Category

+
+

This is an error message

+
+
+ + + + +
+
+ + + + +
+ + diff --git a/admin/add-post.php b/admin/add-post.php new file mode 100644 index 0000000..7940d09 --- /dev/null +++ b/admin/add-post.php @@ -0,0 +1,41 @@ + + + + +
+
+

Add Post

+
+

This is an error message

+
+
+ + +
+ + +
+ + +
+ + +
+ +
+
+
+ + \ No newline at end of file diff --git a/admin/add-user.php b/admin/add-user.php new file mode 100644 index 0000000..8857b43 --- /dev/null +++ b/admin/add-user.php @@ -0,0 +1,40 @@ + + + +
+
+

Add User

+
+

This is an error message

+
+
+ + + + + + + +
+ + +
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/admin/config/constants.php b/admin/config/constants.php new file mode 100644 index 0000000..81219fc --- /dev/null +++ b/admin/config/constants.php @@ -0,0 +1,2 @@ + + + +
+ +
+

Edit Category

+
+ + + + +
+
+ + + + +
+ + \ No newline at end of file diff --git a/admin/edit-post.php b/admin/edit-post.php new file mode 100644 index 0000000..dfcd196 --- /dev/null +++ b/admin/edit-post.php @@ -0,0 +1,37 @@ + + +
+
+

Edit Post

+ +
+ + +
+ + +
+ + +
+ + +
+ +
+
+
+ +s \ No newline at end of file diff --git a/admin/edit-user.php b/admin/edit-user.php new file mode 100644 index 0000000..d94dc08 --- /dev/null +++ b/admin/edit-user.php @@ -0,0 +1,28 @@ + + +
+
+

Edit User

+ +
+ + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/admin/index.php b/admin/index.php new file mode 100644 index 0000000..afbc8ac --- /dev/null +++ b/admin/index.php @@ -0,0 +1,97 @@ + + + +
+
+ + + + + +
+

Manage Posts

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TitleEditDelete
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, minus.EditDelete
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, corrupti!EditDelete
Lorem ipsum dolor sit amet elit. Distinctio, quibusdam!EditDelete
Lorem ipsum dolor sit amet consectetur, adipisicing elit.EditDelete
+
+
+
+ + + + + \ No newline at end of file diff --git a/admin/manage-categories.php b/admin/manage-categories.php new file mode 100644 index 0000000..410f617 --- /dev/null +++ b/admin/manage-categories.php @@ -0,0 +1,92 @@ + + + +
+
+ + + + + +
+

Manage Categories

+ + + + + + + + + + + + + + + + + + + + + + + + + +
TitleEditDelete
TravelEditDelete
MusicEditDelete
Wild LifeEditDelete
+
+
+
+ + + + + \ No newline at end of file diff --git a/admin/manage-users.php b/admin/manage-users.php new file mode 100644 index 0000000..e0105d2 --- /dev/null +++ b/admin/manage-users.php @@ -0,0 +1,100 @@ + + + +
+
+ + + + + +
+

Manage Users

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameUsernameEditDeleteAdmin
Named GuyNamed EditDeleteYes
Vinland Saga Saga EditDeleteNo
Pikachu GuyGuy EditDeleteYes
+
+
+
+ + + \ No newline at end of file diff --git a/admin/partials/header.php b/admin/partials/header.php new file mode 100644 index 0000000..e21ee8c --- /dev/null +++ b/admin/partials/header.php @@ -0,0 +1,48 @@ + + + + + + + + + php & mysql blog app with admin panel + + + + + + + + + + + + diff --git a/applications.html b/applications.html deleted file mode 100644 index b1c605a..0000000 --- a/applications.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - Bitnami: Open Source. Simplified - - - - -
- -
-
-
-
-
-

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 Bitnami XAMPP page for details on the currently available apps.


-

Check out our Bitnami for XAMPP Start Guide for more information about the applications installed.

-
-
-
-
-
- -
-
-
- - - diff --git a/bitnami.css b/bitnami.css deleted file mode 100644 index fd441c8..0000000 --- a/bitnami.css +++ /dev/null @@ -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; -} - - diff --git a/blog.php b/blog.php new file mode 100644 index 0000000..f2ea865 --- /dev/null +++ b/blog.php @@ -0,0 +1,325 @@ + +
+
+
+ + + +
+ +
+ + +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+
+ Wild Life + Music + Movies + Travel + Science & Technology + Food +
+
+ + + + diff --git a/category-posts.php b/category-posts.php new file mode 100644 index 0000000..4155a5c --- /dev/null +++ b/category-posts.php @@ -0,0 +1,315 @@ + +
+

Category Title

+
+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+
+ Wild Life + Music + Movies + Travel + Science & Technology + Food +
+
+ + + + \ No newline at end of file diff --git a/config/constants.php b/config/constants.php new file mode 100644 index 0000000..81219fc --- /dev/null +++ b/config/constants.php @@ -0,0 +1,2 @@ + +
+

Contact Page

+
+ + \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..3aef6ff --- /dev/null +++ b/css/style.css @@ -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; + } + + +} diff --git a/favicon.ico b/favicon.ico deleted file mode 100644 index ca0acbb..0000000 Binary files a/favicon.ico and /dev/null differ diff --git a/index.php b/index.php index 3d4cb47..30ec777 100644 --- a/index.php +++ b/index.php @@ -1,11 +1,331 @@ - -Something is wrong with the XAMPP installation :-( + +
+
+
+ +
+
+ Wild Life +

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid!

+

+ 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. +

+
+ +
+
+
By: Underemployed
+ June 10, 2022 - 07:23 +
+
+
+
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+
+ Wild Life + Music + Movies + Travel + Science & Technology + Food +
+
+ + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..6262c61 --- /dev/null +++ b/js/main.js @@ -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); \ No newline at end of file diff --git a/partials/footer.php b/partials/footer.php new file mode 100644 index 0000000..16130cd --- /dev/null +++ b/partials/footer.php @@ -0,0 +1,69 @@ + + + + + + + + + + diff --git a/partials/header.php b/partials/header.php new file mode 100644 index 0000000..8504fce --- /dev/null +++ b/partials/header.php @@ -0,0 +1,48 @@ + + + + + + + + + php & mysql blog app with admin panel + + + + + + + + + + + + diff --git a/post.php b/post.php new file mode 100644 index 0000000..dc3aed4 --- /dev/null +++ b/post.php @@ -0,0 +1,48 @@ + + + + +
+
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, dolore.

+
+
+ +
+
+
By: Jone titus
+ June 12,2022 - 20:23 +
+
+
+ +
+

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.

+

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.

+

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.

+

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.

+

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.

+

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.

+

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.

+

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.

+

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.

+

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.

+ + +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/services.php b/services.php new file mode 100644 index 0000000..94c9f48 --- /dev/null +++ b/services.php @@ -0,0 +1,11 @@ + + +
+

Services Page

+
+ + \ No newline at end of file diff --git a/signin.php b/signin.php new file mode 100644 index 0000000..801787d --- /dev/null +++ b/signin.php @@ -0,0 +1,38 @@ + + + + + + + UNDEREMPLOYED + + + + + + + + + + +
+ +
+

Sign In

+
+

This is an success message

+
+
+ + + + + Don't have an account? Sign up +
+
+ +
+ + + + \ No newline at end of file diff --git a/signup.php b/signup.php new file mode 100644 index 0000000..5d43618 --- /dev/null +++ b/signup.php @@ -0,0 +1,45 @@ + + + + + + + UNDEREMPLOYED + + + + + + + + + + +
+ +
+

Sign Up

+
+

This is an error message

+
+
+ + + + + + +
+ + +
+ + Already have an Account? Sign in +
+
+ +
+ + + + \ No newline at end of file